0.9.0 Breaking Changes - SAP/fundamental-ngx GitHub Wiki

Below is the list of all breaking changes paired to the 0.9.0 release. They are listed in no particular order and accompanied by a short explanation on why the change was necessary. Before and after examples are also provided for most of the changes.

• Calendar now uses a custom FdDate model instead of the native JS date object in single mode.

   <fd-calendar [calType]="'single'"
                [(ngModel)]="date"
                [blockFunction]="myBlockFunction"
                [disableFunction]="myDisableFunction">
   </fd-calendar>

  /** Before */
   myBlockFunction = function(d: Date): boolean;
   myDisableFunction = function(d: Date): boolean;
   date = { date: new Date() };
  
  /** After */
   myDisableFunction = function(d: FdDate): boolean
   myBlockFunction = function(d: FdDate): boolean
   date: FdDate = FdDate.getToday();

• Calendar now uses FdDateRange model instead of the native JS date object in range mode.

   <fd-calendar [calType]="'range'" 
                [(ngModel)]="dates">
   </fd-calendar>

  /** Before */
   dates = {
       date: new Date(2019, 9, 11),
       rangeEnd: new Date(2019, 10, 11)
   };
  
  /** After */
   dates: FdRangeDate = {
       start: new FdDate(2019, 9, 11),
       end: new FdDate(2019, 9, 11)
   };

• Datepicker now uses the FdDate model instead of the native JS date object in single mode.

   <fd-date-picker [calType]="'single'"
                [(ngModel)]="date"
                [blockFunction]="myBlockFunction"
                [disableFunction]="myDisableFunction">
   </fd-date-picker>

  /** Before */
   myBlockFunction = function(d: Date): boolean;
  
   myDisableFunction = function(d: Date): boolean;
  
   date = { date: new Date() };
  
  /** After */
   myDisableFunction = function(d: FdDate): boolean;
  
   myBlockFunction = function(d: FdDate): boolean;
  
   date: FdDate = FdDate.getToday();

• Datepicker now uses FdDateRange model instead of the native JS date object in range mode.

   <fd-date-picker [calType]="'range'" 
                [(ngModel)]="dates">
   </fd-date-picker>

  /** Before */
   dates = {
       date: new Date(2019, 9, 11),
       rangeEnd: new Date(2019, 10, 11)
   };
  
  /** After */
   dates: FdRangeDate = {
       start: new FdDate(2019, 10, 11),
       end: new FdDate(2019, 10, 19)
   };

• Datetime picker now uses the FdDateTime model instead of the JS date object.

   <fd-datetime-picker [(ngModel)]="date"
                [blockFunction]="myBlockFunction"
                [disableFunction]="myDisableFunction">
   </fd-date-picker>

  /** Before */
   myBlockFunction = function(d: Date): boolean;
  
   myDisableFunction = function(d: Date): boolean;
  
   date: Date = new Date();
  
  /** After */
   myDisableFunction = function(d: FdDate): boolean;
  
   myBlockFunction = function(d: FdDate): boolean;
  
   date: FdDatetime = FdDatetime.getToday();

• fillControl input is now fillControlMode and is now a string.

  Done to expand the functionality to encompass unforeseen use cases. There are different options to use this input. at-least will apply a minimum width to the body of the popover equivalent to the width of the control. equal will apply a width to the body equivalent to the width of the control. Leave blank for no effect.

  <!-- BEFORE -->
  <fd-popover [fillControl]="true">...</fd-popover>
  
  <!-- NOW -->
  <fd-popover [fillControlMode]="'equal'">...</fd-popover>
  <fd-popover [fillControlMode]="'at-least'">...</fd-popover>