0.31.0 Breaking Changes - SAP/fundamental-ngx GitHub Wiki

• From now setting a due date in the node adding/editing dialog possible only if set [checkDueDate]="true" for the Approval Flow component.

Before

Now

• Added QuickViewGroupItemContentElementDirective (fd-quick-view-group-item-content-element) needed for bind the corresponding label to the element (email, phone, link, etc.)

• Libraries are built with nx instead of ng;
• All main core modules are now built as separate sub-packages;
• Deep imports support:

Before:

import {DialogModule, DialogService} from '@fundamental-ngx/core';

After:

import {DialogModule, DialogService} from '@fundamental-ngx/core/dialog';

• Structure of fundamental-ngx/core was refactored to allow splitting it into separate sub-packages;
• CarouselModule now in the Carousel namespace instead of utils;
• AlertService, DialogService, NotificationService, MessageToastService, ThemesService are removed from providers array in FundamentalNgxCoreModule;
• ThemesService Needs to be explicitly included in the providers list of the Application's module.
• Core documentation has been updated with the appropriate import paths;
• TSPath has been updated to reflect all separate submodules paths;
• root tsconfig.json has been renamed to tsconfig.base.json;
• tests folder from utils has been moved to a separate sub-package;
• each library contains own tsconfig.json file with strict mode disabled, and can be enabled on per-package basis;
• *.spec.ts files are excluded from dependency graph calculation for nx;
• Now it is possible to launch module-specific unit tests by using nx test core-[module-name] command

• Added for noPadding, noHorizontalScroll and noVerticalScroll inputs for AvatarGroupOverflowBodyDirective (fd-avatar-group-overflow-body).

Before

<div fd-avatar-group-overflow-body> Content here </div>

After

<div fd-avatar-group-overflow-body [noPadding]="true" [noHorizontalScroll]="true" [noVerticalScroll]="false"> Content here </div>

• Added AvatarGroupFocusableAvatarDirective (fd-avatar-group-focusable-avatar) needed to bind styles for focusable Avatars.

Before

<fd-avatar [circle]="true" size="s" label="John Doe" tabindex="0"></fd-avatar>

After

<fd-avatar fd-avatar-group-focusable-avatar [circle]="true" size="s" label="John Doe"></fd-avatar>

• Expose Avatar's title and role="img" as part of Avatar Group.

Before

<fd-avatar label="John Doe" [circle]="true" [border]="true" size="s"></fd-avatar>

After

<fd-avatar label="John Doe" title="John Doe" role="img" [circle]="true" [border]="true" size="s"></fd-avatar>

• Changes in markup and getting rid of examples styles.
• Added AvatarGroupPopoverControlDirective (fd-avatar-group-popover-control) needed to bind the corresponding CSS class and attributes to group type overflow popover control.

Before

<fd-popover-control tabindex="0"
                    (click)="handleControlClick($event, overflowPopover)"
                    (keydown)="handleControlKeydown($event, overflowPopover)">

After

<fd-popover-control fd-avatar-group-popover-control
                    [attr.aria-label]="'Has popup type dialog Conjoined avatars, 12 avatars displayed, 8 avatars hidden, activate for complete list'"
                    (click)="handleControlClick($event, overflowPopover)"
                    (keydown)="handleControlKeydown($event, overflowPopover)">

Before:

• You create instance of FdDate class and pass invalid date -> You are getting throwing error.

After:

• You create instance of FdDate class and pass invalid date -> You are getting an invalid date instance.

Before:

• Previously, this was not possible, since when creating an instance with an invalid date, we got an error.
  

After:

• Similar behavior to the native Date class of js has been implemented. If we try to get the date string format from invalid instance of FdDate, we get the string "Invalid Date".
• Attempting to invoke any method that must return a numeric format(getYear(), getSeconds(), ...etc) returns NaN

Before:

• You type in input invalid date format -> You are getting date instance with current date.
  

After:

• You type in input invalid date format -> You are getting an invalid date instance.
  

Before:

• You type in input invalid date format -> You are getting `null`
  

After:

• You type in input invalid date format -> You are getting an invalid date instance.