@leanix/components 0.4.843 → 0.4.844

package/fesm2022/leanix-components.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, Input, Component, input, computed, ChangeDetectionStrategy, HostBinding, EventEmitter, HostListener, Output, Injectable, ElementRef, ViewChild, Inject, model, Directive, signal, Optional, Pipe, inject, NgModule, output, DestroyRef, ChangeDetectorRef, effect, ContentChild, afterRenderEffect, ContentChildren, ViewChildren, forwardRef, TemplateRef, viewChild, booleanAttribute, SecurityContext, Self, Host, Injector, ApplicationRef, createComponent } from '@angular/core';
 import * as i1 from '@ngx-translate/core';
 import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
-import { IconComponent as IconComponent$1 } from '@ui5/webcomponents-ngx/main/icon';
+import { IconComponent } from '@ui5/webcomponents-ngx/main/icon';
 import { NgTemplateOutlet, NgClass, AsyncPipe, UpperCasePipe, DecimalPipe, CommonModule, formatDate } from '@angular/common';
 import { BusyIndicatorComponent } from '@ui5/webcomponents-ngx/main/busy-indicator';
 import { __decorate } from 'tslib';
@@ -193,14 +193,14 @@ class BannerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: BannerComponent, isStandalone: true, selector: "lx-banner", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.type": "type()", "attr.size": "size()" } }, ngImport: i0, template: "<div class=\"banner-wrapper\">\n  @if (showIcon()) {\n    <ui5-icon [name]=\"iconName()\" [design]=\"iconDesign()\" />\n  }\n  <div class=\"banner-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;border-left:2px solid}:host[type=success]{background-color:color-mix(in srgb,#33cc58 10%,white);border-color:#33cc58}:host[type=info]{background-color:color-mix(in srgb,#2889ff 10%,white);border-color:#2889ff}:host[type=warning]{background-color:color-mix(in srgb,#ffb62a 10%,white);border-color:#ffb62a}:host[type=danger]{background-color:color-mix(in srgb,#f96464 10%,white);border-color:#f96464}:host[size=big]{margin-bottom:12px}:host[size=big] .banner-wrapper{position:relative;padding:.75rem}:host[size=big] .banner-content{padding-left:2rem}:host[size=big] ui5-icon{position:absolute;top:.875rem;left:.75rem}:host[size=small]{margin-bottom:6px}:host[size=small] .banner-wrapper{padding:.5rem}:host ::ng-deep .banner-content h4{margin-top:0;color:inherit}:host ::ng-deep .banner-content .alert-link{font-weight:700}:host ::ng-deep .banner-content>p,:host ::ng-deep .banner-content>ul{margin-bottom:0}:host ::ng-deep .banner-content p+p{margin-bottom:5px}:host ::ng-deep .banner-content p:last-child{margin-bottom:0}\n"], dependencies: [{ kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: BannerComponent, isStandalone: true, selector: "lx-banner", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.type": "type()", "attr.size": "size()" } }, ngImport: i0, template: "<div class=\"banner-wrapper\">\n  @if (showIcon()) {\n    <ui5-icon [name]=\"iconName()\" [design]=\"iconDesign()\" />\n  }\n  <div class=\"banner-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;border-left:2px solid}:host[type=success]{background-color:color-mix(in srgb,#33cc58 10%,white);border-color:#33cc58}:host[type=info]{background-color:color-mix(in srgb,#2889ff 10%,white);border-color:#2889ff}:host[type=warning]{background-color:color-mix(in srgb,#ffb62a 10%,white);border-color:#ffb62a}:host[type=danger]{background-color:color-mix(in srgb,#f96464 10%,white);border-color:#f96464}:host[size=big]{margin-bottom:12px}:host[size=big] .banner-wrapper{position:relative;padding:.75rem}:host[size=big] .banner-content{padding-left:2rem}:host[size=big] ui5-icon{position:absolute;top:.875rem;left:.75rem}:host[size=small]{margin-bottom:6px}:host[size=small] .banner-wrapper{padding:.5rem}:host ::ng-deep .banner-content h4{margin-top:0;color:inherit}:host ::ng-deep .banner-content .alert-link{font-weight:700}:host ::ng-deep .banner-content>p,:host ::ng-deep .banner-content>ul{margin-bottom:0}:host ::ng-deep .banner-content p+p{margin-bottom:5px}:host ::ng-deep .banner-content p:last-child{margin-bottom:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BannerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-banner', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.type]': 'type()',
                         '[attr.size]': 'size()'
-                    }, imports: [IconComponent$1], template: "<div class=\"banner-wrapper\">\n  @if (showIcon()) {\n    <ui5-icon [name]=\"iconName()\" [design]=\"iconDesign()\" />\n  }\n  <div class=\"banner-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;border-left:2px solid}:host[type=success]{background-color:color-mix(in srgb,#33cc58 10%,white);border-color:#33cc58}:host[type=info]{background-color:color-mix(in srgb,#2889ff 10%,white);border-color:#2889ff}:host[type=warning]{background-color:color-mix(in srgb,#ffb62a 10%,white);border-color:#ffb62a}:host[type=danger]{background-color:color-mix(in srgb,#f96464 10%,white);border-color:#f96464}:host[size=big]{margin-bottom:12px}:host[size=big] .banner-wrapper{position:relative;padding:.75rem}:host[size=big] .banner-content{padding-left:2rem}:host[size=big] ui5-icon{position:absolute;top:.875rem;left:.75rem}:host[size=small]{margin-bottom:6px}:host[size=small] .banner-wrapper{padding:.5rem}:host ::ng-deep .banner-content h4{margin-top:0;color:inherit}:host ::ng-deep .banner-content .alert-link{font-weight:700}:host ::ng-deep .banner-content>p,:host ::ng-deep .banner-content>ul{margin-bottom:0}:host ::ng-deep .banner-content p+p{margin-bottom:5px}:host ::ng-deep .banner-content p:last-child{margin-bottom:0}\n"] }]
+                    }, imports: [IconComponent], template: "<div class=\"banner-wrapper\">\n  @if (showIcon()) {\n    <ui5-icon [name]=\"iconName()\" [design]=\"iconDesign()\" />\n  }\n  <div class=\"banner-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;border-left:2px solid}:host[type=success]{background-color:color-mix(in srgb,#33cc58 10%,white);border-color:#33cc58}:host[type=info]{background-color:color-mix(in srgb,#2889ff 10%,white);border-color:#2889ff}:host[type=warning]{background-color:color-mix(in srgb,#ffb62a 10%,white);border-color:#ffb62a}:host[type=danger]{background-color:color-mix(in srgb,#f96464 10%,white);border-color:#f96464}:host[size=big]{margin-bottom:12px}:host[size=big] .banner-wrapper{position:relative;padding:.75rem}:host[size=big] .banner-content{padding-left:2rem}:host[size=big] ui5-icon{position:absolute;top:.875rem;left:.75rem}:host[size=small]{margin-bottom:6px}:host[size=small] .banner-wrapper{padding:.5rem}:host ::ng-deep .banner-content h4{margin-top:0;color:inherit}:host ::ng-deep .banner-content .alert-link{font-weight:700}:host ::ng-deep .banner-content>p,:host ::ng-deep .banner-content>ul{margin-bottom:0}:host ::ng-deep .banner-content p+p{margin-bottom:5px}:host ::ng-deep .banner-content p:last-child{margin-bottom:0}\n"] }]
         }] });
 
 /**
@@ -323,9 +323,6 @@ class ButtonComponent {
          * <button lx-button icon="decline">Close</button>
          */
         this.icon = input();
-        this.iconName = computed(() => this.getIconName(this.icon()));
-        this.iconVariant = computed(() => extractFontAwesomeVariant(this.icon()));
-        this.iconKind = computed(() => (isFontAwesomeIcon(this.iconName()) ? 'fa' : 'sap'));
         /**
          * The SAP icon to display inside the button.
          * It is displayed after any additional content.
@@ -335,9 +332,6 @@ class ButtonComponent {
          * <button lx-button endIcon="decline">Close</button>
          */
         this.endIcon = input();
