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

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

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/_common.variables.scss

@@ -16,11 +16,12 @@ $df-zindex-topmost: 10000 !default;
 $df-font-size-xs: $font-size-sm !default;
 $df-form-placeholder-font-style: italic !default;
 // Merge DF Spacer with BS ones
+// @deprecated - will be removed in version 21, use $spacer-4 instead of '75'
 // stylelint-disable-next-line scss/dollar-variable-pattern, scss/dollar-variable-default
 $spacers: map.merge(
   (
     '75': (
-      $spacer * 0.75
+      calc($spacer * 0.75)
     )
   ),
   $spacers

package/styles/scss/_variables.scss

@@ -55,6 +55,7 @@
 @import 'components/sidenav/sidenav.variables';
 @import 'components/footer/footer.variables';
 @import 'components/separator/separator.variables';
+@import 'components/timepicker/timepicker.variables';
 @import 'components/toast/toast.variables';
 @import 'components/scrollspy/scrollspy.variables';
 @import 'components/tooltip/tooltip.variables';

package/styles/scss/agnosui/_variables.scss

@@ -23,6 +23,6 @@
   $au-tree-expand-icon-color-default: $primary !default,
   $au-tree-expand-icon-color-hover: $primary-800 !default,
   $au-tree-expand-icon-background-color-hover: var(--#{$prefix}primary-200) !default,
-
+  $au-tree-expand-icon-margin-inline-end: var(--#{$prefix}spacing-3) !default,
   $au-slider-tick-neutral-color: $gray-600 !default
 );

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/accordion/_accordion.scss

@@ -72,6 +72,13 @@
     .df-accordion-number {
       color: var(--#{$prefix}accordion-title-number-color);
     }
+
+    &:focus {
+      box-shadow: none;
+    }
+    &:focus-visible {
+      box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+    }
   }
 
   // Reverse accordion

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

@@ -73,12 +73,8 @@
     }
 
     .df-alert-collapsed-text {
-      @include ltr {
-        margin-left: var(--#{$prefix}alert-icon-margin-start);
-      }
-      @include rtl {
-        margin-right: var(--#{$prefix}alert-icon-margin-start);
-      }
+      margin-block-start: var(--#{$prefix}spacing-5);
+      margin-inline-start: var(--#{$prefix}alert-icon-margin-start);
     }
   }
 
@@ -86,6 +82,13 @@
   .btn-close {
     padding-top: var(--#{$prefix}alert-btn-close-padding-y);
     padding-bottom: var(--#{$prefix}alert-btn-close-padding-y);
+
+    &:focus {
+      box-shadow: none;
+    }
+    &:focus-visible {
+      box-shadow: var(--#{$prefix}btn-close-focus-shadow);
+    }
   }
 
   // Variants of the alerts
@@ -102,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
@@ -177,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,15 +1,23 @@
 @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 {
     box-shadow: none;
   }
 }
+
+@mixin df-badge-sizing($height, $font-size, $padding-inline, $close-btn-width) {
+  font-size: $font-size;
+  height: $height;
+  --#{$prefix}badge-padding-x: #{$padding-inline};
+
+  button {
+    width: $close-btn-width;
+  }
+}