@ihk-gfi/lux-components-theme 21.0.0 → 21.2.0

package/prebuilt-themes/luxtheme-authentic.css

@@ -1691,6 +1691,7 @@
   --lux-theme-app-gradient-reverse: linear-gradient(270deg, #ffffff 0%, var(--mat-sys-surface-container) 100%);
   --lux-theme-app-border-color: var(--mat-sys-outline-variant);
   --lux-theme-app-border-radius: 4px;
+  --lux-theme-app-state-layer-color: #3a5f94;
   --lux-theme-form-border-width: 1px;
   --lux-theme-form-min-height: 50px;
   --lux-theme-form-dense-min-height: 38px;
@@ -1770,6 +1771,13 @@
   --lux-theme-button-text-primary-text-color: var(--lux-theme-primary-color);
   --lux-theme-button-text-accent-text-color: var(--mat-sys-on-tertiary-container);
   --lux-theme-button-text-warn-text-color: var(--mat-sys-error);
+  --lux-theme-button-icon-default-text-color: var(--lux-theme-dark-primary-text);
+  --lux-theme-button-icon-primary-text-color: var(--lux-theme-primary-color);
+  --lux-theme-button-icon-accent-text-color: var(--mat-sys-on-tertiary-container);
+  --lux-theme-button-icon-warn-text-color: var(--mat-sys-error);
+  --lux-theme-button-icon-size: 18px;
+  --lux-theme-button-icon-container-size: 36px;
+  --lux-theme-button-icon-container-shape: 50%;
   --lux-theme-button-flat-default-text-color: var(--lux-theme-dark-primary-text);
   --lux-theme-button-flat-default-container-color: #ffffff;
   --lux-theme-button-flat-primary-text-color: var(--mat-sys-on-primary);
@@ -1832,6 +1840,19 @@
   --lux-theme-button-flat-text-tracking: 0.078125rem;
   --lux-theme-button-raised-text-tracking: 0.078125rem;
   --lux-theme-button-stroked-text-tracking: 0.078125rem;
+  --lux-theme-button-toggle-height: 2.25rem;
+  --lux-theme-button-toggle-height-dense: 1.5rem;
+  --lux-theme-button-toggle-shape: var(--lux-theme-app-border-radius);
+  --lux-theme-button-toggle-text-color: var(--lux-theme-primary-color);
+  --lux-theme-button-toggle-divider-color: var(--lux-theme-primary-color);
+  --lux-theme-button-toggle-disabled-divider-color: var(--lux-theme-app-border-color);
+  --lux-theme-button-toggle-selected-state-text-color: var(--lux-theme-primary-color);
+  --lux-theme-button-toggle-selected-state-background-color: var(--mat-sys-surface-container-high);
+  --lux-theme-button-toggle-hover-state-layer-opacity: 0.08;
+  --lux-theme-button-toggle-disabled-selected-state-text-color: var(--lux-theme-dark-disabled-text);
+  --lux-theme-button-toggle-disabled-selected-state-background-color: var(--lux-theme-app-border-color);
+  --lux-theme-button-toggle-disabled-state-text-color: var(--lux-theme-dark-disabled-text);
+  --lux-theme-button-toggle-disabled-state-background-color: transparent;
   --lux-theme-card-title-line-height: 2rem;
   --lux-theme-card-title-text-size: 1.5rem;
   --lux-theme-card-title-text-weight: 500;
@@ -37022,10 +37043,8 @@ lux-autocomplete-ac .lux-input-suffix-container {
 }
 
 lux-breadcrumb {
-  padding: 8px;
   margin: 20px 0 36px 0;
-  display: flex;
-  box-sizing: border-box;
+  display: block;
 }
 @media screen and (max-width: 959px) {
   lux-breadcrumb {
@@ -37033,30 +37052,41 @@ lux-breadcrumb {
   }
 }
 lux-breadcrumb .lux-breadcrumb {
-  margin: -8px;
-  padding: 8px;
-  display: inline-flex;
-  flex-wrap: nowrap;
-  white-space: nowrap;
-  justify-content: flex-start;
-  gap: 9px;
-  align-items: baseline;
-  overflow: auto;
   max-width: 100%;
 }
 lux-breadcrumb .lux-breadcrumb-container {
-  padding: 0%;
-  margin: 0px -2px;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 9px;
+  align-items: center;
+  width: auto;
+  max-width: 100%;
+  list-style: none;
 }
+lux-breadcrumb .lux-breadcrumb-container.lux-breadcrumb-container-wrap {
+  flex-wrap: wrap;
+}
+lux-breadcrumb .lux-breadcrumb-item-current,
 lux-breadcrumb .lux-breadcrumb-item {
   display: inline-flex;
-  font-family: var(--lux-theme-app-font-family);
-  font-size: 1.125rem;
-  font-weight: 500;
-  text-decoration: underline;
-  color: var(--lux-theme-primary-color);
+  align-items: center;
+  max-width: 64ch;
+  min-width: 8ch;
   list-style-type: none;
   box-sizing: border-box;
+  color: var(--lux-theme-primary-color);
+}
+lux-breadcrumb .lux-breadcrumb-item-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  color: var(--lux-theme-primary-color);
+  padding: 2px 4px;
+}
+lux-breadcrumb .lux-breadcrumb-item {
+  flex: 0 1 auto;
 }
 lux-breadcrumb .lux-breadcrumb-item.lux-breadcrumb-item-mobile {
   font-size: 1rem;
@@ -37073,28 +37103,38 @@ lux-breadcrumb .lux-breadcrumb-item :hover {
 }
 lux-breadcrumb .lux-breadcrumb-item lux-icon {
   cursor: default;
+  flex: 0 0 auto;
 }
 lux-breadcrumb .lux-breadcrumb-item lux-icon :hover {
   color: var(--lux-theme-primary-color);
   cursor: default;
 }
-lux-breadcrumb .lux-breadcrumb-item a {
-  padding: 2px 4px;
-  color: var(--lux-theme-primary-color);
-  margin: 0px -2px;
-  white-space: nowrap;
+lux-breadcrumb .lux-breadcrumb-item-current {
+  flex: 0 0 content;
+  max-width: 50%;
 }
-lux-breadcrumb .lux-breadcrumb-current-item {
-  font-family: var(--lux-theme-app-font-family);
-  font-size: 1.125rem;
-  font-weight: 500;
-  color: var(--lux-theme-primary-color);
-  list-style-type: none;
-  padding: 4px;
-  box-sizing: border-box;
+lux-breadcrumb .lux-breadcrumb-item-current .lux-breadcrumb-item-title {
+  text-decoration: none;
 }
-lux-breadcrumb .lux-breadcrumb-current-item.lux-breadcrumb-current-item-mobile {
-  font-size: 1rem;
+lux-breadcrumb .lux-breadcrumb-item-dotted {
+  text-decoration: none;
+  min-width: auto;
+}
+lux-breadcrumb .lux-breadcrumb-item-dotted :hover,
+lux-breadcrumb .lux-breadcrumb-item-dotted a {
+  text-decoration: none;
+}
+lux-breadcrumb .lux-breadcrumb-container-wrap .lux-breadcrumb-item,
+lux-breadcrumb .lux-breadcrumb-container-wrap .lux-breadcrumb-item-current {
+  max-width: 100%;
+  display: inline;
+}
+lux-breadcrumb .lux-breadcrumb-container-wrap .lux-breadcrumb-item-title {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+  line-height: 1.75rem;
+  vertical-align: bottom;
 }
 
 lux-button.lux-stroked,
@@ -37305,9 +37345,16 @@ lux-link.lux-rounded.lux-stroked .lux-icon {
   width: var(--lux-theme-button-rounded-stroked-text-size);
   height: var(--lux-theme-button-rounded-stroked-text-size);
 }
+lux-button.lux-rounded.lux-stroked .lux-stroked,
+lux-link.lux-rounded.lux-stroked .lux-stroked {
+  border: 1px solid;
+}
+lux-button.lux-rounded.lux-stroked .lux-stroked:disabled,
+lux-link.lux-rounded.lux-stroked .lux-stroked:disabled {
+  border-color: transparent;
+}
 lux-button.lux-rounded.lux-stroked .lux-stroked:not(:disabled):not([aria-disabled=true]),
 lux-link.lux-rounded.lux-stroked .lux-stroked:not(:disabled):not([aria-disabled=true]) {
-  border: 1px solid;
   border-color: var(--lux-theme-button-rounded-stroked-default-text-color);
 }
 lux-button.lux-rounded.lux-stroked .lux-stroked:not(:disabled):not([aria-disabled=true]).mat-primary,
@@ -37323,6 +37370,29 @@ lux-link.lux-rounded.lux-stroked .lux-stroked:not(:disabled):not([aria-disabled=
   border-color: var(--lux-theme-button-rounded-stroked-warn-text-color);
 }
 
+lux-button.lux-icon-button {
+  --mat-icon-button-container-shape: var(--lux-theme-button-icon-container-shape);
+  --mat-icon-button-icon-color: var(--lux-theme-button-icon-default-text-color);
+  --mat-icon-button-icon-size: var(--lux-theme-button-icon-size);
+  --mat-icon-button-state-layer-size: var(--lux-theme-button-icon-container-size);
+  --mat-icon-button-state-layer-color: var(--lux-theme-app-state-layer-color);
+  --mat-icon-button-touch-target-size: var(--lux-theme-button-icon-container-size);
+}
+lux-button.lux-icon-button lux-icon,
+lux-button.lux-icon-button .lux-icon {
+  width: var(--lux-theme-button-icon-size);
+  height: var(--lux-theme-button-icon-size);
+}
+lux-button.lux-icon-button .mat-primary {
+  --mat-icon-button-icon-color: var(--lux-theme-button-icon-primary-text-color);
+}
+lux-button.lux-icon-button .mat-accent {
+  --mat-icon-button-icon-color: var(--lux-theme-button-icon-accent-text-color);
+}
+lux-button.lux-icon-button .mat-warn {
+  --mat-icon-button-icon-color: var(--lux-theme-button-icon-warn-text-color);
+}
+
 lux-button.lux-raised mat-progress-spinner, lux-button.lux-flat mat-progress-spinner, lux-button.lux-rounded:not(.lux-stroked) mat-progress-spinner,
 lux-link.lux-raised mat-progress-spinner,
 lux-link.lux-flat mat-progress-spinner,
@@ -37363,10 +37433,10 @@ lux-button .mat-warn mat-progress-spinner,
 lux-link .mat-warn mat-progress-spinner {
   --mat-progress-spinner-active-indicator-color: var(--lux-theme-button-text-warn-text-color);
 }
-lux-button .lux-button-spinner mat-progress-spinner,
-lux-link .lux-button-spinner mat-progress-spinner {
-  width: 0.875rem !important;
-  height: 0.875rem !important;
+lux-button .lux-button-spinner .lux-progress-small mat-progress-spinner,
+lux-link .lux-button-spinner .lux-progress-small mat-progress-spinner {
+  width: 1.125rem !important;
+  height: 1.125rem !important;
 }
 lux-button .lux-button-spinner .spinner-padding,
 lux-link .lux-button-spinner .spinner-padding {
@@ -37456,6 +37526,49 @@ lux-link a:not([disabled]):focus-visible {
   outline-offset: 1px;
 }
 
+lux-button-toggle {
+  --mat-button-toggle-shape: var(--lux-theme-button-toggle-shape);
+  --mat-button-toggle-text-color: var(--lux-theme-button-toggle-text-color);
+  --mat-button-toggle-selected-state-text-color: var(--lux-theme-button-toggle-selected-state-text-color);
+  --mat-button-toggle-selected-state-background-color: var(--lux-theme-button-toggle-selected-state-background-color);
+  --mat-button-toggle-hover-state-layer-opacity: var(--lux-theme-button-toggle-hover-state-layer-opacity);
+  --mat-button-toggle-disabled-selected-state-text-color: var(--lux-theme-button-toggle-disabled-selected-state-text-color);
+  --mat-button-toggle-disabled-selected-state-background-color: var(--lux-theme-button-toggle-disabled-selected-state-background-color);
+  --mat-button-toggle-disabled-state-text-color: var(--lux-theme-button-toggle-disabled-state-text-color);
+  --mat-button-toggle-disabled-state-background-color: var(--lux-theme-button-toggle-disabled-state-background-color);
+  --mat-button-toggle-height: var(--lux-theme-button-toggle-height);
+  --mat-button-toggle-divider-color: var(--lux-theme-button-toggle-divider-color);
+}
+lux-button-toggle mat-button-toggle-group[aria-disabled=true] {
+  --mat-button-toggle-divider-color: var(--lux-theme-button-toggle-disabled-divider-color);
+}
+lux-button-toggle.lux-dense {
+  --mat-button-toggle-height: var(--lux-theme-button-toggle-height-dense);
+}
+lux-button-toggle .lux-button-toggle-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+lux-button-toggle .lux-button-toggle-misc {
+  display: flex;
+  margin-left: 12px;
+  font-size: 0.75rem;
+  line-height: 1.2rem;
+  color: var(--lux-theme-dark-secondary-text);
+  word-wrap: break-word;
+}
+lux-button-toggle .lux-button-toggle-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: var(--lux-theme-form-error-msg-background);
+  border-radius: 4px;
+  padding-right: 2px;
+  color: var(--mat-sys-on-error-container);
+}
+
 lux-card {
   --mat-card-outlined-container-color: var(--lux-theme-card-background-color);
   --mat-card-outlined-container-shape: var(--lux-theme-card-shape);
@@ -37613,6 +37726,22 @@ lux-chips-ac .lux-chip-color-warn {
 lux-chips-ac .mat-mdc-chip-remove .mat-icon {
   min-height: unset;
 }
+lux-chips-ac .lux-chip-container {
+  max-width: calc(100% - 8px);
+}
+lux-chips-ac .lux-chip {
+  max-width: 100%;
+  min-width: 0;
+}
+lux-chips-ac .lux-chip .mdc-evolution-chip__cell--primary {
+  min-width: 0;
+}
+lux-chips-ac .lux-chip .mdc-evolution-chip__text-label,
+lux-chips-ac .lux-chip .lux-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 lux-chips-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic {
   padding: 12px 8px;
 }
@@ -37655,6 +37784,56 @@ lux-chips-ac mat-chip-row.cdk-focused:not(.cdk-mouse-focused):not(.cdk-program-f
   border-radius: 4px;
 }
 
+lux-consent-dialog lux-toggle-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-misc-authentic {
+  font-size: 0.875rem;
+}
+lux-consent-dialog .lux-consent-description {
+  margin-top: 0;
+  padding-top: 0;
+}
+lux-consent-dialog .lux-consent-card {
+  padding: 4px;
+}
+lux-consent-dialog .essential-always-active {
+  font-weight: 700;
+}
+lux-consent-dialog .essential-hint {
+  display: flex;
+  font-size: 0.875rem;
+  line-height: 1em;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.6);
+  word-wrap: break-word;
+  margin: 0.25em calc(0.5em + 1px) 0 calc(0.5em + 1px);
+}
+lux-consent-dialog .lux-consent-dialog-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+lux-consent-dialog .storage-type-title {
+  padding-left: 26px;
+}
+lux-consent-dialog .storage-name {
+  word-break: break-all;
+}
+
+lux-consent-dialog.mobile-view .lux-consent-dialog-actions {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  justify-content: space-between;
+}
+lux-consent-dialog.mobile-view .lux-consent-dialog-actions lux-button {
+  display: flex;
+  flex: 1 1 auto;
+}
+lux-consent-dialog.mobile-view .lux-consent-dialog-actions lux-button button {
+  display: flex;
+  flex: 1 1 auto;
+}
+
 :root {
   --mat-option-label-text-size: var(--lux-theme-panel-option-label-text-size);
   --mat-option-label-text-color: var(--lux-theme-panel-option-label-text-color);
@@ -37724,6 +37903,20 @@ lux-datetimepicker-ac button:not(:disabled) .lux-datetimepicker-toggle-icon {
 
 .cdk-overlay-pane.mat-mdc-dialog-panel .mat-mdc-dialog-container {
   border-radius: var(--lux-theme-app-border-radius);
+  height: inherit;
+  min-height: inherit;
+  max-height: inherit;
+  min-width: 100%;
+}
+.cdk-overlay-pane.mat-mdc-dialog-panel .mat-mdc-dialog-inner-container {
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.cdk-overlay-pane.mat-mdc-dialog-panel.lux-dialog {
+  --mat-dialog-container-max-width: 5000px;
+  --mat-dialog-container-small-max-width: 5000px;
+  --mat-dialog-container-min-width: 0;
 }
 
 lux-dialog-preset {
@@ -37740,6 +37933,7 @@ lux-dialog-action {
 lux-dialog-structure {
   --mat-dialog-supporting-text-size: 1rem;
   display: flex;
+  flex: 1 1 auto;
   min-height: 100%;
 }
 lux-dialog-structure .lux-dialog {
@@ -38620,14 +38814,10 @@ lux-form-control-wrapper input {
   font-size: var(--lux-theme-form-control-font-size);
 }
 
-lux-input-ac .lux-input-prefix-container,
-lux-input-ac .lux-input-suffix-container {
-  width: auto;
+lux-input-ac lux-input-ac-prefix,
+lux-input-ac lux-input-ac-suffix {
+  display: flex;
   white-space: nowrap;
-  display: inline-block;
-  flex: 1 1 auto;
-  max-height: 1.5em;
-  align-items: center;
 }
 
 lux-link-plain {
@@ -39473,6 +39663,46 @@ lux-radio-ac.lux-form-control-readonly {
   --mat-select-panel-background-color: var(--lux-theme-panel-bg-color);
   --mat-select-container-elevation-shadow: 0 0 0 1px var(--mat-card-outlined-outline-color, var(--mat-sys-outline-variant));
 }
+.lux-select-panel-ac lux-select-panel-filter,
+.lux-select-panel-ac-multiple lux-select-panel-filter {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: block;
+  box-sizing: border-box;
+  background-color: var(--lux-theme-panel-bg-color);
+  border-bottom: 1px solid var(--mat-card-outlined-outline-color, var(--mat-sys-outline-variant));
+}
+.lux-select-panel-ac .lux-select-panel-filter,
+.lux-select-panel-ac-multiple .lux-select-panel-filter {
+  display: block;
+  box-sizing: border-box;
+  padding: 8px 8px 4px;
+  background-color: var(--lux-theme-panel-bg-color);
+}
+.lux-select-panel-ac .lux-select-panel-filter-option,
+.lux-select-panel-ac-multiple .lux-select-panel-filter-option {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  min-height: auto !important;
+  padding: 0 !important;
+  pointer-events: auto;
+  cursor: default;
+}
+.lux-select-panel-ac .lux-select-panel-filter-option .mdc-list-item__primary-text,
+.lux-select-panel-ac-multiple .lux-select-panel-filter-option .mdc-list-item__primary-text {
+  width: 100%;
+}
+.lux-select-panel-ac.lux-select-panel-ac-filter,
+.lux-select-panel-ac-multiple.lux-select-panel-ac-filter {
+  padding-top: 0;
+  scroll-padding-top: var(--lux-select-filter-offset, 0px);
+}
+.lux-select-panel-ac.lux-select-panel-ac-filter .mat-mdc-option,
+.lux-select-panel-ac-multiple.lux-select-panel-ac-filter .mat-mdc-option {
+  scroll-margin-top: var(--lux-select-filter-offset, 0px);
+}
 
 lux-select-ac {
   --mat-select-enabled-arrow-color: var(--lux-theme-primary-color);