@design-factory/design-factory 20.0.0-next.1 → 20.0.0-next.3

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as i0 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, NgbModalOptions, NgbModalRef, NgbPopoverConfig } 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';
@@ -210,18 +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 readonly renderer;
-    private readonly modalService;
-    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]>;
@@ -534,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
@@ -790,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;
@@ -1227,34 +1215,6 @@ declare class DfManageSideNavDirective implements AfterViewChecked {
     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;
@@ -1263,7 +1223,7 @@ declare class DfManageNavSelectDirective implements OnInit {
     private readonly renderer;
     ngOnInit(): void;
     handleKeyDown(event: any): void;
-    handleKeyDownBackspace(event: any): void;
+    handleKeyDownBackspace(): void;
     handleKeyDownRight(event: any): void;
     arrowRightInnerHandler(event: any): void;
     arrowLeftInnerHandler(event: any): void;
@@ -1513,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>;
@@ -1579,7 +1539,7 @@ 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>;
 }
 
@@ -1643,9 +1603,9 @@ declare class DfBreakpoints {
     private readonly _breakPointsVar;
     private readonly platformID;
     constructor();
-    get breakPoints$(): Observable<{} | null>;
+    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>;
 }
@@ -1751,37 +1711,27 @@ declare class DfTitleTruncateDirective implements OnInit, DoCheck {
 
 declare class DfWavesOfProgressDirective {
     /**
-     * The type of waves to display. In order to display the waves, the app using the directive must include the assets of Design Factory.
-     * It is possible to do so by adding the following snippet to the `angular.json` file in the `assets` configuration:
+     * The type of waves to display
+     */
+    readonly dfWavesOfProgress: i0.InputSignal<"circleDiagonal" | "circleUp" | "arrowRight" | "arrowUp">;
+    /**
+     * The color of the waves. It can be one of the predefined brand colors or a custom color.
      * @example
-     * "assets": [
-     *  {
-     *    "glob": "** / *", //remove the spaces between the asterisks and the slash
-     *    "input": "node-modules/@design-factory/design-factory/assets/",
-     *    "output": "assets/"
-     *  },
-     *  ...]
-     */
-    readonly dfWavesOfProgress: i0.InputSignal<"arrowRight" | "circleDiagonal" | "circleUp" | "arrowUp">;
-    private readonly http;
-    elementRef: ElementRef<any>;
-    private readonly platformId;
-    private baseSvg;
+     * 'dark-sky', 'vivid-crimson', 'light-forest', ['#000835', '#3A8BFF']
+     */
+    readonly color: i0.InputSignal<"dark-sky" | "dark-crimson" | "dark-pumpkin" | "dark-forest" | "dark-canary" | "dark-fuchsia" | "dark-violet" | "vivid-sky" | "vivid-crimson" | "vivid-pumpkin" | "vivid-forest" | "vivid-canary" | "vivid-fuchsia" | "vivid-violet" | "light-sky" | "light-crimson" | "light-pumpkin" | "light-forest" | "light-canary" | "light-fuchsia" | "light-violet" | [string, string]>;
+    readonly backgroundImage: i0.Signal<string>;
     /**
      * Prepares the SVG string by replacing color variables and encoding it.
+     * @param svgAsString - The SVG string to prepare.
      * @param bgColor - The background color.
      * @param lineColor - The line color.
      * @returns The prepared SVG string.
      */
-    prepareSvg(bgColor: string, lineColor: string): string;
-    /**
-     * Updates the SVG background image based on the current element's styles.
-     */
-    updateSvg(): void;
-    constructor();
-    private getSvg;
+    private prepareSvg;
+    private getWavesAsString;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfWavesOfProgressDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DfWavesOfProgressDirective, "[dfWavesOfProgress]", ["dfWavesOfProgress"], { "dfWavesOfProgress": { "alias": "dfWavesOfProgress"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DfWavesOfProgressDirective, "[dfWavesOfProgress]", ["dfWavesOfProgress"], { "dfWavesOfProgress": { "alias": "dfWavesOfProgress"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class DfWavesOfProgressModule {
@@ -1799,5 +1749,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.1",
+  "version": "20.0.0-next.3",
   "dependencies": {
     "tslib": "^2.0.0"
   },
@@ -14,10 +14,12 @@
     "@angular/localize": "^20.0.0",
     "@angular/router": "^20.0.0",
     "@ng-bootstrap/ng-bootstrap": "~19.0.0",
-    "@ng-select/ng-select": "^15.0.0",
+    "@ng-select/ng-select": "^15.0.0 || ^20.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,18 @@
+import { type Rule } from '@angular-devkit/schematics';
+export declare function replaceContentFactory(isTemplate: boolean, loggingContext: {
+    warnings: boolean;
+    deprecatedColors: boolean;
+}): (content: string) => string;
+/**
+ * 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,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaceContentFactory = replaceContentFactory;
+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 classBreak = '[^a-zA-Z-]'; // to avoid matching "bg-primary-light" for example
+const indent = `[ \t]*`;
+const colorsWithDeprecation = {
+    light: 'neutral-soft',
+    secondary: 'neutral'
+};
+const regExpColorsWithDeprecation = new RegExp(`(${indent}).*${classBreak}(bg|text|text-bg])-(${Object.keys(colorsWithDeprecation).join('|')})${classBreak}`, 'g');
+const safeColorMap = {
+    dark: 'neutral',
+    mystery: 'tip',
+    yellow: 'chromatic1',
+    love: 'chromatic2'
+};
+const allColorNamesMap = {
+    ...colorsWithDeprecation,
+    ...safeColorMap
+};
+const removedColorsList = ['pacific', 'dark-primary', 'dark-green'];
+const regExpRemovedColors = new RegExp(`(${indent}).*${classBreak}(bg|text|text-bg|btn|btn-outline|df-badge-outline|toast)-(${removedColorsList.join('|')})${classBreak}.*`, 'g');
+const colorNames = Object.keys(allColorNamesMap).join('|');
+/*
+  Matches "light" color variants, specifically for badges, as "light" colors are only defined for badges.
+  for exemple bg-*-light
+*/
+const regExpLight = new RegExp(`${classBreak}(bg|df-badge-outline)-[a-z]+-light${classBreak}`, 'g');
+const regExpBadgeLight = new RegExp(`.*?(badge|toast)${classBreak}bg-light${classBreak}`, 'g');
+const regExpSoftColor = new RegExp(`${classBreak}(bg|text|text-bg|df-badge-outline)-(${colorNames})-soft${classBreak}`, 'g');
+const regExpColors = new RegExp(`([ \t]*).*${classBreak}(bg|text|text-bg|btn|btn-outline|df-badge-outline|toast)-(${colorNames})${classBreak}`, 'g');
+const regExpBadgeOrToast = /(badge|toast)/;
+const regExpBadgeOrButton = /(badge|btn)/;
+function replaceContentFactory(isTemplate, loggingContext) {
+    return function replaceContent(content) {
+        // Replace the specific bg-light in the badge
+        content = content.replace(regExpBadgeLight, function (str) {
+            return str.replace('bg-light', 'bg-neutral-soft');
+        });
+        // Replace the "light" variants by the "soft" ones
+        content = content.replace(regExpLight, 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(regExpSoftColor, function (str, _prefix, color) {
+            let result = str;
+            const mappedColor = allColorNamesMap[color];
+            if (mappedColor) {
+                result = result.replace(color, mappedColor);
+            }
+            return result;
+        });
+        // Replace the old name by the new ones
+        content = content.replace(regExpColors, function (str, indent, _prefix, color) {
+            let result = str;
+            if (regExpBadgeOrToast.test(str)) {
+                const mappedColor = allColorNamesMap[color];
+                if (mappedColor) {
+                    result = result.replace(color, mappedColor);
+                }
+            }
+            else if (str.includes('btn') && (color === 'secondary' || color === 'light')) {
+                loggingContext.warnings = true;
+                const msg = `DF 20 migration: ${color} is no longer supported in buttons.`;
+                result = isTemplate ? `${indent}<!-- ${msg} -->\n${str}` : `${indent}\\* ${msg} *\\\n${str}`;
+            }
+            else {
+                // Safe color replacement
+                const mappedColor = safeColorMap[color];
+                if (mappedColor) {
+                    result = result.replace(color, mappedColor);
+                }
+            }
+            return result;
+        });
+        // Warning for secondary and light colors
+        content = content.replace(regExpColorsWithDeprecation, function (str, _indent, _prefix) {
+            if (!regExpBadgeOrButton.test(str)) {
+                loggingContext.deprecatedColors = true;
+            }
+            return str;
+        });
+        // Removed colors
+        content = content.replace(regExpRemovedColors, function (str, indent, _, color) {
+            let result = str;
+            if (!str.includes('navbar')) {
+                loggingContext.warnings = true;
+                const msg = `DF 20 migration: ${color} has been removed`;
+                result = isTemplate ? `${indent}<!-- ${msg} -->\n${str}` : `${indent}\\* ${msg} *\\\n${str}`;
+            }
+            return result;
+        });
+        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 = { warnings: false, deprecatedColors: 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.warnings) {
+            context.logger.warn('Some removed color classes were found. Check your files for comments in your code.');
+        }
+        if (loggingContext.deprecatedColors) {
+            context.logger.warn('Deprecated color classes (light, secondary) detected. Please review your usage of bg-light, text-light, text-bg-light, bg-secondary, text-secondary, and text-bg-secondary.');
+        }
+    };
+}

package/schematics/migrations/20_0_0/modal-removal/index.d.ts

@@ -0,0 +1,7 @@
+import { type Rule } from '@angular-devkit/schematics';
+/**
+ * This migration updates Angular code to remove the usage of the `DfModalService` from the Design Factory library.
+ *
+ * @returns the Rule to migrate the modal removal
+ */
+export default function modalRemoval(): Rule;

package/schematics/migrations/20_0_0/modal-removal/index.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = modalRemoval;
+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 path_1 = require("path");
+const core_1 = require("@angular-devkit/core");
+const regexImportDfModal = /import\s\{([^}]*)DfModalService(,\s*)?([^}]*)\}\sfrom\s['"]@design-factory\/design-factory['"];/gm;
+const regexDfModalService = /DfModalService/g;
+const replaceComponent = (text) => {
+    text = text.replace(regexImportDfModal, (_match, p1, _p2, p3) => {
+        return (`import { NgbModal } from '@ng-bootstrap/ng-bootstrap';` +
+            ((p1 + p3).trim()
+                ? `\nimport {${p3.trim() ? p1 : p1.replace(/(.*),\s*/, '$1')}${p3}} from '@design-factory/design-factory';`
+                : ''));
+    });
+    text = text.replace(regexDfModalService, 'NgbModal');
+    return text;
+};
+/**
+ * This migration updates Angular code to remove the usage of the `DfModalService` from the Design Factory library.
+ *
+ * @returns the Rule to migrate the modal removal
+ */
+function modalRemoval() {
+    return async (tree, _context) => {
+        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 `waves of progress` migration.');
+        }
+        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) {
+                const sourceText = sourceFile.getFullText();
+                const updatedText = replaceComponent(sourceText);
+                if (updatedText !== sourceText) {
+                    const absFilePath = (0, core_1.normalize)(path_1.posix.resolve('/', (0, core_1.normalize)(sourceFile.fileName)));
+                    const filePath = path_1.posix.relative((0, core_1.normalize)(process.cwd()), absFilePath);
+                    const recorder = tree.beginUpdate(filePath);
+                    recorder.remove(0, sourceText.length);
+                    recorder.insertRight(0, updatedText);
+                    tree.commitUpdate(recorder);
+                }
+            }
+        }
+    };
+}

package/schematics/migrations/20_0_0/navbar-toggler-logo-svg/index.js

@@ -5,12 +5,13 @@ 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 navbarTogglerIconRegexp = /<span\s+class="navbar-toggler-icon"><\/span>/g;
+const navbarTogglerIconComplexRegexp = /([ \t]*<span[^>]+navbar-toggler-icon)/g;
 function replaceHtmlContentFactory(loggingContext) {
     function replaceHtmlContent(content) {
-        content = content.replace(/<span\s+class="navbar-toggler-icon"><\/span>/g, `<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg>`);
-        loggingContext.foundComplexCase =
-            loggingContext.foundComplexCase || /([ \t]*<span[^>]+navbar-toggler-icon)/g.test(content);
-        content = content.replace(/([ \t]*<span[^>]+navbar-toggler-icon)/g, '<!-- TODO Avoid using spans with navbar-toggler-icon and replace with inline svgs. -->\n' +
+        content = content.replace(navbarTogglerIconRegexp, `<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg>`);
+        loggingContext.foundComplexCase = loggingContext.foundComplexCase || navbarTogglerIconComplexRegexp.test(content);
+        content = content.replace(navbarTogglerIconComplexRegexp, '<!-- TODO Avoid using spans with navbar-toggler-icon and replace with inline svgs. -->\n' +
             '<!-- You can check an example of the inline svg in the SideNav example: https://design-factory.amadeus.net/components/sidenav/examples#basic -->\n$1');
         return content;
     }
@@ -27,7 +28,7 @@ function navbarTogglerLogo() {
         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 `Font Awesome 6` migration.');
+            throw new schematics_1.SchematicsException('Could not find any tsconfig file. Cannot run the `navbar toggler logo` migration.');
         }
         const loggingContext = { foundComplexCase: false };
         const templateUpdater = new template_updater_1.TemplateUpdater(tree, replaceHtmlContentFactory(loggingContext));

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

@@ -0,0 +1,7 @@
+import { type Rule } from '@angular-devkit/schematics';
+/**
+ * This migration updates templates to use inline svg instead of navbar span for the toggler icon.
+ *
+ * @returns the Rule to migrate the navbar logo
+ */
+export default function spinnerNewBranding(): Rule;

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = spinnerNewBranding;
+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 spinner = /(\s+class=")([^"]*spinner-border[^"]*)"/g;
+const spinnerText = /(^|\s)text-([a-z]+)/g;
+function replaceSpinnerClass(_match, p1, p2) {
+    return `${p1}${p2.replace(spinnerText, '$1df-spinner-$2')}"`;
+}
+function replaceHtmlContent(content) {
+    content = content.replace(spinner, replaceSpinnerClass);
+    return content;
+}
+/**
+ * This migration updates templates to use inline svg instead of navbar span for the toggler icon.
+ *
+ * @returns the Rule to migrate the navbar logo
+ */
+function spinnerNewBranding() {
+    return async (tree, _context) => {
+        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 `spinner new branding` migration.');
+        }
+        const templateUpdater = new template_updater_1.TemplateUpdater(tree, replaceHtmlContent);
+        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());
+            }
+        }
+    };
+}

package/schematics/migrations/20_0_0/style-import/index.d.ts

@@ -0,0 +1,7 @@
+import { type Rule } from '@angular-devkit/schematics';
+/**
+ * This migration updates the global styles to import the correct path of design factory styles.
+ *
+ * @returns the Rule to migrate the style import
+ */
+export default function styleImport(): Rule;