@leanix/components 0.4.689 → 0.4.691

package/fesm2022/leanix-components.mjs

@@ -3,6 +3,7 @@ import { InjectionToken, Input, Component, signal, ChangeDetectionStrategy, Host
 import * as i1 from '@ngx-translate/core';
 import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import { NgTemplateOutlet, NgClass, AsyncPipe, UpperCasePipe, DecimalPipe, CommonModule, formatDate } from '@angular/common';
+import { BusyIndicatorComponent } from '@ui5/webcomponents-ngx/main/busy-indicator';
 import { IconComponent as IconComponent$1 } from '@ui5/webcomponents-ngx/main/icon';
 import { __decorate } from 'tslib';
 import { escape, trimEnd, sortBy, get, isEqual as isEqual$1, toLower, some, padCharsStart, toString, toNumber, isNaN as isNaN$1, includes, last, findIndex, filter as filter$1, isObject, find, uniqueId as uniqueId$1 } from 'lodash/fp';
@@ -489,20 +490,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 args: ['class.borderSeparator']
             }] } });
 
-/**
- * Tiny spinner component is used to show a small spinner.
- *
- * @deprecated Use the `ui5-busy-indicator` component instead.
- */
-class TinySpinnerComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TinySpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TinySpinnerComponent, isStandalone: true, selector: "lx-tiny-spinner", ngImport: i0, template: "<i class=\"far fa-spinner fa-spin fa-fw\"></i>\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)}}.fa-spin{-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}.fa-spinner:before{content:\"\\f110\"}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TinySpinnerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lx-tiny-spinner', template: "<i class=\"far fa-spinner fa-spin fa-fw\"></i>\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)}}.fa-spin{-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}.fa-spinner:before{content:\"\\f110\"}\n"] }]
-        }] });
-
 /**
  * Button component is used to create a button with different styles and sizes. This uses native button element and
  * only provides styling and some additional features like loading spinner.
@@ -591,11 +578,11 @@ class ButtonComponent {
         return removeFontAwesomeVariant(iconName);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", 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    <lx-tiny-spinner />\n  }\n  <ng-container *ngTemplateOutlet=\"content\" />\n} @else {\n  <div class=\"contentWrapper\">\n    <!-- new layout -->\n    @if (showSpinner) {\n      <lx-tiny-spinner />\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)}}: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(.withIcon).loading[color]{position:relative;color:transparent}:host(.withIcon).loading[color] lx-tiny-spinner{position:absolute;left:50%;transform:translate(-50%)}: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]{opacity:.5;cursor:default}:host[color=default] lx-tiny-spinner{color:#2a303d}:host[color=default][mode=solid]{color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}: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]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}: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=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}: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]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}: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]:active:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;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=light] lx-tiny-spinner{color:#2a303d}:host[color=light][mode=solid]{color:#2a303d;background-color:#fff;border:1px solid #99a5bb}: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]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}: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=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}: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]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}: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]:active:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;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=primary] lx-tiny-spinner{color:var(--lx-primarybutton-fontcolor)}: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]: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]: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].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=outline]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}: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]: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=ghost]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent}: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]: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=link]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;padding:0;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=danger] lx-tiny-spinner{color:#fff}:host[color=danger][mode=solid]{color:#fff;background-color:#f96464;border:1px solid #f96464}: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]:active:not([disabled]){color:#fff;background-color:#bd0707;border:1px solid rgb(188.6956521739,7.3043478261,7.3043478261)}: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=outline]{color:#f96464;background-color:transparent;border:1px solid #f96464}: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]:active:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=ghost]{color:#f96464;background-color:transparent;border:1px solid transparent}: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]:active:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=link]{color:#f96464;background-color:transparent;border:1px solid transparent;padding:0;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=success] lx-tiny-spinner{color:#fff}:host[color=success][mode=solid]{color:#fff;background-color:#33cc58;border:1px solid #33cc58}: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]:active:not([disabled]){color:#fff;background-color:#145223;border:1px solid rgb(20.4,81.6,35.2)}: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=outline]{color:#33cc58;background-color:transparent;border:1px solid #33cc58}: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]:active:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=ghost]{color:#33cc58;background-color:transparent;border:1px solid transparent}: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]:active:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=link]{color:#33cc58;background-color:transparent;border:1px solid transparent;padding:0;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[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:not(.withIcon){position:relative;opacity:.5;color:transparent!important}:host.loading:not(.withIcon) lx-tiny-spinner{position:absolute;left:calc(50% - .5em)}\n"], dependencies: [{ kind: "component", type: TinySpinnerComponent, selector: "lx-tiny-spinner" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", 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]{cursor:default}:host[color=default][mode=solid]{color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=solid][disabled][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])[disabled][mode=solid],:host[color=default][mode=solid]:focus:not([disabled])[disabled][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])[disabled][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[disabled][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][disabled][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])[disabled][mode=solid],:host[color=default][mode=outline]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=default][mode=ghost]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=default][mode=link]:hover:not([disabled])[disabled][mode=solid],:host[color=default][mode=link]:active:not([disabled])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=light][mode=solid]:focus:not([disabled])[disabled][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])[disabled][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[disabled][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][disabled][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])[disabled][mode=solid],:host[color=light][mode=outline]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=light][mode=ghost]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=light][mode=link]:hover:not([disabled])[disabled][mode=solid],:host[color=light][mode=link]:active:not([disabled])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=primary][mode=solid]:focus:not([disabled])[disabled][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])[disabled][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[disabled][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][disabled][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])[disabled][mode=solid],:host[color=primary][mode=outline]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=primary][mode=ghost]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=primary][mode=link]:hover:not([disabled])[disabled][mode=solid],:host[color=primary][mode=link]:active:not([disabled])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=danger][mode=solid]:focus:not([disabled])[disabled][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])[disabled][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[disabled][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][disabled][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])[disabled][mode=solid],:host[color=danger][mode=outline]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=danger][mode=ghost]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=danger][mode=link]:hover:not([disabled])[disabled][mode=solid],:host[color=danger][mode=link]:active:not([disabled])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=success][mode=solid]:focus:not([disabled])[disabled][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])[disabled][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[disabled][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][disabled][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])[disabled][mode=solid],:host[color=success][mode=outline]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=success][mode=ghost]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=success][mode=link]:hover:not([disabled])[disabled][mode=solid],:host[color=success][mode=link]:active:not([disabled])[disabled][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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[lx-button]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TinySpinnerComponent, IconComponent$1, NgTemplateOutlet], template: "@let startIcon = iconName();\n@let endIcon = endIconName();\n\n@if (!startIcon && !endIcon) {\n  <!-- old layout -->\n  @if (showSpinner) {\n    <lx-tiny-spinner />\n  }\n  <ng-container *ngTemplateOutlet=\"content\" />\n} @else {\n  <div class=\"contentWrapper\">\n    <!-- new layout -->\n    @if (showSpinner) {\n      <lx-tiny-spinner />\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)}}: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(.withIcon).loading[color]{position:relative;color:transparent}:host(.withIcon).loading[color] lx-tiny-spinner{position:absolute;left:50%;transform:translate(-50%)}: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]{opacity:.5;cursor:default}:host[color=default] lx-tiny-spinner{color:#2a303d}:host[color=default][mode=solid]{color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}: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]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}: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=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}: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]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=default][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}: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]:active:not([disabled]){color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;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=light] lx-tiny-spinner{color:#2a303d}:host[color=light][mode=solid]{color:#2a303d;background-color:#fff;border:1px solid #99a5bb}: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]:active:not([disabled]){color:#2a303d;background-color:#c2c9d6;border:1px solid #c2c9d6}: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=outline]{color:#2a303d;background-color:transparent;border:1px solid #e1e5eb}: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]:active:not([disabled]){color:#2a303d;background-color:#e1e5eb;border:1px solid #e1e5eb}:host[color=light][mode=ghost]{color:#2a303d;background-color:transparent;border:1px solid transparent}: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]:active:not([disabled]){color:#2a303d;background-color:#fff;border:1px solid #fff}:host[color=light][mode=link]{color:#2a303d;background-color:transparent;border:1px solid transparent;padding:0;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=primary] lx-tiny-spinner{color:var(--lx-primarybutton-fontcolor)}: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]: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]: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].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=outline]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid var(--lx-primarybutton-backgroundcolor)}: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]: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=ghost]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent}: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]: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=link]{color:var(--lx-primarybutton-backgroundcolor);background-color:transparent;border:1px solid transparent;padding:0;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=danger] lx-tiny-spinner{color:#fff}:host[color=danger][mode=solid]{color:#fff;background-color:#f96464;border:1px solid #f96464}: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]:active:not([disabled]){color:#fff;background-color:#bd0707;border:1px solid rgb(188.6956521739,7.3043478261,7.3043478261)}: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=outline]{color:#f96464;background-color:transparent;border:1px solid #f96464}: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]:active:not([disabled]){color:#fff;background-color:#f61a1a;border:1px solid rgb(246.149068323,26.350931677,26.350931677)}:host[color=danger][mode=ghost]{color:#f96464;background-color:transparent;border:1px solid transparent}: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]:active:not([disabled]){color:#fff;background-color:#f96464;border:1px solid #f96464}:host[color=danger][mode=link]{color:#f96464;background-color:transparent;border:1px solid transparent;padding:0;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=success] lx-tiny-spinner{color:#fff}:host[color=success][mode=solid]{color:#fff;background-color:#33cc58;border:1px solid #33cc58}: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]:active:not([disabled]){color:#fff;background-color:#145223;border:1px solid rgb(20.4,81.6,35.2)}: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=outline]{color:#33cc58;background-color:transparent;border:1px solid #33cc58}: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]:active:not([disabled]){color:#fff;background-color:#248f3e;border:1px solid rgb(35.7,142.8,61.6)}:host[color=success][mode=ghost]{color:#33cc58;background-color:transparent;border:1px solid transparent}: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]:active:not([disabled]){color:#fff;background-color:#33cc58;border:1px solid #33cc58}:host[color=success][mode=link]{color:#33cc58;background-color:transparent;border:1px solid transparent;padding:0;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[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:not(.withIcon){position:relative;opacity:.5;color:transparent!important}:host.loading:not(.withIcon) lx-tiny-spinner{position:absolute;left:calc(50% - .5em)}\n"] }]
+            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      <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]{cursor:default}:host[color=default][mode=solid]{color:#2a303d;background-color:#f0f2f5;border:1px solid #f0f2f5}:host[color=default][mode=solid][disabled][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])[disabled][mode=solid],:host[color=default][mode=solid]:focus:not([disabled])[disabled][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])[disabled][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[disabled][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][disabled][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])[disabled][mode=solid],:host[color=default][mode=outline]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=default][mode=ghost]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=default][mode=link]:hover:not([disabled])[disabled][mode=solid],:host[color=default][mode=link]:active:not([disabled])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=light][mode=solid]:focus:not([disabled])[disabled][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])[disabled][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[disabled][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][disabled][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])[disabled][mode=solid],:host[color=light][mode=outline]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=light][mode=ghost]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=light][mode=link]:hover:not([disabled])[disabled][mode=solid],:host[color=light][mode=link]:active:not([disabled])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=primary][mode=solid]:focus:not([disabled])[disabled][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])[disabled][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[disabled][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][disabled][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])[disabled][mode=solid],:host[color=primary][mode=outline]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=primary][mode=ghost]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=primary][mode=link]:hover:not([disabled])[disabled][mode=solid],:host[color=primary][mode=link]:active:not([disabled])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=danger][mode=solid]:focus:not([disabled])[disabled][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])[disabled][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[disabled][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][disabled][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])[disabled][mode=solid],:host[color=danger][mode=outline]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=danger][mode=ghost]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=danger][mode=link]:hover:not([disabled])[disabled][mode=solid],:host[color=danger][mode=link]:active:not([disabled])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=success][mode=solid]:focus:not([disabled])[disabled][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])[disabled][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[disabled][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][disabled][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])[disabled][mode=solid],:host[color=success][mode=outline]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=success][mode=ghost]:hover:not([disabled])[disabled][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])[disabled][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][disabled][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])[disabled][mode=solid],:host[color=success][mode=link]:hover:not([disabled])[disabled][mode=solid],:host[color=success][mode=link]:active:not([disabled])[disabled][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
             }, {
@@ -1388,6 +1375,20 @@ function determineNewOrder(currentOrder, disableSortClear) {
     return undefined;
 }
 
+/**
+ * Tiny spinner component is used to show a small spinner.
+ *
+ * @deprecated Use the `ui5-busy-indicator` component instead.
+ */
+class TinySpinnerComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TinySpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TinySpinnerComponent, isStandalone: true, selector: "lx-tiny-spinner", ngImport: i0, template: "<i class=\"far fa-spinner fa-spin fa-fw\"></i>\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)}}.fa-spin{-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}.fa-spinner:before{content:\"\\f110\"}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TinySpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-tiny-spinner', template: "<i class=\"far fa-spinner fa-spin fa-fw\"></i>\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)}}.fa-spin{-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}.fa-spinner:before{content:\"\\f110\"}\n"] }]
+        }] });
+
 /**
  * Allows to register an event handler for the "AfterViewInit" lifecycle hook.
  * This can be used to do something whenever a component enters the view. This