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

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>;
 }
@@ -1762,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;
@@ -1799,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.1",
+  "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.');
+        }
+    };
+}

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/helpers.js

@@ -23,7 +23,7 @@ function dedent(strings, ...values) {
     if (matches === null) {
         return joinedString;
     }
-    const minLineIndent = Math.min(...matches.map(el => el.length));
+    const minLineIndent = Math.min(...matches.map((el) => el.length));
     const omitMinIndentRegex = new RegExp(`^[ \\t]{${minLineIndent}}`, 'gm');
     const omitEmptyLineWhitespaceRegex = /^[ \t]+$/gm;
     const result = minLineIndent > 0 ? joinedString.replace(omitMinIndentRegex, '') : joinedString;

package/schematics/migrations/migration.json

@@ -48,6 +48,18 @@
       "version": "20.0.0",
       "factory": "./20_0_0/navbar-toggler-logo-svg",
       "optional": true
+    },
+    "colors-new-branding": {
+      "description": "Changes the color names to match the new branding taxonomy. As of Design Factory version 20, the color names have been updated to better reflect the new brand.",
+      "version": "20.0.0",
+      "factory": "./20_0_0/colors-new-branding",
+      "optional": true
+    },
+    "spinner-new-branding": {
+      "description": "Use df-spinner-{color} instead of text-{color} for spinners. Recommended for apps using the new amadeus branding.",
+      "version": "20.0.0",
+      "factory": "./20_0_0/spinner-new-branding",
+      "optional": true
     }
   }
 }

package/schematics/migrations/utils/component-resource-collector.js

