@leanix/components 0.4.725 → 0.4.726

package/fesm2022/leanix-components.mjs

@@ -579,7 +579,7 @@ class ButtonComponent {
         return removeFontAwesomeVariant(iconName);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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      <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      <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{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"], 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.17", 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      <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      <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{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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -1336,7 +1336,7 @@ class TableHeaderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", 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.17", 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"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableHeaderComponent, decorators: [{
             type: Component,
@@ -2750,7 +2750,7 @@ class AvatarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AvatarComponent, deps: [{ token: IMAGE_READER }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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"], exportAs: ["ui5Icon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
@@ -11662,7 +11662,7 @@ class TabComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", 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.17", 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"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", 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 }); }
 }
 __decorate([
     Observe('routerLinkActive')