@leanix/components 0.4.974 → 0.4.975

package/fesm2022/leanix-components.mjs

@@ -13207,14 +13207,14 @@ class TabComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$7.Router }, { token: i1$7.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 }], hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], 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}.content{height:100%}:host:where(:not(.lxFioriReskin)) .tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}:host:where(:not(.lxFioriReskin)) .tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}:host:where(:not(.lxFioriReskin)) .tab:hover:after,:host:where(:not(.lxFioriReskin)) .tab.active:after{transition:background-color .1s;background-color:var(--lx-primarybutton-backgroundcolor)}:host:where(:not(.lxFioriReskin)) .tab.active{cursor:default}:host:where(:not(.lxFioriReskin)) .tab.disabled{opacity:.3;cursor:default}:host:where(:not(.lxFioriReskin)) .tab:hover .tabLabel,:host:where(:not(.lxFioriReskin)) .tab.active .tabLabel{color:#2a303d;transition:color .1s}:host:where(:not(.lxFioriReskin)) .tab:hover ui5-icon[design=NonInteractive],:host:where(:not(.lxFioriReskin)) .tab.active ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapInformativeElementColor, #0070f2)}:host:where(:not(.lxFioriReskin)) .portalTab,:host:where(:not(.lxFioriReskin)) .routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}:host:where(:not(.lxFioriReskin)) .portalTab.withIcon,:host:where(:not(.lxFioriReskin)) .routerLinkTab a.withIcon{padding-inline:14px}:host:where(:not(.lxFioriReskin)) .routerLinkTab a:focus{outline:0}:host:where(:not(.lxFioriReskin)) .routerLinkTab.active a,:host:where(:not(.lxFioriReskin)) .routerLinkTab.disabled a{cursor:default}:host:where(:not(.lxFioriReskin)) .withLabel .icon{margin-right:.5rem}:host:where(:not(.lxFioriReskin)) .icon{vertical-align:middle}:host:where(:not(.lxFioriReskin)) .noMargin{margin:0}:host:where(:not(.lxFioriReskin)) .noLeftMarginForFirstTab{margin-left:0}:host:where(:not(.lxFioriReskin)) .backgroundGray{background-color:#c2c9d6}:host:where(:not(.lxFioriReskin)) .backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}:host:where(:not(.lxFioriReskin)) .tabLabel{color:#61779d;display:inline-block;font-size:14.5px;text-decoration:none}:host:where(:not(.lxFioriReskin)) lx-counter{margin-left:8px}:host(.lxFioriReskin) .tab{position:relative;display:inline-flex;align-items:center;height:2.75rem;padding:0 1rem;margin:0;text-align:center;transition:none;cursor:pointer;color:var(--sapTab_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .tab.active{cursor:default}:host(.lxFioriReskin) .tab.active .tabLabel{color:var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab.active:after{content:\"\";position:absolute;left:1rem;right:1rem;bottom:0;height:.1875rem;background-color:var(--sapTab_ForegroundColor);border-radius:.125rem .125rem 0 0}:host(.lxFioriReskin) .tab:hover:not(.active):not(.disabled) .tabLabel{color:var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab:hover:not(.active):not(.disabled) ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default}:host(.lxFioriReskin) .tab:focus{outline:none}:host(.lxFioriReskin) .tab:focus .tabLabel{outline:.125rem solid var(--sapContent_FocusColor);outline-offset:0;border-radius:.375rem}:host(.lxFioriReskin) .routerLinkTab a{display:inline-flex;align-items:center;height:100%;line-height:1.4;padding:0}:host(.lxFioriReskin) .routerLinkTab a:focus{outline:0}:host(.lxFioriReskin) .routerLinkTab.active a,:host(.lxFioriReskin) .routerLinkTab.disabled a{cursor:default}:host(.lxFioriReskin) .withLabel .icon{margin-right:.5rem}:host(.lxFioriReskin) .icon{vertical-align:middle;--sapContent_NonInteractiveIconColor: var(--sapTab_TextColor)}:host(.lxFioriReskin) .noMargin{margin:0}:host(.lxFioriReskin) .noLeftMarginForFirstTab{margin-left:0}:host(.lxFioriReskin) .backgroundGray{background-color:transparent}:host(.lxFioriReskin) .tabLabel{color:var(--sapTab_TextColor);display:inline-block;font-size:var(--sapFontSize);line-height:1.514;font-weight:700;text-decoration:none;padding:0 .1875rem}:host(.lxFioriReskin) lx-counter{margin-left:.5rem}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 }], hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], 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}.content{height:100%}:host:where(:not(.lxFioriReskin)) .tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}:host:where(:not(.lxFioriReskin)) .tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}:host:where(:not(.lxFioriReskin)) .tab:hover:after,:host:where(:not(.lxFioriReskin)) .tab.active:after{transition:background-color .1s;background-color:var(--lx-primarybutton-backgroundcolor)}:host:where(:not(.lxFioriReskin)) .tab.active{cursor:default}:host:where(:not(.lxFioriReskin)) .tab.disabled{opacity:.3;cursor:default}:host:where(:not(.lxFioriReskin)) .tab:hover .tabLabel,:host:where(:not(.lxFioriReskin)) .tab.active .tabLabel{color:#2a303d;transition:color .1s}:host:where(:not(.lxFioriReskin)) .tab:hover ui5-icon[design=NonInteractive],:host:where(:not(.lxFioriReskin)) .tab.active ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapInformativeElementColor, #0070f2)}:host:where(:not(.lxFioriReskin)) .portalTab,:host:where(:not(.lxFioriReskin)) .routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}:host:where(:not(.lxFioriReskin)) .portalTab.withIcon,:host:where(:not(.lxFioriReskin)) .routerLinkTab a.withIcon{padding-inline:14px}:host:where(:not(.lxFioriReskin)) .routerLinkTab a:focus{outline:0}:host:where(:not(.lxFioriReskin)) .routerLinkTab.active a,:host:where(:not(.lxFioriReskin)) .routerLinkTab.disabled a{cursor:default}:host:where(:not(.lxFioriReskin)) .withLabel .icon{margin-right:.5rem}:host:where(:not(.lxFioriReskin)) .icon{vertical-align:middle}:host:where(:not(.lxFioriReskin)) .noMargin{margin:0}:host:where(:not(.lxFioriReskin)) .noLeftMarginForFirstTab{margin-left:0}:host:where(:not(.lxFioriReskin)) .backgroundGray{background-color:#c2c9d6}:host:where(:not(.lxFioriReskin)) .backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}:host:where(:not(.lxFioriReskin)) .tabLabel{color:#61779d;display:inline-block;font-size:14.5px;text-decoration:none}:host:where(:not(.lxFioriReskin)) lx-counter{margin-left:8px}:host(.lxFioriReskin) .tab{position:relative;display:inline-flex;align-items:center;height:2.75rem;padding:0 1rem;margin:0;text-align:center;transition:none;cursor:pointer;color:var(--sapTab_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .tab.active{cursor:default}:host(.lxFioriReskin) .tab.active .tabLabel{color:var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab.active:after{content:\"\";position:absolute;left:1rem;right:1rem;bottom:0;height:.1875rem;background-color:var(--sapTab_ForegroundColor);border-radius:.125rem .125rem 0 0}:host(.lxFioriReskin) .tab:hover:not(.active):not(.disabled) .tabLabel{color:var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab:hover:not(.active):not(.disabled) ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default}:host(.lxFioriReskin) .tab:focus{outline:none}:host(.lxFioriReskin) .tab:focus .tabLabel{outline:.125rem solid var(--sapContent_FocusColor);outline-offset:0;border-radius:.375rem}:host(.lxFioriReskin) .routerLinkTab a{display:inline-flex;align-items:center;height:100%;line-height:1.4;padding:0;text-decoration:none}:host(.lxFioriReskin) .routerLinkTab a:focus{outline:0}:host(.lxFioriReskin) .routerLinkTab.active a,:host(.lxFioriReskin) .routerLinkTab.disabled a{cursor:default}:host(.lxFioriReskin) .withLabel .icon{margin-right:.5rem}:host(.lxFioriReskin) .icon{vertical-align:middle;--sapContent_NonInteractiveIconColor: var(--sapTab_TextColor)}:host(.lxFioriReskin) .noMargin{margin:0}:host(.lxFioriReskin) .noLeftMarginForFirstTab{margin-left:0}:host(.lxFioriReskin) .backgroundGray{background-color:transparent}:host(.lxFioriReskin) .tabLabel{color:var(--sapTab_TextColor);display:inline-block;font-size:var(--sapFontSize);line-height:1.514;font-weight:700;text-decoration:none;padding:0 .1875rem}:host(.lxFioriReskin) lx-counter{margin-left:.5rem}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     Observe('routerLinkActive')
 ], TabComponent.prototype, "routerLinkActive$", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-tab', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], imports: [RouterLinkActive, RouterLink, CounterComponent, PortalModule, NgTemplateOutlet, IconComponent], template: "<li\n  #tabElement\n  class=\"tab\"\n  [class.active]=\"isActive\"\n  [class.withIcon]=\"icon\"\n  [class.withLabel]=\"!!label\"\n  [class.noMargin]=\"noMargin\"\n  [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n  [class.backgroundGray]=\"background === 'gray'\"\n  [class.disabled]=\"disabled\"\n  [class.portalTab]=\"!tabLink\"\n  [class.routerLinkTab]=\"tabLink\"\n  [attr.title]=\"title\"\n  (click)=\"select()\"\n  (keydown)=\"handleKeyDown($event)\"\n  role=\"tab\"\n  [attr.id]=\"tabId\"\n  [attr.aria-selected]=\"isActive\"\n  [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n  @if (tabLink) {\n    <a tabindex=\"-1\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n      <ng-container *ngTemplateOutlet=\"portalTab\" />\n    </a>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"portalTab\" />\n  }\n  <ng-template #portalTab>\n    @if (icon) {\n      <ui5-icon class=\"icon\" [design]=\"iconDesign\" class=\"icon\" [name]=\"icon\" />\n    }\n    @if (label) {\n      <span class=\"tabLabel\">{{ label }}</span>\n    }\n    @if (counter) {\n      <lx-counter [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"isActive ? 'primary' : 'gray'\" />\n    }\n  </ng-template>\n  <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n    @if (!tabLink) {\n      <div class=\"content\" role=\"tabpanel\">\n        <ng-content />\n      </div>\n    }\n  </ng-template>\n</li>\n", styles: [":host{display:inline-block}.content{height:100%}:host:where(:not(.lxFioriReskin)) .tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}:host:where(:not(.lxFioriReskin)) .tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}:host:where(:not(.lxFioriReskin)) .tab:hover:after,:host:where(:not(.lxFioriReskin)) .tab.active:after{transition:background-color .1s;background-color:var(--lx-primarybutton-backgroundcolor)}:host:where(:not(.lxFioriReskin)) .tab.active{cursor:default}:host:where(:not(.lxFioriReskin)) .tab.disabled{opacity:.3;cursor:default}:host:where(:not(.lxFioriReskin)) .tab:hover .tabLabel,:host:where(:not(.lxFioriReskin)) .tab.active .tabLabel{color:#2a303d;transition:color .1s}:host:where(:not(.lxFioriReskin)) .tab:hover ui5-icon[design=NonInteractive],:host:where(:not(.lxFioriReskin)) .tab.active ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapInformativeElementColor, #0070f2)}:host:where(:not(.lxFioriReskin)) .portalTab,:host:where(:not(.lxFioriReskin)) .routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}:host:where(:not(.lxFioriReskin)) .portalTab.withIcon,:host:where(:not(.lxFioriReskin)) .routerLinkTab a.withIcon{padding-inline:14px}:host:where(:not(.lxFioriReskin)) .routerLinkTab a:focus{outline:0}:host:where(:not(.lxFioriReskin)) .routerLinkTab.active a,:host:where(:not(.lxFioriReskin)) .routerLinkTab.disabled a{cursor:default}:host:where(:not(.lxFioriReskin)) .withLabel .icon{margin-right:.5rem}:host:where(:not(.lxFioriReskin)) .icon{vertical-align:middle}:host:where(:not(.lxFioriReskin)) .noMargin{margin:0}:host:where(:not(.lxFioriReskin)) .noLeftMarginForFirstTab{margin-left:0}:host:where(:not(.lxFioriReskin)) .backgroundGray{background-color:#c2c9d6}:host:where(:not(.lxFioriReskin)) .backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}:host:where(:not(.lxFioriReskin)) .tabLabel{color:#61779d;display:inline-block;font-size:14.5px;text-decoration:none}:host:where(:not(.lxFioriReskin)) lx-counter{margin-left:8px}:host(.lxFioriReskin) .tab{position:relative;display:inline-flex;align-items:center;height:2.75rem;padding:0 1rem;margin:0;text-align:center;transition:none;cursor:pointer;color:var(--sapTab_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .tab.active{cursor:default}:host(.lxFioriReskin) .tab.active .tabLabel{color:var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab.active:after{content:\"\";position:absolute;left:1rem;right:1rem;bottom:0;height:.1875rem;background-color:var(--sapTab_ForegroundColor);border-radius:.125rem .125rem 0 0}:host(.lxFioriReskin) .tab:hover:not(.active):not(.disabled) .tabLabel{color:var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab:hover:not(.active):not(.disabled) ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default}:host(.lxFioriReskin) .tab:focus{outline:none}:host(.lxFioriReskin) .tab:focus .tabLabel{outline:.125rem solid var(--sapContent_FocusColor);outline-offset:0;border-radius:.375rem}:host(.lxFioriReskin) .routerLinkTab a{display:inline-flex;align-items:center;height:100%;line-height:1.4;padding:0}:host(.lxFioriReskin) .routerLinkTab a:focus{outline:0}:host(.lxFioriReskin) .routerLinkTab.active a,:host(.lxFioriReskin) .routerLinkTab.disabled a{cursor:default}:host(.lxFioriReskin) .withLabel .icon{margin-right:.5rem}:host(.lxFioriReskin) .icon{vertical-align:middle;--sapContent_NonInteractiveIconColor: var(--sapTab_TextColor)}:host(.lxFioriReskin) .noMargin{margin:0}:host(.lxFioriReskin) .noLeftMarginForFirstTab{margin-left:0}:host(.lxFioriReskin) .backgroundGray{background-color:transparent}:host(.lxFioriReskin) .tabLabel{color:var(--sapTab_TextColor);display:inline-block;font-size:var(--sapFontSize);line-height:1.514;font-weight:700;text-decoration:none;padding:0 .1875rem}:host(.lxFioriReskin) lx-counter{margin-left:.5rem}\n"] }]
