@ihk-gfi/lux-components-theme 16.2.0 → 18.0.0

package/src/base/components/_luxFormControlsAuthentic.scss

@@ -6,9 +6,39 @@
 @use "../luxfocus";
 @use "../../base/luxSvgIcons" as luxicons;
 
+/*
+ * Theming for LUX-Autocomplete
+ */
+div.mat-mdc-autocomplete-panel.lux-autocomplete-panel-ac {
+  padding-top: 0;
+  padding-bottom: 0;
+
+  mat-option {
+    .mat-pseudo-checkbox {
+      display: none;
+    }
+  }
+}
+
 /*
  * Theming for LUX-Select
  */
+.mat-mdc-select-panel {
+  --mat-full-pseudo-checkbox-selected-checkmark-color: #ffffff;
+}
+
+div.mat-mdc-select-panel.lux-select-panel-ac {
+  padding-top: 0;
+  padding-bottom: 0;
+
+  .mat-mdc-option {
+    --mat-option-selected-state-label-text-color: #ffffff;
+    --mat-option-selected-state-layer-color: #{luxcommon.$lux-hover-color};
+    --mat-option-focus-state-layer-color: #{luxcommon.$lux-hover-color};
+    --mat-option-hover-state-layer-color: #{luxcommon.$lux-hover-color};
+  }
+}
+
 lux-select-ac,
 lux-lookup-combobox-ac {
   mat-select {
@@ -17,12 +47,12 @@ lux-lookup-combobox-ac {
     // bisher noch nicht klar, warum das mat-select einen Pixel an Höhe mehr beansprucht, als es tatsächlich Hoch ist
     // daher wird hier die Höhe korrigiert, damit die Baseline eingehalten ist
 
-    .mat-select-arrow-wrapper {
+    .mat-mdc-select-arrow-wrapper {
       margin-left: 2px;
       height: 24px;
       width: 24px;
 
-      .mat-select-arrow {
+      .mat-mdc-select-arrow {
         border: none;
         width: 100%;
         height: 100%;
@@ -39,24 +69,24 @@ lux-lookup-combobox-ac {
       }
     }
 
-    &[aria-disabled="true"] .mat-select-arrow {
-      background-color: luxcommon.$dark-disabled-text;
-    }
-
-    &[aria-disabled="false"] .mat-select-arrow {
-      background-color: luxpalette.$lux-primary-color;
-    }
-
     &[aria-readonly="true"] {
-      .mat-select-arrow {
+      .mat-mdc-select-arrow {
         background-color: luxcommon.$dark-disabled-text;
       }
-      .mat-select-trigger {
+      .mat-mdc-select-trigger {
         cursor: text;
       }
     }
 
-    &[aria-readonly="false"] .mat-select-arrow {
+    &[aria-readonly="false"] .mat-mdc-select-arrow {
+      background-color: luxpalette.$lux-primary-color;
+    }
+
+    &[aria-disabled="true"] .mat-mdc-select-arrow {
+      background-color: luxcommon.$dark-disabled-text;
+    }
+
+    &[aria-disabled="false"] .mat-mdc-select-arrow {
       background-color: luxpalette.$lux-primary-color;
     }
   }
@@ -72,27 +102,13 @@ lux-lookup-combobox-ac {
   .mat-option {
     font-family: luxcommon.$app-font-family;
   }
-  .mat-autocomplete-panel.lux-autocomplete-panel-ac,
-  .mat-autocomplete-panel.lux-autocomplete-panel-dense-ac,
-  .mat-select-panel.lux-select-panel-ac,
-  .mat-select-panel.lux-select-panel-ac-multiple {
+  .mat-mdc-autocomplete-panel.lux-autocomplete-panel-ac,
+  .mat-mdc-autocomplete-panel.lux-autocomplete-panel-dense-ac,
+  .mat-mdc-select-panel.lux-select-panel-ac,
+  .mat-mdc-select-panel.lux-select-panel-ac-multiple {
     border: 2px solid luxpalette.$lux-primary-color;
-    border-radius: 4px;
+    border-radius: luxcommon.$app-border-radius !important;
     box-shadow: none !important;
-
-    .mat-pseudo-checkbox {
-      color: luxpalette.$lux-primary-color;
-    }
-  }
-
-  .mat-autocomplete-panel.lux-autocomplete-panel-ac,
-  .mat-autocomplete-panel.lux-autocomplete-panel-dense-ac {
-    min-width: calc(100% + 14px) !important;
-    max-width: calc(100% + 14px) !important;
-    margin: 13px -9px 0px;
-  }
-  .mat-autocomplete-panel.lux-autocomplete-panel-dense-ac {
-    margin-top: 7px;
   }
 }
 
@@ -100,44 +116,45 @@ lux-lookup-combobox-ac {
 * Theming für Lux-Checkbox
 */
 lux-checkbox-ac {
+  input:focus ~ .mdc-checkbox__background,
+  input:hover ~ .mdc-checkbox__background,
+  .mat-mdc-checkbox-touch-target:hover ~ .mdc-checkbox__background {
+    border-color: luxcommon.$dark-secondary-text !important;
+  }
+
+  input:focus-visible ~ .mdc-checkbox__background {
+    border-color: luxcommon.$dark-secondary-text !important;
+    @include luxfocus.focus-dark-mixin;
+  }
+
+  .mdc-checkbox {
+    padding: 0;
+    //Bei mehrzeiligen Labels soll die Checkbox oben und nicht zentriert angezeigt werden.
+    //Deswegen wird hier das Margin-top: auto überschrieben.
+    align-self: flex-start;
+    margin-top: 0.2em;
+
+    .mdc-checkbox__background {
+      top: 0;
+      left: 0;
+    }
+  }
+
   label {
     font-family: luxcommon.$app-font-family;
     font-size: luxcommon.$form-control-font-size;
     color: luxcommon.$dark-primary-text;
     cursor: pointer;
-
-    .mat-checkbox-label {
-      -ms-word-break: break-word;
-      word-break: break-word;
-      white-space: normal;
-    }
   }
 
-  .mat-checkbox-ripple {
+  .mat-mdc-checkbox-ripple,
+  .mdc-checkbox__ripple {
     display: none;
   }
-  .mat-checkbox-inner-container {
-    // die Checkbox soll größer sein, als von Material vorgegeben
-    width: 1.25em;
-    height: 1.25em;
-    margin-top: 0.125em;
-    .mat-checkbox-frame {
-      border-color: luxpalette.$lux-primary-color;
-    }
-    //bei mehrzeiligen Labels soll die Checkbox oben und nicht zentriert angezeigt werden
-    //Deswegen wird hier das Margin-top: auto überschrieben
-    //da wir die Größe der Box geändert haben mussten wir das Margin ebenfalls anpassen
-    .mat-checkbox-frame {
-      border-color: luxpalette.$lux-primary-color;
-    }
-  }
 
-  & .mat-checkbox-disabled {
-    label {
-      color: luxcommon.$dark-disabled-text;
-    }
-    .mat-checkbox-inner-container .mat-checkbox-frame {
-      border-color: luxcommon.$dark-disabled-text;
+  & .mat-mdc-checkbox-disabled {
+    .mdc-checkbox {
+      color: #ffffff;
     }
   }
 
@@ -176,7 +193,9 @@ lux-datetimepicker-ac {
   }
 }
 .cdk-overlay-pane .mat-datepicker-content,
-.lux-datetimepicker-overlay .mat-card.lux-card {
+.lux-datetimepicker-overlay .mat-mdc-card.lux-card {
+  --mat-datepicker-calendar-container-shape: #{luxcommon.$app-border-radius};
+
   border: 2px solid luxpalette.$lux-primary-color;
   box-shadow: none !important;
   margin: 13px -9px 0;
@@ -190,46 +209,137 @@ lux-datetimepicker-ac {
 /*
 * Theming für lux-Toggle
 */
+$toggleControlWidth: 50;
+$toggleControlHeight: 30;
+$toggleBorderRadius: 15;
+$toggleBorderWidth: 2;
+$toggleImageWidth: $toggleControlHeight - (2 * $toggleBorderWidth) - 3;
+$toggleImageHeight: $toggleControlHeight - (2 * $toggleBorderWidth) - 3;
+$toggleMarginLeft: $toggleBorderWidth + 1;
+
 lux-toggle-ac {
-  .mat-slide-toggle {
-    label {
-      color: luxcommon.$dark-primary-text;
-      font-family: luxcommon.$app-font-family;
-    }
-    &.mat-checked .mat-slide-toggle-bar {
-      background-color: map-get(luxpalette.$lux-palette_primary, 50);
-    }
-    .mat-slide-toggle-thumb {
-      @include luxelevations.lux-elevation-z1;
+  mat-slide-toggle {
+    .mdc-switch__ripple {
+      display: none;
     }
 
-    &.mat-disabled {
-      //von Material wird beim gesamten Element die Opacity auf 0.38 gesetzt.
-      //wir wollen aber nur den "Schalter" änderen, das Label wird bei uns über die Color gesteuert
-      opacity: 1;
-      .mat-slide-toggle-bar {
-        opacity: 0.38;
-      }
+    // Farben
+    button {
+      &.mdc-switch--disabled {
+        &.mdc-switch--checked {
+          .mdc-switch__track {
+            &::before {
+              border-color: #e0e0e0 !important;
+            }
+
+            &::after {
+              border-color: #e0e0e0 !important;
+              background: #e0e0e0;
+            }
+          }
+
+          .mdc-switch__icons {
+            svg.mdc-switch__icon--on {
+              fill: luxcommon.$dark-disabled-text;
+              background-color: white;
+            }
+          }
+        }
+
+        &:not(.mdc-switch--checked) {
+          .mdc-switch__track {
+            &::before {
+              border-color: #e0e0e0 !important;
+              background: White;
+            }
 
-      .lux-form-label {
-        color: luxcommon.$dark-disabled-text;
+            &::after {
+              border-color: #e0e0e0 !important;
+            }
+          }
+
+          .mdc-switch__icons {
+            svg.mdc-switch__icon--off {
+              fill: white;
+              background-color: #a9a9a9;
+            }
+          }
+        }
       }
 
-      &.mat-checked {
-        .mat-slide-toggle-bar {
-          background-color: luxcommon.$dark-disabled-text;
+      &:not(.mdc-switch--disabled) {
+        &.mdc-switch--checked {
+          .mdc-switch__track {
+            &::before {
+              border-color: map-get(luxpalette.$lux-palette_primary, 500) !important;
+            }
+
+            &::after {
+              border-color: map-get(luxpalette.$lux-palette_primary, 500) !important;
+            }
+          }
+
+          .mdc-switch__icons {
+            svg.mdc-switch__icon--on {
+              fill: map-get(luxpalette.$lux-palette_primary, 500);
+              background-color: white;
+            }
+          }
         }
 
-        .mat-slide-toggle-thumb {
-          background-color: #666666;
-          // $dark-secondary-text als Hex ohne Transparenz
+        &:not(.mdc-switch--checked) {
+          .mdc-switch__track {
+            &::before {
+              border-color: luxcommon.$dark-secondary-text !important;
+            }
+
+            &::after {
+              border-color: luxcommon.$dark-secondary-text !important;
+            }
+          }
+        }
+      }
+    }
+
+    // Layout
+    button {
+      width: #{$toggleControlWidth}px;
+      height: #{$toggleImageHeight + 1}px;
+
+      .mdc-switch__track {
+        width: #{$toggleControlWidth}px;
+        height: #{$toggleControlHeight}px;
+        border-radius: #{$toggleBorderRadius}px;
+
+        &::before {
+          border-width: #{$toggleBorderWidth}px !important;
+        }
+        &::after {
+          border-width: #{$toggleBorderWidth}px !important;
         }
       }
 
-      &:not(.mat-checked) {
-        .mat-slide-toggle-bar {
-          background-color: luxcommon.$dark-disabled-text;
-          //Hintergrund zur Schriftfarbe anpassen
+      .mdc-switch__handle {
+        width: #{$toggleImageWidth}px;
+        height: #{$toggleImageHeight}px;
+        margin-left: #{$toggleMarginLeft}px !important;
+        border-radius: #{$toggleBorderRadius}px;
+      }
+
+      .mdc-switch__handle-track {
+        width: #{$toggleControlWidth - $toggleImageWidth - $toggleMarginLeft - (2 * $toggleBorderWidth)}px;
+      }
+
+      .mdc-switch__icons {
+        width: #{$toggleImageWidth}px;
+        height: #{$toggleImageHeight}px;
+
+        svg.mdc-switch__icon--on {
+          border-radius: #{$toggleBorderRadius}px;
+        }
+
+        svg.mdc-switch__icon--off {
+          border-radius: #{$toggleBorderRadius}px;
         }
       }
     }
@@ -237,6 +347,42 @@ lux-toggle-ac {
 
   &.lux-form-control-readonly {
     pointer-events: none;
+
+    button {
+      pointer-events: none;
+
+      .mdc-switch__track {
+        pointer-events: none;
+
+        &::before {
+          pointer-events: none;
+        }
+
+        &::after {
+          pointer-events: none;
+        }
+      }
+
+      .mdc-switch__handle {
+        pointer-events: none;
+      }
+
+      .mdc-switch__handle-track {
+        pointer-events: none;
+      }
+
+      .mdc-switch__icons {
+        pointer-events: none;
+
+        svg.mdc-switch__icon--on {
+          pointer-events: none;
+        }
+
+        svg.mdc-switch__icon--off {
+          pointer-events: none;
+        }
+      }
+    }
   }
 }
 
@@ -244,67 +390,64 @@ lux-toggle-ac {
  * Theming for LUX-Radio
  */
 lux-radio-ac {
-  .mat-radio-container {
+  .mat-mdc-radio-button .mdc-radio {
+    padding: 0;
+  }
+
+  mat-radio-button:not(.mat-mdc-radio-checked) input:hover ~ .mdc-radio__background div.mdc-radio__outer-circle,
+  mat-radio-button:not(.mat-mdc-radio-checked) .mat-mdc-radio-touch-target:hover ~ .mdc-radio__background div.mdc-radio__outer-circle {
+    border-color: luxcommon.$dark-secondary-text !important;
+  }
+
+  input:focus-visible ~ .mdc-radio__background {
+    border-color: luxcommon.$dark-secondary-text !important;
+    @include luxfocus.focus-dark-mixin;
+  }
+
+  .mdc-radio__background {
     // damit ist der Focus-Indicator rund, wie bei Toggle-Thumb und Chips
     border-radius: 50%;
 
-    span.mat-radio-outer-circle {
-      border-color: luxpalette.$lux-primary-color;
+    &::before {
+      // Ripple ausblenden
+      display: none;
     }
   }
-  .mat-radio-label {
+  .mdc-label {
     color: luxcommon.$dark-primary-text;
     font-family: luxcommon.$app-font-family;
   }
 
-  .mat-radio-checked {
-    &.mat-radio-disabled label .mat-radio-container {
-      span.mat-radio-inner-circle {
-        background-color: luxcommon.$dark-disabled-text;
-      }
-
-      span.mat-radio-outer-circle {
-        border-color: luxcommon.$dark-disabled-text;
-      }
-    }
-  }
-
-  .mat-radio-group {
+  .mat-mdc-radio-group {
     display: flex;
     box-sizing: border-box;
-    gap: 0.75em;
     place-content: stretch flex-start;
     align-items: stretch;
 
     &.lux-horizontal {
-      row-gap: 0.75em;
+      gap: 0.75em;
       flex-direction: row;
       flex-flow: wrap;
       max-height: 100%;
     }
     &.lux-vertical {
+      gap: 0;
       flex-direction: column;
       max-width: 100%;
     }
 
-    .mat-radio-button {
+    .mat-mdc-radio-button {
       flex: 0 0 auto;
       box-sizing: border-box;
-    }
-  }
 
-  .mat-radio-disabled label.mat-radio-label {
-    .mat-radio-label-content {
-      color: luxcommon.$dark-disabled-text;
-    }
-
-    .mat-radio-container {
-      span.mat-radio-inner-circle {
-        background-color: luxcommon.$dark-disabled-text;
-      }
+      .mdc-radio__native-control:disabled + .mdc-radio__background {
+        div.mdc-radio__inner-circle {
+          border-color: luxcommon.$dark-disabled-text;
+        }
 
-      span.mat-radio-outer-circle {
-        border-color: luxcommon.$dark-disabled-text;
+        div.mdc-radio__outer-circle {
+          border-color: luxcommon.$dark-disabled-text;
+        }
       }
     }
   }
@@ -341,7 +484,69 @@ lux-textarea-ac text-area {
 /**
  * Theming für LUX-Chips
  */
+// $chipsBorderRadius: 20;
 lux-chips-ac {
+  --mdc-chip-container-shape-radius: 20px;
+  --mdc-chip-outline-width: 1px;
+
+  .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) {
+    span.mdc-evolution-chip__action::before {
+      border: none;
+    }
+
+    &.lux-chip-color-default {
+      background-color: var(--lux-theme-primary-500) !important;
+
+      .mat-mdc-chip-action-label {
+        color: white;
+      }
+
+      lux-icon {
+        color: white;
+        opacity: 1;
+      }
+    }
+
+    &.lux-chip-color-primary {
+      background-color: var(--lux-theme-primary-500) !important;
+
+      .mat-mdc-chip-action-label {
+        color: white;
+      }
+
+      lux-icon {
+        color: white;
+        opacity: 1;
+      }
+    }
+
+    &.lux-chip-color-accent {
+      background-color: var(--lux-theme-accent-500) !important;
+
+      .mat-mdc-chip-action-label {
+        color: white;
+      }
+
+      lux-icon {
+        color: white;
+        opacity: 1;
+      }
+    }
+
+    &.lux-chip-color-warn {
+      background-color: var(--lux-theme-warn-500) !important;
+
+      .mat-mdc-chip-action-label {
+        color: white;
+      }
+
+      lux-icon {
+        color: white;
+        opacity: 1;
+      }
+    }
+  }
+
   .lux-chips-autocomplete-icon {
     color: var(--lux-theme-primary-500);
     font-size: 1.5rem;
@@ -353,37 +558,22 @@ lux-chips-ac {
       cursor: default;
     }
   }
+
   .lux-chips {
-    mat-chip {
-      // Löschicon (luxSelected=true)
-      &.mat-chip-selected .mat-chip-remove {
-        color: luxcommon.$app-data-bg !important;
-        opacity: 1 !important;
-      }
+    .mat-mdc-chip-list-disabled {
+      color: luxcommon.$app-data-bg !important;
+      opacity: 1;
 
-      // Löschicon (luxSelected=false)
-      &:not(.mat-chip-selected) .mat-chip-remove {
-        color: luxcommon.$app-data-bg !important;
-        opacity: 1 !important;
+      .mdc-evolution-chip__text-label {
+        color: luxcommon.$app-data-bg;
       }
 
-      &.mat-chip-disabled {
-        background-color: luxcommon.$dark-disabled-text !important;
-        color: luxcommon.$app-data-bg !important;
-        opacity: 1;
-
-        lux-icon {
-          mat-icon {
-            color: luxcommon.$app-data-bg;
-          }
+      lux-icon {
+        mat-icon {
+          color: luxcommon.$app-data-bg;
         }
       }
     }
-    mat-chip-list {
-      & div.mat-chip-list-wrapper {
-        margin: 0px 0px 0px -4px;
-      }
-    }
   }
 
   .lux-hide-input-border .lux-form-control-container-authentic {
@@ -392,8 +582,8 @@ lux-chips-ac {
     box-shadow: none !important; // den Focus-indicator für das Inputausblenden
   }
 }
-.lux-chips-ac-autocomplete-panel.mat-autocomplete-panel,
-.lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel {
+.lux-chips-ac-autocomplete-panel.mat-mdc-autocomplete-panel,
+.lux-chips-ac-autocomplete-panel-dense.mat-mdc-autocomplete-panel {
   margin-top: -18px;
   margin-left: 0;
   margin-right: 0;
@@ -402,7 +592,7 @@ lux-chips-ac {
   box-shadow: none !important;
   border: 2px solid luxpalette.$lux-primary-color;
 }
-.lux-chips-ac-autocomplete-panel-dense.mat-autocomplete-panel {
+.lux-chips-ac-autocomplete-panel-dense.mat-mdc-autocomplete-panel {
   margin-top: -18px;
 }
 
@@ -410,15 +600,69 @@ lux-chips-ac {
  * Theming for LUX-Slider
  */
 lux-slider-ac {
-  mat-slider.lux-slider-ac {
-    &.mat-slider-horizontal {
-      height: 1.5em;
+  lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row {
+    padding-top: 20px;
+    padding-bottom: 4px;
+
+    mat-slider,
+    mat-slider input {
+      max-height: 24px;
     }
-  }
-  .lux-show-thumb-label-always {
-    &.mat-slider-disabled {
-      .mat-slider-thumb-label {
-        background-color: luxcommon.$dark-disabled-text;
+
+    mat-slider.mat-primary .mdc-slider__value-indicator {
+      background-color: var(--lux-theme-primary-500);
+
+      &::before {
+        border-top-color: var(--lux-theme-primary-500);
+      }
+    }
+
+    mat-slider.mat-accent .mdc-slider__value-indicator {
+      background-color: var(--lux-theme-accent-500);
+
+      &::before {
+        border-top-color: var(--lux-theme-accent-500);
+      }
+    }
+
+    mat-slider.mat-warn .mdc-slider__value-indicator {
+      background-color: var(--lux-theme-warn-500);
+
+      &::before {
+        border-top-color: var(--lux-theme-warn-500);
+      }
+    }
+
+    .mdc-slider__track {
+      background-color: luxcommon.$dark-disabled-text;
+      height: 2px;
+    }
+
+    .mdc-slider__value-indicator-container {
+      left: 26%;
+    }
+
+    .mdc-slider__thumb-knob {
+      height: 15px;
+      width: 15px;
+      top: 27%;
+      border-radius: 50%;
+    }
+
+    mat-slider-visual-thumb div.mdc-slider__value-indicator-container {
+      bottom: 48px;
+
+      .mdc-slider__value-indicator {
+        border-radius: 50%;
+        min-height: 25px;
+        min-width: 20px;
+        padding-left: 2px;
+        padding-right: 2px;
+      }
+
+      .mdc-slider__value-indicator-text {
+        min-width: 100%;
+        font-size: 12px;
       }
     }
   }