@ihk-gfi/lux-components-theme 19.3.0 → 21.1.0

package/src/base-templates/components/_luxButtonSpinner.scss

@@ -0,0 +1,90 @@
+@use "@angular/material" as mat;
+
+lux-button,
+lux-link {
+  &.lux-raised,
+  &.lux-flat,
+  &.lux-rounded:not(.lux-stroked) {
+    mat-progress-spinner {
+      @include mat.progress-spinner-overrides(
+        (
+          active-indicator-color: var(--lux-theme-button-flat-default-text-color)
+        )
+      );
+    }
+
+    .mat-primary {
+      mat-progress-spinner {
+        @include mat.progress-spinner-overrides(
+          (
+            active-indicator-color: var(--lux-theme-button-flat-primary-text-color)
+          )
+        );
+      }
+    }
+    .mat-accent {
+      mat-progress-spinner {
+        @include mat.progress-spinner-overrides(
+          (
+            active-indicator-color: var(--lux-theme-button-flat-accent-text-color)
+          )
+        );
+      }
+    }
+    .mat-warn {
+      mat-progress-spinner {
+        @include mat.progress-spinner-overrides(
+          (
+            active-indicator-color: var(--lux-theme-button-flat-warn-text-color)
+          )
+        );
+      }
+    }
+  }
+
+  mat-progress-spinner {
+    @include mat.progress-spinner-overrides(
+      (
+        active-indicator-color: var(--lux-theme-button-text-default-text-color)
+      )
+    );
+  }
+
+  .mat-primary {
+    mat-progress-spinner {
+      @include mat.progress-spinner-overrides(
+        (
+          active-indicator-color: var(--lux-theme-button-text-primary-text-color)
+        )
+      );
+    }
+  }
+  .mat-accent {
+    mat-progress-spinner {
+      @include mat.progress-spinner-overrides(
+        (
+          active-indicator-color: var(--lux-theme-button-text-accent-text-color)
+        )
+      );
+    }
+  }
+  .mat-warn {
+    mat-progress-spinner {
+      @include mat.progress-spinner-overrides(
+        (
+          active-indicator-color: var(--lux-theme-button-text-warn-text-color)
+        )
+      );
+    }
+  }
+
+  .lux-button-spinner {
+    mat-progress-spinner {
+      width: 0.875rem !important;
+      height: 0.875rem !important;
+    }
+    .spinner-padding {
+      padding: 0;
+    }
+  }
+}

package/src/base-templates/components/_luxButtonStroked.scss

@@ -0,0 +1,45 @@
+@use "@angular/material" as mat;
+
+lux-button.lux-stroked,
+lux-link.lux-stroked {
+  @include mat.button-overrides(
+    (
+      outlined-label-text-tracking: var(--lux-theme-button-stroked-text-tracking),
+      outlined-label-text-font: var(--lux-theme-button-stroked-font),
+      outlined-label-text-size: var(--lux-theme-button-stroked-text-size),
+      outlined-label-text-weight: var(--lux-theme-button-stroked-text-weight),
+      outlined-container-shape: var(--lux-theme-button-stroked-container-shape),
+      outlined-horizontal-padding: 16px,
+      outlined-container-height: var(--lux-theme-button-stroked-container-height),
+      outlined-label-text-color: var(--lux-theme-button-stroked-primary-text-color),
+      outlined-outline-color: var(--lux-theme-button-stroked-primary-text-color)
+    )
+  );
+
+  .mat-primary {
+    @include mat.button-overrides(
+      (
+        outlined-label-text-color: var(--lux-theme-button-stroked-primary-text-color),
+        outlined-outline-color: var(--lux-theme-button-stroked-primary-text-color)
+      )
+    );
+  }
+
+  .mat-accent {
+    @include mat.button-overrides(
+      (
+        outlined-label-text-color: var(--lux-theme-button-stroked-accent-text-color),
+        outlined-outline-color: var(--lux-theme-button-stroked-accent-text-color)
+      )
+    );
+  }
+
+  .mat-warn {
+    @include mat.button-overrides(
+      (
+        outlined-label-text-color: var(--lux-theme-button-stroked-warn-text-color),
+        outlined-outline-color: var(--lux-theme-button-stroked-warn-text-color)
+      )
+    );
+  }
+}

