@leanix/components 0.4.933 → 0.4.935
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.
|
@@ -530,8 +530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
530
530
|
* @example
|
|
531
531
|
* ```html
|
|
532
532
|
* <lx-counter [content]="5" color="primary" size="default" />
|
|
533
|
-
* <lx-counter [content]="
|
|
534
|
-
* <lx-counter [content]="unreadCount" color="green" />
|
|
533
|
+
* <lx-counter [content]="unreadCount" color="gray" size="small" />
|
|
535
534
|
* ```
|
|
536
535
|
*/
|
|
537
536
|
class CounterComponent {
|
|
@@ -543,6 +542,14 @@ class CounterComponent {
|
|
|
543
542
|
this.size = 'default';
|
|
544
543
|
/**
|
|
545
544
|
* The color of the counter.
|
|
545
|
+
*
|
|
546
|
+
* Note: `red` uses `--sapButton_Negative_*` for visual parity with
|
|
547
|
+
* `<ui5-tag design="Negative">` / `<ui5-switch design="Graphical">`.
|
|
548
|
+
* Those tokens give 3.79:1 contrast for white text on the negative
|
|
549
|
+
* background — below WCAG AA's 4.5:1 for small text. Counters with
|
|
550
|
+
* `color="red"` should provide accessible context (e.g. `aria-label`,
|
|
551
|
+
* an adjacent label, or an icon) so the meaning isn't conveyed by
|
|
552
|
+
* color alone.
|
|
546
553
|
* @default 'primary'
|
|
547
554
|
*/
|
|
548
555
|
this.color = 'primary';
|
|
@@ -551,11 +558,11 @@ class CounterComponent {
|
|
|
551
558
|
return `${this.size} ${this.color}`;
|
|
552
559
|
}
|
|
553
560
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
554
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: CounterComponent, isStandalone: true, selector: "lx-counter", inputs: { content: "content", size: "size", color: "color" }, ngImport: i0, template: "<span class=\"content\" [ngClass]=\"classes\">{{ content }}</span>\n", styles: [":host{display:inline-block}.content{display:inline-block;text-align:center;font-weight:var(--lxFontBold, 700)}.default{min-width:20px;line-height:20px;padding:0 6px;font-size:var(--lxFontSmallSize, 12px);border-radius:10px}.small{min-width:16px;line-height:16px;padding:0 4px;font-size:var(--lxFontSmallSize, 12px);border-radius:8px}.primary{background-color:var(--lx-primarybutton-backgroundcolor);color:var(--lx-primarybutton-fontcolor)}.gray{background-color:#f0f2f5;color:#2a303d;font-weight:400}.darkgray{background-color:#2a303d;color:#fff}.green{background-color:#33cc58;color:#fff}.red{background-color:#f96464;color:#fff}.
|
|
561
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: CounterComponent, isStandalone: true, selector: "lx-counter", inputs: { content: "content", size: "size", color: "color" }, hostDirectives: [{ directive: i1.FioriReskinAwareDirective }], ngImport: i0, template: "<span class=\"content\" [ngClass]=\"classes\">{{ content }}</span>\n", styles: [":host:where(:not(.lxFioriReskin)){display:inline-block}:host:where(:not(.lxFioriReskin)) .content{display:inline-block;text-align:center;font-weight:var(--lxFontBold, 700)}:host:where(:not(.lxFioriReskin)) .default{min-width:20px;line-height:20px;padding:0 6px;font-size:var(--lxFontSmallSize, 12px);border-radius:10px}:host:where(:not(.lxFioriReskin)) .small{min-width:16px;line-height:16px;padding:0 4px;font-size:var(--lxFontSmallSize, 12px);border-radius:8px}:host:where(:not(.lxFioriReskin)) .primary{background-color:var(--lx-primarybutton-backgroundcolor);color:var(--lx-primarybutton-fontcolor)}:host:where(:not(.lxFioriReskin)) .gray{background-color:#f0f2f5;color:#2a303d;font-weight:400}:host:where(:not(.lxFioriReskin)) .darkgray{background-color:#2a303d;color:#fff}:host:where(:not(.lxFioriReskin)) .green{background-color:#33cc58;color:#fff}:host:where(:not(.lxFioriReskin)) .red{background-color:#f96464;color:#fff}:host(.lxFioriReskin){display:inline-block}:host(.lxFioriReskin) .content{display:inline-flex;align-items:center;justify-content:center;text-align:center;font-family:var(--sapFontBoldFamily);font-weight:400;letter-spacing:normal;box-sizing:border-box}:host(.lxFioriReskin) .default{min-width:20px;padding:0 6px;font-size:var(--sapFontSmallSize);border-radius:var(--sapButton_BorderCornerRadius);line-height:20px}:host(.lxFioriReskin) .small{min-width:16px;padding:0 4px;font-size:var(--sapFontSmallSize);border-radius:var(--sapButton_BorderCornerRadius);line-height:16px}:host(.lxFioriReskin) .primary{background-color:var(--sapIndicationColor_5_Background);color:var(--sapIndicationColor_5_TextColor);text-shadow:var(--sapContent_ContrastTextShadow)}:host(.lxFioriReskin) .gray{background-color:var(--sapIndicationColor_10b_Background);color:var(--sapIndicationColor_10b_TextColor);text-shadow:var(--sapContent_TextShadow)}:host(.lxFioriReskin) .darkgray{background-color:var(--sapIndicationColor_10_Background);color:var(--sapIndicationColor_10_TextColor);text-shadow:var(--sapContent_ContrastTextShadow)}:host(.lxFioriReskin) .green{background-color:var(--sapButton_Success_Background);color:var(--sapButton_Success_TextColor);text-shadow:var(--sapContent_ContrastTextShadow)}:host(.lxFioriReskin) .red{background-color:var(--sapButton_Negative_Background);color:var(--sapButton_Negative_TextColor);text-shadow:var(--sapContent_ContrastTextShadow)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
555
562
|
}
|
|
556
563
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CounterComponent, decorators: [{
|
|
557
564
|
type: Component,
|
|
558
|
-
args: [{ selector: 'lx-counter', imports: [NgClass], template: "<span class=\"content\" [ngClass]=\"classes\">{{ content }}</span>\n", styles: [":host{display:inline-block}.content{display:inline-block;text-align:center;font-weight:var(--lxFontBold, 700)}.default{min-width:20px;line-height:20px;padding:0 6px;font-size:var(--lxFontSmallSize, 12px);border-radius:10px}.small{min-width:16px;line-height:16px;padding:0 4px;font-size:var(--lxFontSmallSize, 12px);border-radius:8px}.primary{background-color:var(--lx-primarybutton-backgroundcolor);color:var(--lx-primarybutton-fontcolor)}.gray{background-color:#f0f2f5;color:#2a303d;font-weight:400}.darkgray{background-color:#2a303d;color:#fff}.green{background-color:#33cc58;color:#fff}.red{background-color:#f96464;color:#fff}.
|
|
565
|
+
args: [{ selector: 'lx-counter', hostDirectives: [{ directive: FioriReskinAwareDirective }], imports: [NgClass], template: "<span class=\"content\" [ngClass]=\"classes\">{{ content }}</span>\n", styles: [":host:where(:not(.lxFioriReskin)){display:inline-block}:host:where(:not(.lxFioriReskin)) .content{display:inline-block;text-align:center;font-weight:var(--lxFontBold, 700)}:host:where(:not(.lxFioriReskin)) .default{min-width:20px;line-height:20px;padding:0 6px;font-size:var(--lxFontSmallSize, 12px);border-radius:10px}:host:where(:not(.lxFioriReskin)) .small{min-width:16px;line-height:16px;padding:0 4px;font-size:var(--lxFontSmallSize, 12px);border-radius:8px}:host:where(:not(.lxFioriReskin)) .primary{background-color:var(--lx-primarybutton-backgroundcolor);color:var(--lx-primarybutton-fontcolor)}:host:where(:not(.lxFioriReskin)) .gray{background-color:#f0f2f5;color:#2a303d;font-weight:400}:host:where(:not(.lxFioriReskin)) .darkgray{background-color:#2a303d;color:#fff}:host:where(:not(.lxFioriReskin)) .green{background-color:#33cc58;color:#fff}:host:where(:not(.lxFioriReskin)) .red{background-color:#f96464;color:#fff}:host(.lxFioriReskin){display:inline-block}:host(.lxFioriReskin) .content{display:inline-flex;align-items:center;justify-content:center;text-align:center;font-family:var(--sapFontBoldFamily);font-weight:400;letter-spacing:normal;box-sizing:border-box}:host(.lxFioriReskin) .default{min-width:20px;padding:0 6px;font-size:var(--sapFontSmallSize);border-radius:var(--sapButton_BorderCornerRadius);line-height:20px}:host(.lxFioriReskin) .small{min-width:16px;padding:0 4px;font-size:var(--sapFontSmallSize);border-radius:var(--sapButton_BorderCornerRadius);line-height:16px}:host(.lxFioriReskin) .primary{background-color:var(--sapIndicationColor_5_Background);color:var(--sapIndicationColor_5_TextColor);text-shadow:var(--sapContent_ContrastTextShadow)}:host(.lxFioriReskin) .gray{background-color:var(--sapIndicationColor_10b_Background);color:var(--sapIndicationColor_10b_TextColor);text-shadow:var(--sapContent_TextShadow)}:host(.lxFioriReskin) .darkgray{background-color:var(--sapIndicationColor_10_Background);color:var(--sapIndicationColor_10_TextColor);text-shadow:var(--sapContent_ContrastTextShadow)}:host(.lxFioriReskin) .green{background-color:var(--sapButton_Success_Background);color:var(--sapButton_Success_TextColor);text-shadow:var(--sapContent_ContrastTextShadow)}:host(.lxFioriReskin) .red{background-color:var(--sapButton_Negative_Background);color:var(--sapButton_Negative_TextColor);text-shadow:var(--sapContent_ContrastTextShadow)}\n"] }]
|
|
559
566
|
}], propDecorators: { content: [{
|
|
560
567
|
type: Input
|
|
561
568
|
}], size: [{
|
|
@@ -13401,14 +13408,14 @@ class TabComponent {
|
|
|
13401
13408
|
}
|
|
13402
13409
|
}
|
|
13403
13410
|
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 }); }
|
|
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))
|
|
13411
|
+
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}.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 }); }
|
|
13405
13412
|
}
|
|
13406
13413
|
__decorate([
|
|
13407
13414
|
Observe('routerLinkActive')
|
|
13408
13415
|
], TabComponent.prototype, "routerLinkActive$", void 0);
|
|
13409
13416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TabComponent, decorators: [{
|
|
13410
13417
|
type: Component,
|
|
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))
|
|
13418
|
+
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"] }]
|
|
13412
13419
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$8.Router }, { type: i1$8.ActivatedRoute }], propDecorators: { icon: [{
|
|
13413
13420
|
type: Input
|
|
13414
13421
|
}], iconDesign: [{
|