-        this.endIconName = computed(() => this.getIconName(this.endIcon()));
-        this.endIconVariant = computed(() => extractFontAwesomeVariant(this.endIcon()));
-        this.endIconKind = computed(() => (isFontAwesomeIcon(this.endIconName()) ? 'fa' : 'sap'));
         /**
          * This shows a spinner inside the button.
          * @default false
@@ -350,26 +344,12 @@ class ButtonComponent {
     get isDisabled() {
         return this.disabled || this.showSpinner;
     }
-    getIconName(iconName) {
-        if (!iconName) {
-            return null;
-        }
-        if (isEllipsisVIcon(iconName)) {
-            // `fa-ellipsis-v` --> `overflow` is an intrusive change, therefore using the SAP icon alternative
-            return 'overflow';
-        }
-        if (!isFontAwesomeIcon(iconName)) {
-            // Assuming SAP icon was provided
-            return iconName;
-        }
-        return removeFontAwesomeVariant(iconName);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ButtonComponent, isStandalone: true, selector: "button[lx-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: false, isRequired: false, transformFunction: null }, circle: { classPropertyName: "circle", publicName: "circle", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, endIcon: { classPropertyName: "endIcon", publicName: "endIcon", isSignal: true, isRequired: false, transformFunction: null }, showSpinner: { classPropertyName: "showSpinner", publicName: "showSpinner", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "attr.size": "this.size", "attr.color": "this.color", "attr.mode": "this.mode", "class.pressed": "this.pressed", "class.selected": "this.selected", "class.square": "this.square", "class.circle": "this.circle", "class.withIcon": "this.hasIcon", "class.loading": "this.showSpinner", "disabled": "this.isDisabled" } }, ngImport: i0, template: "@let startIcon = iconName();\n@let endIcon = endIconName();\n\n@if (!startIcon && !endIcon) {\n  <!-- old layout -->\n  @if (showSpinner) {\n    <ui5-busy-indicator [active]=\"true\" [delay]=\"0\" size=\"S\" />\n  }\n  <ng-container *ngTemplateOutlet=\"content\" />\n} @else {\n  <div class=\"contentWrapper\">\n    <!-- new layout -->\n    @if (showSpinner) {\n      <ui5-busy-indicator [active]=\"true\" [delay]=\"0\" size=\"S\" />\n    } @else if (startIcon && iconKind() === 'sap') {\n      <ui5-icon class=\"ui5Icon\" [name]=\"startIcon\" data-testid=\"start-icon\" />\n    } @else if (startIcon && iconKind() === 'fa') {\n      <!-- eslint-disable-next-line @nx/workspace-no-font-awesome-icons -->\n      <i\n        [class.fa-fw]=\"mode !== 'link'\"\n        class=\"{{ startIcon }}  {{ iconVariant() }}\"\n        role=\"img\"\n        aria-hidden=\"true\"\n        data-testid=\"start-icon\"\n      ></i>\n    }\n    <ng-container *ngTemplateOutlet=\"content\" />\n    @if (!showSpinner && endIcon && endIconKind() === 'sap') {\n      <ui5-icon class=\"ui5Icon\" [name]=\"endIcon\" data-testid=\"end-icon\" />\n    } @else if (!showSpinner && endIcon && endIconKind() === 'fa') {\n      <!-- eslint-disable-next-line @nx/workspace-no-font-awesome-icons -->\n      <i\n        [class.fa-fw]=\"mode !== 'link'\"\n        class=\"{{ endIcon }}  {{ endIconVariant() }}\"\n        role=\"img\"\n        aria-hidden=\"true\"\n        data-testid=\"end-icon\"\n      ></i>\n    }\n  </div>\n}\n\n<!-- ng-content with the same slot can be used once in the same template -->\n<ng-template #content>\n  <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}ui5-busy-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host ::ng-deep i{font-size:.9em}:host(.withIcon){line-height:normal}:host(.withIcon) .contentWrapper{display:flex;height:100%;align-items:center;justify-content:center;column-gap:4px}:host(.withIcon) [class*=fa-]{font-size:var(--lxFontSize, 14px)}:host(.withIcon)[mode=link] .contentWrapper{column-gap:6px}:host(.withIcon)[mode=link] i:before{display:inline-block}:host(.withIcon) .ui5Icon{flex-shrink:0;width:var(--lxFontSmallSize);height:var(--lxFontSmallSize);color:inherit}:host{border-radius:3px;font-weight:var(--lxFontNormal, 400);cursor:pointer;transition:color,background-color,border-color .18s;transition-delay:0s;transition-timing-function:ease}:host[disabled]:not(.loading){opacity:.5;cursor:default}:host[color=default][mode=solid]{color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=solid].loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=solid]:hover:not([disabled]),:host[color=default][mode=solid]:focus:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=default][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host[color=default][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #c2c9d6 r g b/.5);border:none}:host[color=default][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host[color=default][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=solid].selected.loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=default][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=outline]:focus:not([disabled]),:host[color=default][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host[color=default][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=ghost]:focus:not([disabled]),:host[color=default][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=default][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=default][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=link]:focus:not([disabled]),:host[color=default][mode=link]:hover:not([disabled]),:host[color=default][mode=link]:active:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=default][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=default][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=solid]{color:#2a303d;background-color:#fff;border:1px solid #99a5bb}:host[color=light][mode=solid].loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=solid]:hover:not([disabled]),:host[color=light][mode=solid]:focus:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=light][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host[color=light][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #c2c9d6 r g b/.5);border:none}:host[color=light][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host[color=light][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=solid].selected.loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=light][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=outline]:focus:not([disabled]),:host[color=light][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host[color=light][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=ghost]:focus:not([disabled]),:host[color=light][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=light][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=light][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=link]:focus:not([disabled]),:host[color=light][mode=link]:hover:not([disabled]),:host[color=light][mode=link]:active:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=light][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=light][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=solid]{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=solid].loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=solid]:hover:not([disabled]),:host[color=primary][mode=solid]:focus:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=primary][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=solid]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcoloractive);border:1px solid var(--lx-primarybutton-backgroundcoloractive)}:host[color=primary][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcoloractive) r g b/.5);border:none}:host[color=primary][mode=solid].pressed{background-color:var(--lx-primarybutton-backgroundcoloractive)!important;border-color:var(--lx-primarybutton-backgroundcoloractive)!important}:host[color=primary][mode=solid].selected{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=solid].selected.loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=outline]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=outline]:focus:not([disabled]),:host[color=primary][mode=outline]:hover:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=outline]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=ghost]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent}:host[color=primary][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=ghost]:focus:not([disabled]),:host[color=primary][mode=ghost]:hover:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=ghost]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=link]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=primary][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=link]:focus:not([disabled]),:host[color=primary][mode=link]:hover:not([disabled]),:host[color=primary][mode=link]:active:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=primary][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=primary][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=solid]{color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=solid].loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=solid]:hover:not([disabled]),:host[color=danger][mode=solid]:focus:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=danger][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=solid]:active:not([disabled]){color:#fff;background-color:#bd0707;border:1px solid rgb(188.6956521739,7.3043478261,7.3043478261)}:host[color=danger][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(188.6956521739,7.3043478261,7.3043478261) r g b/.5);border:none}:host[color=danger][mode=solid].pressed{background-color:#bd0707!important;border-color:#bd0707!important}:host[color=danger][mode=solid].selected{color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=solid].selected.loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=outline]{color:#f96464;background-color:transparent;border:1px solid #f96464}:host[color=danger][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=outline]:focus:not([disabled]),:host[color=danger][mode=outline]:hover:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=outline]:active:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=ghost]{color:#f96464;background-color:transparent;border:1px solid transparent}:host[color=danger][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=ghost]:focus:not([disabled]),:host[color=danger][mode=ghost]:hover:not([disabled]){color:#f96464;background-color:transparent;border:1px solid #f96464}:host[color=danger][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=ghost]:active:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=link]{color:#f96464;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=danger][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=link]:focus:not([disabled]),:host[color=danger][mode=link]:hover:not([disabled]),:host[color=danger][mode=link]:active:not([disabled]){color:#f96464;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=danger][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=danger][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=solid]{color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=solid].loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=solid]:hover:not([disabled]),:host[color=success][mode=solid]:focus:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=success][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=solid]:active:not([disabled]){color:#fff;background-color:#145223;border:1px solid rgb(20.4,81.6,35.2)}:host[color=success][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(20.4,81.6,35.2) r g b/.5);border:none}:host[color=success][mode=solid].pressed{background-color:#145223!important;border-color:#145223!important}:host[color=success][mode=solid].selected{color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=solid].selected.loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=outline]{color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host[color=success][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=outline]:focus:not([disabled]),:host[color=success][mode=outline]:hover:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=outline]:active:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=ghost]{color:#33cc58;background-color:transparent;border:1px solid transparent}:host[color=success][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=ghost]:focus:not([disabled]),:host[color=success][mode=ghost]:hover:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host[color=success][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=ghost]:active:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=link]{color:#33cc58;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=success][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=link]:focus:not([disabled]),:host[color=success][mode=link]:hover:not([disabled]),:host[color=success][mode=link]:active:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=success][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=success][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[size=small]{height:20px;padding:3px 7px;font-size:var(--lxFontSmallSize, 12px);min-width:20px}:host[size=small]:not(.withIcon){line-height:12px}:host[size=small].square{width:20px;text-align:center;padding:0}:host[size=small].circle{border-radius:10px;min-width:20px;padding:0 3px}:host[size=small].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=medium]{height:24px;padding:3px 7px;font-size:var(--lxFontSize, 14px);min-width:24px}:host[size=medium]:not(.withIcon){line-height:16px}:host[size=medium].square{width:24px;text-align:center;padding:0}:host[size=medium].circle{border-radius:11px;min-width:24px;padding:0 3px}:host[size=medium].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=large]{height:32px;padding:7px 11px;font-size:var(--lxFontSize, 14px);min-width:32px}:host[size=large]:not(.withIcon){line-height:16px}:host[size=large].square{width:32px;text-align:center;padding:0}:host[size=large].circle{border-radius:15px;min-width:32px;padding:0 7px}:host[size=large].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=auto]{height:auto;padding:0;font-size:inherit;min-width:auto}:host[size=auto]:not(.withIcon){line-height:normal}:host[size=auto].square{width:auto;text-align:center;padding:0}:host[size=auto].circle{border-radius:unset;min-width:auto;padding:0}:host[size=auto].circle{height:auto;padding:0;font-size:inherit;min-width:auto}:host[size=auto].circle:not(.withIcon){line-height:normal}:host[size=auto].circle.square{width:auto;text-align:center;padding:0}:host[size=auto].circle.circle{border-radius:10px;min-width:auto;padding:0}:host.loading{position:relative;color:transparent!important}\n"], dependencies: [{ kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BusyIndicatorComponent, selector: "ui5-busy-indicator", inputs: ["text", "size", "active", "delay", "textPlacement"], exportAs: ["ui5BusyIndicator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ButtonComponent, isStandalone: true, selector: "button[lx-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: false, isRequired: false, transformFunction: null }, circle: { classPropertyName: "circle", publicName: "circle", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, endIcon: { classPropertyName: "endIcon", publicName: "endIcon", isSignal: true, isRequired: false, transformFunction: null }, showSpinner: { classPropertyName: "showSpinner", publicName: "showSpinner", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "attr.size": "this.size", "attr.color": "this.color", "attr.mode": "this.mode", "class.pressed": "this.pressed", "class.selected": "this.selected", "class.square": "this.square", "class.circle": "this.circle", "class.withIcon": "this.hasIcon", "class.loading": "this.showSpinner", "disabled": "this.isDisabled" } }, ngImport: i0, template: "@if (!icon() && !endIcon()) {\n  <!-- old layout -->\n  @if (showSpinner) {\n    <ui5-busy-indicator [active]=\"true\" [delay]=\"0\" size=\"S\" />\n  }\n  <ng-container *ngTemplateOutlet=\"content\" />\n} @else {\n  <div class=\"contentWrapper\">\n    <!-- new layout -->\n    @if (showSpinner) {\n      <ui5-busy-indicator [active]=\"true\" [delay]=\"0\" size=\"S\" />\n    } @else if (icon()) {\n      <ui5-icon class=\"ui5Icon\" [name]=\"icon()\" data-testid=\"start-icon\" />\n    }\n    <ng-container *ngTemplateOutlet=\"content\" />\n    @if (!showSpinner && endIcon()) {\n      <ui5-icon class=\"ui5Icon\" [name]=\"endIcon()\" data-testid=\"end-icon\" />\n    }\n  </div>\n}\n\n<!-- ng-content with the same slot can be used once in the same template -->\n<ng-template #content>\n  <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}ui5-busy-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host(.withIcon){line-height:normal}:host(.withIcon) .contentWrapper{display:flex;height:100%;align-items:center;justify-content:center;column-gap:4px}:host(.withIcon)[mode=link] .contentWrapper{column-gap:6px}:host(.withIcon) .ui5Icon{flex-shrink:0;width:var(--lxFontSmallSize);height:var(--lxFontSmallSize);color:inherit}:host{border-radius:3px;font-weight:var(--lxFontNormal, 400);cursor:pointer;transition:color,background-color,border-color .18s;transition-delay:0s;transition-timing-function:ease}:host[disabled]:not(.loading){opacity:.5;cursor:default}:host[color=default][mode=solid]{color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=solid].loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=solid]:hover:not([disabled]),:host[color=default][mode=solid]:focus:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=default][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host[color=default][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #c2c9d6 r g b/.5);border:none}:host[color=default][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host[color=default][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=solid].selected.loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=default][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=outline]:focus:not([disabled]),:host[color=default][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host[color=default][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=ghost]:focus:not([disabled]),:host[color=default][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=default][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=default][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=link]:focus:not([disabled]),:host[color=default][mode=link]:hover:not([disabled]),:host[color=default][mode=link]:active:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=default][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=default][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=solid]{color:#2a303d;background-color:#fff;border:1px solid #99a5bb}:host[color=light][mode=solid].loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=solid]:hover:not([disabled]),:host[color=light][mode=solid]:focus:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=light][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host[color=light][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #c2c9d6 r g b/.5);border:none}:host[color=light][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host[color=light][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=solid].selected.loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=light][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=outline]:focus:not([disabled]),:host[color=light][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host[color=light][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=ghost]:focus:not([disabled]),:host[color=light][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=light][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=light][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=link]:focus:not([disabled]),:host[color=light][mode=link]:hover:not([disabled]),:host[color=light][mode=link]:active:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=light][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=light][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=solid]{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=solid].loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=solid]:hover:not([disabled]),:host[color=primary][mode=solid]:focus:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=primary][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=solid]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcoloractive);border:1px solid var(--lx-primarybutton-backgroundcoloractive)}:host[color=primary][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcoloractive) r g b/.5);border:none}:host[color=primary][mode=solid].pressed{background-color:var(--lx-primarybutton-backgroundcoloractive)!important;border-color:var(--lx-primarybutton-backgroundcoloractive)!important}:host[color=primary][mode=solid].selected{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=solid].selected.loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=outline]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=outline]:focus:not([disabled]),:host[color=primary][mode=outline]:hover:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=outline]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=ghost]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent}:host[color=primary][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=ghost]:focus:not([disabled]),:host[color=primary][mode=ghost]:hover:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=ghost]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=link]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=primary][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=link]:focus:not([disabled]),:host[color=primary][mode=link]:hover:not([disabled]),:host[color=primary][mode=link]:active:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=primary][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=primary][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=solid]{color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=solid].loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=solid]:hover:not([disabled]),:host[color=danger][mode=solid]:focus:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=danger][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=solid]:active:not([disabled]){color:#fff;background-color:#bd0707;border:1px solid rgb(188.6956521739,7.3043478261,7.3043478261)}:host[color=danger][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(188.6956521739,7.3043478261,7.3043478261) r g b/.5);border:none}:host[color=danger][mode=solid].pressed{background-color:#bd0707!important;border-color:#bd0707!important}:host[color=danger][mode=solid].selected{color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=solid].selected.loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=outline]{color:#f96464;background-color:transparent;border:1px solid #f96464}:host[color=danger][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=outline]:focus:not([disabled]),:host[color=danger][mode=outline]:hover:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=outline]:active:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=ghost]{color:#f96464;background-color:transparent;border:1px solid transparent}:host[color=danger][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=ghost]:focus:not([disabled]),:host[color=danger][mode=ghost]:hover:not([disabled]){color:#f96464;background-color:transparent;border:1px solid #f96464}:host[color=danger][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=ghost]:active:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=link]{color:#f96464;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=danger][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=link]:focus:not([disabled]),:host[color=danger][mode=link]:hover:not([disabled]),:host[color=danger][mode=link]:active:not([disabled]){color:#f96464;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=danger][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=danger][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=solid]{color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=solid].loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=solid]:hover:not([disabled]),:host[color=success][mode=solid]:focus:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=success][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=solid]:active:not([disabled]){color:#fff;background-color:#145223;border:1px solid rgb(20.4,81.6,35.2)}:host[color=success][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(20.4,81.6,35.2) r g b/.5);border:none}:host[color=success][mode=solid].pressed{background-color:#145223!important;border-color:#145223!important}:host[color=success][mode=solid].selected{color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=solid].selected.loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=outline]{color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host[color=success][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=outline]:focus:not([disabled]),:host[color=success][mode=outline]:hover:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=outline]:active:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=ghost]{color:#33cc58;background-color:transparent;border:1px solid transparent}:host[color=success][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=ghost]:focus:not([disabled]),:host[color=success][mode=ghost]:hover:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host[color=success][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=ghost]:active:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=link]{color:#33cc58;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=success][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=link]:focus:not([disabled]),:host[color=success][mode=link]:hover:not([disabled]),:host[color=success][mode=link]:active:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=success][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=success][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[size=small]{height:20px;padding:3px 7px;font-size:var(--lxFontSmallSize, 12px);min-width:20px}:host[size=small]:not(.withIcon){line-height:12px}:host[size=small].square{width:20px;text-align:center;padding:0}:host[size=small].circle{border-radius:10px;min-width:20px;padding:0 3px}:host[size=small].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=medium]{height:24px;padding:3px 7px;font-size:var(--lxFontSize, 14px);min-width:24px}:host[size=medium]:not(.withIcon){line-height:16px}:host[size=medium].square{width:24px;text-align:center;padding:0}:host[size=medium].circle{border-radius:11px;min-width:24px;padding:0 3px}:host[size=medium].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=large]{height:32px;padding:7px 11px;font-size:var(--lxFontSize, 14px);min-width:32px}:host[size=large]:not(.withIcon){line-height:16px}:host[size=large].square{width:32px;text-align:center;padding:0}:host[size=large].circle{border-radius:15px;min-width:32px;padding:0 7px}:host[size=large].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=auto]{height:auto;padding:0;font-size:inherit;min-width:auto}:host[size=auto]:not(.withIcon){line-height:normal}:host[size=auto].square{width:auto;text-align:center;padding:0}:host[size=auto].circle{border-radius:unset;min-width:auto;padding:0}:host[size=auto].circle{height:auto;padding:0;font-size:inherit;min-width:auto}:host[size=auto].circle:not(.withIcon){line-height:normal}:host[size=auto].circle.square{width:auto;text-align:center;padding:0}:host[size=auto].circle.circle{border-radius:10px;min-width:auto;padding:0}:host.loading{position:relative;color:transparent!important}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BusyIndicatorComponent, selector: "ui5-busy-indicator", inputs: ["text", "size", "active", "delay", "textPlacement"], exportAs: ["ui5BusyIndicator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[lx-button]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent$1, NgTemplateOutlet, BusyIndicatorComponent], template: "@let startIcon = iconName();\n@let endIcon = endIconName();\n\n@if (!startIcon && !endIcon) {\n  <!-- old layout -->\n  @if (showSpinner) {\n    <ui5-busy-indicator [active]=\"true\" [delay]=\"0\" size=\"S\" />\n  }\n  <ng-container *ngTemplateOutlet=\"content\" />\n} @else {\n  <div class=\"contentWrapper\">\n    <!-- new layout -->\n    @if (showSpinner) {\n      <ui5-busy-indicator [active]=\"true\" [delay]=\"0\" size=\"S\" />\n    } @else if (startIcon && iconKind() === 'sap') {\n      <ui5-icon class=\"ui5Icon\" [name]=\"startIcon\" data-testid=\"start-icon\" />\n    } @else if (startIcon && iconKind() === 'fa') {\n      <!-- eslint-disable-next-line @nx/workspace-no-font-awesome-icons -->\n      <i\n        [class.fa-fw]=\"mode !== 'link'\"\n        class=\"{{ startIcon }}  {{ iconVariant() }}\"\n        role=\"img\"\n        aria-hidden=\"true\"\n        data-testid=\"start-icon\"\n      ></i>\n    }\n    <ng-container *ngTemplateOutlet=\"content\" />\n    @if (!showSpinner && endIcon && endIconKind() === 'sap') {\n      <ui5-icon class=\"ui5Icon\" [name]=\"endIcon\" data-testid=\"end-icon\" />\n    } @else if (!showSpinner && endIcon && endIconKind() === 'fa') {\n      <!-- eslint-disable-next-line @nx/workspace-no-font-awesome-icons -->\n      <i\n        [class.fa-fw]=\"mode !== 'link'\"\n        class=\"{{ endIcon }}  {{ endIconVariant() }}\"\n        role=\"img\"\n        aria-hidden=\"true\"\n        data-testid=\"end-icon\"\n      ></i>\n    }\n  </div>\n}\n\n<!-- ng-content with the same slot can be used once in the same template -->\n<ng-template #content>\n  <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}ui5-busy-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host ::ng-deep i{font-size:.9em}:host(.withIcon){line-height:normal}:host(.withIcon) .contentWrapper{display:flex;height:100%;align-items:center;justify-content:center;column-gap:4px}:host(.withIcon) [class*=fa-]{font-size:var(--lxFontSize, 14px)}:host(.withIcon)[mode=link] .contentWrapper{column-gap:6px}:host(.withIcon)[mode=link] i:before{display:inline-block}:host(.withIcon) .ui5Icon{flex-shrink:0;width:var(--lxFontSmallSize);height:var(--lxFontSmallSize);color:inherit}:host{border-radius:3px;font-weight:var(--lxFontNormal, 400);cursor:pointer;transition:color,background-color,border-color .18s;transition-delay:0s;transition-timing-function:ease}:host[disabled]:not(.loading){opacity:.5;cursor:default}:host[color=default][mode=solid]{color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=solid].loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=solid]:hover:not([disabled]),:host[color=default][mode=solid]:focus:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=default][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host[color=default][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #c2c9d6 r g b/.5);border:none}:host[color=default][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host[color=default][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=solid].selected.loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=default][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=outline]:focus:not([disabled]),:host[color=default][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host[color=default][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=ghost]:focus:not([disabled]),:host[color=default][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=default][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=default][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=link]:focus:not([disabled]),:host[color=default][mode=link]:hover:not([disabled]),:host[color=default][mode=link]:active:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=default][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=default][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=solid]{color:#2a303d;background-color:#fff;border:1px solid #99a5bb}:host[color=light][mode=solid].loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=solid]:hover:not([disabled]),:host[color=light][mode=solid]:focus:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=light][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host[color=light][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #c2c9d6 r g b/.5);border:none}:host[color=light][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host[color=light][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=solid].selected.loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=light][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=outline]:focus:not([disabled]),:host[color=light][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host[color=light][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=ghost]:focus:not([disabled]),:host[color=light][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=light][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=light][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=link]:focus:not([disabled]),:host[color=light][mode=link]:hover:not([disabled]),:host[color=light][mode=link]:active:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=light][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=light][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=solid]{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=solid].loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=solid]:hover:not([disabled]),:host[color=primary][mode=solid]:focus:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=primary][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=solid]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcoloractive);border:1px solid var(--lx-primarybutton-backgroundcoloractive)}:host[color=primary][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcoloractive) r g b/.5);border:none}:host[color=primary][mode=solid].pressed{background-color:var(--lx-primarybutton-backgroundcoloractive)!important;border-color:var(--lx-primarybutton-backgroundcoloractive)!important}:host[color=primary][mode=solid].selected{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=solid].selected.loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=outline]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=outline]:focus:not([disabled]),:host[color=primary][mode=outline]:hover:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=outline]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=ghost]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent}:host[color=primary][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=ghost]:focus:not([disabled]),:host[color=primary][mode=ghost]:hover:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=ghost]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=link]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=primary][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=link]:focus:not([disabled]),:host[color=primary][mode=link]:hover:not([disabled]),:host[color=primary][mode=link]:active:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=primary][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=primary][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=solid]{color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=solid].loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=solid]:hover:not([disabled]),:host[color=danger][mode=solid]:focus:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=danger][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=solid]:active:not([disabled]){color:#fff;background-color:#bd0707;border:1px solid rgb(188.6956521739,7.3043478261,7.3043478261)}:host[color=danger][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(188.6956521739,7.3043478261,7.3043478261) r g b/.5);border:none}:host[color=danger][mode=solid].pressed{background-color:#bd0707!important;border-color:#bd0707!important}:host[color=danger][mode=solid].selected{color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=solid].selected.loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=outline]{color:#f96464;background-color:transparent;border:1px solid #f96464}:host[color=danger][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=outline]:focus:not([disabled]),:host[color=danger][mode=outline]:hover:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=outline]:active:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=ghost]{color:#f96464;background-color:transparent;border:1px solid transparent}:host[color=danger][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=ghost]:focus:not([disabled]),:host[color=danger][mode=ghost]:hover:not([disabled]){color:#f96464;background-color:transparent;border:1px solid #f96464}:host[color=danger][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=ghost]:active:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=link]{color:#f96464;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=danger][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=link]:focus:not([disabled]),:host[color=danger][mode=link]:hover:not([disabled]),:host[color=danger][mode=link]:active:not([disabled]){color:#f96464;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=danger][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=danger][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=solid]{color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=solid].loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=solid]:hover:not([disabled]),:host[color=success][mode=solid]:focus:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=success][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=solid]:active:not([disabled]){color:#fff;background-color:#145223;border:1px solid rgb(20.4,81.6,35.2)}:host[color=success][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(20.4,81.6,35.2) r g b/.5);border:none}:host[color=success][mode=solid].pressed{background-color:#145223!important;border-color:#145223!important}:host[color=success][mode=solid].selected{color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=solid].selected.loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=outline]{color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host[color=success][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=outline]:focus:not([disabled]),:host[color=success][mode=outline]:hover:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=outline]:active:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=ghost]{color:#33cc58;background-color:transparent;border:1px solid transparent}:host[color=success][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=ghost]:focus:not([disabled]),:host[color=success][mode=ghost]:hover:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host[color=success][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=ghost]:active:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=link]{color:#33cc58;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=success][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=link]:focus:not([disabled]),:host[color=success][mode=link]:hover:not([disabled]),:host[color=success][mode=link]:active:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=success][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=success][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[size=small]{height:20px;padding:3px 7px;font-size:var(--lxFontSmallSize, 12px);min-width:20px}:host[size=small]:not(.withIcon){line-height:12px}:host[size=small].square{width:20px;text-align:center;padding:0}:host[size=small].circle{border-radius:10px;min-width:20px;padding:0 3px}:host[size=small].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=medium]{height:24px;padding:3px 7px;font-size:var(--lxFontSize, 14px);min-width:24px}:host[size=medium]:not(.withIcon){line-height:16px}:host[size=medium].square{width:24px;text-align:center;padding:0}:host[size=medium].circle{border-radius:11px;min-width:24px;padding:0 3px}:host[size=medium].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=large]{height:32px;padding:7px 11px;font-size:var(--lxFontSize, 14px);min-width:32px}:host[size=large]:not(.withIcon){line-height:16px}:host[size=large].square{width:32px;text-align:center;padding:0}:host[size=large].circle{border-radius:15px;min-width:32px;padding:0 7px}:host[size=large].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=auto]{height:auto;padding:0;font-size:inherit;min-width:auto}:host[size=auto]:not(.withIcon){line-height:normal}:host[size=auto].square{width:auto;text-align:center;padding:0}:host[size=auto].circle{border-radius:unset;min-width:auto;padding:0}:host[size=auto].circle{height:auto;padding:0;font-size:inherit;min-width:auto}:host[size=auto].circle:not(.withIcon){line-height:normal}:host[size=auto].circle.square{width:auto;text-align:center;padding:0}:host[size=auto].circle.circle{border-radius:10px;min-width:auto;padding:0}:host.loading{position:relative;color:transparent!important}\n"] }]
+            args: [{ selector: 'button[lx-button]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, NgTemplateOutlet, BusyIndicatorComponent], template: "@if (!icon() && !endIcon()) {\n  <!-- old layout -->\n  @if (showSpinner) {\n    <ui5-busy-indicator [active]=\"true\" [delay]=\"0\" size=\"S\" />\n  }\n  <ng-container *ngTemplateOutlet=\"content\" />\n} @else {\n  <div class=\"contentWrapper\">\n    <!-- new layout -->\n    @if (showSpinner) {\n      <ui5-busy-indicator [active]=\"true\" [delay]=\"0\" size=\"S\" />\n    } @else if (icon()) {\n      <ui5-icon class=\"ui5Icon\" [name]=\"icon()\" data-testid=\"start-icon\" />\n    }\n    <ng-container *ngTemplateOutlet=\"content\" />\n    @if (!showSpinner && endIcon()) {\n      <ui5-icon class=\"ui5Icon\" [name]=\"endIcon()\" data-testid=\"end-icon\" />\n    }\n  </div>\n}\n\n<!-- ng-content with the same slot can be used once in the same template -->\n<ng-template #content>\n  <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}ui5-busy-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host(.withIcon){line-height:normal}:host(.withIcon) .contentWrapper{display:flex;height:100%;align-items:center;justify-content:center;column-gap:4px}:host(.withIcon)[mode=link] .contentWrapper{column-gap:6px}:host(.withIcon) .ui5Icon{flex-shrink:0;width:var(--lxFontSmallSize);height:var(--lxFontSmallSize);color:inherit}:host{border-radius:3px;font-weight:var(--lxFontNormal, 400);cursor:pointer;transition:color,background-color,border-color .18s;transition-delay:0s;transition-timing-function:ease}:host[disabled]:not(.loading){opacity:.5;cursor:default}:host[color=default][mode=solid]{color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=solid].loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=solid]:hover:not([disabled]),:host[color=default][mode=solid]:focus:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=default][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host[color=default][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #c2c9d6 r g b/.5);border:none}:host[color=default][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host[color=default][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=solid].selected.loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=default][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=outline]:focus:not([disabled]),:host[color=default][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=default][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host[color=default][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=ghost]:focus:not([disabled]),:host[color=default][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=default][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #f0f2f5 r g b/.5);border:none}:host[color=default][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=default][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=default][mode=link]:focus:not([disabled]),:host[color=default][mode=link]:hover:not([disabled]),:host[color=default][mode=link]:active:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=default][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=default][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=default][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=solid]{color:#2a303d;background-color:#fff;border:1px solid #99a5bb}:host[color=light][mode=solid].loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=solid]:hover:not([disabled]),:host[color=light][mode=solid]:focus:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=light][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=solid]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}:host[color=light][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #c2c9d6 r g b/.5);border:none}:host[color=light][mode=solid].pressed{background-color:#c2c9d6!important;border-color:#c2c9d6!important}:host[color=light][mode=solid].selected{color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=solid].selected.loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=light][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=outline]:focus:not([disabled]),:host[color=light][mode=outline]:hover:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=outline]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #e1e5eb r g b/.5);border:none}:host[color=light][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}:host[color=light][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=ghost]:focus:not([disabled]),:host[color=light][mode=ghost]:hover:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}:host[color=light][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=ghost]:active:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #fff r g b/.5);border:none}:host[color=light][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=light][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=light][mode=link]:focus:not([disabled]),:host[color=light][mode=link]:hover:not([disabled]),:host[color=light][mode=link]:active:not([disabled]){color:#2a303d;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=light][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=light][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=light][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=solid]{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=solid].loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=solid]:hover:not([disabled]),:host[color=primary][mode=solid]:focus:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=primary][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=solid]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcoloractive);border:1px solid var(--lx-primarybutton-backgroundcoloractive)}:host[color=primary][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcoloractive) r g b/.5);border:none}:host[color=primary][mode=solid].pressed{background-color:var(--lx-primarybutton-backgroundcoloractive)!important;border-color:var(--lx-primarybutton-backgroundcoloractive)!important}:host[color=primary][mode=solid].selected{color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=solid].selected.loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=outline]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=outline]:focus:not([disabled]),:host[color=primary][mode=outline]:hover:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=outline]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolorhover);border:1px solid var(--lx-primarybutton-backgroundcolorhover)}:host[color=primary][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolorhover) r g b/.5);border:none}:host[color=primary][mode=ghost]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent}:host[color=primary][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=ghost]:focus:not([disabled]),:host[color=primary][mode=ghost]:hover:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=ghost]:active:not([disabled]){color:var(--lx-primarybutton-fontcolor);background-color:var(--lx-primarybutton-backgroundcolor);border:1px solid var(--lx-primarybutton-backgroundcolor)}:host[color=primary][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from var(--lx-primarybutton-backgroundcolor) r g b/.5);border:none}:host[color=primary][mode=link]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=primary][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=primary][mode=link]:focus:not([disabled]),:host[color=primary][mode=link]:hover:not([disabled]),:host[color=primary][mode=link]:active:not([disabled]){color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=primary][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=primary][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=primary][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=solid]{color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=solid].loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=solid]:hover:not([disabled]),:host[color=danger][mode=solid]:focus:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=danger][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=solid]:active:not([disabled]){color:#fff;background-color:#bd0707;border:1px solid rgb(188.6956521739,7.3043478261,7.3043478261)}:host[color=danger][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(188.6956521739,7.3043478261,7.3043478261) r g b/.5);border:none}:host[color=danger][mode=solid].pressed{background-color:#bd0707!important;border-color:#bd0707!important}:host[color=danger][mode=solid].selected{color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=solid].selected.loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=outline]{color:#f96464;background-color:transparent;border:1px solid #f96464}:host[color=danger][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=outline]:focus:not([disabled]),:host[color=danger][mode=outline]:hover:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=outline]:active:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(246.149068323,26.350931677,26.350931677) r g b/.5);border:none}:host[color=danger][mode=ghost]{color:#f96464;background-color:transparent;border:1px solid transparent}:host[color=danger][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=ghost]:focus:not([disabled]),:host[color=danger][mode=ghost]:hover:not([disabled]){color:#f96464;background-color:transparent;border:1px solid #f96464}:host[color=danger][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=ghost]:active:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #f96464 r g b/.5);border:none}:host[color=danger][mode=link]{color:#f96464;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=danger][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=danger][mode=link]:focus:not([disabled]),:host[color=danger][mode=link]:hover:not([disabled]),:host[color=danger][mode=link]:active:not([disabled]){color:#f96464;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=danger][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=danger][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=danger][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=solid]{color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=solid].loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=solid]:hover:not([disabled]),:host[color=success][mode=solid]:focus:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=solid]:hover:not([disabled]).loading[mode=solid],:host[color=success][mode=solid]:focus:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=solid]:active:not([disabled]){color:#fff;background-color:#145223;border:1px solid rgb(20.4,81.6,35.2)}:host[color=success][mode=solid]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(20.4,81.6,35.2) r g b/.5);border:none}:host[color=success][mode=solid].pressed{background-color:#145223!important;border-color:#145223!important}:host[color=success][mode=solid].selected{color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=solid].selected.loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=outline]{color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host[color=success][mode=outline].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=outline]:focus:not([disabled]),:host[color=success][mode=outline]:hover:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=outline]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=outline]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=outline]:active:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=outline]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from rgb(35.7,142.8,61.6) r g b/.5);border:none}:host[color=success][mode=ghost]{color:#33cc58;background-color:transparent;border:1px solid transparent}:host[color=success][mode=ghost].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=ghost]:focus:not([disabled]),:host[color=success][mode=ghost]:hover:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid #33cc58}:host[color=success][mode=ghost]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=ghost]:hover:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=ghost]:active:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=ghost]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from #33cc58 r g b/.5);border:none}:host[color=success][mode=link]{color:#33cc58;background-color:transparent;border:1px solid transparent;padding:0;border:none}:host[color=success][mode=link].loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[color=success][mode=link]:focus:not([disabled]),:host[color=success][mode=link]:hover:not([disabled]),:host[color=success][mode=link]:active:not([disabled]){color:#33cc58;background-color:transparent;border:1px solid transparent;text-decoration:underline;border:none}:host[color=success][mode=link]:focus:not([disabled]).loading[mode=solid],:host[color=success][mode=link]:hover:not([disabled]).loading[mode=solid],:host[color=success][mode=link]:active:not([disabled]).loading[mode=solid]{background-color:rgb(from transparent r g b/.5);border:none}:host[size=small]{height:20px;padding:3px 7px;font-size:var(--lxFontSmallSize, 12px);min-width:20px}:host[size=small]:not(.withIcon){line-height:12px}:host[size=small].square{width:20px;text-align:center;padding:0}:host[size=small].circle{border-radius:10px;min-width:20px;padding:0 3px}:host[size=small].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=medium]{height:24px;padding:3px 7px;font-size:var(--lxFontSize, 14px);min-width:24px}:host[size=medium]:not(.withIcon){line-height:16px}:host[size=medium].square{width:24px;text-align:center;padding:0}:host[size=medium].circle{border-radius:11px;min-width:24px;padding:0 3px}:host[size=medium].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=large]{height:32px;padding:7px 11px;font-size:var(--lxFontSize, 14px);min-width:32px}:host[size=large]:not(.withIcon){line-height:16px}:host[size=large].square{width:32px;text-align:center;padding:0}:host[size=large].circle{border-radius:15px;min-width:32px;padding:0 7px}:host[size=large].withIcon:not(.square,.circle,[mode=link]){padding:0 8px}:host[size=auto]{height:auto;padding:0;font-size:inherit;min-width:auto}:host[size=auto]:not(.withIcon){line-height:normal}:host[size=auto].square{width:auto;text-align:center;padding:0}:host[size=auto].circle{border-radius:unset;min-width:auto;padding:0}:host[size=auto].circle{height:auto;padding:0;font-size:inherit;min-width:auto}:host[size=auto].circle:not(.withIcon){line-height:normal}:host[size=auto].circle.square{width:auto;text-align:center;padding:0}:host[size=auto].circle.circle{border-radius:10px;min-width:auto;padding:0}:host.loading{position:relative;color:transparent!important}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }, {
@@ -419,18 +399,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: HostBinding,
                 args: ['disabled']
             }] } });
-function isEllipsisVIcon(iconName) {
-    return iconName?.includes('fa-ellipsis-v') ?? false;
-}
-function isFontAwesomeIcon(iconName) {
-    return iconName ? /\bfa-\w*\b/.test(iconName) : false;
-}
-function extractFontAwesomeVariant(iconName) {
-    return iconName?.match(/\b(far|fas|fa(?!-)|fal|fab)\b/)?.[0] ?? 'far';
-}
-function removeFontAwesomeVariant(iconName) {
-    return iconName.replace(/\b(far|fas|fa(?!-)|fal|fab)\b/g, '').trim();
-}
 
 /**
  * A simple container component for displaying content in a card-like style.
@@ -974,11 +942,11 @@ class EmptyStateComponent {
         return this.size();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: EmptyStateComponent, isStandalone: true, selector: "lx-empty-state", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, moreLinkLabel: { classPropertyName: "moreLinkLabel", publicName: "moreLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, moreLink: { classPropertyName: "moreLink", publicName: "moreLink", isSignal: true, isRequired: false, transformFunction: null }, openMoreLinkInNewTab: { classPropertyName: "openMoreLinkInNewTab", publicName: "openMoreLinkInNewTab", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked", secondaryButtonClicked: "secondaryButtonClicked", moreLinkClicked: "moreLinkClicked" }, host: { properties: { "attr.size": "this._size" } }, ngImport: i0, template: "<div class=\"tw-max-w-[434px] tw-text-center\">\n  @if (icon(); as icon) {\n    <ui5-icon [name]=\"icon\" design=\"Information\" />\n  }\n\n  <h3 class=\"empty-state-title tw-mb-m tw-mt-xl tw-text-black\" [innerHTML]=\"title()\"></h3>\n\n  <div class=\"empty-state-content tw-leading-[16px] tw-text-gray-50\">\n    <ng-content />\n  </div>\n\n  <div class=\"tw-flex tw-justify-center tw-gap-m\">\n    @if (secondaryButtonLabel()) {\n      <div class=\"secondaryButton tw-my-xl\">\n        <button lx-button size=\"large\" [showSpinner]=\"loading()\" (click)=\"secondaryButtonClicked.emit($event)\">\n          {{ secondaryButtonLabel() }}\n        </button>\n      </div>\n    }\n\n    @if (buttonLabel()) {\n      <div class=\"actionButton tw-my-xl\">\n        <button lx-button size=\"large\" color=\"primary\" [showSpinner]=\"loading()\" (click)=\"buttonClicked.emit($event)\">\n          {{ buttonLabel() }}\n        </button>\n      </div>\n    }\n  </div>\n\n  @if (moreLinkLabel() && moreLink()) {\n    <div>\n      @if (useRouterLink()) {\n        <a\n          rel=\"noopener noreferrer\"\n          class=\"tw-text-size-md tw-text-primary\"\n          [routerLink]=\"moreLink()\"\n          (click)=\"moreLinkClicked.emit($event)\"\n          [target]=\"openMoreLinkInNewTab() ? '_blank' : '_self'\"\n          >{{ moreLinkLabel() }}</a\n        >\n      } @else {\n        <a\n          rel=\"noopener noreferrer\"\n          class=\"tw-text-size-md tw-text-primary\"\n          [href]=\"moreLink()\"\n          (click)=\"moreLinkClicked.emit($event)\"\n          [target]=\"openMoreLinkInNewTab() ? '_blank' : '_self'\"\n          >{{ moreLinkLabel() }}</a\n        >\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;justify-content:center}:host[size=small] .empty-state-title{font-size:var(--lxFontSize, 14px)}:host[size=small] .empty-state-content{font-size:var(--lxFontSmallSize, 12px)}:host[size=medium] .empty-state-title{font-size:var(--lxFontHeader2Size, 24px)}:host[size=medium] .empty-state-content{font-size:var(--lxFontSize, 14px)}ui5-icon{position:relative;width:2rem;height:2rem}ui5-icon:after{content:\"\";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);height:6px;width:44px;background-color:#f0f2f5;border-radius:100%}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: EmptyStateComponent, isStandalone: true, selector: "lx-empty-state", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, moreLinkLabel: { classPropertyName: "moreLinkLabel", publicName: "moreLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, moreLink: { classPropertyName: "moreLink", publicName: "moreLink", isSignal: true, isRequired: false, transformFunction: null }, openMoreLinkInNewTab: { classPropertyName: "openMoreLinkInNewTab", publicName: "openMoreLinkInNewTab", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClicked: "buttonClicked", secondaryButtonClicked: "secondaryButtonClicked", moreLinkClicked: "moreLinkClicked" }, host: { properties: { "attr.size": "this._size" } }, ngImport: i0, template: "<div class=\"tw-max-w-[434px] tw-text-center\">\n  @if (icon(); as icon) {\n    <ui5-icon [name]=\"icon\" design=\"Information\" />\n  }\n\n  <h3 class=\"empty-state-title tw-mb-m tw-mt-xl tw-text-black\" [innerHTML]=\"title()\"></h3>\n\n  <div class=\"empty-state-content tw-leading-[16px] tw-text-gray-50\">\n    <ng-content />\n  </div>\n\n  <div class=\"tw-flex tw-justify-center tw-gap-m\">\n    @if (secondaryButtonLabel()) {\n      <div class=\"secondaryButton tw-my-xl\">\n        <button lx-button size=\"large\" [showSpinner]=\"loading()\" (click)=\"secondaryButtonClicked.emit($event)\">\n          {{ secondaryButtonLabel() }}\n        </button>\n      </div>\n    }\n\n    @if (buttonLabel()) {\n      <div class=\"actionButton tw-my-xl\">\n        <button lx-button size=\"large\" color=\"primary\" [showSpinner]=\"loading()\" (click)=\"buttonClicked.emit($event)\">\n          {{ buttonLabel() }}\n        </button>\n      </div>\n    }\n  </div>\n\n  @if (moreLinkLabel() && moreLink()) {\n    <div>\n      @if (useRouterLink()) {\n        <a\n          rel=\"noopener noreferrer\"\n          class=\"tw-text-size-md tw-text-primary\"\n          [routerLink]=\"moreLink()\"\n          (click)=\"moreLinkClicked.emit($event)\"\n          [target]=\"openMoreLinkInNewTab() ? '_blank' : '_self'\"\n          >{{ moreLinkLabel() }}</a\n        >\n      } @else {\n        <a\n          rel=\"noopener noreferrer\"\n          class=\"tw-text-size-md tw-text-primary\"\n          [href]=\"moreLink()\"\n          (click)=\"moreLinkClicked.emit($event)\"\n          [target]=\"openMoreLinkInNewTab() ? '_blank' : '_self'\"\n          >{{ moreLinkLabel() }}</a\n        >\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;justify-content:center}:host[size=small] .empty-state-title{font-size:var(--lxFontSize, 14px)}:host[size=small] .empty-state-content{font-size:var(--lxFontSmallSize, 12px)}:host[size=medium] .empty-state-title{font-size:var(--lxFontHeader2Size, 24px)}:host[size=medium] .empty-state-content{font-size:var(--lxFontSize, 14px)}ui5-icon{position:relative;width:2rem;height:2rem}ui5-icon:after{content:\"\";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);height:6px;width:44px;background-color:#f0f2f5;border-radius:100%}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-empty-state', imports: [ButtonComponent, RouterLink, IconComponent$1], template: "<div class=\"tw-max-w-[434px] tw-text-center\">\n  @if (icon(); as icon) {\n    <ui5-icon [name]=\"icon\" design=\"Information\" />\n  }\n\n  <h3 class=\"empty-state-title tw-mb-m tw-mt-xl tw-text-black\" [innerHTML]=\"title()\"></h3>\n\n  <div class=\"empty-state-content tw-leading-[16px] tw-text-gray-50\">\n    <ng-content />\n  </div>\n\n  <div class=\"tw-flex tw-justify-center tw-gap-m\">\n    @if (secondaryButtonLabel()) {\n      <div class=\"secondaryButton tw-my-xl\">\n        <button lx-button size=\"large\" [showSpinner]=\"loading()\" (click)=\"secondaryButtonClicked.emit($event)\">\n          {{ secondaryButtonLabel() }}\n        </button>\n      </div>\n    }\n\n    @if (buttonLabel()) {\n      <div class=\"actionButton tw-my-xl\">\n        <button lx-button size=\"large\" color=\"primary\" [showSpinner]=\"loading()\" (click)=\"buttonClicked.emit($event)\">\n          {{ buttonLabel() }}\n        </button>\n      </div>\n    }\n  </div>\n\n  @if (moreLinkLabel() && moreLink()) {\n    <div>\n      @if (useRouterLink()) {\n        <a\n          rel=\"noopener noreferrer\"\n          class=\"tw-text-size-md tw-text-primary\"\n          [routerLink]=\"moreLink()\"\n          (click)=\"moreLinkClicked.emit($event)\"\n          [target]=\"openMoreLinkInNewTab() ? '_blank' : '_self'\"\n          >{{ moreLinkLabel() }}</a\n        >\n      } @else {\n        <a\n          rel=\"noopener noreferrer\"\n          class=\"tw-text-size-md tw-text-primary\"\n          [href]=\"moreLink()\"\n          (click)=\"moreLinkClicked.emit($event)\"\n          [target]=\"openMoreLinkInNewTab() ? '_blank' : '_self'\"\n          >{{ moreLinkLabel() }}</a\n        >\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;justify-content:center}:host[size=small] .empty-state-title{font-size:var(--lxFontSize, 14px)}:host[size=small] .empty-state-content{font-size:var(--lxFontSmallSize, 12px)}:host[size=medium] .empty-state-title{font-size:var(--lxFontHeader2Size, 24px)}:host[size=medium] .empty-state-content{font-size:var(--lxFontSize, 14px)}ui5-icon{position:relative;width:2rem;height:2rem}ui5-icon:after{content:\"\";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);height:6px;width:44px;background-color:#f0f2f5;border-radius:100%}\n"] }]
+            args: [{ selector: 'lx-empty-state', imports: [ButtonComponent, RouterLink, IconComponent], template: "<div class=\"tw-max-w-[434px] tw-text-center\">\n  @if (icon(); as icon) {\n    <ui5-icon [name]=\"icon\" design=\"Information\" />\n  }\n\n  <h3 class=\"empty-state-title tw-mb-m tw-mt-xl tw-text-black\" [innerHTML]=\"title()\"></h3>\n\n  <div class=\"empty-state-content tw-leading-[16px] tw-text-gray-50\">\n    <ng-content />\n  </div>\n\n  <div class=\"tw-flex tw-justify-center tw-gap-m\">\n    @if (secondaryButtonLabel()) {\n      <div class=\"secondaryButton tw-my-xl\">\n        <button lx-button size=\"large\" [showSpinner]=\"loading()\" (click)=\"secondaryButtonClicked.emit($event)\">\n          {{ secondaryButtonLabel() }}\n        </button>\n      </div>\n    }\n\n    @if (buttonLabel()) {\n      <div class=\"actionButton tw-my-xl\">\n        <button lx-button size=\"large\" color=\"primary\" [showSpinner]=\"loading()\" (click)=\"buttonClicked.emit($event)\">\n          {{ buttonLabel() }}\n        </button>\n      </div>\n    }\n  </div>\n\n  @if (moreLinkLabel() && moreLink()) {\n    <div>\n      @if (useRouterLink()) {\n        <a\n          rel=\"noopener noreferrer\"\n          class=\"tw-text-size-md tw-text-primary\"\n          [routerLink]=\"moreLink()\"\n          (click)=\"moreLinkClicked.emit($event)\"\n          [target]=\"openMoreLinkInNewTab() ? '_blank' : '_self'\"\n          >{{ moreLinkLabel() }}</a\n        >\n      } @else {\n        <a\n          rel=\"noopener noreferrer\"\n          class=\"tw-text-size-md tw-text-primary\"\n          [href]=\"moreLink()\"\n          (click)=\"moreLinkClicked.emit($event)\"\n          [target]=\"openMoreLinkInNewTab() ? '_blank' : '_self'\"\n          >{{ moreLinkLabel() }}</a\n        >\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;justify-content:center}:host[size=small] .empty-state-title{font-size:var(--lxFontSize, 14px)}:host[size=small] .empty-state-content{font-size:var(--lxFontSmallSize, 12px)}:host[size=medium] .empty-state-title{font-size:var(--lxFontHeader2Size, 24px)}:host[size=medium] .empty-state-content{font-size:var(--lxFontSize, 14px)}ui5-icon{position:relative;width:2rem;height:2rem}ui5-icon:after{content:\"\";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);height:6px;width:44px;background-color:#f0f2f5;border-radius:100%}\n"] }]
         }], propDecorators: { _size: [{
                 type: HostBinding,
                 args: ['attr.size']
@@ -1112,11 +1080,11 @@ class StepperComponent extends CdkStepper {
         return index === this.selectedIndex;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: StepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: StepperComponent, isStandalone: true, selector: "lx-stepper", providers: [{ provide: CdkStepper, useExisting: StepperComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"stepper\">\n  @for (step of steps; track step.label; let i = $index) {\n    <li class=\"step\" [ngClass]=\"{ 'step-completed': isCompleted(i) }\">\n      <div\n        class=\"step-container\"\n        [class]=\"isSmallVariant ? 'step-container-small' : 'step-container-normal'\"\n        [ngClass]=\"{ 'step-container-active': isActiveStep(i), 'step-container-completed': isCompleted(i) }\"\n      >\n        <div class=\"step-number\" [ngClass]=\"{ 'step-number-active': isActiveStep(i) }\">\n          @if (isCompleted(i)) {\n            <ui5-icon name=\"accept\" design=\"Information\" class=\"check-icon\" [class.small-icon]=\"isSmallVariant\" />\n          } @else if (!isSmallVariant) {\n            {{ i + 1 }}\n          }\n        </div>\n        @if (!isSmallVariant) {\n          <div class=\"step-title\">\n            {{ step.label }}\n          </div>\n        }\n      </div>\n    </li>\n  }\n</ul>\n@if (selected) {\n  <div class=\"content\">\n    <ng-container [ngTemplateOutlet]=\"selected!.content\" />\n  </div>\n}\n", styles: [".stepper{display:flex;position:relative;align-items:center;padding-left:0}.step{position:relative;z-index:1;flex:1;display:flex;flex-direction:row;flex-shrink:0}.step:not(:last-child):after{content:\"\";position:relative;z-index:1;flex:auto;height:1px;min-width:30px;border-top:2px solid #b2bccc;align-self:center;margin-left:5px;margin-right:5px}.step-container{display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;border:2px solid #b2bccc;border-radius:50%;background-color:#fff;pointer-events:none}.step-container-normal{width:40px;height:40px}.step-container-small{width:22.5px;height:22.5px}.step-number{color:#b2bccc;font-size:var(--lxFontSize, 16px);font-style:normal;font-weight:var(--lxFontNormal, 400);width:100%;height:100%;display:flex;align-items:center;justify-content:center}.step-title{width:max-content;top:50px;position:absolute}.check-icon{width:20px;height:20px}.small-icon{width:12px;height:12px}.content{margin-top:48px;height:100%}.step:first-child{justify-content:flex-start}.step:first-child .step-title{left:0}.step:not(:first-child):not(:last-child) .step-container{align-self:center}.step:not(:first-child):not(:last-child) .step-container .step-title{align-self:center}.step:last-child{justify-content:flex-end;align-items:flex-end;text-align:right;flex:0 0 auto}.step:last-child .step-container .step-title{align-self:flex-end;right:0}.step:last-child .step-number{margin-right:40%}.step:nth-child(n+19):last-child .step-number{margin-right:31%}.step-container.step-container-active{background-color:#0070f2;border-color:#0070f2}.step-number-active{color:#fff}.step.step-completed:not(:last-child):after{border-color:#0070f2}.step-container.step-container-completed{border-color:#0070f2}\n"], dependencies: [{ kind: "ngmodule", type: CdkStepperModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: StepperComponent, isStandalone: true, selector: "lx-stepper", providers: [{ provide: CdkStepper, useExisting: StepperComponent }], usesInheritance: true, ngImport: i0, template: "<ul class=\"stepper\">\n  @for (step of steps; track step.label; let i = $index) {\n    <li class=\"step\" [ngClass]=\"{ 'step-completed': isCompleted(i) }\">\n      <div\n        class=\"step-container\"\n        [class]=\"isSmallVariant ? 'step-container-small' : 'step-container-normal'\"\n        [ngClass]=\"{ 'step-container-active': isActiveStep(i), 'step-container-completed': isCompleted(i) }\"\n      >\n        <div class=\"step-number\" [ngClass]=\"{ 'step-number-active': isActiveStep(i) }\">\n          @if (isCompleted(i)) {\n            <ui5-icon name=\"accept\" design=\"Information\" class=\"check-icon\" [class.small-icon]=\"isSmallVariant\" />\n          } @else if (!isSmallVariant) {\n            {{ i + 1 }}\n          }\n        </div>\n        @if (!isSmallVariant) {\n          <div class=\"step-title\">\n            {{ step.label }}\n          </div>\n        }\n      </div>\n    </li>\n  }\n</ul>\n@if (selected) {\n  <div class=\"content\">\n    <ng-container [ngTemplateOutlet]=\"selected!.content\" />\n  </div>\n}\n", styles: [".stepper{display:flex;position:relative;align-items:center;padding-left:0}.step{position:relative;z-index:1;flex:1;display:flex;flex-direction:row;flex-shrink:0}.step:not(:last-child):after{content:\"\";position:relative;z-index:1;flex:auto;height:1px;min-width:30px;border-top:2px solid #b2bccc;align-self:center;margin-left:5px;margin-right:5px}.step-container{display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;border:2px solid #b2bccc;border-radius:50%;background-color:#fff;pointer-events:none}.step-container-normal{width:40px;height:40px}.step-container-small{width:22.5px;height:22.5px}.step-number{color:#b2bccc;font-size:var(--lxFontSize, 16px);font-style:normal;font-weight:var(--lxFontNormal, 400);width:100%;height:100%;display:flex;align-items:center;justify-content:center}.step-title{width:max-content;top:50px;position:absolute}.check-icon{width:20px;height:20px}.small-icon{width:12px;height:12px}.content{margin-top:48px;height:100%}.step:first-child{justify-content:flex-start}.step:first-child .step-title{left:0}.step:not(:first-child):not(:last-child) .step-container{align-self:center}.step:not(:first-child):not(:last-child) .step-container .step-title{align-self:center}.step:last-child{justify-content:flex-end;align-items:flex-end;text-align:right;flex:0 0 auto}.step:last-child .step-container .step-title{align-self:flex-end;right:0}.step:last-child .step-number{margin-right:40%}.step:nth-child(n+19):last-child .step-number{margin-right:31%}.step-container.step-container-active{background-color:#0070f2;border-color:#0070f2}.step-number-active{color:#fff}.step.step-completed:not(:last-child):after{border-color:#0070f2}.step-container.step-container-completed{border-color:#0070f2}\n"], dependencies: [{ kind: "ngmodule", type: CdkStepperModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-stepper', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: CdkStepper, useExisting: StepperComponent }], imports: [CdkStepperModule, NgTemplateOutlet, NgClass, IconComponent$1], template: "<ul class=\"stepper\">\n  @for (step of steps; track step.label; let i = $index) {\n    <li class=\"step\" [ngClass]=\"{ 'step-completed': isCompleted(i) }\">\n      <div\n        class=\"step-container\"\n        [class]=\"isSmallVariant ? 'step-container-small' : 'step-container-normal'\"\n        [ngClass]=\"{ 'step-container-active': isActiveStep(i), 'step-container-completed': isCompleted(i) }\"\n      >\n        <div class=\"step-number\" [ngClass]=\"{ 'step-number-active': isActiveStep(i) }\">\n          @if (isCompleted(i)) {\n            <ui5-icon name=\"accept\" design=\"Information\" class=\"check-icon\" [class.small-icon]=\"isSmallVariant\" />\n          } @else if (!isSmallVariant) {\n            {{ i + 1 }}\n          }\n        </div>\n        @if (!isSmallVariant) {\n          <div class=\"step-title\">\n            {{ step.label }}\n          </div>\n        }\n      </div>\n    </li>\n  }\n</ul>\n@if (selected) {\n  <div class=\"content\">\n    <ng-container [ngTemplateOutlet]=\"selected!.content\" />\n  </div>\n}\n", styles: [".stepper{display:flex;position:relative;align-items:center;padding-left:0}.step{position:relative;z-index:1;flex:1;display:flex;flex-direction:row;flex-shrink:0}.step:not(:last-child):after{content:\"\";position:relative;z-index:1;flex:auto;height:1px;min-width:30px;border-top:2px solid #b2bccc;align-self:center;margin-left:5px;margin-right:5px}.step-container{display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;border:2px solid #b2bccc;border-radius:50%;background-color:#fff;pointer-events:none}.step-container-normal{width:40px;height:40px}.step-container-small{width:22.5px;height:22.5px}.step-number{color:#b2bccc;font-size:var(--lxFontSize, 16px);font-style:normal;font-weight:var(--lxFontNormal, 400);width:100%;height:100%;display:flex;align-items:center;justify-content:center}.step-title{width:max-content;top:50px;position:absolute}.check-icon{width:20px;height:20px}.small-icon{width:12px;height:12px}.content{margin-top:48px;height:100%}.step:first-child{justify-content:flex-start}.step:first-child .step-title{left:0}.step:not(:first-child):not(:last-child) .step-container{align-self:center}.step:not(:first-child):not(:last-child) .step-container .step-title{align-self:center}.step:last-child{justify-content:flex-end;align-items:flex-end;text-align:right;flex:0 0 auto}.step:last-child .step-container .step-title{align-self:flex-end;right:0}.step:last-child .step-number{margin-right:40%}.step:nth-child(n+19):last-child .step-number{margin-right:31%}.step-container.step-container-active{background-color:#0070f2;border-color:#0070f2}.step-number-active{color:#fff}.step.step-completed:not(:last-child):after{border-color:#0070f2}.step-container.step-container-completed{border-color:#0070f2}\n"] }]
+            args: [{ selector: 'lx-stepper', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: CdkStepper, useExisting: StepperComponent }], imports: [CdkStepperModule, NgTemplateOutlet, NgClass, IconComponent], template: "<ul class=\"stepper\">\n  @for (step of steps; track step.label; let i = $index) {\n    <li class=\"step\" [ngClass]=\"{ 'step-completed': isCompleted(i) }\">\n      <div\n        class=\"step-container\"\n        [class]=\"isSmallVariant ? 'step-container-small' : 'step-container-normal'\"\n        [ngClass]=\"{ 'step-container-active': isActiveStep(i), 'step-container-completed': isCompleted(i) }\"\n      >\n        <div class=\"step-number\" [ngClass]=\"{ 'step-number-active': isActiveStep(i) }\">\n          @if (isCompleted(i)) {\n            <ui5-icon name=\"accept\" design=\"Information\" class=\"check-icon\" [class.small-icon]=\"isSmallVariant\" />\n          } @else if (!isSmallVariant) {\n            {{ i + 1 }}\n          }\n        </div>\n        @if (!isSmallVariant) {\n          <div class=\"step-title\">\n            {{ step.label }}\n          </div>\n        }\n      </div>\n    </li>\n  }\n</ul>\n@if (selected) {\n  <div class=\"content\">\n    <ng-container [ngTemplateOutlet]=\"selected!.content\" />\n  </div>\n}\n", styles: [".stepper{display:flex;position:relative;align-items:center;padding-left:0}.step{position:relative;z-index:1;flex:1;display:flex;flex-direction:row;flex-shrink:0}.step:not(:last-child):after{content:\"\";position:relative;z-index:1;flex:auto;height:1px;min-width:30px;border-top:2px solid #b2bccc;align-self:center;margin-left:5px;margin-right:5px}.step-container{display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;border:2px solid #b2bccc;border-radius:50%;background-color:#fff;pointer-events:none}.step-container-normal{width:40px;height:40px}.step-container-small{width:22.5px;height:22.5px}.step-number{color:#b2bccc;font-size:var(--lxFontSize, 16px);font-style:normal;font-weight:var(--lxFontNormal, 400);width:100%;height:100%;display:flex;align-items:center;justify-content:center}.step-title{width:max-content;top:50px;position:absolute}.check-icon{width:20px;height:20px}.small-icon{width:12px;height:12px}.content{margin-top:48px;height:100%}.step:first-child{justify-content:flex-start}.step:first-child .step-title{left:0}.step:not(:first-child):not(:last-child) .step-container{align-self:center}.step:not(:first-child):not(:last-child) .step-container .step-title{align-self:center}.step:last-child{justify-content:flex-end;align-items:flex-end;text-align:right;flex:0 0 auto}.step:last-child .step-container .step-title{align-self:flex-end;right:0}.step:last-child .step-number{margin-right:40%}.step:nth-child(n+19):last-child .step-number{margin-right:31%}.step-container.step-container-active{background-color:#0070f2;border-color:#0070f2}.step-number-active{color:#fff}.step.step-completed:not(:last-child):after{border-color:#0070f2}.step-container.step-container-completed{border-color:#0070f2}\n"] }]
         }] });
 
 /**
@@ -1318,7 +1286,7 @@ class TableHeaderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableHeaderComponent, deps: [{ token: TableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TableHeaderComponent, isStandalone: true, selector: "lx-th", inputs: { column: "column", disableSort: "disableSort", disableSortClear: "disableSortClear" }, outputs: { sortChange: "sortChange" }, host: { attributes: { "role": "columnheader" }, listeners: { "keydown.enter": "onSort()", "click": "onSort()" }, properties: { "class.sortable": "sortable()", "tabIndex": "sortable() ? 0 : -1" } }, ngImport: i0, template: "<div class=\"wrapper\">\n  <span>\n    <ng-content />\n  </span>\n  @if (sortable()) {\n    @if (!order()) {\n      <ui5-icon name=\"lx-icons/sort\" />\n    } @else if (order() === 'ASC') {\n      <ui5-icon name=\"lx-icons/sort-asc\" />\n    } @else if (order() === 'DESC') {\n      <ui5-icon name=\"lx-icons/sort-desc\" />\n    }\n  }\n</div>\n", styles: [":host{display:table-cell;line-height:normal;vertical-align:middle;padding:8px;border-bottom:2px solid #e1e5eb;border-top:none;font-weight:700;color:#526179}:host.sortable{cursor:pointer}.wrapper{display:flex;align-items:center;gap:4px}\n"], dependencies: [{ kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TableHeaderComponent, isStandalone: true, selector: "lx-th", inputs: { column: "column", disableSort: "disableSort", disableSortClear: "disableSortClear" }, outputs: { sortChange: "sortChange" }, host: { attributes: { "role": "columnheader" }, listeners: { "keydown.enter": "onSort()", "click": "onSort()" }, properties: { "class.sortable": "sortable()", "tabIndex": "sortable() ? 0 : -1" } }, ngImport: i0, template: "<div class=\"wrapper\">\n  <span>\n    <ng-content />\n  </span>\n  @if (sortable()) {\n    @if (!order()) {\n      <ui5-icon name=\"lx-icons/sort\" />\n    } @else if (order() === 'ASC') {\n      <ui5-icon name=\"lx-icons/sort-asc\" />\n    } @else if (order() === 'DESC') {\n      <ui5-icon name=\"lx-icons/sort-desc\" />\n    }\n  }\n</div>\n", styles: [":host{display:table-cell;line-height:normal;vertical-align:middle;padding:8px;border-bottom:2px solid #e1e5eb;border-top:none;font-weight:700;color:#526179}:host.sortable{cursor:pointer}.wrapper{display:flex;align-items:center;gap:4px}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableHeaderComponent, decorators: [{
             type: Component,
@@ -1326,7 +1294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         '[class.sortable]': 'sortable()',
                         '[tabIndex]': 'sortable() ? 0 : -1',
                         role: 'columnheader'
-                    }, imports: [IconComponent$1], template: "<div class=\"wrapper\">\n  <span>\n    <ng-content />\n  </span>\n  @if (sortable()) {\n    @if (!order()) {\n      <ui5-icon name=\"lx-icons/sort\" />\n    } @else if (order() === 'ASC') {\n      <ui5-icon name=\"lx-icons/sort-asc\" />\n    } @else if (order() === 'DESC') {\n      <ui5-icon name=\"lx-icons/sort-desc\" />\n    }\n  }\n</div>\n", styles: [":host{display:table-cell;line-height:normal;vertical-align:middle;padding:8px;border-bottom:2px solid #e1e5eb;border-top:none;font-weight:700;color:#526179}:host.sortable{cursor:pointer}.wrapper{display:flex;align-items:center;gap:4px}\n"] }]
+                    }, imports: [IconComponent], template: "<div class=\"wrapper\">\n  <span>\n    <ng-content />\n  </span>\n  @if (sortable()) {\n    @if (!order()) {\n      <ui5-icon name=\"lx-icons/sort\" />\n    } @else if (order() === 'ASC') {\n      <ui5-icon name=\"lx-icons/sort-asc\" />\n    } @else if (order() === 'DESC') {\n      <ui5-icon name=\"lx-icons/sort-desc\" />\n    }\n  }\n</div>\n", styles: [":host{display:table-cell;line-height:normal;vertical-align:middle;padding:8px;border-bottom:2px solid #e1e5eb;border-top:none;font-weight:700;color:#526179}:host.sortable{cursor:pointer}.wrapper{display:flex;align-items:center;gap:4px}\n"] }]
         }], ctorParameters: () => [{ type: TableComponent, decorators: [{
                     type: Optional
                 }] }], propDecorators: { column: [{
@@ -1497,50 +1465,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 type: Input
             }] } });
 
-/**
- * @deprecated Use the `ui5-icon` component instead.
- * @ignore
- * Displays Font Awesome icons.
- */
-class IconComponent {
-    constructor() {
-        this.NAME = 'IconComponent';
-        this.color = '#000';
-        this.fontAwsomeStyle = 'regular';
-        this.size = '14px';
-        this.iconStyleMap = {
-            solid: 'fas',
-            regular: 'far',
-            light: 'fal'
-        };
-        this.iconStyle = 'far';
-    }
-    ngOnChanges(changes) {
-        if ('fontAwsomeStyle' in changes) {
-            this.iconStyle = this.iconStyleMap[this.fontAwsomeStyle];
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: IconComponent, isStandalone: true, selector: "lx-icon", inputs: { name: "name", color: "color", fontAwsomeStyle: "fontAwsomeStyle", size: "size", title: "title" }, host: { properties: { "style.height": "this.size" } }, usesOnChanges: true, ngImport: i0, template: "<i [attr.title]=\"title\" [class]=\"iconStyle + ' fa-' + name\" [style.color]=\"color\" [style.fontSize]=\"size\"></i>\n", styles: [":host{display:inline-block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: IconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lx-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<i [attr.title]=\"title\" [class]=\"iconStyle + ' fa-' + name\" [style.color]=\"color\" [style.fontSize]=\"size\"></i>\n", styles: [":host{display:inline-block}\n"] }]
-        }], propDecorators: { name: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], fontAwsomeStyle: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.height']
-            }], title: [{
-                type: Input
-            }] } });
-
 /**
  * This pipe transforms...
  * - "raw" http(s) links
@@ -2562,7 +2486,6 @@ const CORE_MODULE_EXPORTS = [
     EllipsisComponent,
     HighlightRangePipe,
     HighlightTermPipe,
-    IconComponent,
     LxLinkifyPipe,
     LxUnlinkifyPipe,
     LxTimeAgo,
@@ -2601,7 +2524,6 @@ class LxCoreUiModule {
             EllipsisComponent,
             HighlightRangePipe,
             HighlightTermPipe,
-            IconComponent,
             LxLinkifyPipe,
             LxUnlinkifyPipe,
             LxTimeAgo,
@@ -2634,7 +2556,6 @@ class LxCoreUiModule {
             EllipsisComponent,
             HighlightRangePipe,
             HighlightTermPipe,
-            IconComponent,
             LxLinkifyPipe,
             LxUnlinkifyPipe,
             LxTimeAgo,
@@ -2684,7 +2605,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         EllipsisComponent,
                         HighlightRangePipe,
                         HighlightTermPipe,
-                        IconComponent,
                         LxLinkifyPipe,
                         LxUnlinkifyPipe,
                         LxTimeAgo,
@@ -3133,11 +3053,11 @@ class AvatarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AvatarComponent, deps: [{ token: IMAGE_READER }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: AvatarComponent, isStandalone: true, selector: "lx-avatar", inputs: { user: "user", size: "size", showMailToLink: "showMailToLink", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "@let image = imageURL | async;\n@let isTechnicalUser = user?.technicalUser;\n@let hasMailToLink = showMailToLink && user?.email;\n@let altText = user?.displayName ? (NAME + '.alt' | translate: { user: user.displayName }) : (NAME + '.altWithNoUserName' | translate);\n\n@if (isTechnicalUser) {\n  <div class=\"technicalUser\" data-testid=\"technical-user\" [class]=\"size\" [class.disabled]=\"disabled\">\n    <ui5-icon name=\"lx-icons/robot\" [accessibleName]=\"altText\" mode=\"Image\" />\n  </div>\n} @else if (image) {\n  @if (hasMailToLink) {\n    <a class=\"userLink\" href=\"mailto:{{ user?.email }}\">\n      <img [src]=\"image\" class=\"avatarImage\" [class]=\"size\" [class.disabled]=\"disabled\" [alt]=\"altText\" />\n    </a>\n  } @else {\n    <img [src]=\"image\" class=\"avatarImage\" [class]=\"size\" [class.disabled]=\"disabled\" [alt]=\"altText\" />\n  }\n} @else {\n  <div class=\"avatarImage userLink loading\" [class]=\"size\"></div>\n}\n", styles: [".userLink{display:inline-block;width:fit-content;height:fit-content}.avatarImage{border-radius:50%}.avatarImage.disabled{opacity:.4}.loading{background:linear-gradient(270deg,#ccc,#eee,#ccc);background-size:200% 100%;animation:loading 1.5s infinite;object-fit:cover;vertical-align:middle}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.XS{width:16px;max-width:16px;height:16px;max-height:16px}.S{width:24px;max-width:24px;height:24px;max-height:24px}.M{width:32px;max-width:32px;height:32px;max-height:32px}.L{width:40px;max-width:40px;height:40px;max-height:40px}.XL{width:64px;max-width:64px;height:64px;max-height:64px}.technicalUser{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#b2bccc}.technicalUser ui5-icon{color:#fff}.technicalUser.disabled{opacity:.4}.technicalUser.XS{width:1rem;height:1rem}.technicalUser.XS ui5-icon{width:10px;height:10px}.technicalUser.S{width:1.5rem;height:1.5rem}.technicalUser.S ui5-icon{width:14px;height:14px}.technicalUser.M{width:2rem;height:2rem}.technicalUser.M ui5-icon{width:18px;height:18px}.technicalUser.L{width:3.5rem;height:3.5rem}.technicalUser.L ui5-icon{width:22px;height:22px}.technicalUser.XL{width:4rem;height:4rem}.technicalUser.XL ui5-icon{width:40px;height:40px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: AvatarComponent, isStandalone: true, selector: "lx-avatar", inputs: { user: "user", size: "size", showMailToLink: "showMailToLink", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "@let image = imageURL | async;\n@let isTechnicalUser = user?.technicalUser;\n@let hasMailToLink = showMailToLink && user?.email;\n@let altText = user?.displayName ? (NAME + '.alt' | translate: { user: user.displayName }) : (NAME + '.altWithNoUserName' | translate);\n\n@if (isTechnicalUser) {\n  <div class=\"technicalUser\" data-testid=\"technical-user\" [class]=\"size\" [class.disabled]=\"disabled\">\n    <ui5-icon name=\"lx-icons/robot\" [accessibleName]=\"altText\" mode=\"Image\" />\n  </div>\n} @else if (image) {\n  @if (hasMailToLink) {\n    <a class=\"userLink\" href=\"mailto:{{ user?.email }}\">\n      <img [src]=\"image\" class=\"avatarImage\" [class]=\"size\" [class.disabled]=\"disabled\" [alt]=\"altText\" />\n    </a>\n  } @else {\n    <img [src]=\"image\" class=\"avatarImage\" [class]=\"size\" [class.disabled]=\"disabled\" [alt]=\"altText\" />\n  }\n} @else {\n  <div class=\"avatarImage userLink loading\" [class]=\"size\"></div>\n}\n", styles: [".userLink{display:inline-block;width:fit-content;height:fit-content}.avatarImage{border-radius:50%}.avatarImage.disabled{opacity:.4}.loading{background:linear-gradient(270deg,#ccc,#eee,#ccc);background-size:200% 100%;animation:loading 1.5s infinite;object-fit:cover;vertical-align:middle}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.XS{width:16px;max-width:16px;height:16px;max-height:16px}.S{width:24px;max-width:24px;height:24px;max-height:24px}.M{width:32px;max-width:32px;height:32px;max-height:32px}.L{width:40px;max-width:40px;height:40px;max-height:40px}.XL{width:64px;max-width:64px;height:64px;max-height:64px}.technicalUser{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#b2bccc}.technicalUser ui5-icon{color:#fff}.technicalUser.disabled{opacity:.4}.technicalUser.XS{width:1rem;height:1rem}.technicalUser.XS ui5-icon{width:10px;height:10px}.technicalUser.S{width:1.5rem;height:1.5rem}.technicalUser.S ui5-icon{width:14px;height:14px}.technicalUser.M{width:2rem;height:2rem}.technicalUser.M ui5-icon{width:18px;height:18px}.technicalUser.L{width:3.5rem;height:3.5rem}.technicalUser.L ui5-icon{width:22px;height:22px}.technicalUser.XL{width:4rem;height:4rem}.technicalUser.XL ui5-icon{width:40px;height:40px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-avatar', imports: [AsyncPipe, TranslatePipe, IconComponent$1], template: "@let image = imageURL | async;\n@let isTechnicalUser = user?.technicalUser;\n@let hasMailToLink = showMailToLink && user?.email;\n@let altText = user?.displayName ? (NAME + '.alt' | translate: { user: user.displayName }) : (NAME + '.altWithNoUserName' | translate);\n\n@if (isTechnicalUser) {\n  <div class=\"technicalUser\" data-testid=\"technical-user\" [class]=\"size\" [class.disabled]=\"disabled\">\n    <ui5-icon name=\"lx-icons/robot\" [accessibleName]=\"altText\" mode=\"Image\" />\n  </div>\n} @else if (image) {\n  @if (hasMailToLink) {\n    <a class=\"userLink\" href=\"mailto:{{ user?.email }}\">\n      <img [src]=\"image\" class=\"avatarImage\" [class]=\"size\" [class.disabled]=\"disabled\" [alt]=\"altText\" />\n    </a>\n  } @else {\n    <img [src]=\"image\" class=\"avatarImage\" [class]=\"size\" [class.disabled]=\"disabled\" [alt]=\"altText\" />\n  }\n} @else {\n  <div class=\"avatarImage userLink loading\" [class]=\"size\"></div>\n}\n", styles: [".userLink{display:inline-block;width:fit-content;height:fit-content}.avatarImage{border-radius:50%}.avatarImage.disabled{opacity:.4}.loading{background:linear-gradient(270deg,#ccc,#eee,#ccc);background-size:200% 100%;animation:loading 1.5s infinite;object-fit:cover;vertical-align:middle}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.XS{width:16px;max-width:16px;height:16px;max-height:16px}.S{width:24px;max-width:24px;height:24px;max-height:24px}.M{width:32px;max-width:32px;height:32px;max-height:32px}.L{width:40px;max-width:40px;height:40px;max-height:40px}.XL{width:64px;max-width:64px;height:64px;max-height:64px}.technicalUser{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#b2bccc}.technicalUser ui5-icon{color:#fff}.technicalUser.disabled{opacity:.4}.technicalUser.XS{width:1rem;height:1rem}.technicalUser.XS ui5-icon{width:10px;height:10px}.technicalUser.S{width:1.5rem;height:1.5rem}.technicalUser.S ui5-icon{width:14px;height:14px}.technicalUser.M{width:2rem;height:2rem}.technicalUser.M ui5-icon{width:18px;height:18px}.technicalUser.L{width:3.5rem;height:3.5rem}.technicalUser.L ui5-icon{width:22px;height:22px}.technicalUser.XL{width:4rem;height:4rem}.technicalUser.XL ui5-icon{width:40px;height:40px}\n"] }]
+            args: [{ selector: 'lx-avatar', imports: [AsyncPipe, TranslatePipe, IconComponent], template: "@let image = imageURL | async;\n@let isTechnicalUser = user?.technicalUser;\n@let hasMailToLink = showMailToLink && user?.email;\n@let altText = user?.displayName ? (NAME + '.alt' | translate: { user: user.displayName }) : (NAME + '.altWithNoUserName' | translate);\n\n@if (isTechnicalUser) {\n  <div class=\"technicalUser\" data-testid=\"technical-user\" [class]=\"size\" [class.disabled]=\"disabled\">\n    <ui5-icon name=\"lx-icons/robot\" [accessibleName]=\"altText\" mode=\"Image\" />\n  </div>\n} @else if (image) {\n  @if (hasMailToLink) {\n    <a class=\"userLink\" href=\"mailto:{{ user?.email }}\">\n      <img [src]=\"image\" class=\"avatarImage\" [class]=\"size\" [class.disabled]=\"disabled\" [alt]=\"altText\" />\n    </a>\n  } @else {\n    <img [src]=\"image\" class=\"avatarImage\" [class]=\"size\" [class.disabled]=\"disabled\" [alt]=\"altText\" />\n  }\n} @else {\n  <div class=\"avatarImage userLink loading\" [class]=\"size\"></div>\n}\n", styles: [".userLink{display:inline-block;width:fit-content;height:fit-content}.avatarImage{border-radius:50%}.avatarImage.disabled{opacity:.4}.loading{background:linear-gradient(270deg,#ccc,#eee,#ccc);background-size:200% 100%;animation:loading 1.5s infinite;object-fit:cover;vertical-align:middle}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.XS{width:16px;max-width:16px;height:16px;max-height:16px}.S{width:24px;max-width:24px;height:24px;max-height:24px}.M{width:32px;max-width:32px;height:32px;max-height:32px}.L{width:40px;max-width:40px;height:40px;max-height:40px}.XL{width:64px;max-width:64px;height:64px;max-height:64px}.technicalUser{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#b2bccc}.technicalUser ui5-icon{color:#fff}.technicalUser.disabled{opacity:.4}.technicalUser.XS{width:1rem;height:1rem}.technicalUser.XS ui5-icon{width:10px;height:10px}.technicalUser.S{width:1.5rem;height:1.5rem}.technicalUser.S ui5-icon{width:14px;height:14px}.technicalUser.M{width:2rem;height:2rem}.technicalUser.M ui5-icon{width:18px;height:18px}.technicalUser.L{width:3.5rem;height:3.5rem}.technicalUser.L ui5-icon{width:22px;height:22px}.technicalUser.XL{width:4rem;height:4rem}.technicalUser.XL ui5-icon{width:40px;height:40px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IMAGE_READER]
@@ -3343,11 +3263,11 @@ class PageHeaderComponent {
         this.backIconClick = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: PageHeaderComponent, isStandalone: true, selector: "lx-page-header", inputs: { pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, backUrl: { classPropertyName: "backUrl", publicName: "backUrl", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, backUrlLabel: { classPropertyName: "backUrlLabel", publicName: "backUrlLabel", isSignal: true, isRequired: false, transformFunction: null }, navigationStateOptions: { classPropertyName: "navigationStateOptions", publicName: "navigationStateOptions", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backIconClick: "backIconClick" }, ngImport: i0, template: "<div class=\"tw-flex tw-flex-col\">\n  <ng-content select=\"ui5-breadcrumbs\" />\n  <div class=\"tw-flex tw-min-h-xxl tw-items-center tw-justify-between\">\n    <div class=\"tw-flex tw-items-center\">\n      @if (backUrl().length > 0) {\n        <a\n          [routerLink]=\"backUrl()\"\n          [queryParams]=\"queryParams()\"\n          [state]=\"navigationStateOptions()\"\n          class=\"tw-mr-s\"\n          data-testid=\"header-back-btn\"\n          [attr.aria-label]=\"backUrlLabel()\"\n          (click)=\"backIconClick.emit()\"\n          (keyboard.enter)=\"backIconClick.emit()\"\n        >\n          <ui5-icon name=\"arrow-left\" aria-hidden=\"true\" />\n        </a>\n      }\n      @if (pageTitle()) {\n        <h1 class=\"tw-m-0 tw-heading-2\" data-testid=\"header-title\">{{ pageTitle() }}</h1>\n      } @else {\n        <div data-testid=\"header-title\">\n          <ng-content select=\"[header-title]\" />\n        </div>\n      }\n    </div>\n    <div class=\"tw-flex tw-gap-xs tw-text-nowrap\">\n      <ng-content select=\"[header-buttons]\" />\n    </div>\n  </div>\n  <div class=\"header-content tw-mt-m tw-flex tw-self-start\">\n    <ng-content select=\"[header-content]\" />\n  </div>\n  @if (showDivider()) {\n    <div data-testid=\"header-divider\" class=\"tw-mt-[10px] tw-h-[2px] tw-w-full tw-bg-gray-95\"></div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1rem}.header-content:empty{display:none}ui5-icon{vertical-align:middle}\n"], dependencies: [{ kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: PageHeaderComponent, isStandalone: true, selector: "lx-page-header", inputs: { pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null }, backUrl: { classPropertyName: "backUrl", publicName: "backUrl", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, backUrlLabel: { classPropertyName: "backUrlLabel", publicName: "backUrlLabel", isSignal: true, isRequired: false, transformFunction: null }, navigationStateOptions: { classPropertyName: "navigationStateOptions", publicName: "navigationStateOptions", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backIconClick: "backIconClick" }, ngImport: i0, template: "<div class=\"tw-flex tw-flex-col\">\n  <ng-content select=\"ui5-breadcrumbs\" />\n  <div class=\"tw-flex tw-min-h-xxl tw-items-center tw-justify-between\">\n    <div class=\"tw-flex tw-items-center\">\n      @if (backUrl().length > 0) {\n        <a\n          [routerLink]=\"backUrl()\"\n          [queryParams]=\"queryParams()\"\n          [state]=\"navigationStateOptions()\"\n          class=\"tw-mr-s\"\n          data-testid=\"header-back-btn\"\n          [attr.aria-label]=\"backUrlLabel()\"\n          (click)=\"backIconClick.emit()\"\n          (keyboard.enter)=\"backIconClick.emit()\"\n        >\n          <ui5-icon name=\"arrow-left\" aria-hidden=\"true\" />\n        </a>\n      }\n      @if (pageTitle()) {\n        <h1 class=\"tw-m-0 tw-heading-2\" data-testid=\"header-title\">{{ pageTitle() }}</h1>\n      } @else {\n        <div data-testid=\"header-title\">\n          <ng-content select=\"[header-title]\" />\n        </div>\n      }\n    </div>\n    <div class=\"tw-flex tw-gap-xs tw-text-nowrap\">\n      <ng-content select=\"[header-buttons]\" />\n    </div>\n  </div>\n  <div class=\"header-content tw-mt-m tw-flex tw-self-start\">\n    <ng-content select=\"[header-content]\" />\n  </div>\n  @if (showDivider()) {\n    <div data-testid=\"header-divider\" class=\"tw-mt-[10px] tw-h-[2px] tw-w-full tw-bg-gray-95\"></div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1rem}.header-content:empty{display:none}ui5-icon{vertical-align:middle}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-page-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent$1, RouterLink], template: "<div class=\"tw-flex tw-flex-col\">\n  <ng-content select=\"ui5-breadcrumbs\" />\n  <div class=\"tw-flex tw-min-h-xxl tw-items-center tw-justify-between\">\n    <div class=\"tw-flex tw-items-center\">\n      @if (backUrl().length > 0) {\n        <a\n          [routerLink]=\"backUrl()\"\n          [queryParams]=\"queryParams()\"\n          [state]=\"navigationStateOptions()\"\n          class=\"tw-mr-s\"\n          data-testid=\"header-back-btn\"\n          [attr.aria-label]=\"backUrlLabel()\"\n          (click)=\"backIconClick.emit()\"\n          (keyboard.enter)=\"backIconClick.emit()\"\n        >\n          <ui5-icon name=\"arrow-left\" aria-hidden=\"true\" />\n        </a>\n      }\n      @if (pageTitle()) {\n        <h1 class=\"tw-m-0 tw-heading-2\" data-testid=\"header-title\">{{ pageTitle() }}</h1>\n      } @else {\n        <div data-testid=\"header-title\">\n          <ng-content select=\"[header-title]\" />\n        </div>\n      }\n    </div>\n    <div class=\"tw-flex tw-gap-xs tw-text-nowrap\">\n      <ng-content select=\"[header-buttons]\" />\n    </div>\n  </div>\n  <div class=\"header-content tw-mt-m tw-flex tw-self-start\">\n    <ng-content select=\"[header-content]\" />\n  </div>\n  @if (showDivider()) {\n    <div data-testid=\"header-divider\" class=\"tw-mt-[10px] tw-h-[2px] tw-w-full tw-bg-gray-95\"></div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1rem}.header-content:empty{display:none}ui5-icon{vertical-align:middle}\n"] }]
+            args: [{ selector: 'lx-page-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, RouterLink], template: "<div class=\"tw-flex tw-flex-col\">\n  <ng-content select=\"ui5-breadcrumbs\" />\n  <div class=\"tw-flex tw-min-h-xxl tw-items-center tw-justify-between\">\n    <div class=\"tw-flex tw-items-center\">\n      @if (backUrl().length > 0) {\n        <a\n          [routerLink]=\"backUrl()\"\n          [queryParams]=\"queryParams()\"\n          [state]=\"navigationStateOptions()\"\n          class=\"tw-mr-s\"\n          data-testid=\"header-back-btn\"\n          [attr.aria-label]=\"backUrlLabel()\"\n          (click)=\"backIconClick.emit()\"\n          (keyboard.enter)=\"backIconClick.emit()\"\n        >\n          <ui5-icon name=\"arrow-left\" aria-hidden=\"true\" />\n        </a>\n      }\n      @if (pageTitle()) {\n        <h1 class=\"tw-m-0 tw-heading-2\" data-testid=\"header-title\">{{ pageTitle() }}</h1>\n      } @else {\n        <div data-testid=\"header-title\">\n          <ng-content select=\"[header-title]\" />\n        </div>\n      }\n    </div>\n    <div class=\"tw-flex tw-gap-xs tw-text-nowrap\">\n      <ng-content select=\"[header-buttons]\" />\n    </div>\n  </div>\n  <div class=\"header-content tw-mt-m tw-flex tw-self-start\">\n    <ng-content select=\"[header-content]\" />\n  </div>\n  @if (showDivider()) {\n    <div data-testid=\"header-divider\" class=\"tw-mt-[10px] tw-h-[2px] tw-w-full tw-bg-gray-95\"></div>\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:1rem}.header-content:empty{display:none}ui5-icon{vertical-align:middle}\n"] }]
         }] });
 
 /**
@@ -4440,11 +4360,11 @@ class OptionComponent {
         this.mouseEnter.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: OptionComponent, deps: [{ token: forwardRef(() => OptionGroupComponent), optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: OptionComponent, isStandalone: true, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick", keyDownAction: "keyDownAction", mouseEnter: "mouseEnter" }, host: { listeners: { "click": "selectOption($event)" } }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }], ngImport: i0, template: "<li\n  #option\n  class=\"option\"\n  role=\"option\"\n  tabindex=\"-1\"\n  [attr.id]=\"optionId\"\n  [attr.aria-selected]=\"selected\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n  (keydown)=\"handleKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (hasSelectedState) {\n    @switch (selectIcon) {\n      @case ('check') {\n        @if (selected) {\n          <ui5-icon name=\"accept\" class=\"lx-icon-small\" />\n        }\n      }\n      @case ('circle') {\n        <ui5-icon name=\"circle-task\" />\n        @if (selected) {\n          <ui5-icon name=\"circle-task-2\" />\n        }\n      }\n    }\n  }\n  <ng-content />\n  @if (hasSubdropdown) {\n    <ui5-icon name=\"navigation-right-arrow\" class=\"lx-icon-small\" />\n  }\n</li>\n", styles: [":host{display:block}.option{height:2rem;padding:.5rem;cursor:pointer;color:#2a303d;position:relative;display:flex;align-items:center}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option ui5-icon{position:absolute;top:50%;transform:translateY(-50%);color:inherit}.option ui5-icon[name=accept]{left:.5rem}.option ui5-icon[name=circle-task]{left:.375rem}.option ui5-icon[name=circle-task-2]{width:.5rem;height:.5rem;left:.625rem}.option ui5-icon[name=navigation-right-arrow]{right:.5rem}\n"], dependencies: [{ kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: OptionComponent, isStandalone: true, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick", keyDownAction: "keyDownAction", mouseEnter: "mouseEnter" }, host: { listeners: { "click": "selectOption($event)" } }, viewQueries: [{ propertyName: "option", first: true, predicate: ["option"], descendants: true }], ngImport: i0, template: "<li\n  #option\n  class=\"option\"\n  role=\"option\"\n  tabindex=\"-1\"\n  [attr.id]=\"optionId\"\n  [attr.aria-selected]=\"selected\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n  (keydown)=\"handleKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (hasSelectedState) {\n    @switch (selectIcon) {\n      @case ('check') {\n        @if (selected) {\n          <ui5-icon name=\"accept\" class=\"lx-icon-small\" />\n        }\n      }\n      @case ('circle') {\n        <ui5-icon name=\"circle-task\" />\n        @if (selected) {\n          <ui5-icon name=\"circle-task-2\" />\n        }\n      }\n    }\n  }\n  <ng-content />\n  @if (hasSubdropdown) {\n    <ui5-icon name=\"navigation-right-arrow\" class=\"lx-icon-small\" />\n  }\n</li>\n", styles: [":host{display:block}.option{height:2rem;padding:.5rem;cursor:pointer;color:#2a303d;position:relative;display:flex;align-items:center}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option ui5-icon{position:absolute;top:50%;transform:translateY(-50%);color:inherit}.option ui5-icon[name=accept]{left:.5rem}.option ui5-icon[name=circle-task]{left:.375rem}.option ui5-icon[name=circle-task-2]{width:.5rem;height:.5rem;left:.625rem}.option ui5-icon[name=navigation-right-arrow]{right:.5rem}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-option', imports: [IconComponent$1], template: "<li\n  #option\n  class=\"option\"\n  role=\"option\"\n  tabindex=\"-1\"\n  [attr.id]=\"optionId\"\n  [attr.aria-selected]=\"selected\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n  (keydown)=\"handleKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (hasSelectedState) {\n    @switch (selectIcon) {\n      @case ('check') {\n        @if (selected) {\n          <ui5-icon name=\"accept\" class=\"lx-icon-small\" />\n        }\n      }\n      @case ('circle') {\n        <ui5-icon name=\"circle-task\" />\n        @if (selected) {\n          <ui5-icon name=\"circle-task-2\" />\n        }\n      }\n    }\n  }\n  <ng-content />\n  @if (hasSubdropdown) {\n    <ui5-icon name=\"navigation-right-arrow\" class=\"lx-icon-small\" />\n  }\n</li>\n", styles: [":host{display:block}.option{height:2rem;padding:.5rem;cursor:pointer;color:#2a303d;position:relative;display:flex;align-items:center}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option ui5-icon{position:absolute;top:50%;transform:translateY(-50%);color:inherit}.option ui5-icon[name=accept]{left:.5rem}.option ui5-icon[name=circle-task]{left:.375rem}.option ui5-icon[name=circle-task-2]{width:.5rem;height:.5rem;left:.625rem}.option ui5-icon[name=navigation-right-arrow]{right:.5rem}\n"] }]
+            args: [{ selector: 'lx-option', imports: [IconComponent], template: "<li\n  #option\n  class=\"option\"\n  role=\"option\"\n  tabindex=\"-1\"\n  [attr.id]=\"optionId\"\n  [attr.aria-selected]=\"selected\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n  (keydown)=\"handleKeyDown($event)\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  @if (hasSelectedState) {\n    @switch (selectIcon) {\n      @case ('check') {\n        @if (selected) {\n          <ui5-icon name=\"accept\" class=\"lx-icon-small\" />\n        }\n      }\n      @case ('circle') {\n        <ui5-icon name=\"circle-task\" />\n        @if (selected) {\n          <ui5-icon name=\"circle-task-2\" />\n        }\n      }\n    }\n  }\n  <ng-content />\n  @if (hasSubdropdown) {\n    <ui5-icon name=\"navigation-right-arrow\" class=\"lx-icon-small\" />\n  }\n</li>\n", styles: [":host{display:block}.option{height:2rem;padding:.5rem;cursor:pointer;color:#2a303d;position:relative;display:flex;align-items:center}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option ui5-icon{position:absolute;top:50%;transform:translateY(-50%);color:inherit}.option ui5-icon[name=accept]{left:.5rem}.option ui5-icon[name=circle-task]{left:.375rem}.option ui5-icon[name=circle-task-2]{width:.5rem;height:.5rem;left:.625rem}.option ui5-icon[name=navigation-right-arrow]{right:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: OptionGroupComponent, decorators: [{
                     type: Optional
                 }, {
@@ -4783,11 +4703,11 @@ class BreadcrumbComponent {
         return !!breadcrumb.breadcrumbs;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: BreadcrumbComponent, isStandalone: true, selector: "lx-breadcrumb", inputs: { breadcrumbs: "breadcrumbs" }, usesOnChanges: true, ngImport: i0, template: "@for (breadcrumb of viewBreadcrumbs; track $index; let last = $last) {\n  @if (isEllipsedBreadcrumb(breadcrumb)) {\n    <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n      <button class=\"step clickable\" lxKeyboardActionSource>...</button>\n      @for (ellipsedBreadcrumbs of breadcrumb.breadcrumbs; track $index) {\n        <lx-option [hasSelectedState]=\"false\" (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\">\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      }\n    </lx-cdk-options-dropdown>\n  } @else {\n    <button class=\"step\" [disabled]=\"!breadcrumb.onClick\" (click)=\"breadcrumb.onClick?.(breadcrumb)\">\n      {{ breadcrumb.label }}\n    </button>\n  }\n\n  @if (!last) {\n    <ui5-icon class=\"lx-icon-small\" name=\"navigation-right-arrow\" />\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:2.25px}:host .step{color:#526179;text-decoration:none;font-size:var(--lxFontSmallSize, 12px);line-height:16px;font-weight:var(--lxFontNormal, 400);border:none;background-color:unset;padding:0}:host .step:not(:disabled){cursor:pointer}:host .step:not(:disabled):hover,:host .step:not(:disabled):focus-visible{color:#526179;text-decoration:underline}\n"], dependencies: [{ kind: "component", type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }, { kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction", "mouseEnter"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: BreadcrumbComponent, isStandalone: true, selector: "lx-breadcrumb", inputs: { breadcrumbs: "breadcrumbs" }, usesOnChanges: true, ngImport: i0, template: "@for (breadcrumb of viewBreadcrumbs; track $index; let last = $last) {\n  @if (isEllipsedBreadcrumb(breadcrumb)) {\n    <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n      <button class=\"step clickable\" lxKeyboardActionSource>...</button>\n      @for (ellipsedBreadcrumbs of breadcrumb.breadcrumbs; track $index) {\n        <lx-option [hasSelectedState]=\"false\" (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\">\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      }\n    </lx-cdk-options-dropdown>\n  } @else {\n    <button class=\"step\" [disabled]=\"!breadcrumb.onClick\" (click)=\"breadcrumb.onClick?.(breadcrumb)\">\n      {{ breadcrumb.label }}\n    </button>\n  }\n\n  @if (!last) {\n    <ui5-icon class=\"lx-icon-small\" name=\"navigation-right-arrow\" />\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:2.25px}:host .step{color:#526179;text-decoration:none;font-size:var(--lxFontSmallSize, 12px);line-height:16px;font-weight:var(--lxFontNormal, 400);border:none;background-color:unset;padding:0}:host .step:not(:disabled){cursor:pointer}:host .step:not(:disabled):hover,:host .step:not(:disabled):focus-visible{color:#526179;text-decoration:underline}\n"], dependencies: [{ kind: "component", type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction", "mouseEnter"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-breadcrumb', imports: [CdkOptionsDropdownComponent, IconComponent$1, KeyboardActionSourceDirective, OptionComponent], template: "@for (breadcrumb of viewBreadcrumbs; track $index; let last = $last) {\n  @if (isEllipsedBreadcrumb(breadcrumb)) {\n    <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n      <button class=\"step clickable\" lxKeyboardActionSource>...</button>\n      @for (ellipsedBreadcrumbs of breadcrumb.breadcrumbs; track $index) {\n        <lx-option [hasSelectedState]=\"false\" (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\">\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      }\n    </lx-cdk-options-dropdown>\n  } @else {\n    <button class=\"step\" [disabled]=\"!breadcrumb.onClick\" (click)=\"breadcrumb.onClick?.(breadcrumb)\">\n      {{ breadcrumb.label }}\n    </button>\n  }\n\n  @if (!last) {\n    <ui5-icon class=\"lx-icon-small\" name=\"navigation-right-arrow\" />\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:2.25px}:host .step{color:#526179;text-decoration:none;font-size:var(--lxFontSmallSize, 12px);line-height:16px;font-weight:var(--lxFontNormal, 400);border:none;background-color:unset;padding:0}:host .step:not(:disabled){cursor:pointer}:host .step:not(:disabled):hover,:host .step:not(:disabled):focus-visible{color:#526179;text-decoration:underline}\n"] }]
+            args: [{ selector: 'lx-breadcrumb', imports: [CdkOptionsDropdownComponent, IconComponent, KeyboardActionSourceDirective, OptionComponent], template: "@for (breadcrumb of viewBreadcrumbs; track $index; let last = $last) {\n  @if (isEllipsedBreadcrumb(breadcrumb)) {\n    <lx-cdk-options-dropdown [align]=\"'right'\" class=\"dropdownContainer\">\n      <button class=\"step clickable\" lxKeyboardActionSource>...</button>\n      @for (ellipsedBreadcrumbs of breadcrumb.breadcrumbs; track $index) {\n        <lx-option [hasSelectedState]=\"false\" (select)=\"ellipsedBreadcrumbs.onClick?.(ellipsedBreadcrumbs)\">\n          {{ ellipsedBreadcrumbs.label }}\n        </lx-option>\n      }\n    </lx-cdk-options-dropdown>\n  } @else {\n    <button class=\"step\" [disabled]=\"!breadcrumb.onClick\" (click)=\"breadcrumb.onClick?.(breadcrumb)\">\n      {{ breadcrumb.label }}\n    </button>\n  }\n\n  @if (!last) {\n    <ui5-icon class=\"lx-icon-small\" name=\"navigation-right-arrow\" />\n  }\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:2.25px}:host .step{color:#526179;text-decoration:none;font-size:var(--lxFontSmallSize, 12px);line-height:16px;font-weight:var(--lxFontNormal, 400);border:none;background-color:unset;padding:0}:host .step:not(:disabled){cursor:pointer}:host .step:not(:disabled):hover,:host .step:not(:disabled):focus-visible{color:#526179;text-decoration:underline}\n"] }]
         }], propDecorators: { breadcrumbs: [{
                 type: Input
             }] } });
@@ -7036,11 +6956,11 @@ class DragAndDropListItemComponent {
         this.element.nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DragAndDropListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: DragAndDropListItemComponent, isStandalone: true, selector: "lx-drag-and-drop-list-item", inputs: { item: "item", draggable: "draggable", actions: "actions" }, outputs: { action: "action" }, host: { properties: { "class.draggingDisabled": "this.draggingDisabled", "class.customTemplate": "this.hasCustomTemplate" } }, queries: [{ propertyName: "customTemplateRef", first: true, predicate: ["customTemplate"], descendants: true }], ngImport: i0, template: "@if (customTemplateRef) {\n  <ng-container *ngTemplateOutlet=\"customTemplateRef\" />\n} @else {\n  <div class=\"drag-item-wrappper\">\n    @if (draggable) {\n      <ui5-icon name=\"menu2\" class=\"drag-handle lx-icon-small\" />\n    }\n    <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n  </div>\n  <div class=\"left-button-container\" align=\"left\">\n    @if (!!actions) {\n      <div class=\"action-buttons-wrapper\">\n        @for (act of actions; track act.id) {\n          <button\n            lx-button\n            (click)=\"action.emit({ actionId: act.id, item: item })\"\n            [title]=\"act.label\"\n            [square]=\"true\"\n            mode=\"ghost\"\n            size=\"small\"\n            class=\"action-button\"\n            [class.show-on-hover-button]=\"act.showOnlyOnHover ? true : false\"\n            [icon]=\"act.icon\"\n          ></button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host:not(.customTemplate){padding:6px 8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;border-radius:3px}:host:not(.customTemplate):hover .show-on-hover-button{opacity:1}:host.draggingDisabled{background:#eaedf1}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag-item-wrappper{display:flex;min-width:0;align-items:center;column-gap:.5rem}.left-button-container,.action-buttons-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap}.show-on-hover-button{opacity:0}.show-on-hover-button:focus{opacity:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: DragAndDropListItemComponent, isStandalone: true, selector: "lx-drag-and-drop-list-item", inputs: { item: "item", draggable: "draggable", actions: "actions" }, outputs: { action: "action" }, host: { properties: { "class.draggingDisabled": "this.draggingDisabled", "class.customTemplate": "this.hasCustomTemplate" } }, queries: [{ propertyName: "customTemplateRef", first: true, predicate: ["customTemplate"], descendants: true }], ngImport: i0, template: "@if (customTemplateRef) {\n  <ng-container *ngTemplateOutlet=\"customTemplateRef\" />\n} @else {\n  <div class=\"drag-item-wrappper\">\n    @if (draggable) {\n      <ui5-icon name=\"menu2\" class=\"drag-handle lx-icon-small\" />\n    }\n    <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n  </div>\n  <div class=\"left-button-container\" align=\"left\">\n    @if (!!actions) {\n      <div class=\"action-buttons-wrapper\">\n        @for (act of actions; track act.id) {\n          <button\n            lx-button\n            (click)=\"action.emit({ actionId: act.id, item: item })\"\n            [title]=\"act.label\"\n            [square]=\"true\"\n            mode=\"ghost\"\n            size=\"small\"\n            class=\"action-button\"\n            [class.show-on-hover-button]=\"act.showOnlyOnHover ? true : false\"\n            [icon]=\"act.icon\"\n          ></button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host:not(.customTemplate){padding:6px 8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;border-radius:3px}:host:not(.customTemplate):hover .show-on-hover-button{opacity:1}:host.draggingDisabled{background:#eaedf1}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag-item-wrappper{display:flex;min-width:0;align-items:center;column-gap:.5rem}.left-button-container,.action-buttons-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap}.show-on-hover-button{opacity:0}.show-on-hover-button:focus{opacity:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DragAndDropListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-drag-and-drop-list-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ButtonComponent, IconComponent$1], template: "@if (customTemplateRef) {\n  <ng-container *ngTemplateOutlet=\"customTemplateRef\" />\n} @else {\n  <div class=\"drag-item-wrappper\">\n    @if (draggable) {\n      <ui5-icon name=\"menu2\" class=\"drag-handle lx-icon-small\" />\n    }\n    <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n  </div>\n  <div class=\"left-button-container\" align=\"left\">\n    @if (!!actions) {\n      <div class=\"action-buttons-wrapper\">\n        @for (act of actions; track act.id) {\n          <button\n            lx-button\n            (click)=\"action.emit({ actionId: act.id, item: item })\"\n            [title]=\"act.label\"\n            [square]=\"true\"\n            mode=\"ghost\"\n            size=\"small\"\n            class=\"action-button\"\n            [class.show-on-hover-button]=\"act.showOnlyOnHover ? true : false\"\n            [icon]=\"act.icon\"\n          ></button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host:not(.customTemplate){padding:6px 8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;border-radius:3px}:host:not(.customTemplate):hover .show-on-hover-button{opacity:1}:host.draggingDisabled{background:#eaedf1}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag-item-wrappper{display:flex;min-width:0;align-items:center;column-gap:.5rem}.left-button-container,.action-buttons-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap}.show-on-hover-button{opacity:0}.show-on-hover-button:focus{opacity:1}\n"] }]
+            args: [{ selector: 'lx-drag-and-drop-list-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ButtonComponent, IconComponent], template: "@if (customTemplateRef) {\n  <ng-container *ngTemplateOutlet=\"customTemplateRef\" />\n} @else {\n  <div class=\"drag-item-wrappper\">\n    @if (draggable) {\n      <ui5-icon name=\"menu2\" class=\"drag-handle lx-icon-small\" />\n    }\n    <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n  </div>\n  <div class=\"left-button-container\" align=\"left\">\n    @if (!!actions) {\n      <div class=\"action-buttons-wrapper\">\n        @for (act of actions; track act.id) {\n          <button\n            lx-button\n            (click)=\"action.emit({ actionId: act.id, item: item })\"\n            [title]=\"act.label\"\n            [square]=\"true\"\n            mode=\"ghost\"\n            size=\"small\"\n            class=\"action-button\"\n            [class.show-on-hover-button]=\"act.showOnlyOnHover ? true : false\"\n            [icon]=\"act.icon\"\n          ></button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host:not(.customTemplate){padding:6px 8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;border-radius:3px}:host:not(.customTemplate):hover .show-on-hover-button{opacity:1}:host.draggingDisabled{background:#eaedf1}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag-item-wrappper{display:flex;min-width:0;align-items:center;column-gap:.5rem}.left-button-container,.action-buttons-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap}.show-on-hover-button{opacity:0}.show-on-hover-button:focus{opacity:1}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { item: [{
                 type: Input
             }], draggable: [{
@@ -8252,7 +8172,7 @@ class MultiSelectComponent extends BaseSelectDirective {
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selectionTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "selectionElement", first: true, predicate: MultiSelectSelectionComponent, descendants: true, read: ElementRef }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.focused]=\"isInputFocused\"\n  [class.tokenized]=\"tokenize\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && selection.length > 0\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.disabled]=\"disabled\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectedChoicesContainer\">\n    @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n      <div class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n    }\n    @if (selectionTemplate) {\n      <div class=\"selectionAndInput\">\n        <lx-multi-select-selection\n          [selection]=\"selection\"\n          [tokenize]=\"tokenize\"\n          [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n          (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n        >\n          <ng-template #innerSelectionTemplate let-option>\n            <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n          </ng-template>\n        </lx-multi-select-selection>\n        <lx-responsive-input\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (focusViaTab)=\"focusedViaTab()\"\n          [formControl]=\"queryControl\"\n          [inputId]=\"inputId\"\n          (keydown.enter)=\"$event.preventDefault()\"\n        />\n      </div>\n    } @else {\n      <div class=\"selection\">\n        <ng-content select=\".pills\" />\n      </div>\n      <lx-responsive-input\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (focusViaTab)=\"focusedViaTab()\"\n        [formControl]=\"queryControl\"\n        [inputId]=\"inputId\"\n        (keydown.enter)=\"$event.preventDefault()\"\n      />\n    }\n    @if (!disabled) {\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    }\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .selectionAndInput{display:flex}.selectContainer.tokenized lx-multi-select-selection{flex-grow:1}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: MultiSelectSelectionComponent, selector: "lx-multi-select-selection", inputs: ["selection", "tokenize"], outputs: ["removeItem"] }, { kind: "component", type: ResponsiveInputComponent, selector: "lx-responsive-input", inputs: ["inputId"], outputs: ["focus", "focusViaTab", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
+        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selectionTemplate"], descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "queryInput", first: true, predicate: ResponsiveInputComponent, descendants: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "selectionElement", first: true, predicate: MultiSelectSelectionComponent, descendants: true, read: ElementRef }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.focused]=\"isInputFocused\"\n  [class.tokenized]=\"tokenize\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && selection.length > 0\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.disabled]=\"disabled\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectedChoicesContainer\">\n    @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n      <div class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n    }\n    @if (selectionTemplate) {\n      <div class=\"selectionAndInput\">\n        <lx-multi-select-selection\n          [selection]=\"selection\"\n          [tokenize]=\"tokenize\"\n          [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n          (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n        >\n          <ng-template #innerSelectionTemplate let-option>\n            <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n          </ng-template>\n        </lx-multi-select-selection>\n        <lx-responsive-input\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (focusViaTab)=\"focusedViaTab()\"\n          [formControl]=\"queryControl\"\n          [inputId]=\"inputId\"\n          (keydown.enter)=\"$event.preventDefault()\"\n        />\n      </div>\n    } @else {\n      <div class=\"selection\">\n        <ng-content select=\".pills\" />\n      </div>\n      <lx-responsive-input\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (focusViaTab)=\"focusedViaTab()\"\n        [formControl]=\"queryControl\"\n        [inputId]=\"inputId\"\n        (keydown.enter)=\"$event.preventDefault()\"\n      />\n    }\n    @if (!disabled) {\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    }\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .selectionAndInput{display:flex}.selectContainer.tokenized lx-multi-select-selection{flex-grow:1}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "component", type: MultiSelectSelectionComponent, selector: "lx-multi-select-selection", inputs: ["selection", "tokenize"], outputs: ["removeItem"] }, { kind: "component", type: ResponsiveInputComponent, selector: "lx-responsive-input", inputs: ["inputId"], outputs: ["focus", "focusViaTab", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -8270,7 +8190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         ReactiveFormsModule,
                         NgTemplateOutlet,
                         AsyncPipe,
-                        IconComponent$1
+                        IconComponent
                     ], template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.focused]=\"isInputFocused\"\n  [class.tokenized]=\"tokenize\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  [class.hasSelection]=\"selection && selection.length > 0\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.disabled]=\"disabled\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectedChoicesContainer\">\n    @if ((selection?.length === 0 || !selection) && !queryControl?.value) {\n      <div class=\"placeholder\" [attr.title]=\"placeholder\">\n        {{ placeholder }}\n      </div>\n    }\n    @if (selectionTemplate) {\n      <div class=\"selectionAndInput\">\n        <lx-multi-select-selection\n          [selection]=\"selection\"\n          [tokenize]=\"tokenize\"\n          [keyboardSelectAction]=\"selectionKeyboardSelectAction$\"\n          (removeItem)=\"removeItem({ item: $event, isMouse: false })\"\n        >\n          <ng-template #innerSelectionTemplate let-option>\n            <ng-container *ngTemplateOutlet=\"selectionTemplate; context: { $implicit: option }\" />\n          </ng-template>\n        </lx-multi-select-selection>\n        <lx-responsive-input\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          (focusViaTab)=\"focusedViaTab()\"\n          [formControl]=\"queryControl\"\n          [inputId]=\"inputId\"\n          (keydown.enter)=\"$event.preventDefault()\"\n        />\n      </div>\n    } @else {\n      <div class=\"selection\">\n        <ng-content select=\".pills\" />\n      </div>\n      <lx-responsive-input\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (focusViaTab)=\"focusedViaTab()\"\n        [formControl]=\"queryControl\"\n        [inputId]=\"inputId\"\n        (keydown.enter)=\"$event.preventDefault()\"\n      />\n    }\n    @if (!disabled) {\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    }\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [".selectContainer{position:relative;height:auto;cursor:text;padding:0;box-sizing:border-box;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px;background:#fff}.selectContainer.smallSize .selectedChoicesContainer{min-height:22px}.selectContainer.smallSize .selectedChoicesContainer .placeholder{line-height:24px}.selectContainer.smallSize lx-responsive-input{height:22px}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed}.selectContainer.disabled lx-responsive-input{display:none}.selectContainer:not(.hasSelection){padding-left:12px}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;margin-top:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer .selectedChoicesContainer{padding-right:25px;min-height:29px}.selectContainer .selectedChoicesContainer .placeholder{position:absolute;inset:0 25px 0 12px;line-height:29px;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.selectContainer .selectedChoicesContainer>ui5-icon[name=slim-arrow-down]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer}.selectContainer .selection{display:inline;cursor:default}.selectContainer .selectionAndInput{display:flex}.selectContainer.tokenized lx-multi-select-selection{flex-grow:1}.selectContainer .optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;background:#fff;z-index:1}lx-responsive-input{height:29px}.backdrop{z-index:1048;position:fixed;inset:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { markInvalid: [{
                 type: Input
@@ -9025,11 +8945,11 @@ class PickerOptionComponent {
         this.select.emit(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PickerOptionComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: PickerOptionComponent, isStandalone: true, selector: "li[lx-picker-option]", inputs: { optionId: "optionId", ariaLabel: "ariaLabel", value: "value", selected: "selected", isClearOption: "isClearOption" }, outputs: { select: "select" }, host: { listeners: { "click": "manageClickEvents()" }, properties: { "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected", "attr.aria-label": "this.ariaLabelValue", "attr.title": "this.titleValue", "id": "this.id", "class.selected": "this.selected", "class.clearOption": "this.isClearOption", "class.highlighted": "this.highlighted" } }, ngImport: i0, template: "@if (isClearOption) {\n  <ui5-icon name=\"tnt/communication-path\" design=\"Neutral\" class=\"slash\" />\n} @else {\n  <ng-content />\n}\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}.slash{color:#d8d8d8;transform:rotate(90deg);vertical-align:middle}\n"], dependencies: [{ kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: PickerOptionComponent, isStandalone: true, selector: "li[lx-picker-option]", inputs: { optionId: "optionId", ariaLabel: "ariaLabel", value: "value", selected: "selected", isClearOption: "isClearOption" }, outputs: { select: "select" }, host: { listeners: { "click": "manageClickEvents()" }, properties: { "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected", "attr.aria-label": "this.ariaLabelValue", "attr.title": "this.titleValue", "id": "this.id", "class.selected": "this.selected", "class.clearOption": "this.isClearOption", "class.highlighted": "this.highlighted" } }, ngImport: i0, template: "@if (isClearOption) {\n  <ui5-icon name=\"tnt/communication-path\" design=\"Neutral\" class=\"slash\" />\n} @else {\n  <ng-content />\n}\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}.slash{color:#d8d8d8;transform:rotate(90deg);vertical-align:middle}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PickerOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'li[lx-picker-option]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent$1], template: "@if (isClearOption) {\n  <ui5-icon name=\"tnt/communication-path\" design=\"Neutral\" class=\"slash\" />\n} @else {\n  <ng-content />\n}\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}.slash{color:#d8d8d8;transform:rotate(90deg);vertical-align:middle}\n"] }]
+            args: [{ selector: 'li[lx-picker-option]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], template: "@if (isClearOption) {\n  <ui5-icon name=\"tnt/communication-path\" design=\"Neutral\" class=\"slash\" />\n} @else {\n  <ng-content />\n}\n", styles: [":host{display:inline-block;cursor:pointer;width:35px;height:35px;line-height:35px;text-align:center;border:1px solid transparent;border-radius:3px}:host.clearOption{border:1px solid #cfd5df}:host.highlighted,:host.selected{border:1px solid #b2bccc;cursor:default}:host:hover{border:1px solid #b2bccc}:host:focus{outline:0}.slash{color:#d8d8d8;transform:rotate(90deg);vertical-align:middle}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.TranslateService }], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -9359,11 +9279,11 @@ class PillItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PillItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: PillItemComponent, isStandalone: true, selector: "lx-pill-item", inputs: { item: "item", label: "label", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n@if (!disabled) {\n  <ui5-icon name=\"decline\" data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove lx-icon-small\" />\n}\n", styles: [":host{margin:2px;border-radius:1px;border:solid 1px #f0f2f5;background-color:#f0f2f5;color:#2a303d;display:inline-block;padding:4px}:host:hover{background-color:#e1e5eb;border:solid 1px #e1e5eb}:host-context(.selected){background-color:#e1e5eb}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;vertical-align:middle}.remove{vertical-align:middle;margin:0 4px}.remove:hover{cursor:pointer}\n"], dependencies: [{ kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: PillItemComponent, isStandalone: true, selector: "lx-pill-item", inputs: { item: "item", label: "label", disabled: "disabled" }, outputs: { remove: "remove" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n@if (!disabled) {\n  <ui5-icon name=\"decline\" data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove lx-icon-small\" />\n}\n", styles: [":host{margin:2px;border-radius:1px;border:solid 1px #f0f2f5;background-color:#f0f2f5;color:#2a303d;display:inline-block;padding:4px}:host:hover{background-color:#e1e5eb;border:solid 1px #e1e5eb}:host-context(.selected){background-color:#e1e5eb}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;vertical-align:middle}.remove{vertical-align:middle;margin:0 4px}.remove:hover{cursor:pointer}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PillItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-pill-item', imports: [IconComponent$1], template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n@if (!disabled) {\n  <ui5-icon name=\"decline\" data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove lx-icon-small\" />\n}\n", styles: [":host{margin:2px;border-radius:1px;border:solid 1px #f0f2f5;background-color:#f0f2f5;color:#2a303d;display:inline-block;padding:4px}:host:hover{background-color:#e1e5eb;border:solid 1px #e1e5eb}:host-context(.selected){background-color:#e1e5eb}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;vertical-align:middle}.remove{vertical-align:middle;margin:0 4px}.remove:hover{cursor:pointer}\n"] }]
+            args: [{ selector: 'lx-pill-item', imports: [IconComponent], template: "<span data-testid=\"pill-label\" class=\"pillLabel\">{{ label }}</span>\n@if (!disabled) {\n  <ui5-icon name=\"decline\" data-testid=\"remove-pill-item\" (click)=\"removePill(item, true)\" class=\"remove lx-icon-small\" />\n}\n", styles: [":host{margin:2px;border-radius:1px;border:solid 1px #f0f2f5;background-color:#f0f2f5;color:#2a303d;display:inline-block;padding:4px}:host:hover{background-color:#e1e5eb;border:solid 1px #e1e5eb}:host-context(.selected){background-color:#e1e5eb}.pillLabel{margin-left:4px;margin-right:4px;font-weight:400;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;vertical-align:middle}.remove{vertical-align:middle;margin:0 4px}.remove:hover{cursor:pointer}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], label: [{
@@ -9806,7 +9726,7 @@ class SingleSelectComponent extends BaseSelectDirective {
                 multi: true,
                 useExisting: forwardRef(() => SingleSelectComponent)
             }
-        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: BasicDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }, { propertyName: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.select2Size]=\"size === 'select2'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      @if (!selection && selection !== 0 && !queryInput?.value) {\n        <div class=\"placeholder\" [attr.title]=\"placeholder\">\n          {{ placeholder }}\n        </div>\n      }\n      @if (!allowQuery || !queryInput?.value) {\n        <div\n          class=\"selection\"\n          [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n          [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n          (click)=\"$event.stopPropagation(); focus()\"\n        >\n          <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n        </div>\n      }\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        [attr.id]=\"inputId\"\n        [attr.required]=\"required ? 'true' : null\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      @if ((selection || selection === 0) && allowClear && !disabled) {\n        <ui5-icon name=\"decline\" class=\"lx-icon-small\" (click)=\"removeSelection()\" />\n      }\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer ui5-icon{cursor:pointer}.disabled .iconContainer ui5-icon{cursor:inherit;color:#8594ad}.iconContainer ui5-icon[name=decline]{margin-left:.25rem}.iconContainer ui5-icon[name=slim-arrow-down]{margin:0 .5rem}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
+        ], queries: [{ propertyName: "explicitDropdown", first: true, predicate: SelectDropdownDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "explicitSelectedOption", first: true, predicate: SelectedOptionDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "dropdownComponent", first: true, predicate: BasicDropdownComponent, descendants: true }], viewQueries: [{ propertyName: "implicitSelectedOption", first: true, predicate: ["selectedOption"], descendants: true, static: true }, { propertyName: "implicitDropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "toggleElement", first: true, predicate: ["toggle"], descendants: true, read: ElementRef }, { propertyName: "queryInput", first: true, predicate: ["queryInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.select2Size]=\"size === 'select2'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      @if (!selection && selection !== 0 && !queryInput?.value) {\n        <div class=\"placeholder\" [attr.title]=\"placeholder\">\n          {{ placeholder }}\n        </div>\n      }\n      @if (!allowQuery || !queryInput?.value) {\n        <div\n          class=\"selection\"\n          [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n          [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n          (click)=\"$event.stopPropagation(); focus()\"\n        >\n          <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n        </div>\n      }\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        [attr.id]=\"inputId\"\n        [attr.required]=\"required ? 'true' : null\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      @if ((selection || selection === 0) && allowClear && !disabled) {\n        <ui5-icon name=\"decline\" class=\"lx-icon-small\" (click)=\"removeSelection()\" />\n      }\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer ui5-icon{cursor:pointer}.disabled .iconContainer ui5-icon{cursor:inherit;color:#8594ad}.iconContainer ui5-icon[name=decline]{margin-left:.25rem}.iconContainer ui5-icon[name=slim-arrow-down]{margin:0 .5rem}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"], dependencies: [{ kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SingleSelectComponent, decorators: [{
             type: Component,
@@ -9816,7 +9736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SingleSelectComponent)
                         }
-                    ], imports: [MarkInvalidDirective, NgTemplateOutlet, FormsModule, ReactiveFormsModule, AsyncPipe, IconComponent$1], template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.select2Size]=\"size === 'select2'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      @if (!selection && selection !== 0 && !queryInput?.value) {\n        <div class=\"placeholder\" [attr.title]=\"placeholder\">\n          {{ placeholder }}\n        </div>\n      }\n      @if (!allowQuery || !queryInput?.value) {\n        <div\n          class=\"selection\"\n          [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n          [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n          (click)=\"$event.stopPropagation(); focus()\"\n        >\n          <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n        </div>\n      }\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        [attr.id]=\"inputId\"\n        [attr.required]=\"required ? 'true' : null\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      @if ((selection || selection === 0) && allowClear && !disabled) {\n        <ui5-icon name=\"decline\" class=\"lx-icon-small\" (click)=\"removeSelection()\" />\n      }\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer ui5-icon{cursor:pointer}.disabled .iconContainer ui5-icon{cursor:inherit;color:#8594ad}.iconContainer ui5-icon[name=decline]{margin-left:.25rem}.iconContainer ui5-icon[name=slim-arrow-down]{margin:0 .5rem}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"] }]
+                    ], imports: [MarkInvalidDirective, NgTemplateOutlet, FormsModule, ReactiveFormsModule, AsyncPipe, IconComponent], template: "@if (dropdownOpen) {\n  <div class=\"backdrop\" (click)=\"handleBackdropClick($event)\"></div>\n}\n<div\n  [lxMarkInvalid]=\"markInvalid\"\n  class=\"selectContainer {{ padding }}Padding\"\n  [class.open]=\"dropdownOpen\"\n  [class.top]=\"(dropdownDirection$ | async) === 'TOP'\"\n  [class.bottom]=\"(dropdownDirection$ | async) === 'BOTTOM'\"\n  [class.disabled]=\"disabled\"\n  [class.grayBackground]=\"selectionBackground === 'gray'\"\n  [class.defaultSize]=\"size === 'default'\"\n  [class.smallSize]=\"size === 'small'\"\n  [class.select2Size]=\"size === 'select2'\"\n  [class.largeSize]=\"size === 'large'\"\n  [style.cursor]=\"cursorStyle\"\n  [class.focused]=\"isInputFocused\"\n  [class.focusedVisible]=\"isInputFocusedViaTab\"\n  (click)=\"handleClick($event.target === toggleElement?.nativeElement)\"\n>\n  <div class=\"selectionContainer\">\n    <div class=\"inputContainer\">\n      @if (!selection && selection !== 0 && !queryInput?.value) {\n        <div class=\"placeholder\" [attr.title]=\"placeholder\">\n          {{ placeholder }}\n        </div>\n      }\n      @if (!allowQuery || !queryInput?.value) {\n        <div\n          class=\"selection\"\n          [class.lowerOpacity]=\"allowQuery && !queryInput?.value && dropdownOpen\"\n          [class.lightgrayColor]=\"!allowQuery && dropdownOpen\"\n          (click)=\"$event.stopPropagation(); focus()\"\n        >\n          <ng-container *ngTemplateOutlet=\"selectedOptionTmpl\" />\n        </div>\n      }\n      <input\n        #queryInput\n        class=\"queryInput\"\n        type=\"text\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        [attr.id]=\"inputId\"\n        [attr.required]=\"required ? 'true' : null\"\n        [class.isHidden]=\"!allowQuery\"\n        (keydown.enter)=\"$event.preventDefault()\"\n        (focus)=\"isInputFocused = true\"\n        (blur)=\"isInputFocused = false; isInputFocusedViaTab = false; blur.emit($event)\"\n        (keyup.tab)=\"focusedViaTab()\"\n        (keyup.shift.tab)=\"focusedViaTab()\"\n        [tabIndex]=\"disabled ? -1 : tabIndex\"\n        [formControl]=\"queryControl\"\n        [readOnly]=\"!allowQuery\"\n      />\n    </div>\n    <div class=\"iconContainer\">\n      @if ((selection || selection === 0) && allowClear && !disabled) {\n        <ui5-icon name=\"decline\" class=\"lx-icon-small\" (click)=\"removeSelection()\" />\n      }\n      <ui5-icon #toggle name=\"slim-arrow-down\" class=\"lx-icon-small\" />\n    </div>\n  </div>\n  <div class=\"optionsContainer\" #optionsContainer>\n    @if (dropdownOpen) {\n      <ng-container *ngTemplateOutlet=\"dropdownTmpl\" />\n    }\n  </div>\n</div>\n\n<ng-template #selectedOption>\n  <ng-content select=\".selectedOption\" />\n</ng-template>\n<ng-template #dropdown>\n  <ng-content select=\".dropdownComponent\" />\n</ng-template>\n", styles: [":host ::ng-deep .selectedOption{overflow:hidden;text-overflow:ellipsis}.selectContainer{position:relative;height:auto;padding:0;box-sizing:border-box;background:#fff;border:1px solid #99a5bb;box-shadow:inset 0 1px 1px #00000012;border-radius:3px}.selectContainer.grayBackground{background:#eaedf1;border-color:#eaedf1;box-shadow:none}.selectContainer.open{z-index:1049;background:#fff;border:1px solid #e1e5eb}.selectContainer.open.bottom{box-shadow:0 6px 6px #21252933;border-bottom-color:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.selectContainer.open.bottom .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 6px 6px #21252933;top:100%;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top{box-shadow:0 -4px 6px #21252933;border-top:0;border-top-left-radius:0;border-top-right-radius:0}.selectContainer.open.top .optionsContainer{border-bottom:solid 1px #e1e5eb;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;box-shadow:0 -4px 6px #21252933;margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;top:none;bottom:100%}.selectContainer:not(.open).focused{outline:0;border:1px solid #99c6fa}.selectContainer:not(.open).focusedVisible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}.selectContainer.disabled{background-color:#eaedf1;cursor:not-allowed!important}.selectContainer.defaultPadding .selectionContainer{padding-left:12px}.selectContainer.narrowPadding .selectionContainer{padding-left:4px}.selectContainer .lightgrayColor{color:#8594ad}.selectionContainer{display:flex}.inputContainer{flex:1;position:relative;white-space:nowrap}.queryInput{width:100%;appearance:none;border:0;padding-left:0;background:transparent;position:relative;cursor:inherit}.queryInput::-ms-clear{display:none}.queryInput:focus{outline:0}.queryInput.isHidden{opacity:0}.placeholder{position:absolute;width:100%;text-align:left;color:#8594ad;overflow:hidden;word-break:break-all;white-space:nowrap;text-overflow:ellipsis}.iconContainer{display:flex;align-items:center;text-align:center}.iconContainer ui5-icon{cursor:pointer}.disabled .iconContainer ui5-icon{cursor:inherit;color:#8594ad}.iconContainer ui5-icon[name=decline]{margin-left:.25rem}.iconContainer ui5-icon[name=slim-arrow-down]{margin:0 .5rem}.selection{width:100%;position:absolute;display:flex;align-items:center}.selection.lowerOpacity{opacity:.7}.backdrop{position:fixed;inset:0;z-index:1048}.optionsContainer{position:absolute;left:-1px;right:-1px;padding:0;border-radius:3px;background:#fff;z-index:1001}.defaultSize .inputContainer,.defaultSize .queryInput,.defaultSize .selection,.defaultSize .iconContainer{height:29px}.defaultSize .inputContainer{line-height:29px}.defaultSize .selectionContainer{min-height:29px}.smallSize .inputContainer,.smallSize .queryInput,.smallSize .selection,.smallSize .iconContainer{height:22px}.smallSize .inputContainer{line-height:22px}.smallSize .selectionContainer{min-height:22px}.select2Size .inputContainer,.select2Size .queryInput,.select2Size .selection,.select2Size .iconContainer{height:26px}.select2Size .inputContainer{line-height:26px}.select2Size .selectionContainer{min-height:26px}.largeSize .inputContainer,.largeSize .queryInput,.largeSize .selection,.largeSize .iconContainer{height:40px}.largeSize .inputContainer{line-height:40px}.largeSize .selectionContainer{min-height:40px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selection: [{
                 type: Input
             }], selectionBackground: [{
@@ -11914,7 +11834,7 @@ class ModalComponent {
         this.focusTrap.create(hostElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ModalComponent, deps: [{ token: i1$1.Overlay }, { token: i0.Renderer2 }, { token: MODAL_CLOSE, optional: true }, { token: i2.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ModalComponent, isStandalone: true, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", minWidth: "minWidth", isFocusTrap: "isFocusTrap", canModalBeClosed: "canModalBeClosed" }, outputs: { close: "close", back: "back" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderComponent, descendants: true }, { propertyName: "footer", first: true, predicate: ModalFooterComponent, descendants: true }, { propertyName: "explicitContent", first: true, predicate: ModalContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template cdkPortal>\n  @if (open) {\n    <div\n      role=\"dialog\"\n      class=\"lxmodal\"\n      [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n      [class.lxmodal--dialog]=\"size === 'dialog'\"\n      [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n      [class.lxmodal--withFooter]=\"!!footer\"\n      [class.lxmodal--verticalScroll]=\"verticalScroll\"\n      @modal\n    >\n      @if (size === 'fullscreen' && showBackButton) {\n        <!-- TODO lx-button doesn't comply with modal close button style yet -->\n        <button (click)=\"emitBack()\" (keyup.enter)=\"emitBack()\" tabindex=\"0\" type=\"button\" class=\"backButton\">\n          <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n          <ui5-icon name=\"arrow-left\" />\n        </button>\n      }\n      @if (showCloseButton) {\n        <!-- TODO lx-button doesn't comply with modal close button style yet -->\n        <button\n          (click)=\"closeModal(closeLocation.CloseButton)\"\n          [attr.aria-label]=\"NAME + '.close' | translate\"\n          type=\"button\"\n          class=\"closeButton\"\n        >\n          <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n          <ui5-icon name=\"decline\" />\n        </button>\n      }\n      @if (header) {\n        <ng-content select=\"lx-modal-header\" />\n      }\n      <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n        <ng-container *ngTemplateOutlet=\"content\" />\n      </div>\n      @if (footer) {\n        <ng-content select=\"lx-modal-footer\" />\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #implicitContent>\n  <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--withFooter.lxmodal--fullscreen:not(.lxmodal--verticalScroll) .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .closeButton:hover ui5-icon,.lxmodal--fullscreen .closeButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .backButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;left:36px;top:16px}.lxmodal--fullscreen .backButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .backButton:hover,.lxmodal--fullscreen .backButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .backButton:hover ui5-icon,.lxmodal--fullscreen .backButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .backButton:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton ui5-icon,.lxmodal--dialog-large .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{background-color:#eaedf1}.lxmodal--dialog .closeButton:hover ui5-icon,.lxmodal--dialog .closeButton:focus ui5-icon,.lxmodal--dialog-large .closeButton:hover ui5-icon,.lxmodal--dialog-large .closeButton:focus ui5-icon{color:#526179}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ModalComponent, isStandalone: true, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", minWidth: "minWidth", isFocusTrap: "isFocusTrap", canModalBeClosed: "canModalBeClosed" }, outputs: { close: "close", back: "back" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderComponent, descendants: true }, { propertyName: "footer", first: true, predicate: ModalFooterComponent, descendants: true }, { propertyName: "explicitContent", first: true, predicate: ModalContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template cdkPortal>\n  @if (open) {\n    <div\n      role=\"dialog\"\n      class=\"lxmodal\"\n      [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n      [class.lxmodal--dialog]=\"size === 'dialog'\"\n      [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n      [class.lxmodal--withFooter]=\"!!footer\"\n      [class.lxmodal--verticalScroll]=\"verticalScroll\"\n      @modal\n    >\n      @if (size === 'fullscreen' && showBackButton) {\n        <!-- TODO lx-button doesn't comply with modal close button style yet -->\n        <button (click)=\"emitBack()\" (keyup.enter)=\"emitBack()\" tabindex=\"0\" type=\"button\" class=\"backButton\">\n          <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n          <ui5-icon name=\"arrow-left\" />\n        </button>\n      }\n      @if (showCloseButton) {\n        <!-- TODO lx-button doesn't comply with modal close button style yet -->\n        <button\n          (click)=\"closeModal(closeLocation.CloseButton)\"\n          [attr.aria-label]=\"NAME + '.close' | translate\"\n          type=\"button\"\n          class=\"closeButton\"\n        >\n          <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n          <ui5-icon name=\"decline\" />\n        </button>\n      }\n      @if (header) {\n        <ng-content select=\"lx-modal-header\" />\n      }\n      <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n        <ng-container *ngTemplateOutlet=\"content\" />\n      </div>\n      @if (footer) {\n        <ng-content select=\"lx-modal-footer\" />\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #implicitContent>\n  <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--withFooter.lxmodal--fullscreen:not(.lxmodal--verticalScroll) .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .closeButton:hover ui5-icon,.lxmodal--fullscreen .closeButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .backButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;left:36px;top:16px}.lxmodal--fullscreen .backButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .backButton:hover,.lxmodal--fullscreen .backButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .backButton:hover ui5-icon,.lxmodal--fullscreen .backButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .backButton:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton ui5-icon,.lxmodal--dialog-large .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{background-color:#eaedf1}.lxmodal--dialog .closeButton:hover ui5-icon,.lxmodal--dialog .closeButton:focus ui5-icon,.lxmodal--dialog-large .closeButton:hover ui5-icon,.lxmodal--dialog-large .closeButton:focus ui5-icon{color:#526179}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], animations: [
             trigger('modal', [
                 transition(':enter', [style({ opacity: 0 }), animate('0.15s', style({ opacity: 1 }))]),
                 transition(':leave', animate('0.15s', style({ opacity: 0 })))
@@ -11928,7 +11848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                             transition(':enter', [style({ opacity: 0 }), animate('0.15s', style({ opacity: 1 }))]),
                             transition(':leave', animate('0.15s', style({ opacity: 0 })))
                         ])
-                    ], imports: [PortalModule, NgTemplateOutlet, TranslateModule, CommonModule, IconComponent$1], template: "<ng-template cdkPortal>\n  @if (open) {\n    <div\n      role=\"dialog\"\n      class=\"lxmodal\"\n      [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n      [class.lxmodal--dialog]=\"size === 'dialog'\"\n      [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n      [class.lxmodal--withFooter]=\"!!footer\"\n      [class.lxmodal--verticalScroll]=\"verticalScroll\"\n      @modal\n    >\n      @if (size === 'fullscreen' && showBackButton) {\n        <!-- TODO lx-button doesn't comply with modal close button style yet -->\n        <button (click)=\"emitBack()\" (keyup.enter)=\"emitBack()\" tabindex=\"0\" type=\"button\" class=\"backButton\">\n          <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n          <ui5-icon name=\"arrow-left\" />\n        </button>\n      }\n      @if (showCloseButton) {\n        <!-- TODO lx-button doesn't comply with modal close button style yet -->\n        <button\n          (click)=\"closeModal(closeLocation.CloseButton)\"\n          [attr.aria-label]=\"NAME + '.close' | translate\"\n          type=\"button\"\n          class=\"closeButton\"\n        >\n          <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n          <ui5-icon name=\"decline\" />\n        </button>\n      }\n      @if (header) {\n        <ng-content select=\"lx-modal-header\" />\n      }\n      <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n        <ng-container *ngTemplateOutlet=\"content\" />\n      </div>\n      @if (footer) {\n        <ng-content select=\"lx-modal-footer\" />\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #implicitContent>\n  <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--withFooter.lxmodal--fullscreen:not(.lxmodal--verticalScroll) .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .closeButton:hover ui5-icon,.lxmodal--fullscreen .closeButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .backButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;left:36px;top:16px}.lxmodal--fullscreen .backButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .backButton:hover,.lxmodal--fullscreen .backButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .backButton:hover ui5-icon,.lxmodal--fullscreen .backButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .backButton:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton ui5-icon,.lxmodal--dialog-large .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{background-color:#eaedf1}.lxmodal--dialog .closeButton:hover ui5-icon,.lxmodal--dialog .closeButton:focus ui5-icon,.lxmodal--dialog-large .closeButton:hover ui5-icon,.lxmodal--dialog-large .closeButton:focus ui5-icon{color:#526179}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"] }]
+                    ], imports: [PortalModule, NgTemplateOutlet, TranslateModule, CommonModule, IconComponent], template: "<ng-template cdkPortal>\n  @if (open) {\n    <div\n      role=\"dialog\"\n      class=\"lxmodal\"\n      [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n      [class.lxmodal--dialog]=\"size === 'dialog'\"\n      [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n      [class.lxmodal--withFooter]=\"!!footer\"\n      [class.lxmodal--verticalScroll]=\"verticalScroll\"\n      @modal\n    >\n      @if (size === 'fullscreen' && showBackButton) {\n        <!-- TODO lx-button doesn't comply with modal close button style yet -->\n        <button (click)=\"emitBack()\" (keyup.enter)=\"emitBack()\" tabindex=\"0\" type=\"button\" class=\"backButton\">\n          <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n          <ui5-icon name=\"arrow-left\" />\n        </button>\n      }\n      @if (showCloseButton) {\n        <!-- TODO lx-button doesn't comply with modal close button style yet -->\n        <button\n          (click)=\"closeModal(closeLocation.CloseButton)\"\n          [attr.aria-label]=\"NAME + '.close' | translate\"\n          type=\"button\"\n          class=\"closeButton\"\n        >\n          <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n          <ui5-icon name=\"decline\" />\n        </button>\n      }\n      @if (header) {\n        <ng-content select=\"lx-modal-header\" />\n      }\n      <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n        <ng-container *ngTemplateOutlet=\"content\" />\n      </div>\n      @if (footer) {\n        <ng-content select=\"lx-modal-footer\" />\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #implicitContent>\n  <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.spin{animation:spin 2s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--withFooter.lxmodal--fullscreen:not(.lxmodal--verticalScroll) .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .closeButton:hover ui5-icon,.lxmodal--fullscreen .closeButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .backButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;width:48px;height:48px;left:36px;top:16px}.lxmodal--fullscreen .backButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--fullscreen .backButton:hover,.lxmodal--fullscreen .backButton:focus{background-color:#eaedf1}.lxmodal--fullscreen .backButton:hover ui5-icon,.lxmodal--fullscreen .backButton:focus ui5-icon{color:#526179}.lxmodal--fullscreen .backButton:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;cursor:pointer;padding:0;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton ui5-icon,.lxmodal--dialog-large .closeButton ui5-icon{color:#61779d;font-size:26px;transition:color .18s;transition-delay:.1s;transition-timing-function:ease}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{background-color:#eaedf1}.lxmodal--dialog .closeButton:hover ui5-icon,.lxmodal--dialog .closeButton:focus ui5-icon,.lxmodal--dialog-large .closeButton:hover ui5-icon,.lxmodal--dialog-large .closeButton:focus ui5-icon{color:#526179}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.Renderer2 }, { type: i5.Observable, decorators: [{
                     type: Optional
                 }, {
@@ -12142,7 +12062,7 @@ class RichTextEditorToolbarComponent {
         this.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: false }).track('INSERT_TABLE').run();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RichTextEditorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: RichTextEditorToolbarComponent, isStandalone: true, selector: "lx-rich-text-editor-toolbar", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: false, isRequired: true, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"toolbar\" [class.toolbarHidden]=\"!isToolbarVisible()\">\n  <div class=\"toolbarItemGroup\">\n    @if ('heading' | lxExtensionEnabled: editor) {\n      <lx-options-dropdown>\n        <button\n          class=\"toolbarItem toolbar-heading\"\n          lxKeyboardActionSource\n          lx-button\n          [lxTooltip]=\"NAME + '.textStyles' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [square]=\"false\"\n          [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n          endIcon=\"slim-arrow-down\"\n          [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n        >\n          {{\n            editor.isActive('heading')\n              ? `${(NAME + '.heading' | translate)}  ${editor.getAttributes('heading')['level']}`\n              : `${(NAME + '.paragraph' | translate)}`\n          }}\n        </button>\n\n        @for (level of headingLevels; track $index) {\n          <lx-option\n            (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n            [hasSelectedState]=\"editor.isActive('heading', { level })\"\n            [selected]=\"editor.isActive('heading', { level })\"\n          >\n            @if (!editor.isActive('heading', { level })) {\n              @if (level >= 1 && level <= 3) {\n                <ui5-icon name=\"heading{{ level }}\" class=\"dropdown-icon\" />\n              } @else if (level === 4) {\n                <ui5-icon name=\"lx-icons/heading4\" class=\"dropdown-icon\" />\n              }\n            }\n            <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n          </lx-option>\n        }\n\n        <lx-option\n          (select)=\"this.editor.chain().setParagraph().focus().run()\"\n          [hasSelectedState]=\"editor.isActive('paragraph')\"\n          [selected]=\"editor.isActive('paragraph')\"\n        >\n          @if (!editor.isActive('paragraph')) {\n            <ui5-icon name=\"text\" class=\"dropdown-icon\" />\n          }\n          <span>{{ NAME + '.paragraphOption' | translate }}</span>\n        </lx-option>\n      </lx-options-dropdown>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bold' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.bold' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.bold' | translate\"\n        [disabled]=\"editor.isActive('header')\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBold().focus().run()\"\n        [pressed]=\"editor.isActive('bold')\"\n        icon=\"bold-text\"\n      ></button>\n    }\n\n    @if ('italic' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.italic' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.italic' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleItalic().focus().run()\"\n        [pressed]=\"editor.isActive('italic')\"\n        icon=\"italic-text\"\n      ></button>\n    }\n\n    @if ('underline' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.underline' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.underline' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleUnderline().focus().run()\"\n        [pressed]=\"editor.isActive('underline')\"\n        icon=\"underline-text\"\n      ></button>\n    }\n\n    @if ('strike' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.strikethrough' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleStrike().focus().run()\"\n        [pressed]=\"editor.isActive('strike')\"\n        icon=\"strikethrough\"\n      ></button>\n    }\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bulletList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.bulletList' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.bulletList' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBulletList().run()\"\n        [pressed]=\"editor.isActive('listItem')\"\n        icon=\"list\"\n      ></button>\n    }\n\n    @if ('orderedList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.numberedList' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.numberedList' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleOrderedList().run()\"\n        [pressed]=\"editor.isActive('orderedList')\"\n        icon=\"business-suite/icon-bulleting-with-numbers\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('textAlign' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignLeft' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n        icon=\"text-align-left\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignCenter' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n        icon=\"text-align-center\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignRight' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n        icon=\"text-align-right\"\n      ></button>\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignBlock' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignBlock' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n        icon=\"text-align-justified\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('link' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.link' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.link' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().openLinkModal().run()\"\n        [pressed]=\"editor.isActive('link')\"\n        icon=\"chain-link\"\n      ></button>\n      <span class=\"separator\"></span>\n    }\n  </div>\n\n  @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n  @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n  @if (tableEnabled || codeEnabled) {\n    <div class=\"toolbarItemGroup\">\n      @if (codeEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.code' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [lxTooltip]=\"NAME + '.code' | translate\"\n          [square]=\"true\"\n          (click)=\"editor.chain().setCodeBlock().run()\"\n          [pressed]=\"editor.isActive('codeBlock')\"\n          icon=\"source-code\"\n        ></button>\n      }\n\n      @if ('lxDiagram' | lxExtensionEnabled: editor) {\n        <ng-content select=\".diagram-btn\" />\n      }\n\n      @if (tableEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.insertTable' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [lxTooltip]=\"NAME + '.insertTable' | translate\"\n          [square]=\"true\"\n          (click)=\"insertTable()\"\n          [pressed]=\"editor.isActive('table')\"\n          icon=\"business-suite/2x2-grid-layout\"\n          [disabled]=\"editor.isActive('table')\"\n        ></button>\n      }\n\n      <span class=\"separator\"></span>\n    </div>\n  }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && isLinkModalOpenSignal()) {\n  <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex}.toolbar{display:flex;flex-wrap:wrap;width:100%;border-bottom:#99a5bb 1px solid;transition:all .18s ease-out;opacity:1;height:auto;padding:8px}.toolbar.toolbarHidden{opacity:0;height:0!important;padding:0}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-right:.5rem;vertical-align:text-bottom}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"], dependencies: [{ kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning", "dropdownClass", "isFlexEnabledTriggerContainer"], outputs: ["opened", "closed", "closedWithoutSelection"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction", "mouseEnter"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: LinkModalComponent, selector: "lx-link-modal", inputs: ["editor"] }, { kind: "directive", type: TooltipDirective, selector: "[lxTooltip]", inputs: ["lxTooltip", "lxTooltipPosition", "lxTooltipDelay", "lxTooltipIsHtmlContent"] }, { kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: RichTextEditorToolbarComponent, isStandalone: true, selector: "lx-rich-text-editor-toolbar", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: false, isRequired: true, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"toolbar\" [class.toolbarHidden]=\"!isToolbarVisible()\">\n  <div class=\"toolbarItemGroup\">\n    @if ('heading' | lxExtensionEnabled: editor) {\n      <lx-options-dropdown>\n        <button\n          class=\"toolbarItem toolbar-heading\"\n          lxKeyboardActionSource\n          lx-button\n          [lxTooltip]=\"NAME + '.textStyles' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [square]=\"false\"\n          [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n          endIcon=\"slim-arrow-down\"\n          [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n        >\n          {{\n            editor.isActive('heading')\n              ? `${(NAME + '.heading' | translate)}  ${editor.getAttributes('heading')['level']}`\n              : `${(NAME + '.paragraph' | translate)}`\n          }}\n        </button>\n\n        @for (level of headingLevels; track $index) {\n          <lx-option\n            (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n            [hasSelectedState]=\"editor.isActive('heading', { level })\"\n            [selected]=\"editor.isActive('heading', { level })\"\n          >\n            @if (!editor.isActive('heading', { level })) {\n              @if (level >= 1 && level <= 3) {\n                <ui5-icon name=\"heading{{ level }}\" class=\"dropdown-icon\" />\n              } @else if (level === 4) {\n                <ui5-icon name=\"lx-icons/heading4\" class=\"dropdown-icon\" />\n              }\n            }\n            <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n          </lx-option>\n        }\n\n        <lx-option\n          (select)=\"this.editor.chain().setParagraph().focus().run()\"\n          [hasSelectedState]=\"editor.isActive('paragraph')\"\n          [selected]=\"editor.isActive('paragraph')\"\n        >\n          @if (!editor.isActive('paragraph')) {\n            <ui5-icon name=\"text\" class=\"dropdown-icon\" />\n          }\n          <span>{{ NAME + '.paragraphOption' | translate }}</span>\n        </lx-option>\n      </lx-options-dropdown>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bold' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.bold' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.bold' | translate\"\n        [disabled]=\"editor.isActive('header')\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBold().focus().run()\"\n        [pressed]=\"editor.isActive('bold')\"\n        icon=\"bold-text\"\n      ></button>\n    }\n\n    @if ('italic' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.italic' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.italic' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleItalic().focus().run()\"\n        [pressed]=\"editor.isActive('italic')\"\n        icon=\"italic-text\"\n      ></button>\n    }\n\n    @if ('underline' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.underline' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.underline' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleUnderline().focus().run()\"\n        [pressed]=\"editor.isActive('underline')\"\n        icon=\"underline-text\"\n      ></button>\n    }\n\n    @if ('strike' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.strikethrough' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleStrike().focus().run()\"\n        [pressed]=\"editor.isActive('strike')\"\n        icon=\"strikethrough\"\n      ></button>\n    }\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bulletList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.bulletList' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.bulletList' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBulletList().run()\"\n        [pressed]=\"editor.isActive('listItem')\"\n        icon=\"list\"\n      ></button>\n    }\n\n    @if ('orderedList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.numberedList' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.numberedList' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleOrderedList().run()\"\n        [pressed]=\"editor.isActive('orderedList')\"\n        icon=\"business-suite/icon-bulleting-with-numbers\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('textAlign' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignLeft' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n        icon=\"text-align-left\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignCenter' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n        icon=\"text-align-center\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignRight' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n        icon=\"text-align-right\"\n      ></button>\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignBlock' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignBlock' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n        icon=\"text-align-justified\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('link' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.link' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.link' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().openLinkModal().run()\"\n        [pressed]=\"editor.isActive('link')\"\n        icon=\"chain-link\"\n      ></button>\n      <span class=\"separator\"></span>\n    }\n  </div>\n\n  @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n  @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n  @if (tableEnabled || codeEnabled) {\n    <div class=\"toolbarItemGroup\">\n      @if (codeEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.code' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [lxTooltip]=\"NAME + '.code' | translate\"\n          [square]=\"true\"\n          (click)=\"editor.chain().setCodeBlock().run()\"\n          [pressed]=\"editor.isActive('codeBlock')\"\n          icon=\"source-code\"\n        ></button>\n      }\n\n      @if ('lxDiagram' | lxExtensionEnabled: editor) {\n        <ng-content select=\".diagram-btn\" />\n      }\n\n      @if (tableEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.insertTable' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [lxTooltip]=\"NAME + '.insertTable' | translate\"\n          [square]=\"true\"\n          (click)=\"insertTable()\"\n          [pressed]=\"editor.isActive('table')\"\n          icon=\"business-suite/2x2-grid-layout\"\n          [disabled]=\"editor.isActive('table')\"\n        ></button>\n      }\n\n      <span class=\"separator\"></span>\n    </div>\n  }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && isLinkModalOpenSignal()) {\n  <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex}.toolbar{display:flex;flex-wrap:wrap;width:100%;border-bottom:#99a5bb 1px solid;transition:all .18s ease-out;opacity:1;height:auto;padding:8px}.toolbar.toolbarHidden{opacity:0;height:0!important;padding:0}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-right:.5rem;vertical-align:text-bottom}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"], dependencies: [{ kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning", "dropdownClass", "isFlexEnabledTriggerContainer"], outputs: ["opened", "closed", "closedWithoutSelection"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction", "mouseEnter"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: LinkModalComponent, selector: "lx-link-modal", inputs: ["editor"] }, { kind: "directive", type: TooltipDirective, selector: "[lxTooltip]", inputs: ["lxTooltip", "lxTooltipPosition", "lxTooltipDelay", "lxTooltipIsHtmlContent"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RichTextEditorToolbarComponent, decorators: [{
             type: Component,
@@ -12155,7 +12075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         TranslatePipe,
                         LinkModalComponent,
                         TooltipDirective,
-                        IconComponent$1
+                        IconComponent
                     ], template: "<div class=\"toolbar\" [class.toolbarHidden]=\"!isToolbarVisible()\">\n  <div class=\"toolbarItemGroup\">\n    @if ('heading' | lxExtensionEnabled: editor) {\n      <lx-options-dropdown>\n        <button\n          class=\"toolbarItem toolbar-heading\"\n          lxKeyboardActionSource\n          lx-button\n          [lxTooltip]=\"NAME + '.textStyles' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [square]=\"false\"\n          [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n          endIcon=\"slim-arrow-down\"\n          [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n        >\n          {{\n            editor.isActive('heading')\n              ? `${(NAME + '.heading' | translate)}  ${editor.getAttributes('heading')['level']}`\n              : `${(NAME + '.paragraph' | translate)}`\n          }}\n        </button>\n\n        @for (level of headingLevels; track $index) {\n          <lx-option\n            (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n            [hasSelectedState]=\"editor.isActive('heading', { level })\"\n            [selected]=\"editor.isActive('heading', { level })\"\n          >\n            @if (!editor.isActive('heading', { level })) {\n              @if (level >= 1 && level <= 3) {\n                <ui5-icon name=\"heading{{ level }}\" class=\"dropdown-icon\" />\n              } @else if (level === 4) {\n                <ui5-icon name=\"lx-icons/heading4\" class=\"dropdown-icon\" />\n              }\n            }\n            <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n          </lx-option>\n        }\n\n        <lx-option\n          (select)=\"this.editor.chain().setParagraph().focus().run()\"\n          [hasSelectedState]=\"editor.isActive('paragraph')\"\n          [selected]=\"editor.isActive('paragraph')\"\n        >\n          @if (!editor.isActive('paragraph')) {\n            <ui5-icon name=\"text\" class=\"dropdown-icon\" />\n          }\n          <span>{{ NAME + '.paragraphOption' | translate }}</span>\n        </lx-option>\n      </lx-options-dropdown>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bold' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.bold' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.bold' | translate\"\n        [disabled]=\"editor.isActive('header')\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBold().focus().run()\"\n        [pressed]=\"editor.isActive('bold')\"\n        icon=\"bold-text\"\n      ></button>\n    }\n\n    @if ('italic' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.italic' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.italic' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleItalic().focus().run()\"\n        [pressed]=\"editor.isActive('italic')\"\n        icon=\"italic-text\"\n      ></button>\n    }\n\n    @if ('underline' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.underline' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.underline' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleUnderline().focus().run()\"\n        [pressed]=\"editor.isActive('underline')\"\n        icon=\"underline-text\"\n      ></button>\n    }\n\n    @if ('strike' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.strikethrough' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleStrike().focus().run()\"\n        [pressed]=\"editor.isActive('strike')\"\n        icon=\"strikethrough\"\n      ></button>\n    }\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bulletList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.bulletList' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.bulletList' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBulletList().run()\"\n        [pressed]=\"editor.isActive('listItem')\"\n        icon=\"list\"\n      ></button>\n    }\n\n    @if ('orderedList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.numberedList' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.numberedList' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleOrderedList().run()\"\n        [pressed]=\"editor.isActive('orderedList')\"\n        icon=\"business-suite/icon-bulleting-with-numbers\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('textAlign' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignLeft' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n        icon=\"text-align-left\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignCenter' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n        icon=\"text-align-center\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignRight' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n        icon=\"text-align-right\"\n      ></button>\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignBlock' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignBlock' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n        icon=\"text-align-justified\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('link' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.link' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.link' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().openLinkModal().run()\"\n        [pressed]=\"editor.isActive('link')\"\n        icon=\"chain-link\"\n      ></button>\n      <span class=\"separator\"></span>\n    }\n  </div>\n\n  @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n  @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n  @if (tableEnabled || codeEnabled) {\n    <div class=\"toolbarItemGroup\">\n      @if (codeEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.code' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [lxTooltip]=\"NAME + '.code' | translate\"\n          [square]=\"true\"\n          (click)=\"editor.chain().setCodeBlock().run()\"\n          [pressed]=\"editor.isActive('codeBlock')\"\n          icon=\"source-code\"\n        ></button>\n      }\n\n      @if ('lxDiagram' | lxExtensionEnabled: editor) {\n        <ng-content select=\".diagram-btn\" />\n      }\n\n      @if (tableEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.insertTable' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [lxTooltip]=\"NAME + '.insertTable' | translate\"\n          [square]=\"true\"\n          (click)=\"insertTable()\"\n          [pressed]=\"editor.isActive('table')\"\n          icon=\"business-suite/2x2-grid-layout\"\n          [disabled]=\"editor.isActive('table')\"\n        ></button>\n      }\n\n      <span class=\"separator\"></span>\n    </div>\n  }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && isLinkModalOpenSignal()) {\n  <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex}.toolbar{display:flex;flex-wrap:wrap;width:100%;border-bottom:#99a5bb 1px solid;transition:all .18s ease-out;opacity:1;height:auto;padding:8px}.toolbar.toolbarHidden{opacity:0;height:0!important;padding:0}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-right:.5rem;vertical-align:text-bottom}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"] }]
         }], propDecorators: { editor: [{
                 type: Input,
@@ -13359,14 +13279,14 @@ class TabComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$8.Router }, { token: i1$8.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TabComponent, isStandalone: true, selector: "lx-tab", inputs: { icon: "icon", iconDesign: "iconDesign", label: "label", title: "title", tabLink: "tabLink", counter: "counter", routerLinkActiveOptions: "routerLinkActiveOptions", counterBadgeSize: "counterBadgeSize", noMargin: "noMargin", noLeftMarginForFirstTab: "noLeftMarginForFirstTab", background: "background", disabled: "disabled" }, outputs: { switch: "switch", keyDownAction: "keyDownAction" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplate"], descendants: true, static: true }, { propertyName: "tabElement", first: true, predicate: ["tabElement"], descendants: true }, { propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<li\n  #tabElement\n  class=\"tab\"\n  [class.active]=\"isActive\"\n  [class.withIcon]=\"icon\"\n  [class.withLabel]=\"!!label\"\n  [class.noMargin]=\"noMargin\"\n  [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n  [class.backgroundGray]=\"background === 'gray'\"\n  [class.disabled]=\"disabled\"\n  [class.portalTab]=\"!tabLink\"\n  [class.routerLinkTab]=\"tabLink\"\n  [attr.title]=\"title\"\n  (click)=\"select()\"\n  (keydown)=\"handleKeyDown($event)\"\n  role=\"tab\"\n  [attr.id]=\"tabId\"\n  [attr.aria-selected]=\"isActive\"\n  [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n  @if (tabLink) {\n    <a tabindex=\"-1\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n      <ng-container *ngTemplateOutlet=\"portalTab\" />\n    </a>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"portalTab\" />\n  }\n  <ng-template #portalTab>\n    @if (icon) {\n      <ui5-icon class=\"icon\" [design]=\"iconDesign\" class=\"icon\" [name]=\"icon\" />\n    }\n    @if (label) {\n      <span class=\"tabLabel\">{{ label }}</span>\n    }\n    @if (counter) {\n      <lx-counter [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"isActive ? 'primary' : 'gray'\" />\n    }\n  </ng-template>\n  <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n    @if (!tabLink) {\n      <div class=\"content\" role=\"tabpanel\">\n        <ng-content />\n      </div>\n    }\n  </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after,.tab.active:after{transition:background-color .1s;background-color:var(--lx-primarybutton-backgroundcolor)}.tab.active{cursor:default}.tab.disabled{opacity:.3;cursor:default}.tab:hover .tabLabel,.tab.active .tabLabel{color:#2a303d;transition:color .1s}.tab:hover ui5-icon[design=NonInteractive],.tab.active ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapInformativeElementColor, #0070f2)}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding-inline:14px}.routerLinkTab a:focus{outline:0}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.withLabel .icon{margin-right:.5rem}.icon{vertical-align:middle}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:14.5px;text-decoration:none}.content{height:100%}lx-counter{margin-left:8px}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TabComponent, isStandalone: true, selector: "lx-tab", inputs: { icon: "icon", iconDesign: "iconDesign", label: "label", title: "title", tabLink: "tabLink", counter: "counter", routerLinkActiveOptions: "routerLinkActiveOptions", counterBadgeSize: "counterBadgeSize", noMargin: "noMargin", noLeftMarginForFirstTab: "noLeftMarginForFirstTab", background: "background", disabled: "disabled" }, outputs: { switch: "switch", keyDownAction: "keyDownAction" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplate"], descendants: true, static: true }, { propertyName: "tabElement", first: true, predicate: ["tabElement"], descendants: true }, { propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<li\n  #tabElement\n  class=\"tab\"\n  [class.active]=\"isActive\"\n  [class.withIcon]=\"icon\"\n  [class.withLabel]=\"!!label\"\n  [class.noMargin]=\"noMargin\"\n  [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n  [class.backgroundGray]=\"background === 'gray'\"\n  [class.disabled]=\"disabled\"\n  [class.portalTab]=\"!tabLink\"\n  [class.routerLinkTab]=\"tabLink\"\n  [attr.title]=\"title\"\n  (click)=\"select()\"\n  (keydown)=\"handleKeyDown($event)\"\n  role=\"tab\"\n  [attr.id]=\"tabId\"\n  [attr.aria-selected]=\"isActive\"\n  [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n  @if (tabLink) {\n    <a tabindex=\"-1\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n      <ng-container *ngTemplateOutlet=\"portalTab\" />\n    </a>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"portalTab\" />\n  }\n  <ng-template #portalTab>\n    @if (icon) {\n      <ui5-icon class=\"icon\" [design]=\"iconDesign\" class=\"icon\" [name]=\"icon\" />\n    }\n    @if (label) {\n      <span class=\"tabLabel\">{{ label }}</span>\n    }\n    @if (counter) {\n      <lx-counter [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"isActive ? 'primary' : 'gray'\" />\n    }\n  </ng-template>\n  <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n    @if (!tabLink) {\n      <div class=\"content\" role=\"tabpanel\">\n        <ng-content />\n      </div>\n    }\n  </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after,.tab.active:after{transition:background-color .1s;background-color:var(--lx-primarybutton-backgroundcolor)}.tab.active{cursor:default}.tab.disabled{opacity:.3;cursor:default}.tab:hover .tabLabel,.tab.active .tabLabel{color:#2a303d;transition:color .1s}.tab:hover ui5-icon[design=NonInteractive],.tab.active ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapInformativeElementColor, #0070f2)}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding-inline:14px}.routerLinkTab a:focus{outline:0}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.withLabel .icon{margin-right:.5rem}.icon{vertical-align:middle}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:14.5px;text-decoration:none}.content{height:100%}lx-counter{margin-left:8px}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     Observe('routerLinkActive')
 ], TabComponent.prototype, "routerLinkActive$", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-tab', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLinkActive, RouterLink, CounterComponent, PortalModule, NgTemplateOutlet, IconComponent$1], template: "<li\n  #tabElement\n  class=\"tab\"\n  [class.active]=\"isActive\"\n  [class.withIcon]=\"icon\"\n  [class.withLabel]=\"!!label\"\n  [class.noMargin]=\"noMargin\"\n  [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n  [class.backgroundGray]=\"background === 'gray'\"\n  [class.disabled]=\"disabled\"\n  [class.portalTab]=\"!tabLink\"\n  [class.routerLinkTab]=\"tabLink\"\n  [attr.title]=\"title\"\n  (click)=\"select()\"\n  (keydown)=\"handleKeyDown($event)\"\n  role=\"tab\"\n  [attr.id]=\"tabId\"\n  [attr.aria-selected]=\"isActive\"\n  [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n  @if (tabLink) {\n    <a tabindex=\"-1\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n      <ng-container *ngTemplateOutlet=\"portalTab\" />\n    </a>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"portalTab\" />\n  }\n  <ng-template #portalTab>\n    @if (icon) {\n      <ui5-icon class=\"icon\" [design]=\"iconDesign\" class=\"icon\" [name]=\"icon\" />\n    }\n    @if (label) {\n      <span class=\"tabLabel\">{{ label }}</span>\n    }\n    @if (counter) {\n      <lx-counter [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"isActive ? 'primary' : 'gray'\" />\n    }\n  </ng-template>\n  <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n    @if (!tabLink) {\n      <div class=\"content\" role=\"tabpanel\">\n        <ng-content />\n      </div>\n    }\n  </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after,.tab.active:after{transition:background-color .1s;background-color:var(--lx-primarybutton-backgroundcolor)}.tab.active{cursor:default}.tab.disabled{opacity:.3;cursor:default}.tab:hover .tabLabel,.tab.active .tabLabel{color:#2a303d;transition:color .1s}.tab:hover ui5-icon[design=NonInteractive],.tab.active ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapInformativeElementColor, #0070f2)}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding-inline:14px}.routerLinkTab a:focus{outline:0}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.withLabel .icon{margin-right:.5rem}.icon{vertical-align:middle}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:14.5px;text-decoration:none}.content{height:100%}lx-counter{margin-left:8px}\n"] }]
+            args: [{ selector: 'lx-tab', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLinkActive, RouterLink, CounterComponent, PortalModule, NgTemplateOutlet, IconComponent], template: "<li\n  #tabElement\n  class=\"tab\"\n  [class.active]=\"isActive\"\n  [class.withIcon]=\"icon\"\n  [class.withLabel]=\"!!label\"\n  [class.noMargin]=\"noMargin\"\n  [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n  [class.backgroundGray]=\"background === 'gray'\"\n  [class.disabled]=\"disabled\"\n  [class.portalTab]=\"!tabLink\"\n  [class.routerLinkTab]=\"tabLink\"\n  [attr.title]=\"title\"\n  (click)=\"select()\"\n  (keydown)=\"handleKeyDown($event)\"\n  role=\"tab\"\n  [attr.id]=\"tabId\"\n  [attr.aria-selected]=\"isActive\"\n  [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n  @if (tabLink) {\n    <a tabindex=\"-1\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n      <ng-container *ngTemplateOutlet=\"portalTab\" />\n    </a>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"portalTab\" />\n  }\n  <ng-template #portalTab>\n    @if (icon) {\n      <ui5-icon class=\"icon\" [design]=\"iconDesign\" class=\"icon\" [name]=\"icon\" />\n    }\n    @if (label) {\n      <span class=\"tabLabel\">{{ label }}</span>\n    }\n    @if (counter) {\n      <lx-counter [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"isActive ? 'primary' : 'gray'\" />\n    }\n  </ng-template>\n  <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n    @if (!tabLink) {\n      <div class=\"content\" role=\"tabpanel\">\n        <ng-content />\n      </div>\n    }\n  </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after,.tab.active:after{transition:background-color .1s;background-color:var(--lx-primarybutton-backgroundcolor)}.tab.active{cursor:default}.tab.disabled{opacity:.3;cursor:default}.tab:hover .tabLabel,.tab.active .tabLabel{color:#2a303d;transition:color .1s}.tab:hover ui5-icon[design=NonInteractive],.tab.active ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapInformativeElementColor, #0070f2)}.portalTab,.routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}.portalTab.withIcon,.routerLinkTab a.withIcon{padding-inline:14px}.routerLinkTab a:focus{outline:0}.routerLinkTab.active a,.routerLinkTab.disabled a{cursor:default}.withLabel .icon{margin-right:.5rem}.icon{vertical-align:middle}.noMargin{margin:0}.noLeftMarginForFirstTab{margin-left:0}.backgroundGray{background-color:#c2c9d6}.backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}.tabLabel{color:#61779d;display:inline-block;font-size:14.5px;text-decoration:none}.content{height:100%}lx-counter{margin-left:8px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$8.Router }, { type: i1$8.ActivatedRoute }], propDecorators: { icon: [{
                 type: Input
             }], iconDesign: [{
@@ -13579,5 +13499,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AVATAR_COLORS, AVATAR_SIZE_MAPPING, AfterViewInitDirective, AngularNodeViewComponent, AngularNodeViewRenderer, AutocloseDirective, AutocloseGroupService, AutofocusDirective, AvatarComponent, AvatarGroupComponent, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CORE_MODULE_EXPORTS, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ContenteditableDirective, ContrastColorPipe, CounterComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATEPICKER_CONTROL_VALUE_ACCESSOR, DATE_FN_LOCALE, DATE_FORMATS, DEFAULT_IMAGE_ID, DateFormatter, DateInputComponent, DatePickerComponent, DatepickerConfig, DatepickerUiModule, DragAndDropListComponent, DragAndDropListItemComponent, END, ENTER, ESCAPE, EllipsisComponent, EmptyStateComponent, ErrorMessageComponent, FORMS_MODULE_EXPORTS, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FaToSapIconPipe, FilterSelectionPipe, FilterTermPipe, FocusEditorDirective, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermDirective, HighlightTermPipe, ICON_MAP, IMAGE_READER, IconComponent, InputComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, KeyboardSortableItemDirective, KeyboardSortableListDirective, LOCALE_FN, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, MaxLengthCounterDirective, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PageHeaderComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, RemoveMarkdownPipe, ResizeObserverService, ResponsiveInputComponent, RichTextEditorComponent, SPACE, SelectDropdownDirective, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SkeletonComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, StepperComponent, SwitchComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TipTapEditorDirective, TokenComponent, TokenizerComponent, TokenizerOverflowPopoverComponent, TooltipComponent, TooltipDirective, TrackingDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, TruncateDirective, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, argsToInterpolatedTemplate, getContrastColor, getInitialsUrl, getKeyboardNavigationEvents, getSapIcon, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, markdownToText, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle, stopKeyboardEventPropagation };
+export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AVATAR_COLORS, AVATAR_SIZE_MAPPING, AfterViewInitDirective, AngularNodeViewComponent, AngularNodeViewRenderer, AutocloseDirective, AutocloseGroupService, AutofocusDirective, AvatarComponent, AvatarGroupComponent, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CORE_MODULE_EXPORTS, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ContenteditableDirective, ContrastColorPipe, CounterComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATEPICKER_CONTROL_VALUE_ACCESSOR, DATE_FN_LOCALE, DATE_FORMATS, DEFAULT_IMAGE_ID, DateFormatter, DateInputComponent, DatePickerComponent, DatepickerConfig, DatepickerUiModule, DragAndDropListComponent, DragAndDropListItemComponent, END, ENTER, ESCAPE, EllipsisComponent, EmptyStateComponent, ErrorMessageComponent, FORMS_MODULE_EXPORTS, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FaToSapIconPipe, FilterSelectionPipe, FilterTermPipe, FocusEditorDirective, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermDirective, HighlightTermPipe, ICON_MAP, IMAGE_READER, InputComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, KeyboardSortableItemDirective, KeyboardSortableListDirective, LOCALE_FN, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, MaxLengthCounterDirective, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PageHeaderComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, RemoveMarkdownPipe, ResizeObserverService, ResponsiveInputComponent, RichTextEditorComponent, SPACE, SelectDropdownDirective, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SkeletonComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, StepperComponent, SwitchComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TipTapEditorDirective, TokenComponent, TokenizerComponent, TokenizerOverflowPopoverComponent, TooltipComponent, TooltipDirective, TrackingDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, TruncateDirective, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, argsToInterpolatedTemplate, getContrastColor, getInitialsUrl, getKeyboardNavigationEvents, getSapIcon, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, markdownToText, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle, stopKeyboardEventPropagation };
 //# sourceMappingURL=leanix-components.mjs.map