@design-factory/design-factory 20.0.0-next.0 → 20.0.0-next.2

package/index.d.ts

@@ -1,11 +1,10 @@
 import * as i0 from '@angular/core';
-import { AfterViewInit, ElementRef, Renderer2, OnInit, OnDestroy, DoCheck, RendererFactory2, ComponentRef, EmbeddedViewRef, TemplateRef, Type, ComponentFactoryResolver, ApplicationRef, Injector, OnChanges, EventEmitter, ChangeDetectorRef, NgZone, SimpleChanges, AfterViewChecked, AfterContentInit, InjectionToken } from '@angular/core';
+import { AfterViewInit, ElementRef, Renderer2, OnInit, OnDestroy, AfterViewChecked, DoCheck, ComponentRef, EmbeddedViewRef, TemplateRef, Type, OnChanges, EventEmitter, ChangeDetectorRef, NgZone, SimpleChanges, AfterContentInit, InjectionToken } from '@angular/core';
 import * as i2 from '@ng-bootstrap/ng-bootstrap';
-import { NgbDate, NgbDropdown, NgbDatepicker, NgbCalendar, NgbDateParserFormatter, NgbModal, NgbModalOptions, NgbModalRef, NgbPopoverConfig, NgbConfig } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDate, NgbDropdown, NgbDatepicker, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
 import { Observable } from 'rxjs';
 import { ControlValueAccessor } from '@angular/forms';
 import * as i4 from '@ng-select/ng-select';
