@design-factory/design-factory 17.0.1 → 17.1.0

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

@@ -30,6 +30,7 @@ export declare enum DfNavItemType {
  * Creating a sidenav is straightforward: use [DfSideNavComponent](#/components/sidenav/api#DfSideNavComponent) component
  */
 export declare class DfSideNavService implements OnDestroy {
+    private readonly config;
     type: typeof DfNavItemType;
     private readonly _sideNavItems$;
     private readonly _isMinmized$;

package/lib/index.d.ts

@@ -55,6 +55,7 @@ export { DfSideNavService } from './angular/sidenav/sidenav.service';
 export { DfIfMediaDirective } from './angular/mediaqueries/ifMedia.directive';
 export { DfSideNavModule } from './angular/sidenav/sidenav.module';
 export { DfSideNavComponent } from './angular/sidenav/sidenav.component';
+export { DfSideNavConfig } from './angular/sidenav/sidenav-config';
 export { DfNavItemType } from './angular/sidenav/sidenav.service';
 export { DfSideNavCollapseModule } from './angular/sidenav/dfSideNavCollapse.module';
 export { DfSideNavCollapseDirective } from './angular/sidenav/dfSideNavCollapse';

package/package.json

@@ -2,26 +2,23 @@
   "name": "@design-factory/design-factory",
   "description": "Amadeus design system",
   "license": "BSD-3-Clause",
-  "version": "17.0.1",
+  "version": "17.1.0",
   "dependencies": {
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@agnos-ui/angular": "^0.1.1",
+    "@agnos-ui/angular": "^0.2.0",
     "@angular/common": "^17.1.0",
     "@angular/core": "^17.1.0",
     "@angular/localize": "^17.1.0",
     "@angular/router": "^17.1.0",
     "@ng-bootstrap/ng-bootstrap": "~16.0.0",
-    "@ng-select/ng-select": "~12.0.6",
-    "ag-grid-angular": "~31.0.2",
-    "ag-grid-community": "~31.0.2",
-    "bootstrap": "5.3.2"
+    "@ng-select/ng-select": "~12.0.7",
+    "ag-grid-angular": "~31.1.1",
+    "ag-grid-community": "~31.1.1",
+    "bootstrap": "5.3.3"
   },
   "peerDependenciesMeta": {
-    "@agnos-ui/angular": {
-      "optional": true
-    },
     "@angular/router": {
       "optional": true
     },

package/styles/scss/_variables.scss

@@ -3,6 +3,7 @@
 
 // File to override bootstrap variables
 @import 'bootstrap/variables';
+@import 'bootstrap/variables-dark';
 @import 'bootstrap/scss/variables';
 
 // File to override agnosui variables

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

@@ -67,29 +67,3 @@
     }
   }
 }
-
-@mixin table-variant($state, $background) {
-  .table-#{$state} {
-    $text-color: shades-css-var($state, 'bg-color', true);
-    $hover-bg-color: shades-css-var($state, 'bg-subtle-color');
-    $text-hover-color: shades-css-var($state, 'bg-subtle-color', true);
-    $striped-bg-color: shades-css-var($state, 'bg-subtle-hover-color');
-    $striped-text-color: shades-css-var($state, 'bg-subtle-hover-color', true);
-    $active-bg: shades-css-var($state, 'bg-subtle-active-color');
-    $active-text-color: shades-css-var($state, 'bg-subtle-active-color', true);
-    $border-color: shades-css-var($state, 'border-color');
-    
-    --#{$prefix}table-color: #{$text-color};
-    --#{$prefix}table-bg: #{$background};
-    --#{$prefix}table-border-color: #{$border-color};
-    --#{$prefix}table-striped-bg: #{$striped-bg-color};
-    --#{$prefix}table-striped-color: #{$striped-text-color};
-    --#{$prefix}table-active-bg: #{$active-bg};
-    --#{$prefix}table-active-color: #{$active-text-color};
-    --#{$prefix}table-hover-bg: #{$hover-bg-color};
-    --#{$prefix}table-hover-color: #{$text-hover-color};
-
-    color: var(--#{$prefix}table-color);
-    border-color: var(--#{$prefix}table-border-color);
-  }
-}

package/styles/scss/bootstrap/_variables-dark.scss

@@ -0,0 +1,86 @@
+// stylelint-disable scss/dollar-variable-pattern
+// Dark color mode variables
+//
+// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
+
+//
+// Global colors
+//
+
+// scss-docs-start sass-dark-mode-vars
+// scss-docs-start theme-text-dark-variables
+// $primary-text-emphasis-dark:        tint-color($primary, 40%) !default;
+// $secondary-text-emphasis-dark:      tint-color($secondary, 40%) !default;
+// $success-text-emphasis-dark:        tint-color($success, 40%) !default;
+// $info-text-emphasis-dark:           tint-color($info, 40%) !default;
+// $warning-text-emphasis-dark:        tint-color($warning, 40%) !default;
+// $danger-text-emphasis-dark:         tint-color($danger, 40%) !default;
+// $light-text-emphasis-dark:          $gray-100 !default;
+// $dark-text-emphasis-dark:           $gray-300 !default;
+// scss-docs-end theme-text-dark-variables
+
+// scss-docs-start theme-bg-subtle-dark-variables
+// $primary-bg-subtle-dark:            shade-color($primary, 80%) !default;
+// $secondary-bg-subtle-dark:          shade-color($secondary, 80%) !default;
+// $success-bg-subtle-dark:            shade-color($success, 80%) !default;
+// $info-bg-subtle-dark:               shade-color($info, 80%) !default;
+// $warning-bg-subtle-dark:            shade-color($warning, 80%) !default;
+// $danger-bg-subtle-dark:             shade-color($danger, 80%) !default;
+// $light-bg-subtle-dark:              $gray-800 !default;
+// $dark-bg-subtle-dark:               mix($gray-800, $black) !default;
+// scss-docs-end theme-bg-subtle-dark-variables
+
+// scss-docs-start theme-border-subtle-dark-variables
+// $primary-border-subtle-dark:        shade-color($primary, 40%) !default;
+// $secondary-border-subtle-dark:      shade-color($secondary, 40%) !default;
+// $success-border-subtle-dark:        shade-color($success, 40%) !default;
+// $info-border-subtle-dark:           shade-color($info, 40%) !default;
+// $warning-border-subtle-dark:        shade-color($warning, 40%) !default;
+// $danger-border-subtle-dark:         shade-color($danger, 40%) !default;
+// $light-border-subtle-dark:          $gray-700 !default;
+// $dark-border-subtle-dark:           $gray-800 !default;
+// scss-docs-end theme-border-subtle-dark-variables
+
+// $body-color-dark:                   $gray-300 !default;
+// $body-bg-dark:                      $gray-900 !default;
+// $body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
+// $body-secondary-bg-dark:            $gray-800 !default;
+// $body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
+// $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
+// $body-emphasis-color-dark:          $white !default;
+// $border-color-dark:                 $gray-700 !default;
+// $border-color-translucent-dark:     rgba($white, .15) !default;
+// $headings-color-dark:               inherit !default;
+// $link-color-dark:                   tint-color($primary, 40%) !default;
+// $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
+$code-color-dark: tint-color($pink, 40%) !default;
+// $mark-color-dark:                   $body-color-dark !default;
+// $mark-bg-dark:                      $yellow-800 !default;
+
+//
+// Forms
+//
+
+// $form-select-indicator-color-dark:  $body-color-dark !default;
+// $form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
+
+// $form-switch-color-dark:            rgba($white, .25) !default;
+// $form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
+
+// scss-docs-start form-validation-colors-dark
+// $form-valid-color-dark:             $green-300 !default;
+// $form-valid-border-color-dark:      $green-300 !default;
+// $form-invalid-color-dark:           $red-300 !default;
+// $form-invalid-border-color-dark:    $red-300 !default;
+// scss-docs-end form-validation-colors-dark
+
+//
+// Accordion
+//
+
+// $accordion-icon-color-dark:         $primary-text-emphasis-dark !default;
+// $accordion-icon-active-color-dark:  $primary-text-emphasis-dark !default;
+
+// $accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+// $accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+// scss-docs-end sass-dark-mode-vars

package/styles/scss/bootstrap/_variables.scss

@@ -695,7 +695,7 @@ $lights-mapping: (
 
 $whites-mapping: (
   'bg-color': var(--#{$prefix}white-50),
-  'bg-hover-color': var(--#{$prefix}white-100),
+  'bg-hover-color': var(--#{$prefix}white-200),
   'bg-active-color': var(--#{$prefix}white-200),
   'inert-color': var(--#{$prefix}white-50),
   'bg-subtle-color': var(--#{$prefix}white-50),
@@ -1059,9 +1059,16 @@ $shade-colors: map.merge(
   $map1: $shade-colors,
   $map2: $pacifics
 );
+
+// Grays map does not include gray prefix in the color name by default
+$grays-names: ();
+@each $colorName, $colorValue in $grays {
+  $grays-names: map.set($grays-names, gray-#{$colorName}, $colorValue);
+}
+
 $shade-colors: map.merge(
   $map1: $shade-colors,
-  $map2: $grays
+  $map2: $grays-names
 );
 $shade-colors: map.merge(
   $map1: $shade-colors,
@@ -2166,7 +2173,7 @@ $accordion-icon-active-color: $accordion-icon-color !default;
 // Tooltips
 
 // scss-docs-start tooltip-variables
-$tooltip-font-size: 1em * map.get($df-size-ratios, 'sm') !default; //   $font-size-sm !default;
+// $tooltip-font-size:                 $font-size-sm !default;
 // $tooltip-max-width:                 200px !default;
 // $tooltip-color:                     var(--#{$prefix}body-bg) !default;
 $tooltip-bg: var(--#{$prefix}gray-600) !default;

package/styles/scss/components/brand-color/_brand-color_container.scss

@@ -1,8 +1,3 @@
-// stylelint-disable scss/dollar-variable-pattern
-$shade-colors-rgb: map-loop($shade-colors, to-rgb, "$value") !default;
-$shade-colors-text: map-loop($shade-colors, color-contrast, "$value") !default;
-$shade-colors-text-rgb: map-loop($shade-colors-text, to-rgb, "$value") !default;
-
 #{$df-css-namespace-selector} {
   --#{$prefix}dark-primary: #{$dark-primary};
   --#{$prefix}yellow-rgb: #{to-rgb($yellow)};
@@ -25,4 +20,4 @@ $shade-colors-text-rgb: map-loop($shade-colors-text, to-rgb, "$value") !default;
   @each $color, $value in $shade-colors-text-rgb {
     --#{$prefix}#{$color}-color-rgb: #{$value};
   }
-}
+}

package/styles/scss/components/datepicker/_datepicker.variables.scss

@@ -32,7 +32,7 @@ $df-datepicker-day-hover-color: color-contrast($df-datepicker-day-hover-bg-color
 $df-datepicker-day-hover-text-decoration: underline !default; // why underline here add the reason with UX
 $df-datepicker-day-focus-outline-width: 0.2rem !default;
 $df-datepicker-day-focus-border: ($df-datepicker-day-focus-outline-width + 0.05rem) solid
-  rgba($input-focus-border-color, 0.5) !default;
+  rgba(to-rgb($input-focus-border-color), 0.5) !default;
 $df-datepicker-day-focus-active-z-index: 0 !default;
 $df-datepicker-day-focus-active-border-color: rgba($white, 0.5) !default;
 $df-datepicker-day-focus-active-border-z-index: -1 !default;

package/styles/scss/components/fonts/_fonts.root.scss

@@ -17,6 +17,7 @@
   --#{$prefix}recommend-border-bottom-width: #{$df-recommend-border-bottom-width};
   --#{$prefix}recommend-color: #{$df-recommend-color};
   --#{$prefix}recommend-not-color: #{$df-recommend-not-color};
+  --#{$prefix}recommend-warning-color: #{$df-recommend-warning-color};
   --#{$prefix}caption-letter-spacing: #{$df-caption-letter-spacing};
   --#{$prefix}caption-font-size: #{$df-caption-font-size};
   --#{$prefix}blockquote-letter-spacing: #{$df-blockquote-letter-spacing};
@@ -24,4 +25,4 @@
   --#{$prefix}blockquote-line-height: #{$df-blockquote-line-height};
   --#{$prefix}mark-color: #{$df-mark-color};
   --#{$prefix}font-weight-semi-bold: #{$df-font-weight-semi-bold};
-}
+}

package/styles/scss/components/fonts/_fonts.scss

@@ -64,19 +64,38 @@ mark {
 }
 
 .df-recommend,
-.df-not-recommend {
+.df-not-recommend,
+.df-warning {
   font-size: var(--#{$prefix}recommend-font-size);
   font-weight: var(--#{$prefix}recommend-font-weight);
   line-height: var(--#{$prefix}recommend-line-height);
   border-bottom: var(--#{$prefix}recommend-border-bottom-width) solid;
   padding-bottom: var(--#{$prefix}recommend-padding-bottom);
   margin-bottom: var(--#{$prefix}recommend-margin-bottom);
+  &:before {
+    @extend %df-icon-style;
+    font-weight: $df-icon-solid-font-weight;
+    margin-inline-end: $df-recommend-icon-margin-inline-end;
+  }
 }
 
 .df-recommend {
   color: var(--#{$prefix}recommend-color);
+  &:before {
+    content: '\ea19'; // icon-check-circle
+  }
 }
 
 .df-not-recommend {
   color: var(--#{$prefix}recommend-not-color);
+  &:before {
+    content: '\ec97'; // icon-minus-circle
+  }
+}
+
+.df-warning {
+  color: var(--#{$prefix}recommend-warning-color);
+  &:before {
+    content: '\eafc'; // icon-exclamation-triangle
+  }
 }

package/styles/scss/components/fonts/_fonts.variables.scss

@@ -18,6 +18,8 @@ $df-recommend-margin-bottom: 1rem !default;
 $df-recommend-border-bottom-width: 3 * $border-width !default;
 $df-recommend-color: shades-css-var('success', 'text-color') !default;
 $df-recommend-not-color: shades-css-var('danger', 'text-color') !default;
+$df-recommend-warning-color: shades-css-var('warning', 'text-color') !default;
+$df-recommend-icon-margin-inline-end: 0.5rem !default;
 
 $df-caption-letter-spacing: 0.025rem !default;
 $df-caption-font-size: 0.875rem !default;

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

@@ -1,5 +1,10 @@
 @use 'sass:map';
 
+.form-select,
+.ng-select {
+  --#{$prefix}form-select-focus-border-color: #{$form-select-focus-border-color};
+}
+
 /* Native select */
 .form-select {
   --#{$prefix}box-shadow-color: #{$input-focus-border-color};
@@ -13,14 +18,14 @@
         --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'border-color')};
       } @else {
         --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
-        --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity($colorName, 'border-color')}
+        --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity($colorName, 'border-color')};
       }
     }
   }
 
   &:focus {
     // override
-    border-color: $input-focus-border-color;
+    border-color: var(--#{$prefix}form-select-focus-border-color);
   }
 
   &:not([disabled]) {
@@ -40,13 +45,13 @@
   &:not([multiple]):disabled {
     // override
     @include ltr {
-      background: $form-select-disabled-bg var(--#{$prefix}select-indicator-disabled) no-repeat right $form-select-padding-x
-        center;
+      background: $form-select-disabled-bg var(--#{$prefix}select-indicator-disabled) no-repeat right
+        $form-select-padding-x center;
       background-size: $form-select-bg-size;
     }
     @include rtl {
-      background: $form-select-disabled-bg var(--#{$prefix}select-indicator-disabled) no-repeat left $form-select-padding-x
-        center;
+      background: $form-select-disabled-bg var(--#{$prefix}select-indicator-disabled) no-repeat left
+        $form-select-padding-x center;
       background-size: $form-select-bg-size;
     }
   }
@@ -172,9 +177,9 @@
     --#{$prefix}box-shadow-color: #{$input-focus-border-color};
   } @else {
     --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
-    --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity('primary', 'border-color')}
+    --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity('primary', 'border-color')};
   }
-  
+
   &.form-control {
     // add
     padding: 0;
@@ -278,7 +283,7 @@
       }
     }
   }
-   &.df-ng-select-readonly {
+  &.df-ng-select-readonly {
     // add
     > .ng-select-container {
       background-color: var(--#{$prefix}select-readonly-bg);
@@ -303,7 +308,7 @@
         --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'border-color')};
       } @else {
         --#{$prefix}border-color-opacity: #{$input-btn-focus-color-opacity};
-        --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity($colorName, 'border-color')}
+        --#{$prefix}box-shadow-color: #{shades-rgba-css-var-with-opacity($colorName, 'border-color')};
       }
       $color: map.get($data, color);
       $box-shadow: $df-select-input-box-shadow;
@@ -564,7 +569,6 @@
     }
   }
 
-
   .ng-spinner-zone {
     padding-right: 0.3125rem; // todo check when feature is needed
     padding-top: 0.3125rem; // todo check when feature is needed
@@ -797,4 +801,4 @@
       }
     }
   }
-}
+}

package/styles/scss/components/tabs/_tabs.scss

@@ -22,12 +22,8 @@
   --#{$prefix}tabs-secondary-active-border-right: #{$df-tabs-secondary-active-border-right};
   --#{$prefix}tabs-secondary-active-border-bottom: #{$df-tabs-secondary-active-border-bottom};
   --#{$prefix}tabs-secondary-active-margin-bottom: #{$df-tabs-secondary-active-margin-bottom};
-
-  --#{$prefix}tabs-content-tab-pane-padding: #{$df-tabs-content-tab-pane-padding};
-  --#{$prefix}tabs-content-border-style: #{$df-tabs-content-border-style};
-  --#{$prefix}tabs-content-border-color: #{$df-tabs-content-border-color};
-  --#{$prefix}tabs-content-border-width: #{$df-tabs-content-border-width};
   --#{$prefix}tabs-item-active-font-weight: #{$df-tabs-item-active-font-weight};
+  --#{$prefix}tabs-cursor-disabled: #{$df-tabs-cursor-disabled};
 
   @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
     --#{$prefix}box-shadow-color: var(--#{$prefix}nav-link-color);
@@ -41,7 +37,8 @@
     padding-top: var(--#{$prefix}tabs-padding-y); // add
     padding-bottom: var(--#{$prefix}tabs-padding-y); // add
 
-    &.active { // add
+    &.active {
+      // add
       font-weight: var(--#{$prefix}tabs-item-active-font-weight);
     }
 
@@ -80,6 +77,18 @@
     }
   }
 
+  .nav-link.disabled,
+  .nav-link:disabled {
+    pointer-events: auto;
+    cursor: var(--#{$prefix}tabs-cursor-disabled);
+
+    &:focus {
+      color: var(--df-nav-link-disabled-color);
+      outline: none;
+      box-shadow: none;
+    }
+  }
+
   .nav-item + .nav-item {
     // add
     margin-left: var(--#{$prefix}tabs-between-item-margin); // add
@@ -94,6 +103,16 @@
   }
 }
 
+.tab-content {
+  --#{$prefix}tabs-content-tab-pane-padding: #{$df-tabs-content-tab-pane-padding};
+  --#{$prefix}tabs-content-border-style: #{$df-tabs-content-border-style};
+  --#{$prefix}tabs-content-border-color: #{$df-tabs-content-border-color};
+  --#{$prefix}tabs-content-border-width: #{$df-tabs-content-border-width};
+  > .tab-pane {
+    padding: var(--#{$prefix}tabs-content-tab-pane-padding); //add
+  }
+}
+
 %secondary {
   .nav-link {
     border-bottom: var(--#{$prefix}tabs-secondary-border-bottom); // add
@@ -143,12 +162,6 @@
   @extend %secondary;
 }
 
-.tab-content {
-  > .tab-pane {
-    padding: var(--#{$prefix}tabs-content-tab-pane-padding); //add
-  }
-}
-
 %secondary-content {
   border-style: var(--#{$prefix}tabs-content-border-style); //add
   border-color: var(--#{$prefix}tabs-content-border-color); //add
@@ -161,12 +174,13 @@
 }
 
 .nav {
- &.nav-pills[role=tablist] { // role=tablist is to target only tabset as pill and not scrollspy
-  .nav-link {
-    &:focus {
-      outline: 0;
-      box-shadow: $df-tabs-focus-box-shadow;
+  &.nav-pills[role='tablist'] {
+    // role=tablist is to target only tabset as pill and not scrollspy
+    .nav-link {
+      &:focus {
+        outline: 0;
+        box-shadow: $df-tabs-focus-box-shadow;
+      }
     }
   }
- }
 }

package/styles/scss/components/tabs/_tabs.variables.scss

@@ -7,6 +7,7 @@ $df-tabs-hover-border-bottom: 2px solid transparent !default;
 $df-tabs-hover-text-decoration: underline !default;
 $df-tabs-hover-bg-color: $df-hover-bg-color !default;
 $df-tabs-disabled-text-decoration: none !default;
+$df-tabs-cursor-disabled: var(--#{$prefix}disabled-cursor) !default;
 // TODO rem instead of px
 $df-tabs-between-item-margin: 3px !default;
 $df-tabs-active-border-bottom: 3px solid shades-css-var('primary', 'inert-color') !default;

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

@@ -469,8 +469,6 @@ $df-btn-focus-box-shadow:
   0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
 $df-btn-focus-box-shadow-color: rgba(var(--#{$prefix}btn-focus-shadow-rgb), 1) !default;
 $df-btn-check-active-property: 'bg-active-color' !default;
-$df-btn-bg-color: var(--#{$prefix}white) !default;
-$df-btn-focus-only-bg-color: var(--#{$prefix}white) !default;
 $df-btn-outline-focus-box-shadow-color: var(--#{$prefix}btn-color) !default;
 
 // Button close