@ihk-gfi/lux-components-theme 21.5.0 → 21.6.0

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

@@ -107,7 +107,7 @@ lux-filter-load-dialog {
     max-width: 100%;
     box-sizing: border-box;
     gap: 12px;
-    place-content: center end;
+    place-content: center center;
     align-items: center;
   }
 }

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

@@ -1,3 +1,5 @@
+@use "@angular/material" as mat;
+
 // Muss der Wrapper sein, da Input-Elemente auch in anderen Komponenten (z.B. lux-autocomplete) genutzt werden
 lux-form-control-wrapper {
   input {
@@ -18,9 +20,44 @@ lux-form-control-wrapper {
 
 lux-input-ac {
   // Theming des Prefix- und Suffix-Containers
-   lux-input-ac-prefix,
-   lux-input-ac-suffix {
-     display: flex;
-     white-space: nowrap;
+  lux-input-ac-prefix,
+  lux-input-ac-suffix {
+    display: flex;
+    white-space: nowrap;
+  }
+}
+
+@mixin input-clear-button($touchSize, $containerSize) {
+  lux-button.lux-icon-button.lux-input-clear-btn {
+    display: flex;
+
+    @include mat.icon-button-overrides(
+      (
+        container-shape: var(--lux-theme-button-icon-container-shape),
+        icon-color: var(--lux-theme-primary-color),
+        icon-size: var(--mat-icon-button-icon-size),
+        state-layer-size: #{$containerSize},
+        state-layer-color: var(--mat-sys-on-surface-variant),
+        touch-target-size: #{$touchSize}
+      )
+    );
+
+    lux-icon,
+    .lux-icon {
+      width: var(--mat-icon-button-icon-size);
+      height: var(--mat-icon-button-icon-size);
+    }
+
+    button:not([disabled]):focus,
+    button:not([disabled]):focus-visible {
+      outline-color: transparent !important; // In V22 wieder entfernen, wenn alle !important entfernt wurden
+    }
   }
 }
+
+//Clear-Button für Input-Felder
+@include input-clear-button(calc(var(--lux-theme-form-min-height) - 2 * var(--lux-theme-form-border-width)), "40px");
+
+.lux-dense-authentic {
+  @include input-clear-button(calc(var(--lux-theme-form-dense-min-height) - 2 * var(--lux-theme-form-border-width)), "36px");
+}

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

@@ -1,6 +1,5 @@
 @use "@angular/material" as mat;
 @use "../common/luxSvgIcons" as luxicons;
-@use "../common/luxfocus" as luxfocus;
 
 .mat-mdc-menu-panel {
   .mat-mdc-menu-item-text {
@@ -139,7 +138,9 @@ lux-menu {
   }
 
   .lux-menu-item-icon {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     align-self: center;
     vertical-align: middle;
     width: var(--lux-theme-menu-item-icon-size);
@@ -147,13 +148,25 @@ lux-menu {
 
     .lux-icon,
     mat-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
       height: 100%;
+      max-width: var(--lux-theme-menu-item-icon-size);
+      max-height: var(--lux-theme-menu-item-icon-size);
       font-size: var(--lux-theme-menu-item-icon-size);
     }
 
     mat-icon {
       margin: 0;
+
+      svg {
+        width: 100%;
+        height: 100%;
+        max-width: var(--lux-theme-menu-item-icon-size);
+        max-height: var(--lux-theme-menu-item-icon-size);
+      }
     }
   }
 }
@@ -287,8 +300,17 @@ lux-menu {
 
       .lux-icon,
       mat-icon {
+        max-width: var(--lux-theme-menu-item-icon-size-large);
+        max-height: var(--lux-theme-menu-item-icon-size-large);
         font-size: var(--lux-theme-menu-item-icon-size-large);
       }
+
+      mat-icon {
+        svg {
+          max-width: var(--lux-theme-menu-item-icon-size-large);
+          max-height: var(--lux-theme-menu-item-icon-size-large);
+        }
+      }
     }
   }
 }

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

@@ -1,7 +1,39 @@
 @use "@angular/material" as mat;
 
-:root {
-  @include mat.paginator-overrides((
-    container-background-color: transparent,
-  ));
-}
+lux-paginator {
+  @include mat.paginator-overrides(
+    (
+      container-background-color: transparent
+    )
+  );
+
+  // Override the form field styles for the paginator's page size select
+  @include mat.form-field-overrides(
+    (
+      filled-container-color: transparent
+    )
+  );
+
+  mat-paginator.lux-no-wrap .mat-mdc-paginator-container {
+    flex-wrap: nowrap;
+  }
+
+  mat-paginator {
+    .mat-mdc-paginator-range-label {
+      margin-left: 0.25rem;
+      margin-right: 0.25rem;
+    }
+
+    &.lux-dense {
+      .mat-mdc-form-field-infix {
+        min-height: 0;
+      }
+
+      @include mat.form-field-overrides(
+        (
+          container-vertical-padding: 4px
+        )
+      );
+    }
+  }
+}