@@ -73,7 +73,7 @@ class ComponentResourceCollector {
                         // Need to add an offset of one to the start because the template quotes are
                         // not part of the template content.
                         const templateStartIdx = el.getStart() + 1;
-                        const content = stripBom(el.text);
+                        const content = stripBom(el.getText().slice(1, -1));
                         this.resolvedStylesheets.push({
                             filePath,
                             container: node,
@@ -94,7 +94,7 @@ class ComponentResourceCollector {
                 this.resolvedTemplates.push({
                     filePath,
                     container: node,
-                    content: property.initializer.text,
+                    content: property.initializer.getText().slice(1, -1),
                     inline: true,
                     start: templateStartIdx,
                     getCharacterAndLineOfPosition: (pos) => ts.getLineAndCharacterOfPosition(sourceFile, pos + templateStartIdx)

package/schematics/migrations/utils/project_tsconfig_paths.js

@@ -60,6 +60,7 @@ function* allTargetOptions(target) {
 }
 function createHost(tree) {
     return {
+        // eslint-disable-next-line @typescript-eslint/require-await
         async readFile(path) {
             const data = tree.read(path);
             if (!data) {
@@ -67,9 +68,11 @@ function createHost(tree) {
             }
             return core_1.virtualFs.fileBufferToString(data);
         },
+        // eslint-disable-next-line @typescript-eslint/require-await
         async writeFile(path, data) {
             return tree.overwrite(path, data);
         },
+        // eslint-disable-next-line @typescript-eslint/require-await
         async isDirectory(path) {
             // Approximate a directory check.
             // We don't need to consider empty directories and hence this is a good enough approach.
@@ -77,6 +80,7 @@ function createHost(tree) {
             // https://angular.io/guide/schematics-for-libraries#get-the-project-configuration
             return !tree.exists(path) && tree.getDir(path).subfiles.length > 0;
         },
+        // eslint-disable-next-line @typescript-eslint/require-await
         async isFile(path) {
             return tree.exists(path);
         }

package/schematics/migrations/utils/style-updater.js

@@ -13,9 +13,11 @@ class StyleUpdater {
         this._analyzedFiles = new Set();
     }
     update(file, typeChecker) {
-        if (this._analyzedFiles.has((0, core_1.normalize)(path_1.posix.resolve(file.fileName)))) {
+        const filePath = (0, core_1.normalize)(path_1.posix.resolve(file.fileName));
+        if (this._analyzedFiles.has(filePath)) {
             return;
         }
+        this._analyzedFiles.add(filePath);
         const resourceCollector = new component_resource_collector_1.ComponentResourceCollector(typeChecker, this.tree);
         const visitNodeAndCollectResources = (node) => {
             ts.forEachChild(node, visitNodeAndCollectResources);

package/schematics/migrations/utils/template-updater.js

@@ -13,9 +13,11 @@ class TemplateUpdater {
         this._analyzedFiles = new Set();
     }
     update(file, typeChecker) {
-        if (this._analyzedFiles.has((0, core_1.normalize)(path_1.posix.resolve(file.fileName)))) {
+        const filePath = (0, core_1.normalize)(path_1.posix.resolve(file.fileName));
+        if (this._analyzedFiles.has(filePath)) {
             return;
         }
+        this._analyzedFiles.add(filePath);
         const resourceCollector = new component_resource_collector_1.ComponentResourceCollector(typeChecker, this.tree);
         const visitNodeAndCollectResources = (node) => {
             ts.forEachChild(node, visitNodeAndCollectResources);

package/schematics/migrations/utils/typescript/compiler_host.js

@@ -48,14 +48,15 @@ function createMigrationCompilerHost(tree, options, basePath, fakeRead) {
     // program to be based on the file contents in the virtual file tree. Otherwise
     // if we run multiple migrations we might have intersecting changes and
     // source files.
-    host.readFile = fileName => {
+    host.readFile = (fileName) => {
         const treeRelativePath = (0, path_1.relative)(basePath, fileName);
         let result = fakeRead?.(treeRelativePath);
         if (typeof result !== 'string') {
             // If the relative path resolved to somewhere outside of the tree, fall back to
             // TypeScript's default file reading function since the `tree` will throw an error.
-            result = treeRelativePath.startsWith('..') ? defaultReadFile.call(host, fileName) :
-                tree.read(treeRelativePath)?.toString();
+            result = treeRelativePath.startsWith('..')
+                ? defaultReadFile.call(host, fileName)
+                : tree.read(treeRelativePath)?.toString();
         }
         // Strip BOM as otherwise TSC methods (Ex: getWidth) will return an offset,
         // which breaks the CLI UpdateRecorder.
@@ -72,7 +73,8 @@ function createMigrationCompilerHost(tree, options, basePath, fakeRead) {
  */
 function canMigrateFile(basePath, sourceFile, program) {
     // We shouldn't migrate .d.ts files, files from an external library or type checking files.
-    if (sourceFile.fileName.endsWith('.ngtypecheck.ts') || sourceFile.isDeclarationFile ||
+    if (sourceFile.fileName.endsWith('.ngtypecheck.ts') ||
+        sourceFile.isDeclarationFile ||
         program.isSourceFileFromExternalLibrary(sourceFile)) {
         return false;
     }

package/schematics/ng-add/index.js

@@ -12,7 +12,7 @@ function addDependencies() {
     return (tree) => {
         const dfDependencies = JSON.parse((0, fs_1.readFileSync)((0, path_1.resolve)(__dirname, '..', '..', 'package.json'), { encoding: 'utf-8' })).peerDependencies;
         for (const dependency in dfDependencies) {
-            if (dfDependencies.hasOwnProperty(dependency)) {
+            if (Object.prototype.hasOwnProperty.call(dfDependencies, dependency)) {
                 (0, dependencies_1.addPackageJsonDependency)(tree, {
                     type: dependencies_1.NodeDependencyType.Default,
                     name: dependency,
@@ -31,7 +31,7 @@ function install() {
 }
 // Add DF styles to the main styles file. If no styles.scss found, add DF styles to the workspace.
 function addDFStyles(options) {
-    return async (tree, _context) => {
+    return async (tree) => {
         const workspace = await (0, workspace_1.getWorkspace)(tree);
         const project = workspace.projects.get(options.project);
         if (!project) {
@@ -64,10 +64,7 @@ $font-path: '@design-factory/design-factory/assets/fonts';
             const buildOptions = (buildTarget.options || {});
             // if the main `styles.scss` was not found, add the DF styles to the workspace
             if (addStyleToWorkspace) {
-                buildOptions.styles = [
-                    ...(buildOptions.styles ?? []),
-                    '@design-factory/design-factory/design-factory.scss'
-                ];
+                buildOptions.styles = [...(buildOptions.styles ?? []), '@design-factory/design-factory/design-factory.scss'];
             }
             // update the style preprocessor options
             buildOptions.stylePreprocessorOptions = { includePaths: ['./src', 'node_modules'] };