package/src/base-templates/components/_luxCard.scss

@@ -0,0 +1,133 @@
+@use "@angular/material" as mat;
+@use "../common/luxfocus";
+
+$margin-right-icon: 20px;
+
+lux-card {
+  @include mat.card-overrides(
+    (
+      outlined-container-color: var(--lux-theme-card-background-color),
+      outlined-container-shape: var(--lux-theme-card-shape),
+      outlined-outline-color: var(--lux-theme-card-outline-color),
+      title-text-line-height: var(--lux-theme-card-title-line-height),
+      title-text-size: var(--lux-theme-card-title-text-size),
+      title-text-weight: var(--lux-theme-card-title-text-weight),
+      subtitle-text-size: var(--lux-theme-card-subtitle-text-size),
+      subtitle-text-weight: var(--lux-theme-card-subtitle-text-weight),
+      subtitle-text-color: var(--lux-theme-card-subtitle-text-color)
+    )
+  );
+
+  // Falls die lux-card in einem lux-grid verwendet wird und alle Cards einer Reihe dieselbe Höhe erhalten sollen
+  // müssen mat-card und mat-card-content entsprechend angepasst werden.
+  // Diese Anforderung stammt aus dem Verhalten der ehemaligen Lux-Layout-Card-Row.
+  &.lux-flex {
+    .lux-card,
+    .lux-card-content {
+      flex: 1 1 auto;
+    }
+  }
+
+  .lux-card {
+    width: 100%;
+
+    .lux-card-header {
+      padding: var(--lux-theme-card-padding) var(--lux-theme-card-padding) 0;
+
+      .mat-mdc-card-header-text {
+        // Damit der Titel und Subtitle nicht umbrechen und stattdessen abgeschnitten werden, wenn der Text zu lang ist.
+        // Ohne die min-width würde ein langer Text dazu führen, dass der Header breiter als die Card wird.
+        min-width: 0;
+      }
+
+      // Hier wird die Reihenfolge der Elemente im Header der lux-card festgelegt.
+      // Dies ist notwendig, damit das Icon links, der Titel in der Mitte und die Info-Komponente rechts angezeigt werden.
+      > * {
+        order: 10;
+      }
+
+      .lux-card-icon-container {
+        margin-right: 10px;
+        order: 5;
+      }
+
+      .lux-card-info-container {
+        order: 15;
+
+        // Damit die Info-Komponente immer rechtsbündig im Card-Header ist, auch wenn der Titel oder Subtitle kurz sind.
+        margin-left: auto;
+      }
+
+      .lux-card-title {
+        margin-right: $margin-right-icon;
+        // Die Styles der Überschriften innerhalb der lux-card zurücksetzen, damit die Styles der Card übernommen werden.
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          color: unset;
+          font-size: unset;
+          font-weight: unset;
+          font-family: unset;
+          padding: unset;
+          margin: unset;
+        }
+      }
+    }
+
+    .lux-card-subtitle {
+      margin-right: $margin-right-icon;
+    }
+
+    .lux-card-content {
+      display: flex;
+      flex-direction: column;
+      padding: 0 var(--lux-theme-card-padding);
+      overflow-y: hidden;
+
+      .lux-card-content-container {
+        display: flex;
+        flex-direction: column;
+
+        // Abstand zwischen dem Inhalt und dem Expanded-Bereich der Card.
+        gap: 0.75rem;
+      }
+
+      // Wenn es einen Header und Content gibt, soll oben im Content ein Padding gesetzt werden.
+      .lux-card-with-content-and-header {
+        padding-top: var(--lux-theme-card-padding);
+      }
+
+      &.lux-card-no-actions {
+        // Wenn es keine Aktionen gibt, soll unten im Content ein Padding gesetzt werden.
+        padding-bottom: var(--lux-theme-card-padding);
+      }
+    }
+
+    // Die Material Card hat nur ein Padding von 8px, dies wird hier auf $padding gesetzt,
+    // damit es mit den anderen Paddings innerhalb der Card (wie z.B. Header und Content) übereinstimmt.
+    .lux-card-actions {
+      padding: var(--lux-theme-card-padding);
+    }
+  }
+
+  .lux-card {
+    &[class~="lux-cursor"]:hover {
+      background-image: var(--lux-theme-app-gradient-reverse);
+      background-color: #ffffff;
+      border-color: var(--lux-theme-dark-primary-text);
+
+      .lux-card-content-expanded {
+        background-image: var(--lux-theme-app-gradient-reverse);
+        background-color: #ffffff;
+        border-color: var(--lux-theme-dark-primary-text);
+      }
+    }
+
+    &[class~="lux-cursor"]:focus-visible {
+      @include luxfocus.focus-dark-mixin-inline;
+    }
+  }
+}