+            args: [{ selector: 'lx-tab', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], imports: [RouterLinkActive, RouterLink, CounterComponent, PortalModule, NgTemplateOutlet, IconComponent], template: "<li\n  #tabElement\n  class=\"tab\"\n  [class.active]=\"isActive\"\n  [class.withIcon]=\"icon\"\n  [class.withLabel]=\"!!label\"\n  [class.noMargin]=\"noMargin\"\n  [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n  [class.backgroundGray]=\"background === 'gray'\"\n  [class.disabled]=\"disabled\"\n  [class.portalTab]=\"!tabLink\"\n  [class.routerLinkTab]=\"tabLink\"\n  [attr.title]=\"title\"\n  (click)=\"select()\"\n  (keydown)=\"handleKeyDown($event)\"\n  role=\"tab\"\n  [attr.id]=\"tabId\"\n  [attr.aria-selected]=\"isActive\"\n  [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n  @if (tabLink) {\n    <a tabindex=\"-1\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n      <ng-container *ngTemplateOutlet=\"portalTab\" />\n    </a>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"portalTab\" />\n  }\n  <ng-template #portalTab>\n    @if (icon) {\n      <ui5-icon class=\"icon\" [design]=\"iconDesign\" class=\"icon\" [name]=\"icon\" />\n    }\n    @if (label) {\n      <span class=\"tabLabel\">{{ label }}</span>\n    }\n    @if (counter) {\n      <lx-counter [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"isActive ? 'primary' : 'gray'\" />\n    }\n  </ng-template>\n  <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n    @if (!tabLink) {\n      <div class=\"content\" role=\"tabpanel\">\n        <ng-content />\n      </div>\n    }\n  </ng-template>\n</li>\n", styles: [":host{display:inline-block}.content{height:100%}:host:where(:not(.lxFioriReskin)) .tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}:host:where(:not(.lxFioriReskin)) .tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}:host:where(:not(.lxFioriReskin)) .tab:hover:after,:host:where(:not(.lxFioriReskin)) .tab.active:after{transition:background-color .1s;background-color:var(--lx-primarybutton-backgroundcolor)}:host:where(:not(.lxFioriReskin)) .tab.active{cursor:default}:host:where(:not(.lxFioriReskin)) .tab.disabled{opacity:.3;cursor:default}:host:where(:not(.lxFioriReskin)) .tab:hover .tabLabel,:host:where(:not(.lxFioriReskin)) .tab.active .tabLabel{color:#2a303d;transition:color .1s}:host:where(:not(.lxFioriReskin)) .tab:hover ui5-icon[design=NonInteractive],:host:where(:not(.lxFioriReskin)) .tab.active ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapInformativeElementColor, #0070f2)}:host:where(:not(.lxFioriReskin)) .portalTab,:host:where(:not(.lxFioriReskin)) .routerLinkTab a{display:inline-block;padding:8px 8px 12px;line-height:20px}:host:where(:not(.lxFioriReskin)) .portalTab.withIcon,:host:where(:not(.lxFioriReskin)) .routerLinkTab a.withIcon{padding-inline:14px}:host:where(:not(.lxFioriReskin)) .routerLinkTab a:focus{outline:0}:host:where(:not(.lxFioriReskin)) .routerLinkTab.active a,:host:where(:not(.lxFioriReskin)) .routerLinkTab.disabled a{cursor:default}:host:where(:not(.lxFioriReskin)) .withLabel .icon{margin-right:.5rem}:host:where(:not(.lxFioriReskin)) .icon{vertical-align:middle}:host:where(:not(.lxFioriReskin)) .noMargin{margin:0}:host:where(:not(.lxFioriReskin)) .noLeftMarginForFirstTab{margin-left:0}:host:where(:not(.lxFioriReskin)) .backgroundGray{background-color:#c2c9d6}:host:where(:not(.lxFioriReskin)) .backgroundGray:not(.active):not(.disabled){background-color:#cfd5df}:host:where(:not(.lxFioriReskin)) .tabLabel{color:#61779d;display:inline-block;font-size:14.5px;text-decoration:none}:host:where(:not(.lxFioriReskin)) lx-counter{margin-left:8px}:host(.lxFioriReskin) .tab{position:relative;display:inline-flex;align-items:center;height:2.75rem;padding:0 1rem;margin:0;text-align:center;transition:none;cursor:pointer;color:var(--sapTab_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .tab.active{cursor:default}:host(.lxFioriReskin) .tab.active .tabLabel{color:var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab.active:after{content:\"\";position:absolute;left:1rem;right:1rem;bottom:0;height:.1875rem;background-color:var(--sapTab_ForegroundColor);border-radius:.125rem .125rem 0 0}:host(.lxFioriReskin) .tab:hover:not(.active):not(.disabled) .tabLabel{color:var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab:hover:not(.active):not(.disabled) ui5-icon[design=NonInteractive]{--sapContent_NonInteractiveIconColor: var(--sapTab_Selected_TextColor)}:host(.lxFioriReskin) .tab.disabled{opacity:var(--sapContent_DisabledOpacity);cursor:default}:host(.lxFioriReskin) .tab:focus{outline:none}:host(.lxFioriReskin) .tab:focus .tabLabel{outline:.125rem solid var(--sapContent_FocusColor);outline-offset:0;border-radius:.375rem}:host(.lxFioriReskin) .routerLinkTab a{display:inline-flex;align-items:center;height:100%;line-height:1.4;padding:0;text-decoration:none}:host(.lxFioriReskin) .routerLinkTab a:focus{outline:0}:host(.lxFioriReskin) .routerLinkTab.active a,:host(.lxFioriReskin) .routerLinkTab.disabled a{cursor:default}:host(.lxFioriReskin) .withLabel .icon{margin-right:.5rem}:host(.lxFioriReskin) .icon{vertical-align:middle;--sapContent_NonInteractiveIconColor: var(--sapTab_TextColor)}:host(.lxFioriReskin) .noMargin{margin:0}:host(.lxFioriReskin) .noLeftMarginForFirstTab{margin-left:0}:host(.lxFioriReskin) .backgroundGray{background-color:transparent}:host(.lxFioriReskin) .tabLabel{color:var(--sapTab_TextColor);display:inline-block;font-size:var(--sapFontSize);line-height:1.514;font-weight:700;text-decoration:none;padding:0 .1875rem}:host(.lxFioriReskin) lx-counter{margin-left:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$7.Router }, { type: i1$7.ActivatedRoute }], propDecorators: { icon: [{
                 type: Input
             }], iconDesign: [{