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

package/schematics/migrations/20_0_0/style-import/index.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = styleImport;
+const workspace_1 = require("@schematics/angular/utility/workspace");
+const regexDefault = /@import\s+['"]@design-factory\/design-factory['"];/g;
+/**
+ * This migration updates the global styles to import the correct path of design factory styles.
+ *
+ * @returns the Rule to migrate the style import
+ */
+function styleImport() {
+    return async (tree, _context) => {
+        const workspace = await (0, workspace_1.getWorkspace)(tree);
+        for (const project of workspace.projects.values()) {
+            if (project.extensions['projectType'] === 'application') {
+                const sassStylePath = `${project.sourceRoot ?? ''}/styles.scss`;
+                if (tree.exists(sassStylePath)) {
+                    const styleText = tree.readText(sassStylePath);
+                    if (regexDefault.test(styleText)) {
+                        const recorder = tree.beginUpdate(sassStylePath);
+                        recorder.remove(0, styleText.length);
+                        recorder.insertRight(0, styleText.replace(regexDefault, '@import "@design-factory/design-factory/design-factory.scss";'));
+                        tree.commitUpdate(recorder);
+                    }
+                }
+                const cssStylePath = `${project.sourceRoot ?? ''}/styles.css`;
+                if (tree.exists(cssStylePath)) {
+                    const styleText = tree.readText(cssStylePath);
+                    if (regexDefault.test(styleText)) {
+                        const recorder = tree.beginUpdate(cssStylePath);
+                        recorder.remove(0, styleText.length);
+                        recorder.insertRight(0, styleText.replace(regexDefault, '@import "@design-factory/design-factory/design-factory.css";'));
+                        tree.commitUpdate(recorder);
+                    }
+                }
+            }
+        }
+    };
+}

package/schematics/migrations/20_0_0/waves-of-progress/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 wavesOfProgressRefactor(): Rule;

package/schematics/migrations/20_0_0/waves-of-progress/index.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = wavesOfProgressRefactor;
+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 waveOfProgressDirective = /(<[^>]*?)\s(\[dfWavesOfProgress]="[^"]*")([^>]*?>)/g;
+const wavesClass = /class="([^"]*?)df-waves-(dark|vivid|light)-(sky|crimson|pumpkin|forest|canary|fuchsia|violet)([^"]*?)"/g;
+function replaceHtmlContent(content, loggingContext) {
+    return content.replace(waveOfProgressDirective, (match, _g1, wavesDirective, _g2) => {
+        if (wavesDirective) {
+            loggingContext.foundWaves = true;
+            return match.replace(wavesClass, (_match, classesBefore, tonality, color, classesAfter) => {
+                if (tonality && color) {
+                    if (classesBefore === '' && classesAfter === '') {
+                        return `color="${tonality}-${color}"`;
+                    }
+                    else {
+                        return `color="${tonality}-${color}" class="${classesBefore}${classesAfter}"`;
+                    }
+                }
+                loggingContext.complexCase = true;
+                return _match;
+            });
+        }
+        return match;
+    });
+}
+/**
+ * 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 wavesOfProgressRefactor() {
+    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.');
+        }
+        const loggingContext = { foundWaves: false, complexCase: false };
+        const templateUpdater = new template_updater_1.TemplateUpdater(tree, (content) => replaceHtmlContent(content, 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());
+            }
+        }
+        if (loggingContext.foundWaves) {
+            _context.logger.warn('Waves of progress no longer relies on @design-factory/asset: please remove it from the angular.json assets configuration if not needed.' +
+                `Look for:  
+        {
+          "glob": "**/*",
+          "input": "node-modules/@design-factory/design-factory/assets/",
+          "output": "assets/"
+        },
+      ` +
+                `\n\nPlease keep in mind that the waves no longer need updateSvg() call, please remove it if you are using it.`);
+            if (loggingContext.complexCase) {
+                _context.logger.warn('The migration could not handle all cases. Please check the updated files for manual adjustments.');
+            }
+        }
+    };
+}

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,33 @@
       "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
+    },
+    "waves-of-progress": {
+      "description": "Refactor waves of progress",
+      "version": "20.0.0",
+      "factory": "./20_0_0/waves-of-progress"
+    },
+    "style-import": {
+      "description": "Sass default import for Design Factory styles has changed.",
+      "version": "20.0.0",
+      "factory": "./20_0_0/style-import"
+    },
+    "modal-removal": {
+      "description": "DfModalService has been removed and replaced with NgbModal.",
+      "version": "20.0.0",
+      "factory": "./20_0_0/modal-removal"
     }
   }
 }

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'] };

package/styles/scss/_common.root.scss

@@ -24,9 +24,26 @@
 
   // Form
   --#{$prefix}form-valid-color-rgb: #{to-rgb($form-valid-color)};
-  --#{$prefix}form-invalid-color-rgb: #{to-rgb($form-invalid-color)};
-  --#{$prefix}form-warning-color: #{$df-form-feedback-warning-color};
-  --#{$prefix}form-warning-color-rgb: #{to-rgb($df-form-feedback-warning-color)};
+  --#{$prefix}form-invalid-border-color: #{variable-switch-brand2023(
+      'color-danger-alt-default-border',
+      $form-invalid-color
+    )};
+  --#{$prefix}form-invalid-color: #{variable-switch-brand2023(
+      'color-danger-alt-default-foreground',
+      $form-invalid-color
+    )};
+  --#{$prefix}form-invalid-color-rgb: #{variable-switch-brand2023(
+      'color-danger-alt-default-border-rgb',
+      to-rgb($form-invalid-color)
+    )};
+  --#{$prefix}form-warning-color: #{variable-switch-brand2023(
+      'color-warning-alt-default-foreground',
+      $df-form-feedback-warning-color
+    )};
+  --#{$prefix}form-warning-color-rgb: #{variable-switch-brand2023(
+      'color-warning-alt-default-foreground-rgb',
+      to-rgb($df-form-feedback-warning-color)
+    )};
   --#{$prefix}form-feedback-warning-color: #{$df-form-feedback-warning-color};
   --#{$prefix}form-feedback-help-warning-color: #{$df-form-feedback-help-warning-color};
   --#{$prefix}form-feedback-warning-icon: #{$df-form-feedback-warning-icon};

package/styles/scss/_common.scss

@@ -1,6 +1,6 @@
 .mandatory-indicator {
   // add
-  color: $df-mandatory-indicator-color;
+  color: #{variable-switch-brand2023('color-danger-alt-default-foreground', $df-mandatory-indicator-color)};
   font-weight: $df-mandatory-indicator-font-weight;
   margin-left: $df-mandatory-indicator-margin;
   margin-right: $df-mandatory-indicator-margin;

package/styles/scss/bootstrap/_utilities-override.scss

@@ -4,16 +4,22 @@
 $utilities: map.merge(
   $utilities,
   (
-    "swatch": (
+    'swatch': (
       property: background-color,
       class: swatch,
       values: $grays
     ),
-    "width": map.merge(
-      map.get($utilities, "width"), ( responsive: true )
-    ),
-    "height": map.merge(
-      map.get($utilities, "height"), ( responsive: true )
-    )
+    'width': map.merge(
+        map.get($utilities, 'width'),
+        (
+          responsive: true
+        )
+      ),
+    'height': map.merge(
+        map.get($utilities, 'height'),
+        (
+          responsive: true
+        )
+      )
   )
-);
+);

package/styles/scss/bootstrap/_variables.scss

@@ -707,7 +707,7 @@ $lights-mapping: (
   'bg-subtle-hover-color': var(--#{$prefix}light-50),
   'bg-subtle-active-color': var(--#{$prefix}light-100),
   'border-color': var(--#{$prefix}light-500),
-  'text-color': var(--#{$prefix}light-600),
+  'text-color': var(--#{$prefix}light-100),
   'text-hover-color': var(--#{$prefix}light-800),
   'text-active-color': var(--#{$prefix}light-900),
   'bg-hover-alt-color': var(--#{$prefix}light-50),
@@ -723,7 +723,7 @@ $whites-mapping: (
   'bg-subtle-hover-color': var(--#{$prefix}white-100),
   'bg-subtle-active-color': var(--#{$prefix}white-500),
   'border-color': var(--#{$prefix}white-50),
-  'text-color': var(--#{$prefix}white-600),
+  'text-color': var(--#{$prefix}white-50),
   'text-hover-color': var(--#{$prefix}white-800),
   'text-active-color': var(--#{$prefix}white-900),
   'bg-hover-alt-color': var(--#{$prefix}white-100),

package/styles/scss/components/alert/_alert.scss

@@ -105,23 +105,33 @@
       } @else {
         --#{$prefix}alert-border-color: #{shades-rgba-css-var-with-opacity($state, 'border-color')};
       }
-      --#{$prefix}alert-border-start-color: #{shades-css-var($state, 'inert-color')};
+      --#{$prefix}alert-border-start-color: #{shades-css-var-brand2023(
+          'color-' + $state + '-alt-default-border',
+          $state,
+          'inert-color'
+        )};
       --#{$prefix}alert-icon-color: #{shades-css-var($state, 'inert-color')};
     }
   }
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    &.alert-warning {
+      --#{$prefix}alert-icon-color: var(--#{$prefix}color-icon-warning-foreground);
+    }
+  }
   &.alert-tip {
     @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
       hr {
         border-top-color: shades-css-var('mystery', 'separator-color');
       }
+    } @else {
+      --#{$prefix}alert-color: #{$df-alert-tip-color};
+      --#{$prefix}alert-bg-color: #{$df-alert-tip-background};
+      --#{$prefix}alert-border-color: #{$df-alert-tip-border-color};
+      --#{$prefix}alert-border-start-color: #{$df-alert-tip-border-start-color};
+      --#{$prefix}alert-icon-font-weight: #{$df-icon-light-font-weight};
+      --#{$prefix}alert-icon-margin-start: #{$df-alert-tip-size-default-icon-margin-start};
+      --#{$prefix}alert-icon-color: #{$df-alert-tip-icon-color};
     }
-    --#{$prefix}alert-color: #{$df-alert-tip-color};
-    --#{$prefix}alert-bg-color: #{$df-alert-tip-background};
-    --#{$prefix}alert-border-color: #{$df-alert-tip-border-color};
-    --#{$prefix}alert-border-start-color: #{$df-alert-tip-border-start-color};
-    --#{$prefix}alert-icon-font-weight: #{$df-icon-light-font-weight};
-    --#{$prefix}alert-icon-margin-start: #{$df-alert-tip-size-default-icon-margin-start};
-    --#{$prefix}alert-icon-color: #{$df-alert-tip-icon-color};
   }
 
   // Alerts sizes
@@ -180,14 +190,16 @@
     @each $state, $value in $theme-colors {
       &.alert-#{$state} {
         --#{$prefix}alert-border-bottom-color: #{shades-css-var-brand2023(
-            'color-#{$state}-main-default-border',
+            'color-#{$state}-alt-default-border',
             $state,
             'border-color'
           )};
       }
     }
-    &.alert-tip {
-      --#{$prefix}alert-border-bottom-color: #{$df-alert-tip-border-start-color};
+    @if not meta.variable-exists($name: 'df-enableBranding2023') or not $df-enableBranding2023 {
+      &.alert-tip {
+        --#{$prefix}alert-border-bottom-color: #{$df-alert-tip-border-start-color};
+      }
     }
   }
 

package/styles/scss/components/badge/_badge.mixins.scss

@@ -1,12 +1,10 @@
 @use 'sass:meta';
 
-@mixin df-disable-badge($color, $bg-color, $changeBorder: false) {
+@mixin df-disable-badge($color, $bg-color, $border-color) {
   cursor: var(--#{$prefix}disabled-cursor);
   color: $color !important;
   background-color: $bg-color !important;
-  @if $changeBorder {
-    border-color: $color;
-  }
+  border-color: $border-color;
   &:focus-visible,
   &:focus,
   &:focus-within {