package/src/base-templates/components/_luxCheckbox.scss

@@ -0,0 +1,11 @@
+@use "@angular/material" as mat;
+
+lux-checkbox-ac {
+  @include mat.checkbox-overrides((
+    label-text-size: var(--lux-theme-form-control-font-size),
+  ));
+
+  &.lux-form-control-readonly {
+    pointer-events: none;
+  }
+}

package/src/{base → base-templates}/components/_luxCheckboxContainerAc.scss

@@ -1,11 +1,9 @@
-@use "../luxpalette";
-
 lux-checkbox-container-ac {
   .lux-label-container {
     min-height: 1.2em;
     font-size: 0.75rem;
     line-height: 1.2em;
-    color: luxpalette.$lux-primary-color;
+    color: var(--lux-theme-primary-color);
     margin: 0 calc(0.5em + 1px) 0.25em calc(0.5em + 1px);
   }
 
@@ -14,7 +12,7 @@ lux-checkbox-container-ac {
     flex-flow: row wrap;
     place-content: stretch flex-start;
     align-items: stretch;
-    gap: 10px;
+    gap: 0;
     max-width: 100%;
 
     &.lux-vertical {
@@ -31,5 +29,9 @@ lux-checkbox-container-ac {
         padding: 0;
       }
     }
+
+    .lux-form-control-wrapper .lux-form-control-container-authentic .lux-checkbox {
+      min-height: unset;    
+    }
   }
 }

package/src/base-templates/components/_luxChips.scss