-import { NgSelectComponent } from '@ng-select/ng-select';
 
 declare class SkipLinkDirective {
     readonly inFocus: i0.WritableSignal<boolean>;
@@ -61,7 +60,7 @@ declare class DfAlertModule {
 /**
  * My dfDatepickerRange directive
  */
-declare class DfDatepickerRangeDirective implements OnInit, OnDestroy, DoCheck, AfterViewInit {
+declare class DfDatepickerRangeDirective implements OnInit, OnDestroy, AfterViewChecked, AfterViewInit {
     private inputsElements;
     private isDisabled;
     private readonly siblingsNode;
@@ -81,7 +80,7 @@ declare class DfDatepickerRangeDirective implements OnInit, OnDestroy, DoCheck,
      * if the direction (rtl / ltr) is changing dynamically
      */
     updateDirection(): void;
-    ngDoCheck(): void;
+    ngAfterViewChecked(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfDatepickerRangeDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DfDatepickerRangeDirective, "[dfDatepickerRange]", ["dfDatepickerRange"], {}, {}, never, never, true, never>;
@@ -89,7 +88,6 @@ declare class DfDatepickerRangeDirective implements OnInit, OnDestroy, DoCheck,
 
 declare class DfTriggerClickDirective {
     private readonly elementRef;
-    constructor(elementRef: ElementRef);
     triggerClick(event: KeyboardEvent | MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfTriggerClickDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DfTriggerClickDirective, "[dfTriggerClick]", never, {}, {}, never, never, true, never>;
@@ -136,8 +134,6 @@ declare class DfDatePickerModule {
 }
 
 declare class DfDatepickerRangeService {
-    private readonly calendar;
-    private readonly formatter;
     fromDate: NgbDate | null;
     toDate: NgbDate | null;
     hoveredDate: NgbDate | null;
@@ -148,7 +144,8 @@ declare class DfDatepickerRangeService {
     dropDown?: NgbDropdown;
     isClosingOnToDate: boolean;
     datepicker: NgbDatepicker | null;
-    constructor(calendar: NgbCalendar, formatter: NgbDateParserFormatter);
+    private readonly calendar;
+    private readonly formatter;
     onDateSelection(date: NgbDate): void;
     setFocus(): void;
     returnFocus(): void;
@@ -213,20 +210,6 @@ declare class DfIconModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<DfIconModule>;
 }
 
-/**
- * @deprecated `DfModalService` is deprecated, use `NgbModal` from ng-bootstrap instead.
- * Please note that `NgbModal` adds 'modal-open' class to the body while DfModalService adds 'df-modal-open' class. Both classes include the same styles, but you may need to update your stylesheets if you were overriding 'df-modal-open' in your application.
- */
-declare class DfModalService {
-    private modalService;
-    private rendererFactory;
-    private renderer;
-    constructor(modalService: NgbModal, rendererFactory: RendererFactory2);
-    open(content: any, options?: NgbModalOptions): NgbModalRef;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DfModalService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<DfModalService>;
-}
-
 declare class DfPopoverModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DfPopoverModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<DfPopoverModule, never, never, [typeof i2.NgbPopoverModule]>;
@@ -392,60 +375,8 @@ declare class DfProgressIndicatorRef {
     constructor(containerRef: ComponentRef<DfProgressIndicatorContainerComponent>, contentRef: ComponentRef<unknown> | EmbeddedViewRef<unknown>, backdropRef?: ComponentRef<DfProgressIndicatorBackdropComponent> | undefined);
 }
 
-/** Type for the callback used to revert the scrollbar compensation. */
-type CompensationReverter = () => void;
-/**
- * Utility to handle the scrollbar.
- *
- * It allows to compensate the lack of a vertical scrollbar by adding an
- * equivalent padding on the right of the body, and to remove this compensation.
- *
- * It is a copy of https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/util/scrollbar.ts
- */
-declare class ScrollBar {
-    private readonly _document;
-    constructor(_document: any);
-    /**
-     * To be called right before a potential vertical scrollbar would be removed:
-     *
-     * - if there was a scrollbar, adds some compensation padding to the body
-     * to keep the same layout as when the scrollbar is there
-     * - if there was none, there is nothing to do
-     *
-     * @return a callback used to revert the compensation (noop if there was none,
-     * otherwise a function removing the padding)
-     */
-    compensate(): CompensationReverter;
-    /**
-     * Adds a padding of the given width on the right of the body.
-     *
-     * @return a callback used to revert the padding to its previous value
-     */
-    private _adjustBody;
-    /**
-     * Tells whether a scrollbar is currently present on the body.
-     *
-     * @return true if scrollbar is present, false otherwise
-     */
-    private _isPresent;
-    /**
-     * Calculates and returns the width of a scrollbar.
-     *
-     * @return the width of a scrollbar on this page
-     */
-    private _getWidth;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ScrollBar, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<ScrollBar>;
-}
-
 type DfProgressIndicatorContent<T> = undefined | TemplateRef<T> | Type<T> | DfProgressIndicatorContentSpinner | DfProgressIndicatorContentProgressBar;
 declare class DfProgressIndicatorService {
-    private readonly document;
-    private readonly rendererFactory;
-    private readonly componentFactoryResolver;
-    private readonly appRef;
-    private readonly injector;
-    private readonly scrollbar;
     private readonly renderer;
     private readonly BODY_CLASS;
     private readonly containerAttributes;
@@ -453,7 +384,10 @@ declare class DfProgressIndicatorService {
     private readonly defaultSpinnerAttributes;
     private readonly defaultProgressBarAttributes;
     private readonly activeInstances;
-    constructor(document: Document, rendererFactory: RendererFactory2, componentFactoryResolver: ComponentFactoryResolver, appRef: ApplicationRef, injector: Injector, scrollbar: ScrollBar);
+    private readonly document;
+    private readonly appRef;
+    private readonly environmentInjector;
+    private readonly scrollbar;
     open<T>(content: DfProgressIndicatorContent<T>, options?: DfProgressIndicatorOptions): DfProgressIndicatorRef;
     close(progressIndicatorRef: DfProgressIndicatorRef): void;
     /**
@@ -588,7 +522,7 @@ declare class Options {
        in the stepsArray option. */
     getLegend?: GetLegendFunction;
     /** Use to display a custom legend of a stepItem from stepsArray.
-     It will be the same as getLegend but for stepsArray. */
+      It will be the same as getLegend but for stepsArray. */
     getStepLegend?: GetStepLegendFunction;
     /** If you want to display a slider with non linear/number steps.
        Just pass an array with each slider value and that's it; the floor, ceil and step settings
@@ -844,7 +778,7 @@ declare class SliderComponent implements OnInit, AfterViewInit, OnChanges, OnDes
     registerOnTouched(onTouchedCallback: any): void;
     setDisabledState(isDisabled: boolean): void;
     setAriaLabel(ariaLabel: string): void;
-    onResize(event: any): void;
+    onResize(): void;
     private subscribeInputModelChangeSubject;
     private subscribeOutputModelChangeSubject;
     private subscribeResizeObserver;
@@ -1058,23 +992,6 @@ declare class DfSliderModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<DfSliderModule>;
 }
 
-/**
- * A configuration service for the [DfSideNavService](#/components/sidenav/api#DfSideNavComponent) component.
- *
- * You can inject this service, typically in your root component, and customize its properties
- * to provide default values for your sidenav used in the application.
- */
-declare class DfSideNavConfig {
-    isMinmized: boolean;
-    isCollapsed: boolean;
-    isPresent: boolean;
-    isInMenuOverlay: boolean;
-    isAppOverlay: boolean;
-    isAppOverlayMode: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DfSideNavConfig, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<DfSideNavConfig>;
-}
-
 interface DfSideNavItem {
     value: string;
     title?: string;
@@ -1104,8 +1021,8 @@ declare enum DfNavItemType {
  * Creating a sidenav is straightforward: use [DfSideNavComponent](#/components/sidenav/api#DfSideNavComponent) component
  */
 declare class DfSideNavService implements OnDestroy {
-    private readonly config;
     type: typeof DfNavItemType;
+    private readonly config;
     private readonly _sideNavItems$;
     private readonly _isMinmized$;
     private readonly _isCollapsed$;
@@ -1116,7 +1033,7 @@ declare class DfSideNavService implements OnDestroy {
     private _isAppOverlayMode;
     private _items;
     private readonly subscription;
-    constructor(config: DfSideNavConfig);
+    constructor();
     ngOnDestroy(): void;
     /**
      * Use this to init the list of Elements from your sidenav
@@ -1253,20 +1170,17 @@ declare class DfSideNavService implements OnDestroy {
 }
 
 declare class DfSideNavHeaderDirective {
-    templateRef: TemplateRef<any>;
-    constructor(templateRef: TemplateRef<any>);
+    readonly templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfSideNavHeaderDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DfSideNavHeaderDirective, "ng-template[dfSideNavHeader]", never, {}, {}, never, never, true, never>;
 }
 declare class DfSideNavIconDirective {
-    templateRef: TemplateRef<any>;
-    constructor(templateRef: TemplateRef<any>);
+    readonly templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfSideNavIconDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DfSideNavIconDirective, "ng-template[dfSideNavIcon]", never, {}, {}, never, never, true, never>;
 }
 declare class DfSideNavItemDirective {
-    templateRef: TemplateRef<any>;
-    constructor(templateRef: TemplateRef<any>);
+    readonly templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfSideNavItemDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DfSideNavItemDirective, "ng-template[dfSideNavItem]", never, {}, {}, never, never, true, never>;
 }
@@ -1296,54 +1210,24 @@ declare class DfSideNavComponent implements OnDestroy {
 declare class DfManageSideNavDirective implements AfterViewChecked {
     private readonly element;
     private readonly renderer;
-    constructor(element: ElementRef, renderer: Renderer2);
     ngAfterViewChecked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfManageSideNavDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DfManageSideNavDirective, "[dfManageSideNav]", never, {}, {}, never, never, true, never>;
 }
 
-/**
- * The directive to catch focusin event and put the focus at a defined position in the page
- *
- * @deprecated 19.1.0 use {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert inert} instead
- * @since 9.1.0
- */
-declare class DfExcludeTrapDirective implements OnDestroy, OnInit {
-    private subscription;
-    private subscriptionInput?;
-    /**
-     * The CSS selector used to get the element to put the focus when catched
-     *
-     */
-    readonly dfExcludeTrapSelector: i0.InputSignal<string>;
-    /**
-     * The Observable to enable or disable the ExcludeTrap
-     * If `True` the excludeTrap will work
-     */
-    readonly dfExcludeTrap: i0.InputSignal<Observable<boolean>>;
-    private readonly zone;
-    private readonly element;
-    init(): void;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DfExcludeTrapDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DfExcludeTrapDirective, "[dfExcludeTrap]", never, { "dfExcludeTrapSelector": { "alias": "dfExcludeTrapSelector"; "required": false; "isSignal": true; }; "dfExcludeTrap": { "alias": "dfExcludeTrap"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
 declare class DfManageNavSelectDirective implements OnInit {
+    private direction;
     private readonly select;
     private readonly element;
     private readonly rtlDirectionService;
     private readonly renderer;
-    private direction;
-    constructor(select: NgSelectComponent, element: ElementRef, rtlDirectionService: DfDirectionDetectionService, renderer: Renderer2);
     ngOnInit(): void;
     handleKeyDown(event: any): void;
-    handleKeyDownBackspace(event: any): void;
+    handleKeyDownBackspace(): void;
     handleKeyDownRight(event: any): void;
     arrowRightInnerHandler(event: any): void;
     arrowLeftInnerHandler(event: any): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DfManageNavSelectDirective, [{ host: true; }, null, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DfManageNavSelectDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DfManageNavSelectDirective, "[dfManageNavSelect]", never, {}, {}, never, never, true, never>;
 }
 
@@ -1589,7 +1473,7 @@ declare class DfTooltipTruncateDirective implements OnInit, DoCheck {
      * The direction considered when detecting overflow, can be 'x', 'y' or ''.
      * @defaultValue ''
      */
-    readonly dfTooltipTruncate: i0.InputSignal<"" | "x" | "y">;
+    readonly dfTooltipTruncate: i0.InputSignal<"" | "y" | "x">;
     ngOnInit(): void;
     ngDoCheck(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfTooltipTruncateDirective, never>;
@@ -1647,22 +1531,6 @@ declare class DfSideNavCollapseDirective implements OnInit {
     static ɵdir: i0.ɵɵDirectiveDeclaration<DfSideNavCollapseDirective, "[dfSideNavCollapse]", ["dfSideNavCollapse"], { "dfSideNavCollapse": { "alias": "dfSideNavCollapse"; "required": true; "isSignal": true; }; "minimized": { "alias": "minimized"; "required": false; "isSignal": true; }; }, { "dfSideNavCollapseChange": "dfSideNavCollapseChange"; "shown": "shown"; "hidden": "hidden"; }, never, never, true, never>;
 }
 
-/**
- * A configuration service for the [DfSideNavCollapseDirective](#/components/sidenav/api#DfSideNavCollapseDirective) component.
- *
- * You can inject this service, typically in your root component, and customize its properties
- * to provide default values for the sideNav used in the application.
- */
-declare class DfSideNavCollapseConfig {
-    private readonly _ngbConfig;
-    private _animation?;
-    constructor(_ngbConfig: NgbConfig);
-    get animation(): boolean;
-    set animation(animation: boolean);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DfSideNavCollapseConfig, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<DfSideNavCollapseConfig>;
-}
-
 declare class DfSideNavCollapseModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DfSideNavCollapseModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<DfSideNavCollapseModule, never, [typeof DfSideNavCollapseDirective], [typeof DfSideNavCollapseDirective]>;
@@ -1671,10 +1539,27 @@ declare class DfSideNavCollapseModule {
 
 declare class DfSideNavModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DfSideNavModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DfSideNavModule, never, [typeof DfManageSideNavDirective, typeof DfSideNavComponent, typeof DfSideNavHeaderDirective, typeof DfExcludeTrapDirective, typeof DfSideNavIconDirective, typeof DfSideNavItemDirective], [typeof DfManageSideNavDirective, typeof DfSideNavComponent, typeof DfSideNavHeaderDirective, typeof DfExcludeTrapDirective, typeof DfSideNavIconDirective, typeof DfSideNavItemDirective, typeof DfSideNavCollapseModule, typeof DfMediaModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DfSideNavModule, never, [typeof DfManageSideNavDirective, typeof DfSideNavComponent, typeof DfSideNavHeaderDirective, typeof DfSideNavIconDirective, typeof DfSideNavItemDirective], [typeof DfManageSideNavDirective, typeof DfSideNavComponent, typeof DfSideNavHeaderDirective, typeof DfSideNavIconDirective, typeof DfSideNavItemDirective, typeof DfSideNavCollapseModule, typeof DfMediaModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DfSideNavModule>;
 }
 
+/**
+ * A configuration service for the [DfSideNavService](#/components/sidenav/api#DfSideNavComponent) component.
+ *
+ * You can inject this service, typically in your root component, and customize its properties
+ * to provide default values for your sidenav used in the application.
+ */
+declare class DfSideNavConfig {
+    isMinmized: boolean;
+    isCollapsed: boolean;
+    isPresent: boolean;
+    isInMenuOverlay: boolean;
+    isAppOverlay: boolean;
+    isAppOverlayMode: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DfSideNavConfig, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DfSideNavConfig>;
+}
+
 /**
  * A service for managing the sidenav panel animation.
  * This service is included at root level
@@ -1682,9 +1567,7 @@ declare class DfSideNavModule {
  * Creating a sidenav is straightforward: use [DfSideNavComponent](#/components/sidenav/api#DfSideNavComponent) component
  */
 declare class DfSideNavCollapseService {
-    private readonly _config;
     private readonly _sideNavAnimation$;
-    constructor(_config: DfSideNavCollapseConfig);
     get sideNavAnimation$(): Observable<boolean>;
     /**
      * Use this to activate or desactivate the animation for the sideNav
@@ -1716,15 +1599,13 @@ declare const BREAKPOINTS_VARS: InjectionToken<{
     xxxl: string;
 }>;
 declare class DfBreakpoints {
+    private readonly _breakPoints$;
     private readonly _breakPointsVar;
     private readonly platformID;
-    private readonly _breakPoints$;
-    constructor(_breakPointsVar: {
-        [breakpoint: string]: string;
-    }, platformID: Object);
-    get breakPoints$(): Observable<{} | null>;
+    constructor();
+    get breakPoints$(): Observable<Record<string, string> | null>;
     private initBreakpoints;
-    generate(sizes: any[][]): {};
+    generate(sizes: any[][]): Record<string, string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfBreakpoints, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DfBreakpoints>;
 }
@@ -1736,17 +1617,15 @@ interface MediaBreakpointsState {
 }
 declare class DfMediaQuery {
     private readonly _isBrowser;
-    constructor(platformId: Object);
     notSupported(query: string): Partial<MediaQueryList>;
     matchMedia(query: string): MediaQueryList;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfMediaQuery, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DfMediaQuery>;
 }
 declare class DfMediaObserver implements OnDestroy {
-    private readonly _mediaQuery;
     private readonly _subscription;
     private readonly _queries;
-    constructor(_mediaQuery: DfMediaQuery);
+    private readonly _mediaQuery;
     /**
      * Verifies if at least one of the provided media-queries is matching
      * the current viewport
@@ -1773,7 +1652,6 @@ declare class DfMediaObserver implements OnDestroy {
 declare class DfMedia {
     private readonly mediaObserver;
     private readonly _breakPointsService;
-    constructor(mediaObserver: DfMediaObserver, _breakPointsService: DfBreakpoints);
     initQueries(mediaOrBreakpoints: string | string[], breakPoints?: {
         [key: string]: string;
     }): string[];
@@ -1844,7 +1722,7 @@ declare class DfWavesOfProgressDirective {
      *  },
      *  ...]
      */
-    readonly dfWavesOfProgress: i0.InputSignal<"arrowRight" | "circleDiagonal" | "circleUp" | "arrowUp">;
+    readonly dfWavesOfProgress: i0.InputSignal<"circleDiagonal" | "circleUp" | "arrowRight" | "arrowUp">;
     private readonly http;
     elementRef: ElementRef<any>;
     private readonly platformId;
@@ -1881,5 +1759,5 @@ declare class DfAmadeusLogoComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<DfAmadeusLogoComponent, "df-amadeus-logo", never, { "svgClass": { "alias": "svgClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { BREAKPOINTS_VARS, ChangeContext, DF_BREAKPOINTS_VAR_DEFAULT, DfAccessibilityModule, DfAdvancedCardModule, DfAdvancedInputModule, DfAlertModule, DfAmadeusIconComponent, DfAmadeusLogoComponent, DfBreakpoints, DfDatePickerModule, DfDatepickerRangeDirective, DfDatepickerRangeService, DfDefaultSpinnerComponent, DfDirectionDetectionService, DfExcludeTrapDirective, DfFooterModule, DfIconModule, DfIfMediaDirective, DfInputIconDirective, DfInsertIconDirective, DfInsertIconModule, DfManageBadgeEventsDirective, DfManageCardSelectionDirective, DfManageNavSelectDirective, DfManageSideNavDirective, DfMedia, DfMediaModule, DfMediaObserver, DfMediaQuery, DfModalService, DfModule, DfNavItemType, DfOptionHighlightDirective, DfPopoverConfig, DfPopoverModule, DfProgressIndicatorBackdropComponent, DfProgressIndicatorContainerComponent, DfProgressIndicatorContentPosition, DfProgressIndicatorContentProgressBar, DfProgressIndicatorContentSpinner, DfProgressIndicatorContentType, DfProgressIndicatorDirective, DfProgressIndicatorModule, DfProgressIndicatorRef, DfProgressIndicatorService, DfProgressbarComponent, DfProgressbarModule, DfSelectModule, DfSideNavCollapseDirective, DfSideNavCollapseModule, DfSideNavCollapseService, DfSideNavComponent, DfSideNavConfig, DfSideNavHeaderDirective, DfSideNavIconDirective, DfSideNavItemDirective, DfSideNavModule, DfSideNavService, DfSliderDirectionDirective, DfSliderModule, DfStepperComponent, DfStepperDirective, DfStepperModule, DfStepperService, DfStepperStepContentDirective, DfStepperStepDirective, DfTitleTruncateDirective, DfToastModule, DfTooltipModule, DfTooltipTruncateDirective, DfTriggerClickDirective, DfWavesOfProgressDirective, DfWavesOfProgressModule, LabelType, Options, PointerType, RightToLeftDirectionEnum, SkipLinkDirective, SkipLinksContainerComponent, SliderComponent };
+export { BREAKPOINTS_VARS, ChangeContext, DF_BREAKPOINTS_VAR_DEFAULT, DfAccessibilityModule, DfAdvancedCardModule, DfAdvancedInputModule, DfAlertModule, DfAmadeusIconComponent, DfAmadeusLogoComponent, DfBreakpoints, DfDatePickerModule, DfDatepickerRangeDirective, DfDatepickerRangeService, DfDefaultSpinnerComponent, DfDirectionDetectionService, DfFooterModule, DfIconModule, DfIfMediaDirective, DfInputIconDirective, DfInsertIconDirective, DfInsertIconModule, DfManageBadgeEventsDirective, DfManageCardSelectionDirective, DfManageNavSelectDirective, DfManageSideNavDirective, DfMedia, DfMediaModule, DfMediaObserver, DfMediaQuery, DfModule, DfNavItemType, DfOptionHighlightDirective, DfPopoverConfig, DfPopoverModule, DfProgressIndicatorBackdropComponent, DfProgressIndicatorContainerComponent, DfProgressIndicatorContentPosition, DfProgressIndicatorContentProgressBar, DfProgressIndicatorContentSpinner, DfProgressIndicatorContentType, DfProgressIndicatorDirective, DfProgressIndicatorModule, DfProgressIndicatorRef, DfProgressIndicatorService, DfProgressbarComponent, DfProgressbarModule, DfSelectModule, DfSideNavCollapseDirective, DfSideNavCollapseModule, DfSideNavCollapseService, DfSideNavComponent, DfSideNavConfig, DfSideNavHeaderDirective, DfSideNavIconDirective, DfSideNavItemDirective, DfSideNavModule, DfSideNavService, DfSliderDirectionDirective, DfSliderModule, DfStepperComponent, DfStepperDirective, DfStepperModule, DfStepperService, DfStepperStepContentDirective, DfStepperStepDirective, DfTitleTruncateDirective, DfToastModule, DfTooltipModule, DfTooltipTruncateDirective, DfTriggerClickDirective, DfWavesOfProgressDirective, DfWavesOfProgressModule, LabelType, Options, PointerType, RightToLeftDirectionEnum, SkipLinkDirective, SkipLinksContainerComponent, SliderComponent };
 export type { CombineLabelsFunction, CustomStepDefinition, DfDirection, DfProgressIndicatorContent, DfProgressIndicatorOptions, DfSideNavItem, DfStepType, DfStepperNormalizedState, DfStepperNormalizedStep, DfStepperState, DfStepperStep, GetLegendFunction, GetStepLegendFunction, PositionToValueFunction, TranslateFunction, ValueToPositionFunction };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@design-factory/design-factory",
   "description": "Amadeus design system",
   "license": "BSD-3-Clause",
-  "version": "20.0.0-next.0",
+  "version": "20.0.0-next.2",
   "dependencies": {
     "tslib": "^2.0.0"
   },
@@ -17,7 +17,9 @@
     "@ng-select/ng-select": "^15.0.0",
     "ag-grid-angular": "^32.0.0",
     "ag-grid-community": "^32.0.0",
-    "bootstrap": "5.3.6"
+    "bootstrap": "5.3.7",
+    "colorjs.io": "^0.5.2",
+    "style-dictionary": "^5.0.0"
   },
   "peerDependenciesMeta": {
     "@angular/router": {
@@ -31,6 +33,12 @@
     },
     "@agnos-ui/angular-bootstrap": {
       "optional": true
+    },
+    "colorjs.io": {
+      "optional": true
+    },
+    "style-dictionary": {
+      "optional": true
     }
   },
   "schematics": "./schematics/collection.json",
@@ -56,6 +64,10 @@
     ".": {
       "types": "./index.d.ts",
       "default": "./fesm2022/design-factory.mjs"
+    },
+    "./tokens/style-dictionary": {
+      "types": "./tokens/style-dictionary/index.d.ts",
+      "default": "./fesm2022/design-factory-design-factory-tokens-style-dictionary.mjs"
     }
   },
   "ng-update": {

package/schematics/migrations/15_0_0/remove-ngx-slider/index.js

@@ -17,7 +17,11 @@ function removeNgxSlider() {
         if (!allPaths.length) {
             throw new schematics_1.SchematicsException('Could not find any tsconfig file. Cannot run the `RemoveModuleId` migration.');
         }
-        return (0, schematics_1.chain)([renameNgxSliderModules(basePath, allPaths), renameNgxSliderImports(basePath, allPaths), removeNgxSliderDependencies()]);
+        return (0, schematics_1.chain)([
+            renameNgxSliderModules(basePath, allPaths),
+            renameNgxSliderImports(basePath, allPaths),
+            removeNgxSliderDependencies()
+        ]);
     };
 }
 // rename all references of NgxSliderModule to DfSliderModule
@@ -31,7 +35,7 @@ function renameNgxSliderModules(basePath, tsconfigPaths) {
 }
 function renameNgxSliderModule(tree, tsconfigPath, basePath) {
     const program = (0, compiler_host_1.createMigrationProgram)(tree, tsconfigPath, basePath);
-    const sourceFiles = program.getSourceFiles().filter(sourceFile => (0, compiler_host_1.canMigrateFile)(basePath, sourceFile, program));
+    const sourceFiles = program.getSourceFiles().filter((sourceFile) => (0, compiler_host_1.canMigrateFile)(basePath, sourceFile, program));
     for (const sourceFile of sourceFiles) {
         if (sourceFile.text.includes('NgxSliderModule')) {
             const update = tree.beginUpdate((0, path_1.relative)(basePath, sourceFile.fileName));
@@ -56,11 +60,13 @@ function renameNgxSliderImports(basePath, tsconfigPaths) {
 }
 function renameNgxSliderImport(tree, tsconfigPath, basePath) {
     const program = (0, compiler_host_1.createMigrationProgram)(tree, tsconfigPath, basePath);
-    const sourceFiles = program.getSourceFiles().filter(sourceFile => (0, compiler_host_1.canMigrateFile)(basePath, sourceFile, program));
+    const sourceFiles = program.getSourceFiles().filter((sourceFile) => (0, compiler_host_1.canMigrateFile)(basePath, sourceFile, program));
     for (const sourceFile of sourceFiles) {
         const nodesToRewrite = [];
         for (const node of sourceFile.statements) {
-            if (ts.isImportDeclaration(node) && ts.isStringLiteral(node.moduleSpecifier) && node.moduleSpecifier.text === '@angular-slider/ngx-slider') {
+            if (ts.isImportDeclaration(node) &&
+                ts.isStringLiteral(node.moduleSpecifier) &&
+                node.moduleSpecifier.text === '@angular-slider/ngx-slider') {
                 nodesToRewrite.push(node);
             }
         }
@@ -80,7 +86,7 @@ function removeNgxSliderDependencies() {
     return async (tree, context) => {
         removeNgxSliderDependencyFromPackage('/package.json', tree);
         const workspace = await (0, workspace_1.getWorkspace)(tree);
-        for (const [_projectKey, projectDefinition] of workspace.projects) {
+        for (const [, projectDefinition] of workspace.projects) {
             if (projectDefinition.root && tree.exists(`${projectDefinition.root}/package.json`)) {
                 removeNgxSliderDependencyFromPackage(`${projectDefinition.root}/package.json`, tree);
             }

package/schematics/migrations/16_0_0/revert-to-old-brand/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = revertToOldBranding;
 const workspace_1 = require("@schematics/angular/utility/workspace");
-const regexMainStyleImport = /\@import\s('|")\@design-factory\/design-factory\/design-factory(\.|'|")/g;
+const regexMainStyleImport = /@import\s('|")@design-factory\/design-factory\/design-factory(\.|'|")/g;
 /**
  * Goes through the styles imports declared in the styles options of a build target, trying to update to use the old branding styles.
  *
@@ -90,7 +90,7 @@ function updateImportInMainStyles(buildOptions, tree) {
  * @returns the Rule to revert to the old branding
  */
 function revertToOldBranding() {
-    return async (tree, context) => {
+    return (tree, context) => {
         return (0, workspace_1.updateWorkspace)((workspace) => {
             workspace.projects.forEach((project, projectName) => {
                 if (project.extensions['projectType'] === 'application') {

package/schematics/migrations/20_0_0/colors-new-branding/index.d.ts

@@ -0,0 +1,14 @@
+import { type Rule } from '@angular-devkit/schematics';
+/**
+ * This migration updates the classes regarding the colors.
+ *
+ * - bg-dark, bg-outline-dark, bg-secondary, bg-outline-secondary are replaced by their "neutral" equivalent classes,
+ * - mystery is replaced by tip,
+ * - yellow is replaced by chromatic1,
+ * - love is replaced by chromatic2,
+ *
+ * - The -light color variations are replaced by the -soft ones (bg-[color]-light becomes bg-[color]-soft),
+ *
+ * @returns the Rule to migrate the color classes
+ */
+export default function colorNamesProcess(): Rule;

package/schematics/migrations/20_0_0/colors-new-branding/index.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = colorNamesProcess;
+const schematics_1 = require("@angular-devkit/schematics");
+const project_tsconfig_paths_1 = require("../../utils/project_tsconfig_paths");
+const compiler_host_1 = require("../../utils/typescript/compiler_host");
+const template_updater_1 = require("../../utils/template-updater");
+const style_updater_1 = require("../../utils/style-updater");
+const colorNamesMap = {
+    // light: 'neutral-soft',
+    secondary: 'neutral',
+    dark: 'neutral',
+    mystery: 'tip',
+    yellow: 'chromatic1',
+    love: 'chromatic2'
+};
+const removedColorsMap = ['pacific', 'dark-primary', 'dark-green'];
+const colorNames = Object.keys(colorNamesMap).join('|');
+const classBreak = '[^a-zA-Z-]'; // to avoid matching "bg-primary-light" for example
+const regExpSoft = new RegExp(`${classBreak}(bg|df-badge-outline)-[a-z]+-light${classBreak}`, 'g');
+const regExpSoftClass = new RegExp(`${classBreak}(bg|text|text-bg|btn|btn-outline|df-badge-outline|toast)-(${colorNames})-soft${classBreak}`, 'g');
+const regExp = new RegExp(`${classBreak}(bg|text|text-bg|btn|btn-outline|df-badge-outline|toast)-(${colorNames})${classBreak}`, 'g');
+const regExpLight = new RegExp(`.*?badge.*?${classBreak}(bg-light)${classBreak}`, 'g');
+const regExpRemoved = new RegExp(`([ \t]*).*${classBreak}(bg|text|text-bg|btn|btn-outline|df-badge-outline|toast)-(${removedColorsMap.join('|')})${classBreak}.*`, 'g');
+function replaceContentFactory(isTemplate, loggingContext) {
+    return function replaceContent(content) {
+        // Replace the "light" variants by the "soft" ones
+        content = content.replace(regExpSoft, function (str) {
+            const result = str.replace('-light', '-soft');
+            return result;
+        });
+        // Replace the old name by the new ones for the soft first
+        content = content.replace(regExpSoftClass, function (str, _prefix, color) {
+            let result = str;
+            const mappedColor = colorNamesMap[color];
+            if (mappedColor) {
+                result = result.replace(color, mappedColor);
+            }
+            return result;
+        });
+        // Replace the old name by the new ones
+        content = content.replace(regExp, function (str, _prefix, color) {
+            let result = str;
+            const mappedColor = colorNamesMap[color];
+            if (mappedColor) {
+                result = result.replace(color, mappedColor);
+            }
+            return result;
+        });
+        // Special case for bg-light which is replaced only in the badge context (as bg-neutral-soft do not exist)
+        content = content.replace(regExpLight, function (str) {
+            return str.replace('bg-light', 'bg-neutral-soft');
+        });
+        // Removed colors
+        content = content.replace(regExpRemoved, function (str, indent, _, color) {
+            loggingContext.removedColor = true;
+            const msg = `DF 20 migration: ${color} has been removed`;
+            return isTemplate ? `${indent}<!-- ${msg} -->\n${str}` : `\\* ${msg} *\\\n${str}`;
+        });
+        return content;
+    };
+}
+/**
+ * This migration updates the classes regarding the colors.
+ *
+ * - bg-dark, bg-outline-dark, bg-secondary, bg-outline-secondary are replaced by their "neutral" equivalent classes,
+ * - mystery is replaced by tip,
+ * - yellow is replaced by chromatic1,
+ * - love is replaced by chromatic2,
+ *
+ * - The -light color variations are replaced by the -soft ones (bg-[color]-light becomes bg-[color]-soft),
+ *
+ * @returns the Rule to migrate the color classes
+ */
+function colorNamesProcess() {
+    return async (tree, context) => {
+        const loggingContext = { removedColor: false };
+        const { buildPaths, testPaths } = await (0, project_tsconfig_paths_1.getProjectTsConfigPaths)(tree);
+        const basePath = process.cwd();
+        const allPaths = [...buildPaths, ...testPaths];
+        if (!allPaths.length) {
+            throw new schematics_1.SchematicsException('Could not find any tsconfig file. Cannot run the `color names` migration.');
+        }
+        const templateUpdater = new template_updater_1.TemplateUpdater(tree, replaceContentFactory(true, loggingContext));
+        for (const tsconfigPath of allPaths) {
+            const program = (0, compiler_host_1.createMigrationProgram)(tree, tsconfigPath, basePath);
+            const sourceFiles = program
+                .getSourceFiles()
+                .filter((sourceFile) => (0, compiler_host_1.canMigrateFile)(basePath, sourceFile, program));
+            for (const sourceFile of sourceFiles) {
+                templateUpdater.update(sourceFile, program.getTypeChecker());
+            }
+        }
+        const styleUpdater = new style_updater_1.StyleUpdater(tree, replaceContentFactory(false, loggingContext));
+        for (const tsconfigPath of allPaths) {
+            const program = (0, compiler_host_1.createMigrationProgram)(tree, tsconfigPath, basePath);
+            const sourceFiles = program
+                .getSourceFiles()
+                .filter((sourceFile) => (0, compiler_host_1.canMigrateFile)(basePath, sourceFile, program));
+            for (const sourceFile of sourceFiles) {
+                styleUpdater.update(sourceFile, program.getTypeChecker());
+            }
+        }
+        if (loggingContext.removedColor) {
+            context.logger.warn('Some removed color classes were found. Check your files for comments in your code.');
+        }
+    };
+}