@leanix/components 0.4.925 → 0.4.927
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,7 +3,7 @@ import { InjectionToken, Input, Component, input, computed, ChangeDetectionStrat
|
|
|
3
3
|
import * as i1$1 from '@ngx-translate/core';
|
|
4
4
|
import { TranslatePipe, TranslateModule, TranslateService } from '@ngx-translate/core';
|
|
5
5
|
import * as i1 from '@leanix/components/ui5';
|
|
6
|
-
import { FioriReskinAwareDirective } from '@leanix/components/ui5';
|
|
6
|
+
import { FioriReskinAwareDirective, FioriReskinService } from '@leanix/components/ui5';
|
|
7
7
|
import { IconComponent } from '@ui5/webcomponents-ngx/main/icon';
|
|
8
8
|
import { BusyIndicatorComponent } from '@ui5/webcomponents-ngx/main/busy-indicator';
|
|
9
9
|
import { NgClass, AsyncPipe, NgTemplateOutlet, UpperCasePipe, DecimalPipe, CommonModule, formatDate } from '@angular/common';
|
|
@@ -9939,11 +9939,23 @@ class SwitchComponent {
|
|
|
9939
9939
|
* Event emitted when the switch is toggled, returning the new boolean value.
|
|
9940
9940
|
*/
|
|
9941
9941
|
this.toggle = new EventEmitter();
|
|
9942
|
+
this.fioriReskin = inject(FioriReskinService);
|
|
9942
9943
|
}
|
|
9943
9944
|
/** @internal */
|
|
9944
9945
|
onToggle() {
|
|
9945
9946
|
this.toggle.emit(!this.value);
|
|
9946
9947
|
}
|
|
9948
|
+
/**
|
|
9949
|
+
* @internal
|
|
9950
|
+
* Blur the input on click in legacy mode to suppress its lingering focus
|
|
9951
|
+
* ring. In Fiori reskin mode, keep focus so the SAP focus outline persists
|
|
9952
|
+
* (matches ui5-switch).
|
|
9953
|
+
*/
|
|
9954
|
+
onClickBlur(input) {
|
|
9955
|
+
if (!this.fioriReskin.active()) {
|
|
9956
|
+
input.blur();
|
|
9957
|
+
}
|
|
9958
|
+
}
|
|
9947
9959
|
get id() {
|
|
9948
9960
|
return this.elementId ? `tour${this.elementId}` : null;
|
|
9949
9961
|
}
|
|
@@ -9953,11 +9965,11 @@ class SwitchComponent {
|
|
|
9953
9965
|
setTimeout(() => checkbox.focus(), 150);
|
|
9954
9966
|
}
|
|
9955
9967
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9956
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SwitchComponent, isStandalone: true, selector: "lx-switch", inputs: { value: "value", size: "size", disabled: "disabled", label: "label", labelInFront: "labelInFront", elementId: "elementId" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<div\n class=\"wrapper\"\n [class.withLabel]=\"label\"\n [class.withLabelBehind]=\"label && !labelInFront\"\n [class.disabled]=\"disabled\"\n [attr.id]=\"id\"\n [class.small]=\"size === 'small'\"\n>\n @if (label) {\n <span class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n }\n <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n <input\n #inputRef\n type=\"checkbox\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n (click)=\"inputRef
|
|
9968
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SwitchComponent, isStandalone: true, selector: "lx-switch", inputs: { value: "value", size: "size", disabled: "disabled", label: "label", labelInFront: "labelInFront", elementId: "elementId" }, outputs: { toggle: "toggle" }, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "<div\n class=\"wrapper\"\n [class.withLabel]=\"label\"\n [class.withLabelBehind]=\"label && !labelInFront\"\n [class.disabled]=\"disabled\"\n [attr.id]=\"id\"\n [class.small]=\"size === 'small'\"\n>\n @if (label) {\n <span class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n }\n <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n <input\n #inputRef\n type=\"checkbox\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n (click)=\"onClickBlur(inputRef)\"\n (change)=\"onToggle()\"\n (keydown.space)=\"focus(inputRef)\"\n (keydown.enter)=\"onToggle()\"\n />\n <span class=\"slider\"></span>\n </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:flex;align-items:center;justify-content:space-between;gap:4px}.wrapper.withLabel{flex-direction:row}.wrapper.withLabelBehind{flex-direction:row-reverse}:host:where(:not(.lxFioriReskin)) .disabled{opacity:.5}:host:where(:not(.lxFioriReskin)) .disabled .slider{cursor:default}:host:where(:not(.lxFioriReskin)) .checkbox{position:relative;display:inline-block;margin:0}:host:where(:not(.lxFioriReskin)) .labelText{color:#2a303d}:host:where(:not(.lxFioriReskin)) .labelText.off{color:#526179}:host:where(:not(.lxFioriReskin)) input{opacity:0;width:0;height:0;margin:0;padding:0}:host:where(:not(.lxFioriReskin)) .small.checkbox{width:22px;height:14px}:host:where(:not(.lxFioriReskin)) .small.wrapper:not(.withLabel){height:14px}:host:where(:not(.lxFioriReskin)) .small .labelText{font-size:var(--lxFontSize, 14px)}:host:where(:not(.lxFioriReskin)) .small .slider{border-radius:7px}:host:where(:not(.lxFioriReskin)) .small .slider:before{height:12px;width:12px;left:1px;bottom:1px}:host:where(:not(.lxFioriReskin)) .small input:checked+.slider:before{transform:translate(8px)}:host:where(:not(.lxFioriReskin)) input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}:host:where(:not(.lxFioriReskin)) .slider{position:absolute;cursor:pointer;inset:0;background-color:#b2bccc;transition:transform .2s}:host:where(:not(.lxFioriReskin)) .slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}:host:where(:not(.lxFioriReskin)) input:checked+.slider{background-color:#33cc58}:host(.lxFioriReskin) .wrapper{font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .labelText{color:var(--sapTextColor)}:host(.lxFioriReskin) .labelText.off{color:var(--sapTextColor)}:host(.lxFioriReskin) .disabled{opacity:var(--sapContent_DisabledOpacity)}:host(.lxFioriReskin) .disabled .slider{cursor:default}:host(.lxFioriReskin) .checkbox{position:relative;display:inline-block;margin:0;opacity:1}:host(.lxFioriReskin) input{opacity:0;width:0;height:0;margin:0;padding:0}:host(.lxFioriReskin) .small.checkbox{width:2.75rem;height:1.25rem}:host(.lxFioriReskin) .small.wrapper:not(.withLabel){height:1.25rem}:host(.lxFioriReskin) .small .slider{border-radius:.75rem}:host(.lxFioriReskin) .small .slider:before{width:1.25rem;height:1rem;left:.125rem;top:50%;bottom:auto;transform:translateY(-50%)}:host(.lxFioriReskin) .small input:checked+.slider:before{transform:translateY(-50%) translate(1.25rem)}:host(.lxFioriReskin) .slider{position:absolute;cursor:pointer;inset:0;background-color:var(--sapButton_Track_Background);box-sizing:border-box;transition:background-color .1s ease-in}:host(.lxFioriReskin) .slider:before{position:absolute;content:\"\";border-radius:1rem;background-color:var(--sapButton_Handle_Background);border:.125rem solid var(--sapButton_Handle_BorderColor);box-sizing:border-box;transition:transform .1s ease-in,background-color .1s ease-in,border-color .1s ease-in,box-shadow .1s ease-in}:host(.lxFioriReskin) .slider:after{position:absolute;content:\"\";pointer-events:none;width:1rem;height:1rem;top:50%;left:.25rem;transform:translateY(-50%);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23131e29' d='M454 275H58q-11 0-18.5-7T32 250t7.5-18.5T58 224h396q11 0 18.5 7.5T480 250t-7.5 18-18.5 7z'/%3E%3C/svg%3E\");background-size:contain;background-repeat:no-repeat;background-position:center;transition:transform .1s ease-in}:host(.lxFioriReskin) .checkbox:hover input:not(:disabled):not(:checked)+.slider{background-color:var(--sapButton_Track_Hover_Background)}:host(.lxFioriReskin) .checkbox:hover input:not(:disabled):not(:checked)+.slider:before{background-color:var(--sapButton_Handle_Hover_Background);box-shadow:0 0 0 .125rem var(--sapButton_Handle_Hover_BorderColor)}:host(.lxFioriReskin) input:checked+.slider{background-color:var(--sapButton_Track_Selected_Background)}:host(.lxFioriReskin) input:checked+.slider:before{background-color:var(--sapButton_Handle_Selected_Background);border-color:var(--sapButton_Handle_Selected_BorderColor)}:host(.lxFioriReskin) input:checked+.slider:after{transform:translateY(-50%) translate(1.25rem);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%230064d9' d='M187 416q-12 0-20-9L71 299q-7-7-7-17 0-11 7.5-18.5T90 256q12 0 19 9l77 87 217-247q8-9 19-9t18.5 7.5T448 122q0 10-6 16L206 407q-7 9-19 9z'/%3E%3C/svg%3E\")}:host(.lxFioriReskin) .checkbox:hover input:checked:not(:disabled)+.slider{background-color:var(--sapButton_Track_Selected_Hover_Background)}:host(.lxFioriReskin) .checkbox:hover input:checked:not(:disabled)+.slider:before{background-color:var(--sapButton_Handle_Selected_Hover_Background);box-shadow:0 0 0 .125rem var(--sapButton_Handle_Selected_Hover_BorderColor)}:host(.lxFioriReskin) input:focus+.slider{outline:.125rem solid var(--sapContent_FocusColor);outline-offset:.125rem;border-radius:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9957
9969
|
}
|
|
9958
9970
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
9959
9971
|
type: Component,
|
|
9960
|
-
args: [{ selector: 'lx-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"wrapper\"\n [class.withLabel]=\"label\"\n [class.withLabelBehind]=\"label && !labelInFront\"\n [class.disabled]=\"disabled\"\n [attr.id]=\"id\"\n [class.small]=\"size === 'small'\"\n>\n @if (label) {\n <span class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n }\n <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n <input\n #inputRef\n type=\"checkbox\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n (click)=\"inputRef
|
|
9972
|
+
args: [{ selector: 'lx-switch', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], template: "<div\n class=\"wrapper\"\n [class.withLabel]=\"label\"\n [class.withLabelBehind]=\"label && !labelInFront\"\n [class.disabled]=\"disabled\"\n [attr.id]=\"id\"\n [class.small]=\"size === 'small'\"\n>\n @if (label) {\n <span class=\"labelText\" [class.off]=\"!value\">{{ label }}</span>\n }\n <label class=\"checkbox\" [class.small]=\"size === 'small'\">\n <input\n #inputRef\n type=\"checkbox\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n (click)=\"onClickBlur(inputRef)\"\n (change)=\"onToggle()\"\n (keydown.space)=\"focus(inputRef)\"\n (keydown.enter)=\"onToggle()\"\n />\n <span class=\"slider\"></span>\n </label>\n</div>\n", styles: [":host{display:block}.wrapper{display:flex;align-items:center;justify-content:space-between;gap:4px}.wrapper.withLabel{flex-direction:row}.wrapper.withLabelBehind{flex-direction:row-reverse}:host:where(:not(.lxFioriReskin)) .disabled{opacity:.5}:host:where(:not(.lxFioriReskin)) .disabled .slider{cursor:default}:host:where(:not(.lxFioriReskin)) .checkbox{position:relative;display:inline-block;margin:0}:host:where(:not(.lxFioriReskin)) .labelText{color:#2a303d}:host:where(:not(.lxFioriReskin)) .labelText.off{color:#526179}:host:where(:not(.lxFioriReskin)) input{opacity:0;width:0;height:0;margin:0;padding:0}:host:where(:not(.lxFioriReskin)) .small.checkbox{width:22px;height:14px}:host:where(:not(.lxFioriReskin)) .small.wrapper:not(.withLabel){height:14px}:host:where(:not(.lxFioriReskin)) .small .labelText{font-size:var(--lxFontSize, 14px)}:host:where(:not(.lxFioriReskin)) .small .slider{border-radius:7px}:host:where(:not(.lxFioriReskin)) .small .slider:before{height:12px;width:12px;left:1px;bottom:1px}:host:where(:not(.lxFioriReskin)) .small input:checked+.slider:before{transform:translate(8px)}:host:where(:not(.lxFioriReskin)) input:focus+.slider:before{box-shadow:0 0 0 6px #0003;transition:box-shadow .2s ease}:host:where(:not(.lxFioriReskin)) .slider{position:absolute;cursor:pointer;inset:0;background-color:#b2bccc;transition:transform .2s}:host:where(:not(.lxFioriReskin)) .slider:before{position:absolute;content:\"\";border-radius:50%;background-color:#fff;transition:transform .2s}:host:where(:not(.lxFioriReskin)) input:checked+.slider{background-color:#33cc58}:host(.lxFioriReskin) .wrapper{font-family:var(--sapFontFamily);font-size:var(--sapFontSize)}:host(.lxFioriReskin) .labelText{color:var(--sapTextColor)}:host(.lxFioriReskin) .labelText.off{color:var(--sapTextColor)}:host(.lxFioriReskin) .disabled{opacity:var(--sapContent_DisabledOpacity)}:host(.lxFioriReskin) .disabled .slider{cursor:default}:host(.lxFioriReskin) .checkbox{position:relative;display:inline-block;margin:0;opacity:1}:host(.lxFioriReskin) input{opacity:0;width:0;height:0;margin:0;padding:0}:host(.lxFioriReskin) .small.checkbox{width:2.75rem;height:1.25rem}:host(.lxFioriReskin) .small.wrapper:not(.withLabel){height:1.25rem}:host(.lxFioriReskin) .small .slider{border-radius:.75rem}:host(.lxFioriReskin) .small .slider:before{width:1.25rem;height:1rem;left:.125rem;top:50%;bottom:auto;transform:translateY(-50%)}:host(.lxFioriReskin) .small input:checked+.slider:before{transform:translateY(-50%) translate(1.25rem)}:host(.lxFioriReskin) .slider{position:absolute;cursor:pointer;inset:0;background-color:var(--sapButton_Track_Background);box-sizing:border-box;transition:background-color .1s ease-in}:host(.lxFioriReskin) .slider:before{position:absolute;content:\"\";border-radius:1rem;background-color:var(--sapButton_Handle_Background);border:.125rem solid var(--sapButton_Handle_BorderColor);box-sizing:border-box;transition:transform .1s ease-in,background-color .1s ease-in,border-color .1s ease-in,box-shadow .1s ease-in}:host(.lxFioriReskin) .slider:after{position:absolute;content:\"\";pointer-events:none;width:1rem;height:1rem;top:50%;left:.25rem;transform:translateY(-50%);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23131e29' d='M454 275H58q-11 0-18.5-7T32 250t7.5-18.5T58 224h396q11 0 18.5 7.5T480 250t-7.5 18-18.5 7z'/%3E%3C/svg%3E\");background-size:contain;background-repeat:no-repeat;background-position:center;transition:transform .1s ease-in}:host(.lxFioriReskin) .checkbox:hover input:not(:disabled):not(:checked)+.slider{background-color:var(--sapButton_Track_Hover_Background)}:host(.lxFioriReskin) .checkbox:hover input:not(:disabled):not(:checked)+.slider:before{background-color:var(--sapButton_Handle_Hover_Background);box-shadow:0 0 0 .125rem var(--sapButton_Handle_Hover_BorderColor)}:host(.lxFioriReskin) input:checked+.slider{background-color:var(--sapButton_Track_Selected_Background)}:host(.lxFioriReskin) input:checked+.slider:before{background-color:var(--sapButton_Handle_Selected_Background);border-color:var(--sapButton_Handle_Selected_BorderColor)}:host(.lxFioriReskin) input:checked+.slider:after{transform:translateY(-50%) translate(1.25rem);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%230064d9' d='M187 416q-12 0-20-9L71 299q-7-7-7-17 0-11 7.5-18.5T90 256q12 0 19 9l77 87 217-247q8-9 19-9t18.5 7.5T448 122q0 10-6 16L206 407q-7 9-19 9z'/%3E%3C/svg%3E\")}:host(.lxFioriReskin) .checkbox:hover input:checked:not(:disabled)+.slider{background-color:var(--sapButton_Track_Selected_Hover_Background)}:host(.lxFioriReskin) .checkbox:hover input:checked:not(:disabled)+.slider:before{background-color:var(--sapButton_Handle_Selected_Hover_Background);box-shadow:0 0 0 .125rem var(--sapButton_Handle_Selected_Hover_BorderColor)}:host(.lxFioriReskin) input:focus+.slider{outline:.125rem solid var(--sapContent_FocusColor);outline-offset:.125rem;border-radius:1rem}\n"] }]
|
|
9961
9973
|
}], propDecorators: { value: [{
|
|
9962
9974
|
type: Input
|
|
9963
9975
|
}], size: [{
|
|
@@ -13389,14 +13401,14 @@ class TabComponent {
|
|
|
13389
13401
|
}
|
|
13390
13402
|
}
|
|
13391
13403
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$8.Router }, { token: i1$8.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13392
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: TabComponent, isStandalone: true, selector: "lx-tab", inputs: { icon: "icon", iconDesign: "iconDesign", label: "label", title: "title", tabLink: "tabLink", counter: "counter", routerLinkActiveOptions: "routerLinkActiveOptions", counterBadgeSize: "counterBadgeSize", noMargin: "noMargin", noLeftMarginForFirstTab: "noLeftMarginForFirstTab", background: "background", disabled: "disabled" }, outputs: { switch: "switch", keyDownAction: "keyDownAction" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplate"], descendants: true, static: true }, { propertyName: "tabElement", first: true, predicate: ["tabElement"], descendants: true }, { propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<li\n #tabElement\n class=\"tab\"\n [class.active]=\"isActive\"\n [class.withIcon]=\"icon\"\n [class.withLabel]=\"!!label\"\n [class.noMargin]=\"noMargin\"\n [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n [class.backgroundGray]=\"background === 'gray'\"\n [class.disabled]=\"disabled\"\n [class.portalTab]=\"!tabLink\"\n [class.routerLinkTab]=\"tabLink\"\n [attr.title]=\"title\"\n (click)=\"select()\"\n (keydown)=\"handleKeyDown($event)\"\n role=\"tab\"\n [attr.id]=\"tabId\"\n [attr.aria-selected]=\"isActive\"\n [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n @if (tabLink) {\n <a tabindex=\"-1\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n <ng-container *ngTemplateOutlet=\"portalTab\" />\n </a>\n } @else {\n <ng-container *ngTemplateOutlet=\"portalTab\" />\n }\n <ng-template #portalTab>\n @if (icon) {\n <ui5-icon class=\"icon\" [design]=\"iconDesign\" class=\"icon\" [name]=\"icon\" />\n }\n @if (label) {\n <span class=\"tabLabel\">{{ label }}</span>\n }\n @if (counter) {\n <lx-counter [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"isActive ? 'primary' : 'gray'\" />\n }\n </ng-template>\n <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n @if (!tabLink) {\n <div class=\"content\" role=\"tabpanel\">\n <ng-content />\n </div>\n }\n </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after
|
|
13404
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: TabComponent, isStandalone: true, selector: "lx-tab", inputs: { icon: "icon", iconDesign: "iconDesign", label: "label", title: "title", tabLink: "tabLink", counter: "counter", routerLinkActiveOptions: "routerLinkActiveOptions", counterBadgeSize: "counterBadgeSize", noMargin: "noMargin", noLeftMarginForFirstTab: "noLeftMarginForFirstTab", background: "background", disabled: "disabled" }, outputs: { switch: "switch", keyDownAction: "keyDownAction" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentTemplate"], descendants: true, static: true }, { propertyName: "tabElement", first: true, predicate: ["tabElement"], descendants: true }, { propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], 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}: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)) .content{height:100%}: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) .content{height:100%}: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 }); }
|
|
13393
13405
|
}
|
|
13394
13406
|
__decorate([
|
|
13395
13407
|
Observe('routerLinkActive')
|
|
13396
13408
|
], TabComponent.prototype, "routerLinkActive$", void 0);
|
|
13397
13409
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TabComponent, decorators: [{
|
|
13398
13410
|
type: Component,
|
|
13399
|
-
args: [{ selector: 'lx-tab', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLinkActive, RouterLink, CounterComponent, PortalModule, NgTemplateOutlet, IconComponent], template: "<li\n #tabElement\n class=\"tab\"\n [class.active]=\"isActive\"\n [class.withIcon]=\"icon\"\n [class.withLabel]=\"!!label\"\n [class.noMargin]=\"noMargin\"\n [class.noLeftMarginForFirstTab]=\"noLeftMarginForFirstTab\"\n [class.backgroundGray]=\"background === 'gray'\"\n [class.disabled]=\"disabled\"\n [class.portalTab]=\"!tabLink\"\n [class.routerLinkTab]=\"tabLink\"\n [attr.title]=\"title\"\n (click)=\"select()\"\n (keydown)=\"handleKeyDown($event)\"\n role=\"tab\"\n [attr.id]=\"tabId\"\n [attr.aria-selected]=\"isActive\"\n [attr.tabindex]=\"isActive ? '0' : '-1'\"\n>\n @if (tabLink) {\n <a tabindex=\"-1\" [routerLink]=\"tabLink\" routerLinkActive [routerLinkActiveOptions]=\"routerLinkActiveOptions\">\n <ng-container *ngTemplateOutlet=\"portalTab\" />\n </a>\n } @else {\n <ng-container *ngTemplateOutlet=\"portalTab\" />\n }\n <ng-template #portalTab>\n @if (icon) {\n <ui5-icon class=\"icon\" [design]=\"iconDesign\" class=\"icon\" [name]=\"icon\" />\n }\n @if (label) {\n <span class=\"tabLabel\">{{ label }}</span>\n }\n @if (counter) {\n <lx-counter [size]=\"counterBadgeSize\" [content]=\"counter\" [color]=\"isActive ? 'primary' : 'gray'\" />\n }\n </ng-template>\n <ng-template cdkPortal #contentTemplate=\"cdkPortal\">\n @if (!tabLink) {\n <div class=\"content\" role=\"tabpanel\">\n <ng-content />\n </div>\n }\n </ng-template>\n</li>\n", styles: [":host{display:inline-block}.tab{position:relative;display:inline-block;margin:0 8px;text-align:center;transition:border-bottom .5s;cursor:pointer}.tab:after{position:absolute;content:\"\";left:0;right:0;bottom:-1px;height:2px;background-color:transparent}.tab:hover:after
|
|
13411
|
+
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}: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)) .content{height:100%}: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) .content{height:100%}:host(.lxFioriReskin) lx-counter{margin-left:.5rem}\n"] }]
|
|
13400
13412
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$8.Router }, { type: i1$8.ActivatedRoute }], propDecorators: { icon: [{
|
|
13401
13413
|
type: Input
|
|
13402
13414
|
}], iconDesign: [{
|
|
@@ -13581,14 +13593,14 @@ class TabGroupComponent {
|
|
|
13581
13593
|
);
|
|
13582
13594
|
}
|
|
13583
13595
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13584
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: TabGroupComponent, isStandalone: true, selector: "lx-tab-group", inputs: { isCentered: "isCentered", selectedIndex: "selectedIndex" }, outputs: { indexChange: "indexChange" }, queries: [{ propertyName: "tabsQueryList", predicate: TabComponent }], viewQueries: [{ propertyName: "tabListElement", first: true, predicate: ["tabListElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul\n #tabListElement\n class=\"tabs\"\n role=\"tablist\"\n (focusout)=\"onFocusOut($event)\"\n [attr.aria-owns]=\"tabIds.join(' ')\"\n [class.centered]=\"isCentered\"\n>\n <ng-content />\n</ul>\n\n<ng-template [cdkPortalOutlet]=\"activeTabPortal\" />\n", styles: [":host{--tab-group-padding-y: 0}.tabs{display:inline-block;list-style:none;border-bottom:solid 1px #cfd5df;width:100%;margin:0;padding:0 var(--tab-group-padding-y);text-align:left}.tabs.centered{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13596
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: TabGroupComponent, isStandalone: true, selector: "lx-tab-group", inputs: { isCentered: "isCentered", selectedIndex: "selectedIndex" }, outputs: { indexChange: "indexChange" }, queries: [{ propertyName: "tabsQueryList", predicate: TabComponent }], viewQueries: [{ propertyName: "tabListElement", first: true, predicate: ["tabListElement"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "<ul\n #tabListElement\n class=\"tabs\"\n role=\"tablist\"\n (focusout)=\"onFocusOut($event)\"\n [attr.aria-owns]=\"tabIds.join(' ')\"\n [class.centered]=\"isCentered\"\n>\n <ng-content />\n</ul>\n\n<ng-template [cdkPortalOutlet]=\"activeTabPortal\" />\n", styles: [":host{--tab-group-padding-y: 0}:host(.lxFioriReskin){--tab-group-padding-y: 1rem}:host:where(:not(.lxFioriReskin)) .tabs{display:inline-block;list-style:none;border-bottom:solid 1px #cfd5df;width:100%;margin:0;padding:0 var(--tab-group-padding-y);text-align:left}:host:where(:not(.lxFioriReskin)) .tabs.centered{text-align:center}:host(.lxFioriReskin) .tabs{display:flex;align-items:stretch;flex-wrap:wrap;list-style:none;border-bottom:.0625rem solid var(--sapObjectHeader_BorderColor);background:var(--sapObjectHeader_Background);width:100%;margin:0;padding:0 var(--tab-group-padding-y)}:host(.lxFioriReskin) .tabs.centered{justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13585
13597
|
}
|
|
13586
13598
|
__decorate([
|
|
13587
13599
|
Observe('tabsQueryList')
|
|
13588
13600
|
], TabGroupComponent.prototype, "tabsQueryList$", void 0);
|
|
13589
13601
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TabGroupComponent, decorators: [{
|
|
13590
13602
|
type: Component,
|
|
13591
|
-
args: [{ selector: 'lx-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [PortalModule], template: "<ul\n #tabListElement\n class=\"tabs\"\n role=\"tablist\"\n (focusout)=\"onFocusOut($event)\"\n [attr.aria-owns]=\"tabIds.join(' ')\"\n [class.centered]=\"isCentered\"\n>\n <ng-content />\n</ul>\n\n<ng-template [cdkPortalOutlet]=\"activeTabPortal\" />\n", styles: [":host{--tab-group-padding-y: 0}.tabs{display:inline-block;list-style:none;border-bottom:solid 1px #cfd5df;width:100%;margin:0;padding:0 var(--tab-group-padding-y);text-align:left}.tabs.centered{text-align:center}\n"] }]
|
|
13603
|
+
args: [{ selector: 'lx-tab-group', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: FioriReskinAwareDirective }], imports: [PortalModule], template: "<ul\n #tabListElement\n class=\"tabs\"\n role=\"tablist\"\n (focusout)=\"onFocusOut($event)\"\n [attr.aria-owns]=\"tabIds.join(' ')\"\n [class.centered]=\"isCentered\"\n>\n <ng-content />\n</ul>\n\n<ng-template [cdkPortalOutlet]=\"activeTabPortal\" />\n", styles: [":host{--tab-group-padding-y: 0}:host(.lxFioriReskin){--tab-group-padding-y: 1rem}:host:where(:not(.lxFioriReskin)) .tabs{display:inline-block;list-style:none;border-bottom:solid 1px #cfd5df;width:100%;margin:0;padding:0 var(--tab-group-padding-y);text-align:left}:host:where(:not(.lxFioriReskin)) .tabs.centered{text-align:center}:host(.lxFioriReskin) .tabs{display:flex;align-items:stretch;flex-wrap:wrap;list-style:none;border-bottom:.0625rem solid var(--sapObjectHeader_BorderColor);background:var(--sapObjectHeader_Background);width:100%;margin:0;padding:0 var(--tab-group-padding-y)}:host(.lxFioriReskin) .tabs.centered{justify-content:center}\n"] }]
|
|
13592
13604
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { isCentered: [{
|
|
13593
13605
|
type: Input
|
|
13594
13606
|
}], selectedIndex: [{
|