0.31.0 Breaking Changes

Approval Flow Phase 3 PR #5302

• 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

QuickView (core) PR #5493

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

Core library with subpackages PR #5453

• 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

Avatar Group (core) PRs #5074, #5628

• 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)">