@@ -0,0 +1,144 @@
+@use "@angular/material" as mat;
+
+lux-chips-ac {
+  @include mat.chips-overrides(
+    (
+      container-shape-radius: 20px,
+      outline-color: transparent,
+      hover-state-layer-opacity: 0,
+      trailing-action-hover-state-layer-opacity: 0,
+      outline-width: 1px
+    )
+  );
+
+  // Default-Farbvariante
+  .lux-chip-color-default {
+    @include mat.chips-overrides(
+      (
+        outline-color: var(--mat-chip-label-text-color, var(--mat-sys-on-surface-variant)),
+        outline-width: 1px
+      )
+    );
+  }
+
+  // Primär-Farbvariante
+  .lux-chip-color-primary {
+    --mat-chip-elevated-container-color: var(--lux-theme-custom-blue);
+    @include mat.chips-overrides(
+      (
+        label-text-color: var(--lux-theme-custom-on-blue),
+        with-trailing-icon-trailing-icon-color: var(--lux-theme-custom-on-blue)
+      )
+    );
+  }
+
+  // Akzent-Farbvariante
+  .lux-chip-color-accent {
+    --mat-chip-elevated-container-color: var(--lux-theme-custom-green);
+    @include mat.chips-overrides(
+      (
+        label-text-color: var(--lux-theme-custom-on-green),
+        with-trailing-icon-trailing-icon-color: var(--lux-theme-custom-on-green)
+      )
+    );
+  }
+
+  // Warn-Farbvariante
+  .lux-chip-color-warn {
+    --mat-chip-elevated-container-color: var(--lux-theme-custom-red);
+    @include mat.chips-overrides(
+      (
+        label-text-color: var(--lux-theme-custom-on-red),
+        with-trailing-icon-trailing-icon-color: var(--lux-theme-custom-on-red)
+      )
+    );
+  }
+
+  // Lösch-Icon mittig ausrichten
+  .mat-mdc-chip-remove .mat-icon {
+    min-height: unset;
+  }
+
+  // Lange Chip-Inhalte abschneiden, Icon sichtbar lassen
+  .lux-chip-container {
+    max-width: calc(100% - 8px);
+  }
+
+  .lux-chip {
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .lux-chip .mdc-evolution-chip__cell--primary {
+    min-width: 0;
+  }
+
+  .lux-chip .mdc-evolution-chip__text-label,
+  .lux-chip .lux-chip-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic {
+    padding: 12px 8px;
+  }
+
+  // Border ausblenden
+  lux-form-control-wrapper.lux-hide-input-border .lux-form-control-container-authentic {
+    border: none;
+    padding: 0;
+    box-shadow: none !important; // den Focus-indicator für das Inputausblenden
+  }
+
+  // Pfeil-Icon
+  .lux-select-arrow {
+    width: 24px;
+    height: 24px;
+    fill: currentColor;
+    display: inline-block;
+    vertical-align: middle;
+
+    // Spiegeln für nach oben zeigenden Pfeil
+    &.lux-rotate {
+      transform: rotate(180deg);
+    }
+  }
+
+  // Vertikale Chips
+  .lux-vertical .mdc-evolution-chip-set__chips {
+    flex-direction: column;
+  }
+
+  // Disabled: Placeholder
+  .lux-chips-autocomplete-input:disabled {
+    &::placeholder {
+      color: var(--lux-theme-dark-disabled-text);
+    }
+  }
+
+  // Disabled: Icon
+  .lux-chips-autocomplete-icon.lux-disabled {
+    color: var(--lux-theme-dark-disabled-text);
+    cursor: default;
+  }
+
+  // Fokus
+  mat-chip-row.cdk-focused:not(.cdk-mouse-focused):not(.cdk-program-focused) {
+    --mat-chip-elevated-container-color: var(--lux-theme-custom-on-blue);
+    @include mat.chips-overrides(
+      (
+        label-text-color: var(--lux-theme-custom-blue),
+        with-trailing-icon-trailing-icon-color: var(--lux-theme-custom-blue)
+      )
+    );
+  }
+}
+
+.lux-chips-ac-autocomplete-panel.mat-mdc-autocomplete-panel,
+.lux-chips-ac-autocomplete-panel-dense.mat-mdc-autocomplete-panel {
+  margin-top: -26px;
+  margin-left: 8px;
+  margin-right: 8px;
+  border-radius: 4px;
+}

package/src/base-templates/components/_luxCore.scss

@@ -0,0 +1,26 @@
+@use "@angular/material" as mat;
+
+:root {
+  @include mat.core-overrides(
+    (
+      option-label-text-size: var(--lux-theme-panel-option-label-text-size),
+      option-label-text-color: var(--lux-theme-panel-option-label-text-color),
+      option-selected-state-label-text-color: var(--lux-theme-panel-option-label-text-color),
+      option-selected-state-layer-color: var(--lux-theme-panel-option-selected-state-layer-color),
+      option-hover-state-layer-color: var(--lux-theme-panel-option-hover-state-layer-color),
+      option-focus-state-layer-color: var(--lux-theme-panel-option-focus-state-layer-color)
+    )
+  );
+}
+
+.mat-mdc-option {
+  .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after,
+  .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-indeterminate::after {
+    @include mat.pseudo-checkbox-overrides(
+      (
+        minimal-selected-checkmark-color: var(--lux-theme-panel-option-selected-checkmark-color),
+        minimal-disabled-selected-checkmark-color: var(--lux-theme-panel-option-disabled-selected-checkmark-color)
+      )
+    );
+  }
+}

package/src/base-templates/components/_luxDatepicker.scss

@@ -0,0 +1,65 @@
+@use "@angular/material" as mat;
+
+:root {
+   @include mat.datepicker-overrides(
+    (
+      calendar-date-focus-state-background-color: var(--lux-theme-datepicker-panel-date-hover-background-color),
+      calendar-date-selected-state-text-color: var(--lux-theme-datepicker-panel-date-selected-color),
+      calendar-container-background-color: var(--lux-theme-panel-bg-color),
+      calendar-container-shape: var(--lux-theme-datepicker-panel-shape),
+      calendar-container-elevation-shadow: 0 0 0 1px var(--mat-card-outlined-outline-color, var(--mat-sys-outline-variant)),
+      calendar-date-hover-state-background-color: var(--lux-theme-datepicker-panel-date-hover-background-color),
+      calendar-date-text-color: var(--lux-theme-datepicker-panel-text-color),
+      calendar-header-text-color: var(--lux-theme-datepicker-panel-text-color),
+      calendar-period-button-text-color: var(--lux-theme-datepicker-panel-text-color),
+      calendar-date-selected-state-background-color: var(--lux-theme-datepicker-panel-date-selected-background-color),
+      calendar-header-text-size: var(--lux-theme-datepicker-panel-font-size),
+      calendar-text-size: var(--lux-theme-datepicker-panel-font-size),
+      calendar-body-label-text-size: var(--lux-theme-datepicker-panel-font-size),
+      calendar-period-button-text-size: var(--lux-theme-datepicker-panel-font-size),
+      calendar-container-touch-shape: var(--lux-theme-datepicker-panel-shape),
+
+    )
+  );
+}
+
+// Panel
+mat-calendar {
+  .mat-calendar-body-cell-content {
+    border-radius: var(--lux-theme-datepicker-panel-date-border-radius);
+
+    &:not(.mat-calendar-body-selected) {
+      background-color: var(--lux-theme-datepicker-panel-date-background-color);
+    }
+  }
+
+  .mat-calendar-body-label {
+    visibility: hidden;
+  }
+}
+
+// Formcontrol
+lux-datepicker-ac {
+  @include mat.datepicker-overrides(());
+
+  button:not(:disabled) .lux-datepicker-toggle-icon {
+    color: var(--lux-theme-datepicker-icon-color);
+  }
+}
+
+.lux-datepicker-custom-header-component {
+  display: grid;
+  grid-template-columns: 70px auto 70px;
+  justify-items: anchor-center;
+  padding: 4px 0 4px 0;
+  color: var(--lux-theme-datepicker-panel-text-color);
+
+  lux-button.lux-datepicker-button {
+    @include mat.button-overrides(
+      (
+        text-label-text-color: var(--lux-theme-datepicker-panel-text-color),
+        text-label-text-size: var(--lux-theme-datepicker-panel-font-size)
+      )
+    );
+  }
+}

package/src/base-templates/components/_luxDatetimepicker.scss

@@ -0,0 +1,17 @@
+@use "@angular/material" as mat;
+
+.lux-datetimepicker-overlay lux-card {
+  @include mat.card-overrides(
+    (
+      outlined-container-color: var(--lux-theme-panel-bg-color)
+    )
+  );
+}
+
+lux-datetimepicker-ac {
+  @include mat.datepicker-overrides(());
+
+  button:not(:disabled) .lux-datetimepicker-toggle-icon {
+    color: var(--lux-theme-datepicker-icon-color);
+  }
+}

package/src/{base → base-templates}/components/_luxDialog.scss

@@ -1,12 +1,20 @@
-@use "sass:map";
-@use "../luxcommon";
-@use "../luxpalette";
-@use "../luxfocus";
-@use "../luxelevations";
-@use "../luxbreakpoints";
+@use "../common/luxfocus";
+@use "../common/luxelevations";
+@use "../common/luxbreakpoints";
+@use "@angular/material" as mat;
 
 .cdk-overlay-pane.mat-mdc-dialog-panel .mat-mdc-dialog-container {
-  border-radius: luxcommon.$app-border-radius;
+  border-radius: var(--lux-theme-app-border-radius);
+}
+
+.cdk-overlay-pane.mat-mdc-dialog-panel.lux-dialog {
+  @include mat.dialog-overrides(
+    (
+      container-max-width: 5000px,
+      container-small-max-width: 5000px,
+      container-min-width: 0
+    )
+  );
 }
 
 lux-dialog-preset {
@@ -21,7 +29,13 @@ lux-dialog-action {
 }
 
 lux-dialog-structure {
+
+  @include mat.dialog-overrides((
+    supporting-text-size: 1rem
+  ));
+
   display: flex;
+  flex: 1 1 auto;
   min-height: 100%;
 
   .lux-dialog {
@@ -33,13 +47,13 @@ lux-dialog-structure {
       display: flex;
       padding-left: 0;
       padding-right: 0;
-      color: luxcommon.$dark-primary-text;
-      font-family: luxcommon.$app-headline-font, luxcommon.$app-font-family;
+      color: var(--lux-theme-dark-primary-text);
+      font-family: var(--lux-theme-app-headline-font), var(--lux-theme-app-font-family);
     }
 
     .mat-mdc-dialog-container {
       @include luxelevations.lux-elevation-z24;
-      border: 1px solid luxcommon.$dark-disabled-text;
+      border: 1px solid var(--lux-theme-dark-disabled-text);
     }
 
     // der Mat-Dialog-Content hat negativen Margin und einen passenden Padding (wieso auch immer)
@@ -48,9 +62,9 @@ lux-dialog-structure {
       margin: 0;
       padding: 0;
       max-height: 100%;
-      font-family: luxcommon.$app-font-family;
+      font-family: var(--lux-theme-app-font-family);
       letter-spacing: normal;
-      color: luxcommon.$dark-primary-text;
+      color: var(--lux-theme-dark-primary-text);
     }
 
     // Leichten Abstand zum Content setzen
@@ -61,8 +75,11 @@ lux-dialog-structure {
 
     .lux-icon-close {
       margin: -15px -15px 0 0;
-      width: 24px;
-      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 24px;
+      min-height: 24px;
       font-size: 1rem;
     }
   }
@@ -93,10 +110,10 @@ lux-dialog-structure {
   // x-Button oben rechts im Dialog-Fenster
   .lux-icon-close {
     &:hover {
-      background-color: #fff !important;
+      background-color: var(--lux-theme-dialog-close-button-hover-background-color);
 
       mat-icon.mat-icon-no-color {
-        color: luxcommon.$lux-hover-color;
+        color: var(--lux-theme-dialog-close-button-hover-color);
       }
 
       cursor: pointer;

package/src/base-templates/components/_luxDivider.scss

@@ -0,0 +1,10 @@
+@use "@angular/material" as mat;
+
+lux-divider {
+  @include mat.divider-overrides(
+    (
+      color: var(--lux-theme-dark-dividers),
+      width: 1px
+    )
+  );
+}

package/src/{base → base-templates}/components/_luxErrorPage.scss

@@ -1,7 +1,3 @@
-@use "../luxbreakpoints";
-@use "../luxpalette";
-@use "sass:map";
-
 lux-error-page {
   display: flex;
   min-height: 100%;