@design-factory/design-factory 17.0.1 → 17.0.2

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,7 +2,7 @@
   "name": "@design-factory/design-factory",
   "description": "Amadeus design system",
   "license": "BSD-3-Clause",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "dependencies": {
     "tslib": "^2.0.0"
   },

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.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/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;