@design-factory/design-factory 17.1.0 → 18.0.1

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

@@ -1,3 +1,4 @@
+@use 'sass:meta';
 // Work around due to the use of a namespace design-factory
 .form-inline .form-select {
   width: 100%;
@@ -15,6 +16,30 @@
   }
 }
 
+%dot-highlight {
+  position: relative;
+
+  &:before {
+    content: '.';
+    font-weight: bold;
+    display: inline-block;
+
+    /* position the dot underneath the character */
+    position: absolute;
+    bottom: 0;
+    @include ltr {
+      left: 0;
+    }
+    @include rtl {
+      right: 0;
+    }
+
+    /* center the dot horizontally */
+    text-align: center;
+    width: 100%;
+  }
+}
+
 .ngb-dp-arrow {
   justify-content: var(--#{$prefix}datepicker-navigation-arrow-justify-contents);
 
@@ -24,16 +49,19 @@
     min-width: var(--#{$prefix}datepicker-arrow-width);
     height: var(--#{$prefix}datepicker-arrow-height);
     border-radius: var(--#{$prefix}datepicker-arrow-border-radius);
-    @extend %df-icon-style;
+
     &:focus {
       outline: $df-datepicker-focused-outline;
       box-shadow: $df-datepicker-focused-box-shadow;
     }
+
     text-decoration: none;
+
     &:not(:disabled):not(.disabled):active {
       text-decoration: none;
       color: $df-font-icon-color;
     }
+
     &:disabled,
     &.disabled {
       color: var(--#{$prefix}datepicker-arrow-disabled-color);
@@ -42,18 +70,20 @@
 
   &.ngb-dp-arrow-prev {
     .ngb-dp-arrow-btn {
-      @extend .icon-chevron-left;
+      font-family: $df-font-awesome-font-family;
+      @extend .fa-chevron-left;
       @include rtl {
-        @extend .icon-chevron-right;
+        @extend .fa-chevron-right;
       }
     }
   }
 
   &.ngb-dp-arrow-next {
     .ngb-dp-arrow-btn {
-      @extend .icon-chevron-right;
+      font-family: $df-font-awesome-font-family;
+      @extend .fa-chevron-right;
       @include rtl {
-        @extend .icon-chevron-left;
+        @extend .fa-chevron-left;
       }
     }
   }
@@ -117,9 +147,14 @@ ngb-datepicker {
   --#{$prefix}datepicker-arrow-height: #{$df-datepicker-arrow-height};
   --#{$prefix}datepicker-arrow-border-radius: #{$df-datepicker-arrow-border-radius};
   --#{$prefix}datepicker-arrow-disabled-color: #{$df-datepicker-arrow-disabled-color};
+  --#{$prefix}datepicker-border-radius: #{$df-datepicker-border-radius};
+  --#{$prefix}datepicker-today-border: #{$df-datepicker-today-border};
 
+  border-radius: var(--#{$prefix}datepicker-border-radius) !important;
   border: var(--#{$prefix}datepicker-panel-border) !important;
   padding: var(--#{$prefix}datepicker-padding);
+  box-shadow: var(--#{$prefix}datepicker-box-shadow);
+
   &.dropdown-menu.show {
     padding: var(--#{$prefix}datepicker-padding);
     box-shadow: var(--#{$prefix}datepicker-box-shadow);
@@ -131,6 +166,7 @@ ngb-datepicker {
     background-color: inherit;
     padding-top: var(--#{$prefix}datepicker-padding-deactivate);
   }
+
   .ngb-dp-month {
     &:first-child .ngb-dp-week {
       @include ltr {
@@ -140,6 +176,7 @@ ngb-datepicker {
         padding-right: var(--#{$prefix}datepicker-padding-deactivate);
       }
     }
+
     &:last-child .ngb-dp-week {
       @include ltr {
         padding-right: var(--#{$prefix}datepicker-padding-deactivate);
@@ -148,10 +185,12 @@ ngb-datepicker {
         padding-left: var(--#{$prefix}datepicker-padding-deactivate);
       }
     }
+
     .ngb-dp-week:last-child {
       padding-bottom: var(--#{$prefix}datepicker-padding-deactivate);
     }
   }
+
   .ngb-dp-month-name {
     background-color: inherit;
     font-size: var(--#{$prefix}datepicker-navigation-literal-font-size);
@@ -163,6 +202,7 @@ ngb-datepicker {
     flex: var(--#{$prefix}datepicker-navigation-arrow-flex);
     width: var(--#{$prefix}datepicker-day-size);
     height: var(--#{$prefix}datepicker-day-size);
+
     button.btn {
       color: var(--#{$prefix}datepicker-navigation-arrow-color);
     }
@@ -184,6 +224,7 @@ ngb-datepicker {
     width: var(--#{$prefix}datepicker-day-side);
     height: var(--#{$prefix}datepicker-day-side);
     outline: var(--#{$prefix}datepicker-day-focus-outline);
+
     &.disabled {
       // override the default look
       cursor: initial;
@@ -191,6 +232,7 @@ ngb-datepicker {
     }
   }
 }
+
 .df-datepicker-date {
   height: var(--#{$prefix}datepicker-day-size);
   width: var(--#{$prefix}datepicker-day-size);
@@ -201,9 +243,16 @@ ngb-datepicker {
   justify-content: var(--#{$prefix}datepicker-day-justify-content);
 
   &.holiday {
-    // important is needed because of the view encapsulation of ng-bootstrap
-    color: #{shades-css-var('orange', 'bg-color', true)} !important;
-    background-color:  #{shades-css-var('orange', 'bg-color')} !important;
+    @if meta.variable-exists($name: 'df-initialBranding') and $df-initialBranding {
+      // important is needed because of the view encapsulation of ng-bootstrap
+      color: #{shades-css-var('orange', 'bg-color', true)} !important;
+      background-color: #{shades-css-var('orange', 'bg-color')} !important;
+    } @else if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      @extend %dot-highlight;
+      color: #{shades-css-var('white', 'bg-color', true)} !important;
+      background-color: #{shades-css-var('white', 'bg-color')} !important;
+      // TODO: add the disabled state?
+    }
   }
 
   &.df-datepicker-date-disabled {
@@ -211,15 +260,18 @@ ngb-datepicker {
     opacity: var(--#{$prefix}datepicker-day-disabled-opacity);
     cursor: var(--#{$prefix}datepicker-day-disabled-cursor);
   }
+
   &.df-datepicker-date-selected {
     background-color: var(--#{$prefix}datepicker-day-active-bg-color);
     color: var(--#{$prefix}datepicker-day-active-color);
     font-weight: var(--#{$prefix}datepicker-day-font-weight);
   }
+
   &.df-datepicker-date-focused,
   .ngb-dp-arrow button:focus {
     border: 0px none;
     position: relative;
+
     &:after {
       content: '';
       display: block;
@@ -228,7 +280,9 @@ ngb-datepicker {
       bottom: calc(-1 * var(--#{$prefix}datepicker-day-focus-outline-width));
       left: calc(-1 * var(--#{$prefix}datepicker-day-focus-outline-width));
       right: calc(-1 * var(--#{$prefix}datepicker-day-focus-outline-width));
-      border-radius: var(--#{$prefix}datepicker-day-border-radius) + var(--#{$prefix}datepicker-day-focus-outline-width);
+      border-radius: calc(
+        var(--#{$prefix}datepicker-day-border-radius) + var(--#{$prefix}datepicker-day-focus-outline-width)
+      );
       border: var(--#{$prefix}datepicker-day-focus-border);
     }
   }
@@ -241,6 +295,7 @@ ngb-datepicker {
 
   &.df-datepicker-date-from {
     border-radius: var(--#{$prefix}datepicker-day-border-radius) 0 0 var(--#{$prefix}datepicker-day-border-radius);
+
     &.df-datepicker-date-focused:after {
       border-radius: var(--#{$prefix}datepicker-day-border-radius) 0 0 var(--#{$prefix}datepicker-day-border-radius);
     }
@@ -248,6 +303,7 @@ ngb-datepicker {
 
   &.df-datepicker-date-to {
     border-radius: 0 var(--#{$prefix}datepicker-day-border-radius) var(--#{$prefix}datepicker-day-border-radius) 0;
+
     &.df-datepicker-date-focused:after {
       border-radius: 0 var(--#{$prefix}datepicker-day-border-radius) var(--#{$prefix}datepicker-day-border-radius) 0;
     }
@@ -255,9 +311,11 @@ ngb-datepicker {
 
   &.df-datepicker-date-between {
     border-radius: 0;
+
     &.df-datepicker-date-focused:after {
       border-radius: 0;
     }
+
     background-color: var(--#{$prefix}datepicker-day-range-bg-color);
     color: var(--#{$prefix}datepicker-day-range-color);
     font-weight: var(--#{$prefix}datepicker-day-font-weight);
@@ -265,25 +323,11 @@ ngb-datepicker {
 }
 
 .ngb-dp-today .df-datepicker-date {
-  font-weight: var(--#{$prefix}datepicker-day-font-weight);
-  position: relative;
-  &:before {
-    content: '.';
-    display: inline-block;
-
-    /* position the dot underneath the character */
-    position: absolute;
-    bottom: 0;
-    @include ltr {
-      left: 0;
-    }
-    @include rtl {
-      right: 0;
-    }
-
-    /* center the dot horizontally */
-    text-align: center;
-    width: 100%;
+  @if meta.variable-exists($name: 'df-initialBranding') and $df-initialBranding {
+    font-weight: var(--#{$prefix}datepicker-day-font-weight);
+    @extend %dot-highlight;
+  } @else if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    border: var(--#{$prefix}datepicker-today-border);
   }
 }
 
@@ -293,12 +337,24 @@ ngb-datepicker {
 }
 
 .df-input-datepicker-range {
+  --#{$prefix}input-datepicker-range-border: #{$df-input-datepicker-range-border};
+  --#{$prefix}input-datepicker-range-white-space: #{$df-input-datepicker-range-white-space};
+  --#{$prefix}input-datepicker-range-padding: #{$df-input-datepicker-range-padding};
+  --#{$prefix}input-datepicker-range-after-display: #{$df-input-datepicker-range-after-display};
+
   &.df-focused {
+    --#{$prefix}box-shadow-color: #{$df-input-datepicker-range-box-shadow-color};
     border: var(--#{$prefix}input-datepicker-range-border);
+
+    .input-group {
+      --#{$prefix}iwi-dpr-focus-border: #{$df-input-datepicker-range-focus-border};
+    }
   }
+
   .dropdown-toggle {
     white-space: var(--#{$prefix}input-datepicker-range-white-space);
     padding: var(--#{$prefix}input-datepicker-range-padding) !important;
+
     &:after {
       // TODO remove this when it is possible to remove the arrow from ng-bootstrap feature
       display: var(--#{$prefix}input-datepicker-range-after-display);

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

@@ -31,13 +31,14 @@ $df-datepicker-day-hover-bg-color: $df-hover-bg-color !default;
 $df-datepicker-day-hover-color: color-contrast($df-datepicker-day-hover-bg-color) !default;
 $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(to-rgb($input-focus-border-color), 0.5) !default;
+$df-datepicker-day-focus-border-width: $df-datepicker-day-focus-outline-width + 0.05rem !default;
+$df-datepicker-day-focus-border-color: rgba(to-rgb($input-focus-border-color), 0.5) !default;
+$df-datepicker-day-focus-border: $df-datepicker-day-focus-border-width solid $df-datepicker-day-focus-border-color !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;
 $df-datepicker-day-range-bg-color: $df-primary-lighten-60 !default;
-$df-datepicker-day-range-color: shades-css-var('primary', 'bg-color') !default;
+$df-datepicker-day-range-color: var(--#{prefix}cloud-100-color) !default;
 $df-datepicker-input-invalid-color: $danger !default;
 $df-datepicker-input-invalid-z-index: 3 !default;
 $df-datepicker-menu-border: $border-width solid $border-color !default;
@@ -47,6 +48,8 @@ $df-datepicker-panel-border: $df-datepicker-menu-border !default;
 $df-datepicker-range-dropdown-padding: 0 !default;
 $df-datepicker-range-dropdown-border: none !default;
 $df-input-datepicker-range-border: none !default;
+$df-input-datepicker-range-box-shadow-color: inherit !default;
+$df-input-datepicker-range-focus-border: $df-focused-border !default;
 $df-input-datepicker-range-white-space: initial !default;
 $df-input-datepicker-range-padding: 0 !default;
 $df-input-datepicker-range-after-display: none !default;
@@ -57,3 +60,5 @@ $df-datepicker-arrow-border-radius: 50% !default;
 $df-datepicker-arrow-disabled-color: var(--#{$prefix}disabled-color) !default;
 $df-datepicker-focused-box-shadow: $df-focused-box-shadow !default;
 $df-datepicker-focused-outline: var(--#{$prefix}focus-outline) !default;
+$df-datepicker-border-radius: 0.25rem !default; // ng-bootstrap default
+$df-datepicker-today-border: none !default;

package/styles/scss/components/dropdown/_dropdown.mixins.scss

@@ -1,26 +1,8 @@
 @mixin df-dropdown-toggle($up, $down) {
   &#{$up} .dropdown-toggle:after {
-    content: '\ea38'; // icon-chevron-up
+    content: '\f077'; // fa-chevron-up
   }
   &#{$down} .dropdown-toggle:after {
-    content: '\ea31'; // icon-chevron-down
-  }
-}
-
-@mixin df-dropdown-orientation($ltr-right, $ltr-left) {
-  .dropdown-toggle:not(.df-standalone-dropdown-toggle) {
-    padding-#{$ltr-right}: var(--#{$prefix}dropdown-toggle-padding);
-    &:after {
-      margin-#{$ltr-left}: var(--#{$prefix}dropdown-toggle-margin);
-    }
-    & > [class*='icon-']:before {
-      margin-#{$ltr-right}: var(--#{$prefix}dropdown-toggle-margin);
-    }
-  }
-  .dropdown-menu {
-    text-align: #{$ltr-left};
-  }
-  .btn-primary.dropdown-toggle-split {
-    border-#{$ltr-left}-color: var(--#{$prefix}dropdown-toggle-border-color-primary);
+    content: '\f078'; // fa-chevron-down
   }
 }

package/styles/scss/components/dropdown/_dropdown.scss

@@ -1,3 +1,5 @@
+@use 'sass:meta';
+
 @import 'dropdown.mixins';
 
 .dropdown,
@@ -5,6 +7,7 @@ body {
   //Dropdown is default
   @include df-dropdown-toggle('.show', '');
 }
+
 .dropup {
   @include df-dropdown-toggle('', '.show');
 }
@@ -18,6 +21,7 @@ body,
   --#{$prefix}dropdown-item-focus-text-decoration: #{$df-dropdown-item-focus-text-decoration};
   --#{$prefix}dropdown-item-focus-border-radius: #{$df-dropdown-item-focus-border-radius};
   --#{$prefix}dropdown-item-border-width: #{$df-dropdown-item-border-width};
+  --#{$prefix}dropdown-item-focus-bg: #{$df-dropdown-item-focus-bg};
   --#{$prefix}dropdown-toggle-font: #{$df-dropdown-toggle-font};
   --#{$prefix}dropdown-toggle-font-weight: #{$df-dropdown-toggle-font-weight};
   --#{$prefix}dropdown-toggle-padding: #{$df-dropdown-toggle-padding};
@@ -28,58 +32,108 @@ body,
   --#{$prefix}dropdown-disabled-pointer: #{$df-dropdown-disabled-pointer};
   --#{$prefix}dropdown-disabled-color: #{$df-dropdown-disabled-color};
 
-  @include ltr {
-    @include df-dropdown-orientation('right', 'left');
+  .btn-primary.dropdown-toggle-split {
+    border-inline-start-color: var(--#{$prefix}dropdown-toggle-border-color-primary);
   }
-  @include rtl {
-    @include df-dropdown-orientation('left', 'right');
+
+  .show > .btn:not(:disabled):not(.disabled).dropdown-toggle:not(.nav-link) {
+    &:focus-visible {
+      --#{$prefix}box-shadow-color: var(--#{$prefix}btn-active-bg);
+      --#{$prefix}btn-focus-only-border-color: var(--#{$prefix}btn-active-bg);
+    }
+
+    &:hover:not(.btn-outline-primary) {
+      --#{$prefix}btn-active-bg: var(--#{$prefix}btn-hover-bg);
+      --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-hover-bg);
+    }
+
+    &.btn-outline-primary {
+      --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-hover-color);
+      &:hover {
+        --#{$prefix}btn-active-bg: var(--#{$prefix}btn-hover-bg);
+        --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-hover-border-color);
+        --#{$prefix}btn-active-color: var(--#{$prefix}btn-hover-color);
+      }
+      &:focus-visible {
+        --#{$prefix}box-shadow-color: var(--#{$prefix}btn-hover-color);
+        --#{$prefix}btn-focus-only-border-color: var(--#{$prefix}btn-hover-color);
+      }
+    }
   }
-  .dropdown-toggle {
+
+  .dropdown-toggle:not(.df-standalone-dropdown-toggle) {
+    padding-inline-end: var(--#{$prefix}dropdown-toggle-padding);
+
     &:after {
+      font-family: $df-font-awesome-font-family;
       border: none;
-      font-family: var(--#{$prefix}dropdown-toggle-font);
+      margin-inline-start: var(--#{$prefix}dropdown-toggle-margin);
       line-height: var(--#{$prefix}dropdown-toggle-line-height); //Fix Chrome bug
       font-weight: var(--#{$prefix}dropdown-toggle-font-weight); // Fix IE11 bug
     }
-    &.df-standalone-dropdown-toggle:after{
-      content: none; //remove chevron icon
+
+    & > [class*='icon-']:before {
+      margin-inline-end: var(--#{$prefix}dropdown-toggle-margin);
     }
   }
-  .dropdown-toggle-split.dropdown-toggle-split {
+
+  .dropdown-toggle.df-standalone-dropdown-toggle:after {
+    content: none; //remove chevron icon
+  }
+
+  .dropdown-toggle-split {
+    --#{$prefix}dropdown-toggle-padding: var(--#{$prefix}dropdown-toggle-split-padding-x);
     padding-left: var(--#{$prefix}dropdown-toggle-split-padding-x);
     padding-right: var(--#{$prefix}dropdown-toggle-split-padding-x);
+
     &:after {
-      margin: 0;
+      --#{$prefix}dropdown-toggle-margin: 0;
     }
   }
 }
 
 .dropdown-menu {
+  text-align: start;
+
   hr {
     margin-top: var(--#{$prefix}dropdown-separator-margin-y);
     margin-bottom: var(--#{$prefix}dropdown-separator-margin-y);
     border-color: var(--#{$prefix}dropdown-separator-color);
   }
+
   box-shadow: $df-box-shadow;
 }
+
 .dropdown-item {
   border: var(--#{$prefix}dropdown-item-border-width) solid transparent;
+
   &:focus,
   &.focus {
-    @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
       --#{$prefix}box-shadow-color: #{shades-css-var('primary', 'bg-subtle-active-color', true)};
     }
-    box-shadow: $df-focused-box-shadow;
+    box-shadow: $df-focused-inset-box-shadow;
     border: $df-dropdown-item-focused-border;
     outline: var(--#{$prefix}focus-outline);
     border-radius: var(--#{$prefix}dropdown-item-focus-border-radius);
+
     &:not(:hover) {
       text-decoration: var(--#{$prefix}dropdown-item-focus-text-decoration);
+      background-color: var(--#{$prefix}dropdown-item-focus-bg);
+    }
+
+    &.active,
+    &:active {
+      background-color: var(--#{$prefix}dropdown-link-active-bg);
+      --#{$prefix}inner-box-shadow-color: var(--#{$prefix}dropdown-link-active-bg);
     }
   }
+
   &:hover {
     text-decoration: var(--#{$prefix}dropdown-item-hover-text-decoration);
+    --#{$prefix}inner-box-shadow-color: var(--#{$prefix}dropdown-link-hover-bg);
   }
+
   &.disabled,
   &:disabled {
     cursor: var(--#{$prefix}dropdown-disabled-pointer);
@@ -90,12 +144,10 @@ body,
 }
 
 // Flag Angular
-// This style is needed due to a discrepancy between ngbootstrap and bootstrap split dropdown
-// Only LTR is needed as the RTL case is already properly handled by the global override
+// This style is needed due to a drop-start feature of bootstrap where the first child of the
+// btn-group with dropdown-toggle-split class has no rounded corners
 .btn-group.dropdown[ngbdropdown] {
-  .dropdown-toggle-split.dropdown-toggle-split {
-    @include ltr {
-      @include border-end-radius($btn-border-radius);
-    }
+  .dropdown-toggle-split {
+    @include border-end-radius($btn-border-radius);
   }
 }

package/styles/scss/components/dropdown/_dropdown.variables.scss

@@ -2,17 +2,21 @@
 
 $df-dropdown-separator-margin-y: 0.5rem !default;
 $df-dropdown-separator-color: var(--#{$prefix}gray-500) !default; // TODO aligned with separator ?
-$df-dropdown-item-hover-text-decoration: underline !default;
+$df-dropdown-item-hover-text-decoration: unset !default;
 $df-dropdown-item-focus-text-decoration: $df-dropdown-item-hover-text-decoration !default;
 $df-dropdown-item-focus-border-radius: 0 !default;
 $df-dropdown-item-border-width: $border-width !default;
-$df-dropdown-toggle-font: Design-Factory-icon !default;
+$df-dropdown-item-focus-bg: var(--#{$prefix}gray-100) !default;
+$df-dropdown-toggle-font: Font Awesome 6 Pro !default;
 $df-dropdown-toggle-font-weight: $font-weight-base !default;
 $df-dropdown-toggle-padding: 0.75em !default;
 $df-dropdown-toggle-split-padding-x: 0.5em !default;
 $df-dropdown-toggle-margin: $df-dropdown-toggle-padding !default;
 $df-dropdown-toggle-line-height: 1rem !default;
-$df-dropdown-toggle-border-color-primary: color.adjust(color.adjust($primary, $saturation: -44.17%), $lightness: 31.96%) !default;
+$df-dropdown-toggle-border-color-primary: color.adjust(
+  color.adjust($primary, $saturation: -44.17%),
+  $lightness: 31.96%
+) !default;
 $df-dropdown-disabled-pointer: var(--#{$prefix}disabled-cursor) !default;
 $df-dropdown-disabled-color: $df-btn-outline-disabled-text-color !default;
 $df-dropdown-item-focused-border: $df-focused-border !default;