@design-factory/design-factory 19.0.1 → 19.1.0-next.0

package/lib/angular/inputs/icon/inputicon.directive.d.ts

@@ -2,7 +2,9 @@ import { OnInit, DoCheck, OnDestroy } from '@angular/core';
 import * as i0 from "@angular/core";
 export type DfDirection = 'append' | 'prepend';
 /**
- * My dfInputIcon directive
+ * dfInputIcon directive
+ * @deprecated `DfInputIconDirective` is deprecated and will be removed in DF 21, in favor of pure css.
+ * To migrate and keep the same behavior, simply add the class `df-input-withicon` to the input element this directive was used on and remove the directive.
  */
 export declare class DfInputIconDirective implements OnInit, DoCheck, OnDestroy {
     readonly dfInputIcon: import("@angular/core").InputSignal<DfDirection[]>;

package/lib/angular/sidenav/excludeTrap.directive.d.ts

@@ -4,6 +4,7 @@ import * as i0 from "@angular/core";
 /**
  * The directive to catch focusin event and put the focus at a defined position in the page
  *
+ * @deprecated use {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert inert} instead
  * @since 9.1.0
  */
 export declare class DfExcludeTrapDirective implements OnDestroy, OnInit {

package/lib/angular/stepper/stepper.component.d.ts

@@ -1,4 +1,4 @@
-import { TemplateRef, AfterContentInit } from '@angular/core';
+import { AfterContentInit, TemplateRef } from '@angular/core';
 import { DfStepperNormalizedState, DfStepperService } from './stepper.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./stepper.directive";

package/lib/angular/stepper/stepper.service.d.ts

@@ -31,25 +31,26 @@ export declare class DfStepperService {
     setFocus: boolean;
     private readonly _stepperState$;
     private _state;
+    get state(): DfStepperNormalizedState;
     private _completedLabel;
+    /**
+     * Internal to get the completed label in the template
+     */
+    get completedLabel(): string;
+    /**
+     * Use this to set the completed label (i18n)
+     */
+    set completedLabel(label: string);
     private _warningLabel;
-    private _stepperAriaLabel;
-    get stepperState$(): Observable<DfStepperNormalizedState>;
-    get state(): DfStepperNormalizedState;
-    private dispatchStepperState;
-    private updateStepperState;
     /**
-     * Use this to init the list of Elements from your stepper
-     *
-     * Here we are not deep copying the array --> the function will change it
+     * Internal to get the waring label in the template
      */
-    initStepperState(state: DfStepperState): void;
+    get warningLabel(): string;
     /**
-     * Use this to normalize the state of the stepper (completed, warning, current, future)
-     * @param state
-     * @returns
+     * Use this to set the warning label (i18n)
      */
-    normalizeState(state: DfStepperState): DfStepperNormalizedState;
+    set warningLabel(label: string);
+    private _stepperAriaLabel;
     /**
      * Internal to get the stepper aria label in the template
      */
@@ -58,22 +59,19 @@ export declare class DfStepperService {
      * Use this to set the stepper aria label (i18n)
      */
     set stepperAriaLabel(label: string);
+    get stepperState$(): Observable<DfStepperNormalizedState>;
     /**
-     * Internal to get the completed label in the template
-     */
-    get completedLabel(): string;
-    /**
-     * Internal to get the waring label in the template
-     */
-    get warningLabel(): string;
-    /**
-     * Use this to set the completed label (i18n)
+     * Use this to init the list of Elements from your stepper
+     *
+     * Here we are not deep copying the array --> the function will change it
      */
-    set completedLabel(label: string);
+    initStepperState(state: DfStepperState): void;
     /**
-     * Use this to set the warning label (i18n)
+     * Use this to normalize the state of the stepper (completed, warning, current, future)
+     * @param state
+     * @returns
      */
-    set warningLabel(label: string);
+    normalizeState(state: DfStepperState): DfStepperNormalizedState;
     /**
      * TODO make it customizable
      * @param index - index of the step
@@ -87,10 +85,15 @@ export declare class DfStepperService {
      */
     setLinear(isLinear: boolean): void;
     /**
-     *
      * @param isInline - true if the stepper is inline
      */
     setInline(isInline: boolean): void;
+    /**
+     * @param isVertical - true if the stepper is vertical
+     *
+     * @since 19.1.0
+     */
+    setVertical(isVertical: boolean): void;
     /**
      *
      * @param index - index of the step to select start at 0
@@ -122,6 +125,8 @@ export declare class DfStepperService {
      * @param index - index of the step to remove Warning start at 0
      */
     removeWarning(index: number): void;
+    private dispatchStepperState;
+    private updateStepperState;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfStepperService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DfStepperService>;
 }

package/lib/angular/tooltip/truncate/tooltipTruncate.directive.d.ts

@@ -1,5 +1,4 @@
-import { DoCheck, ElementRef, OnInit, Renderer2 } from '@angular/core';
-import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+import { DoCheck, OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * My dfTooltipTruncate directive
@@ -8,9 +7,13 @@ export declare class DfTooltipTruncateDirective implements OnInit, DoCheck {
     private readonly tooltip;
     private readonly elementRef;
     private readonly renderer;
-    constructor(tooltip: NgbTooltip, elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
+    /**
+     * The direction considered when detecting overflow, can be 'x', 'y' or ''.
+     * @defaultValue ''
+     */
+    readonly dfTooltipTruncate: import("@angular/core").InputSignal<"" | "x" | "y">;
     ngOnInit(): void;
     ngDoCheck(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DfTooltipTruncateDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DfTooltipTruncateDirective, "[dfTooltipTruncate]", ["dfTooltipTruncate"], {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DfTooltipTruncateDirective, "[dfTooltipTruncate]", ["dfTooltipTruncate"], { "dfTooltipTruncate": { "alias": "dfTooltipTruncate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/angular/utils/html-element-helper.d.ts

@@ -3,3 +3,13 @@
  * @returns whether the element is overflowing
  */
 export declare function hasOverflow(element: HTMLElement): boolean;
+/**
+ * @param element the HTML element
+ * @returns whether the element is overflowing horizontally
+ */
+export declare function hasOverflowX(element: HTMLElement): boolean;
+/**
+ * @param element the HTML element
+ * @returns whether the element is overflowing vertically
+ */
+export declare function hasOverflowY(element: HTMLElement): boolean;

package/package.json

@@ -2,13 +2,13 @@
   "name": "@design-factory/design-factory",
   "description": "Amadeus design system",
   "license": "BSD-3-Clause",
-  "version": "19.0.1",
+  "version": "19.1.0-next.0",
   "dependencies": {
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@agnos-ui/angular-bootstrap": "~0.7.1",
-    "@agnos-ui/core-bootstrap": "~0.7.1",
+    "@agnos-ui/angular-bootstrap": "~0.8.0",
+    "@agnos-ui/core-bootstrap": "~0.8.0",
     "@angular/common": "^19.0.0",
     "@angular/core": "^19.0.0",
     "@angular/localize": "^19.0.0",
@@ -69,4 +69,4 @@
   "module": "fesm2022/design-factory.mjs",
   "typings": "index.d.ts",
   "sideEffects": false
-}
+}

package/schematics/migrations/16_0_0/scss-var/index.js

@@ -6,12 +6,12 @@ const project_tsconfig_paths_1 = require("../../utils/project_tsconfig_paths");
 const compiler_host_1 = require("../../utils/typescript/compiler_host");
 const style_updater_1 = require("../../utils/style-updater");
 const fs_1 = require("fs");
-const removed = JSON.parse((0, fs_1.readFileSync)(__dirname + '/files/removed.json', { encoding: 'UTF-8' }));
+const removed = JSON.parse((0, fs_1.readFileSync)(__dirname + '/files/removed.json', { encoding: 'utf-8' }));
 const removedSet = new Set();
 for (const removedKey of removed) {
     removedSet.add(removedKey);
 }
-const renames = JSON.parse((0, fs_1.readFileSync)(__dirname + '/files/renames.json', { encoding: 'UTF-8' }));
+const renames = JSON.parse((0, fs_1.readFileSync)(__dirname + '/files/renames.json', { encoding: 'utf-8' }));
 const renameMap = new Map();
 for (const rename of renames) {
     renameMap.set(rename.from, rename.to);

package/styles/scss/agnosui/_variables.scss

@@ -22,5 +22,7 @@
 
   $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-background-color-hover: var(--#{$prefix}primary-200) !default,
+
+  $au-slider-tick-neutral-color: $gray-600 !default
 );

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

@@ -187,6 +187,8 @@
   .df-alert-collapse-main-text {
     display: var(--#{$prefix}alert-collapse-display);
     justify-content: var(--#{$prefix}alert-collapse-justify-content);
+
+    // @deprecated - will be removed in version 21
     a.df-collapse.df-alert-collapse-icon {
       @include ltr {
         margin-left: var(--#{$prefix}alert-collapse-icon-margin-start); // same for all size ?
@@ -198,5 +200,17 @@
         background-color: var(--#{$prefix}alert-collapse-link-hover-bg);
       }
     }
+
+    button.df-collapse.df-alert-collapse-icon {
+      @include ltr {
+        margin-left: var(--#{$prefix}alert-collapse-icon-margin-start); // same for all size ?
+      }
+      @include rtl {
+        margin-right: var(--#{$prefix}alert-collapse-icon-margin-start);
+      }
+      &:hover:not([aria-disabled='true']) {
+        background-color: var(--#{$prefix}alert-collapse-link-hover-bg);
+      }
+    }
   }
 }

package/styles/scss/components/collapse/_collapse.scss

@@ -1,5 +1,6 @@
 @import '../link/link.mixins';
 
+// @deprecated - will be removed in version 21
 a.df-collapse[aria-disabled='true'] {
   color: var(--#{$prefix}collapse-disabled-color);
   display: var(--#{$prefix}collapse-disabled-display);
@@ -10,6 +11,7 @@ a.df-collapse[aria-disabled='true'] {
   border: none;
 }
 
+// @deprecated - will be removed in version 21
 // Links styles override
 a.df-collapse {
   --#{$prefix}collapse-link-color: #{$df-collapse-link-color};
@@ -36,3 +38,57 @@ a.df-collapse {
     @include df-link();
   }
 }
+
+button.df-collapse {
+  @extend .btn, .btn-link;
+
+  padding: 0;
+  border-radius: 0;
+  border-width: 0;
+  --#{$prefix}collapse-link-color: #{$df-collapse-link-color};
+  --#{$prefix}collapse-link-decoration: #{$df-collapse-link-decoration};
+  --#{$prefix}collapse-disabled-color: #{$df-collapse-disabled-color};
+  --#{$prefix}collapse-disabled-display: #{$df-collapse-disabled-display};
+  --#{$prefix}collapse-disabled-cursor: #{$df-collapse-disabled-cursor};
+  --#{$prefix}collapse-disabled-text-decoration: #{$df-collapse-disabled-text-decoration};
+  --#{$prefix}collapse-hover-border-bottom: #{$df-collapse-hover-border-bottom};
+  --#{$prefix}link-hover-border-bottom-width: #{$df-link-hover-border-bottom-width};
+  --#{$prefix}link-hover-color: #{shades-css-var('links', 'text-hover-color')};
+  --#{$prefix}link-hover-background: #{shades-css-var('links', 'bg-hover-color')};
+  --#{$prefix}link-border-bottom: #{$df-link-border-bottom};
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--#{$prefix}btn-icon-margin-end);
+
+  color: var(--#{$prefix}collapse-link-color);
+  text-decoration: var(--#{$prefix}collapse-link-decoration);
+  border-bottom: var(--#{$prefix}collapse-hover-border-bottom) transparent;
+
+  &:hover:not(:disabled) {
+    color: var(--#{$prefix}link-hover-color);
+    background-color: var(--#{$prefix}link-hover-background);
+    border-bottom: var(--#{$prefix}link-border-bottom);
+    border-bottom-width: var(--#{$prefix}link-hover-border-bottom-width);
+    text-decoration: var(--#{$prefix}link-hover-text-decoration);
+  }
+
+  &:disabled {
+    color: var(--#{$prefix}collapse-disabled-color);
+    display: var(--#{$prefix}collapse-disabled-display);
+    cursor: var(--#{$prefix}collapse-disabled-cursor);
+    text-decoration: var(--#{$prefix}collapse-disabled-text-decoration);
+
+    // Links styles override
+    border: none;
+  }
+
+  [class*='icon-']:only-of-type,
+  [class*='fa-']:only-of-type {
+    &::before {
+      // override of the margins added by _buttons.scss
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+  }
+}

package/styles/scss/components/inputs/_inputs.mixin.scss

@@ -57,3 +57,69 @@
     @content;
   }
 }
+
+@mixin df-input-withicon-append {
+  @include ltr {
+    border-right-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
+    @include df-iwi-root-right('.df-input-datepicker-range') {
+      border-left: var(--#{$prefix}iwi-dpr-to-border-left) !important;
+      border-top-left-radius: var(--#{$prefix}iwi-dpr-to-border-radius-top-left);
+      border-bottom-left-radius: var(--#{$prefix}iwi-dpr-to-border-radius-bottom-left);
+    }
+    @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
+      border-left: var(--#{$prefix}iwi-dpr-focus-border) !important;
+    }
+  }
+  @include rtl {
+    border-left-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
+    @include df-iwi-root-right('.df-input-datepicker-range') {
+      border-right: var(--#{$prefix}iwi-dpr-to-border-left) !important;
+      border-top-right-radius: var(--#{$prefix}iwi-dpr-to-border-radius-top-left);
+      border-bottom-right-radius: var(--#{$prefix}iwi-dpr-to-border-radius-bottom-left);
+    }
+    @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
+      border-right: var(--#{$prefix}iwi-dpr-focus-border) !important;
+    }
+  }
+
+  @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
+    border-top: var(--#{$prefix}iwi-dpr-focus-border) !important;
+    border-bottom: var(--#{$prefix}iwi-dpr-focus-border) !important;
+  }
+
+  @include df-iwi-root-right('.df-input-datepicker-range.df-focused') {
+    border-top: var(--#{$prefix}iwi-dpr-focus-border) !important;
+    border-bottom: var(--#{$prefix}iwi-dpr-focus-border) !important;
+  }
+
+  box-shadow: none; // override mandatory
+  &:focus {
+    @include ltr {
+      border-right-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
+    }
+    @include rtl {
+      border-left-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
+    }
+    box-shadow: none; // override mandatory
+  }
+}
+
+@mixin df-input-withicon-prepend() {
+  @include ltr {
+    border-left-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
+  }
+  @include rtl {
+    border-right-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
+  }
+  box-shadow: none; // override mandatory
+  padding-left: 0px; // override mandatory
+  &:focus {
+    @include ltr {
+      border-left-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
+    }
+    @include rtl {
+      border-right-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
+    }
+    box-shadow: none; // override mandatory
+  }
+}

package/styles/scss/components/inputs/_inputs.scss

@@ -18,6 +18,7 @@
   align-items: center;
   border-top: var(--#{$prefix}iwi-input-border-width) solid $input-border-color;
   border-bottom: var(--#{$prefix}iwi-input-border-width) solid $input-border-color;
+  min-width: $input-border-radius;
 
   // This class is to be able to remove the icon in an input with icon and to come back to a normal input look
   // even if the html of the input group is staying.
@@ -146,49 +147,7 @@ input[type='search']::-webkit-search-decoration {
 
 .input-group.df-input-append {
   input.df-input-withicon.append {
-    @include ltr {
-      border-right-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-      @include df-iwi-root-right('.df-input-datepicker-range') {
-        border-left: var(--#{$prefix}iwi-dpr-to-border-left) !important;
-        border-top-left-radius: var(--#{$prefix}iwi-dpr-to-border-radius-top-left);
-        border-bottom-left-radius: var(--#{$prefix}iwi-dpr-to-border-radius-bottom-left);
-      }
-      @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
-        border-left: var(--#{$prefix}iwi-dpr-focus-border) !important;
-      }
-    }
-    @include rtl {
-      border-left-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-      @include df-iwi-root-right('.df-input-datepicker-range') {
-        border-right: var(--#{$prefix}iwi-dpr-to-border-left) !important;
-        border-top-right-radius: var(--#{$prefix}iwi-dpr-to-border-radius-top-left);
-        border-bottom-right-radius: var(--#{$prefix}iwi-dpr-to-border-radius-bottom-left);
-      }
-      @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
-        border-right: var(--#{$prefix}iwi-dpr-focus-border) !important;
-      }
-    }
-
-    @include df-iwi-root-left('.df-input-datepicker-range.df-focused') {
-      border-top: var(--#{$prefix}iwi-dpr-focus-border) !important;
-      border-bottom: var(--#{$prefix}iwi-dpr-focus-border) !important;
-    }
-
-    @include df-iwi-root-right('.df-input-datepicker-range.df-focused') {
-      border-top: var(--#{$prefix}iwi-dpr-focus-border) !important;
-      border-bottom: var(--#{$prefix}iwi-dpr-focus-border) !important;
-    }
-
-    box-shadow: none; // override mandatory
-    &:focus {
-      @include ltr {
-        border-right-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-      }
-      @include rtl {
-        border-left-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-      }
-      box-shadow: none; // override mandatory
-    }
+    @include df-input-withicon-append();
   }
 
   @each $state, $data in $form-validation-states {
@@ -254,23 +213,7 @@ input[type='search']::-webkit-search-decoration {
 
 .input-group.df-input-prepend {
   input.df-input-withicon.prepend {
-    @include ltr {
-      border-left-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-    }
-    @include rtl {
-      border-right-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-    }
-    box-shadow: none; // override mandatory
-    padding-left: 0px; // override mandatory
-    &:focus {
-      @include ltr {
-        border-left-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-      }
-      @include rtl {
-        border-right-color: var(--#{$prefix}iwi-border-between-color); // override mandatory
-      }
-      box-shadow: none; // override mandatory
-    }
+    @include df-input-withicon-prepend();
   }
 
   @each $state, $data in $form-validation-states {
@@ -308,6 +251,34 @@ input[type='search']::-webkit-search-decoration {
       border-left-color: var(--#{$prefix}iwi-focused-border-between-color);
     }
   }
+
+  &:has(input.df-input-withicon.prepend:focus) {
+    @extend .df-focused;
+  }
+}
+
+.input-group:has(input.df-input-withicon) {
+  &:has(.input-group-append) {
+    @extend .df-input-append;
+  }
+  &:has(.input-group-prepend) {
+    @extend .df-input-prepend;
+  }
+  &:has(input.df-input-withicon:focus) {
+    @extend .df-focused;
+  }
+  .df-input-withicon:has(~ .input-group-append) {
+    @include df-input-withicon-append();
+  }
+  .input-group-prepend ~ .df-input-withicon {
+    @include df-input-withicon-prepend();
+  }
+  .df-input-withicon:disabled ~ .input-group-append {
+    @extend .df-disabled;
+  }
+  .input-group-prepend:has(~ .df-input-withicon:disabled) {
+    @extend .df-disabled;
+  }
 }
 
 .input-group.df-focused {

package/styles/scss/components/pagination/_pagination.scss

@@ -28,11 +28,13 @@
   --#{$prefix}pagination-icon-hover-color: #{$df-pagination-icon-hover-color};
   --#{$prefix}box-shadow-color: #{$df-pagination-box-shadow-color};
   --#{$prefix}pagination-active-link-bg: #{$df-pagination-active-link-bg};
+  --#{$prefix}pagination-active-link-font-weight: #{$df-pagination-active-link-font-weight};
 
   margin-bottom: var(--#{$prefix}pagination-margin-bottom);
   .page-item {
     @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
       &.active > .page-link {
+        font-weight: var(--#{$prefix}pagination-active-link-font-weight);
         &:hover {
           background-color: var(--#{$prefix}pagination-hover-bg);
           color: var(--#{$prefix}pagination-hover-color);

package/styles/scss/components/pagination/_pagination.variables.scss

@@ -4,6 +4,7 @@ $df-pagination-size-lg: 3rem !default;
 
 $df-pagination-hover-text-decoration: underline !default;
 $df-pagination-active-link-bg: var(--#{$prefix}pagination-hover-bg) !default;
+$df-pagination-active-link-font-weight: bold !default;
 
 $df-pagination-border-radius: $pagination-border-radius !default;
 $df-pagination-border-radius-sm: $pagination-border-radius-sm !default;

package/styles/scss/components/select/_select.scss

@@ -439,6 +439,7 @@
           align-items: center;
           margin-top: var(--#{$prefix}select-value-margin); // override todo depend on sizing
           margin-bottom: var(--#{$prefix}select-value-margin); // override
+          max-width: 100%; // add
           @include ltr {
             padding-right: $input-padding-x;
           }
@@ -501,6 +502,8 @@
     .ng-dropdown-panel .ng-dropdown-panel-items {
       .ng-optgroup,
       .ng-option {
+        white-space: normal;
+        word-break: break-word;
         &.ng-option-selected {
           background-color: var(--#{$prefix}select-optionselected-background-color);
           &.ng-option-marked {

package/styles/scss/themes/brand2023/_variables.scss

@@ -870,6 +870,7 @@ $df-iwi-icon-font-color: var(--#{$prefix}primary) !default;
 $df-link-icononly-color: var(--#{$prefix}gray-700) !default;
 $df-link-icononly-focus-box-shadow-color: $df-link-icononly-color !default;
 $df-link-icononly-height: 2.25rem !default;
+$df-link-icononly-border-radius: 6px !default;
 $df-link-focus-box-shadow: $input-btn-focus-box-shadow !default;
 $df-link-disabled-color: $df-disabled-color !default;
 $df-link-focus-box-shadow-color: var(--#{$prefix}primary-500) !default;