@fundamental-ngx/core 0.37.0-rc.22 → 0.37.0-rc.24
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.
- package/esm2020/tabs/tab-list.component.mjs +2 -2
- package/esm2020/vertical-navigation/vertical-navigation-main-navigation.component.mjs +2 -2
- package/esm2020/vertical-navigation/vertical-navigation.component.mjs +2 -2
- package/fesm2015/fundamental-ngx-core-tabs.mjs +2 -2
- package/fesm2015/fundamental-ngx-core-tabs.mjs.map +1 -1
- package/fesm2015/fundamental-ngx-core-vertical-navigation.mjs +4 -4
- package/fesm2015/fundamental-ngx-core-vertical-navigation.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-core-tabs.mjs +2 -2
- package/fesm2020/fundamental-ngx-core-tabs.mjs.map +1 -1
- package/fesm2020/fundamental-ngx-core-vertical-navigation.mjs +4 -4
- package/fesm2020/fundamental-ngx-core-vertical-navigation.mjs.map +1 -1
- package/fundamental-ngx-core-v0.37.0-rc.24.tgz +0 -0
- package/package.json +3 -3
- package/schematics/ng-add/index.js +2 -2
- package/fundamental-ngx-core-v0.37.0-rc.22.tgz +0 -0
|
@@ -238,7 +238,7 @@ TabListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
|
|
|
238
238
|
provide: LIST_COMPONENT,
|
|
239
239
|
useExisting: forwardRef(() => TabListComponent)
|
|
240
240
|
}
|
|
241
|
-
], queries: [{ propertyName: "tabPanels", predicate: i0.forwardRef(function () { return TabPanelComponent; }) }], viewQueries: [{ propertyName: "overflowTrigger", first: true, predicate: TabItemExpandComponent, descendants: true, read: ElementRef }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true, read: ElementRef }, { propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "_overflowLayout", first: true, predicate: OverflowLayoutComponent, descendants: true }, { propertyName: "tabHeaderLinks", predicate: TabLinkDirective, descendants: true }, { propertyName: "tabHeaders", predicate: TabItemDirective, descendants: true }], ngImport: i0, template: "<div\n #headerContainer\n role=\"tablist\"\n class=\"fd-tabs\"\n [class]=\"(mode ? 'fd-tabs--' + mode : '') + (' fd-tabs--' + size)\"\n [class.fd-tabs--compact]=\"_contentDensityObserver.isCompact\"\n>\n <fd-overflow-layout\n [maxVisibleItems]=\"maxVisibleTabs\"\n [enableKeyboardNavigation]=\"true\"\n navigationTrigger=\"keydown\"\n (hiddenItemsCount)=\"hiddenItemsCount.emit($event)\"\n (visibleItemsCount)=\"visibleItemsCount.emit($event)\"\n >\n <ng-container *ngFor=\"let tab of _tabArray; let i = index; let last = last\">\n <div\n fd-tab-item\n *fdOverflowItemRef=\"tab\"\n fdOverflowLayoutItem\n [forceVisibility]=\"tab.panel._forcedVisibility\"\n [header]=\"tab.isHeader\"\n [tabItemState]=\"tab.tabState\"\n [attr.aria-selected]=\"tab.active\"\n >\n <a\n fd-tab-link\n role=\"tab\"\n [id]=\"tab.id\"\n [attr.aria-controls]=\"tab.panelId\"\n [attr.aria-label]=\"tab.ariaLabel || null\"\n [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledBy ? tab.ariaLabelledBy : null\"\n fdOverflowLayoutFocusableItem\n [focusable]=\"tab.active\"\n [navigable]=\"!tab.disabled\"\n [active]=\"tab.active\"\n [disabled]=\"tab.disabled\"\n (keydown)=\"_tabHeaderKeydownHandler($event, tab.panel)\"\n (click)=\"_tabHeaderClickHandler(tab.panel)\"\n >\n <ng-container *ngTemplateOutlet=\"tab.titleTemplate || null\"></ng-container>\n\n <ng-container *ngIf=\"!tab.titleTemplate\" [ngSwitch]=\"mode\">\n <ng-container *ngSwitchCase=\"'filter'\">\n <span fd-tab-header *ngIf=\"tab.isHeader\">\n <span fd-tab-counter-header *ngIf=\"tab.count\">{{ tab.count }}</span>\n <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n </span>\n <ng-container *ngIf=\"!tab.isHeader\">\n <span fd-tab-icon [icon]=\"tab.glyph\">\n <p fd-tab-count>{{ tab.count }}</p>\n </span>\n <span fd-tab-label>{{ tab.title }}</span>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'icon-only'\">\n <span fd-tab-icon [icon]=\"tab.glyph\">\n <p fd-tab-count>{{ tab.count }}</p>\n </span>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'process'\">\n <span fd-tab-icon *ngIf=\"tab.glyph\" [icon]=\"tab.glyph\"></span>\n <div fd-tab-process>\n <span fd-tab-label *ngIf=\"tab.count\">{{ tab.count }}</span>\n <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <p fd-tab-count *ngIf=\"tab.count\">{{ tab.count }}</p>\n <span fd-tab-tag>{{ tab.title }}</span>\n </ng-container>\n </ng-container>\n </a>\n\n <div fd-tab-process-icon *ngIf=\"mode === 'process' && !last\"></div>\n </div>\n\n <div *ngIf=\"tab.isHeader\" fd-tab-separator></div>\n </ng-container>\n\n <ng-container *fdOverflowExpand=\"let tabs; items: _tabArray\">\n <fd-item-expand\n [fdMenuTrigger]=\"menu\"\n [label]=\"expandOverflowText\"\n *ngIf=\"tabs.length > 0\"\n (keydown)=\"_onTriggerKeydown($event, menu)\"\n >\n </fd-item-expand>\n\n <fd-menu #menu>\n <li\n fd-menu-item\n *ngFor=\"let tab of tabs\"\n (onSelect)=\"_overflowingTabHeaderClickHandler(tab.item.panel)\"\n >\n <div fd-menu-interactive>\n <ng-container\n *ngTemplateOutlet=\"\n !tab.item.titleTemplate && mode === 'icon-only'\n ? iconOnlyTemplate\n : tab.item.titleTemplate || textTitle;\n context: { $implicit: tab.item }\n \"\n ></ng-container>\n </div>\n </li>\n </fd-menu>\n </ng-container>\n </fd-overflow-layout>\n</div>\n\n<div\n #contentContainer\n class=\"fd-tabs__content\"\n [style.maxHeight]=\"maxContentHeight\"\n fdScrollSpy\n [trackedTags]=\"['fd-tab']\"\n [scrollSpyDisabled]=\"_disableScrollSpy\"\n (spyChange)=\"_highlightActiveTab($event)\"\n>\n <ng-content></ng-content>\n</div>\n\n<ng-template #textTitle let-tab>\n <span fd-menu-title>{{ tab.title }}</span>\n</ng-template>\n\n<ng-template #iconOnlyTemplate let-tab>\n <span fd-tab-icon [icon]=\"tab.glyph\">\n <p fd-tab-count>{{ tab.count }}</p>\n </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.27\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-tabs+()\n .fd-tabs__item?+(([aria-selected=true]),)\n .fd-tabs__link+((.is-selected,)\n.fd-tabs__panel+([aria-expanded]|.is-expanded)\n*/.fd-tabs{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:2.625rem;-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-ms-flex-wrap:wrap;-webkit-box-shadow:var(--sapContent_HeaderShadow);align-items:center;background-color:var(--sapObjectHeader_Background);border:0;border-color:var(--sapObjectHeader_BorderColor);box-shadow:var(--sapContent_HeaderShadow);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-tabs:after,.fd-tabs:before{box-sizing:inherit;font-size:inherit}.fd-tabs__count{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0 0 .125rem}.fd-tabs__count:after,.fd-tabs__count:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link{-webkit-box-sizing:border-box;-webkit-transition:0s;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);cursor:pointer;display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:.875rem .75rem;position:relative;text-decoration:none;transition:0s}.fd-tabs__link:after,.fd-tabs__link:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link.is-selected .fd-tabs__icon,.fd-tabs__link[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__link.is-selected .fd-tabs__icon:after,.fd-tabs__link.is-selected .fd-tabs__tag:after,.fd-tabs__link[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__link[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__link.is-focus,.fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs__link.is-focus .fd-tabs__icon:before,.fd-tabs__link.is-focus .fd-tabs__tag:before,.fd-tabs__link:focus .fd-tabs__icon:before,.fd-tabs__link:focus .fd-tabs__tag:before{content:\"\";inset:0;outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--sapContent_FocusWidth);position:absolute}.fd-tabs__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0 .25rem;padding:0;position:relative}.fd-tabs__item:after,.fd-tabs__item:before{box-sizing:inherit;font-size:inherit}.fd-tabs__item.is-selected .fd-tabs__tag,.fd-tabs__item[aria-selected=true] .fd-tabs__tag{color:var(--fdIcon_Tab_Bar_Selection_Color)}.fd-tabs__item.is-selected .fd-tabs__icon,.fd-tabs__item[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item.is-selected .fd-tabs__icon:after,.fd-tabs__item.is-selected .fd-tabs__link:after,.fd-tabs__item.is-selected .fd-tabs__tag:after,.fd-tabs__item[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__item--error .fd-tabs__icon{border-color:var(--sapErrorColor);color:var(--sapErrorColor)}.fd-tabs__item--error .fd-tabs__link .fd-tabs__tag{color:var(--sapErrorColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon{background-color:var(--sapErrorColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon:after,.fd-tabs__item--error.is-selected .fd-tabs__link:after,.fd-tabs__item--error.is-selected .fd-tabs__tag:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapErrorColor)}.fd-tabs__item--warning .fd-tabs__icon{border-color:var(--sapWarningColor);color:var(--sapWarningColor)}.fd-tabs__item--warning .fd-tabs__link .fd-tabs__tag{color:var(--sapWarningColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon{background-color:var(--sapWarningColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon:after,.fd-tabs__item--warning.is-selected .fd-tabs__link:after,.fd-tabs__item--warning.is-selected .fd-tabs__tag:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapWarningColor)}.fd-tabs__item--success .fd-tabs__icon{border-color:var(--sapSuccessColor);color:var(--sapSuccessColor)}.fd-tabs__item--success .fd-tabs__link .fd-tabs__tag{color:var(--sapSuccessColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSuccessColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon:after,.fd-tabs__item--success.is-selected .fd-tabs__link:after,.fd-tabs__item--success.is-selected .fd-tabs__tag:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapSuccessColor)}.fd-tabs__item--information .fd-tabs__icon{border-color:var(--sapInformationColor);color:var(--sapInformationColor)}.fd-tabs__item--information .fd-tabs__link .fd-tabs__tag{color:var(--sapInformationColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon{background-color:var(--sapInformationColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon:after,.fd-tabs__item--information.is-selected .fd-tabs__link:after,.fd-tabs__item--information.is-selected .fd-tabs__tag:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapInformationColor)}.fd-tabs__item--neutral .fd-tabs__icon{border-color:var(--sapNeutralColor);color:var(--sapNeutralColor)}.fd-tabs__item--neutral .fd-tabs__link .fd-tabs__tag{color:var(--sapNeutralColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon{background-color:var(--sapNeutralColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon:after,.fd-tabs__item--neutral.is-selected .fd-tabs__link:after,.fd-tabs__item--neutral.is-selected .fd-tabs__tag:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapNeutralColor)}.fd-tabs__item:first-child{margin-left:0}.fd-tabs__item:first-child .fd-tabs__link{margin-left:.1875rem;padding-left:0}.fd-tabs__item:first-child .fd-tabs__link[dir=rtl],[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{margin-left:0;margin-right:.1875rem}.fd-tabs__item[dir=rtl]:first-child,[dir=rtl] .fd-tabs__item:first-child{margin-left:.25rem;margin-right:0}.fd-tabs__item[dir=rtl]:first-child .fd-tabs__link,[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{padding-left:.875rem;padding-right:0}.fd-tabs__icon{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;border:var(--fdIcon_Tab_Bar_Icon_Border_Weight) solid var(--fdIcon_Tab_Bar_Icon_Border_Color);border-radius:50%;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdIcon_Tab_Bar_Inactive_Tab_Icon_Color);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:var(--fdTabs_Icon_Selection_Height);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 .188rem;padding:0;position:relative;width:var(--fdTabs_Icon_Selection_Height)}.fd-tabs__icon:after,.fd-tabs__icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__icon [class*=sap-icon],.fd-tabs__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;font-size:var(--fdTabs_Icon_Size);line-height:1}.fd-tabs__icon:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__tag{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0;position:relative}.fd-tabs__tag:after,.fd-tabs__tag:before{box-sizing:inherit;font-size:inherit}.fd-tabs__tag:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__panel{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__panel:after,.fd-tabs__panel:before{box-sizing:inherit;font-size:inherit}.fd-tabs__panel[aria-expanded=false]{display:none}.fd-tabs__panel.is-expanded,.fd-tabs__panel[aria-expanded=true]{display:block}.fd-tabs__counter-header{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1.5rem;font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;padding:0 .5rem 0 0}.fd-tabs__counter-header:after,.fd-tabs__counter-header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-tabs__overflow:after,.fd-tabs__overflow:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow [class*=sap-icon],.fd-tabs__overflow[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;line-height:1}.fd-tabs__process-icon{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1;margin:0;padding:0 .5rem}.fd-tabs__process-icon:after,.fd-tabs__process-icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__process-icon:before{content:\"\\e0c7\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-tabs__label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;padding:0 0 0 .125rem}.fd-tabs__label:after,.fd-tabs__label:before{box-sizing:inherit;font-size:inherit}.fd-tabs__label:first-child{padding-bottom:.375rem}.fd-tabs__separator{-webkit-box-sizing:border-box;border:0;border-right:solid var(--sapGroup_TitleBorderColor);border-right-width:.0625rem;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2rem;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0 .25rem;padding:0}.fd-tabs__separator:after,.fd-tabs__separator:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__header:after,.fd-tabs__header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header .fd-tabs__label{max-width:4rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count,.fd-tabs--process .fd-tabs__count{font-size:var(--sapFontSmallSize)}.fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--icon-only .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{margin:0}.fd-tabs--icon-only .fd-tabs__link,.fd-tabs--process .fd-tabs__link{padding-bottom:1rem;padding-top:1rem}.fd-tabs--icon-only .fd-tabs__icon:after,.fd-tabs--process .fd-tabs__icon:after{bottom:-1.0625rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count{left:calc(100% + .1875rem);position:absolute;top:0}.fd-tabs--filter[dir=rtl] .fd-tabs__count,.fd-tabs--icon-only[dir=rtl] .fd-tabs__count,[dir=rtl] .fd-tabs--filter .fd-tabs__count,[dir=rtl] .fd-tabs--icon-only .fd-tabs__count{left:auto;right:calc(100% + .1875rem)}.fd-tabs--process .fd-tabs__item{margin:0 .25rem 0 0}.fd-tabs--process .fd-tabs__item,.fd-tabs--process .fd-tabs__link{align-items:center;display:flex}.fd-tabs--process .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--process .fd-tabs__icon{margin:0 .1875rem}.fd-tabs--process .fd-tabs__label{line-height:.875rem;max-width:7.5rem;overflow:hidden;white-space:nowrap}.fd-tabs--process[dir=rtl] .fd-tabs__item,[dir=rtl] .fd-tabs--process .fd-tabs__item{margin:0 0 0 .25rem}.fd-tabs--process[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--filter{align-items:center;display:flex}.fd-tabs--filter .fd-tabs__item{margin:0;padding:0 .25rem;width:5.375rem}.fd-tabs--filter .fd-tabs__item[dir=rtl],[dir=rtl] .fd-tabs--filter .fd-tabs__item{margin:0}.fd-tabs--filter .fd-tabs__item--header{width:auto}.fd-tabs--filter .fd-tabs__icon{margin-bottom:.375rem}.fd-tabs--filter .fd-tabs__icon:after{content:none}.fd-tabs--filter .fd-tabs__label{line-height:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-tabs--filter .fd-tabs__link{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:flex;flex-direction:column;height:5.5rem;justify-content:center;padding:.875rem .188rem .625rem;position:relative;text-align:center}.fd-tabs--filter .fd-tabs__link:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;bottom:0;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs--filter .fd-tabs__link.is-focus,.fd-tabs--filter .fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs--filter[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link{padding-left:.188rem;padding-right:.188rem}.fd-tabs--compact{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:1.875rem}.fd-tabs--compact .fd-tabs__label:first-child{padding-bottom:.25rem}.fd-tabs--compact.fd-tabs--filter .fd-tabs__link{height:4.75rem}.fd-tabs--s{padding:0 1rem}.fd-tabs--l,.fd-tabs--m{padding:0 2rem}.fd-tabs--xl,.fd-tabs--xxl{padding:0 3rem}.fd-tabs[dir=rtl] .fd-tabs__process-icon,[dir=rtl] .fd-tabs .fd-tabs__process-icon{transform:rotate(180deg)}.fd-tabs[dir=rtl] .fd-tabs__counter-header,[dir=rtl] .fd-tabs .fd-tabs__counter-header{padding-left:.5rem;padding-right:0}.fd-tabs[dir=rtl] .fd-tabs__overflow,[dir=rtl] .fd-tabs .fd-tabs__overflow{margin-left:0;margin-right:auto}.fd-tabs__process{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__process:after,.fd-tabs__process:before{box-sizing:inherit;font-size:inherit}.fd-tabs-custom{display:flex;flex-direction:column;height:100%}.is-disabled{pointer-events:none;opacity:.4}.fd-tabs{flex-grow:0;flex-wrap:nowrap}.fd-tabs__content{overflow-y:auto;flex-grow:1}.fd-tabs__item{flex-shrink:0}.fd-tabs__tag{white-space:nowrap}.fd-tabs__wrapper{flex-grow:1;display:flex;flex-wrap:wrap;align-items:center}.fd-tabs__wrapper--collapsible{overflow:hidden;flex-wrap:nowrap}.fd-tabs .fd-overflow-layout__items-container .fd-tabs__item:first-child{margin-left:.25rem}.fd-tabs .fd-overflow-layout__items-container .fd-tabs__item:first-child .fd-tabs__link{margin:0;padding:.875rem .75rem}.fd-tabs .fd-overflow-layout__items-container .fd-overflow-layout__item--first .fd-tabs__item{margin-left:0}.fd-tabs .fd-overflow-layout__items-container .fd-overflow-layout__item--first .fd-tabs__item .fd-tabs__link{margin-left:.1875rem;padding-left:0}.fd-tabs__item--success .fd-tabs__link .fd-tabs__tag{color:#107e3e;color:var(--sapSuccessColor, #107e3e)}.fd-tabs__item--error .fd-tabs__link .fd-tabs__tag{color:#b00;color:var(--sapErrorColor, #b00)}.fd-tabs__item--warning .fd-tabs__link .fd-tabs__tag{color:#e9730c;color:var(--sapWarningColor, #e9730c)}.fd-tabs__item--information .fd-tabs__link .fd-tabs__tag{color:#0a6ed1;color:var(--sapInformationColor, #0a6ed1)}.fd-tabs__item--neutral .fd-tabs__link .fd-tabs__tag{border-right-color:#6a6d70;border-right-color:var(--sapNeutralBorderColor, #6a6d70)}.fd-tabs--filter .fd-tabs__link.is-selected:after{background-color:#0854a0;background-color:var(--fdTabs_Selected_Color, var(--sapSelectedColor, #0854a0))}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "tabbableScrollbar", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i4.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i4.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i4.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i4.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "directive", type: i5.ScrollSpyDirective, selector: "[fdScrollSpy]", inputs: ["trackedTags", "fireEmpty", "targetPercent", "targetOffset", "scrollSpyDisabled"], outputs: ["spyChange"] }, { kind: "component", type: i6.OverflowLayoutComponent, selector: "fd-overflow-layout", inputs: ["maxVisibleItems", "navigationTrigger", "showMorePosition", "reverseHiddenItems", "enableKeyboardNavigation", "moreItemsButtonText"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "directive", type: i6.OverflowItemRefDirective, selector: "[fdOverflowItemRef]", inputs: ["fdOverflowItemRef"] }, { kind: "directive", type: i6.OverflowExpandDirective, selector: "[fdOverflowExpand]", inputs: ["fdOverflowExpandItems"] }, { kind: "directive", type: i6.OverflowLayoutItemDirective, selector: "[fdOverflowLayoutItem]", inputs: ["forceVisibility"], outputs: ["hiddenChange"] }, { kind: "directive", type: i6.OverflowLayoutFocusableItemDirective, selector: "[fdOverflowLayoutFocusableItem], [fdOverflowLayoutItem][focusable]", inputs: ["focusable", "navigable"] }, { kind: "directive", type: i7.TabLinkDirective, selector: "[fd-tab-link]", inputs: ["active", "disabled"], outputs: ["keyDown", "focused"] }, { kind: "directive", type: i8.TabItemDirective, selector: "[fd-tab-item]", inputs: ["class", "tabItemState", "header", "disabled", "fdTabItemClass"] }, { kind: "directive", type: i9.TabTagDirective, selector: "[fdTabTag], [fd-tab-tag]" }, { kind: "component", type: i9.TabIconComponent, selector: "[fd-tab-icon]", inputs: ["class", "icon"] }, { kind: "directive", type: i9.TabCountDirective, selector: "[fdTabCount], [fd-tab-count]" }, { kind: "directive", type: i9.TabLabelDirective, selector: "[fdTabLabel], [fd-tab-label]" }, { kind: "directive", type: i9.TabProcessDirective, selector: "[fdTabProcess], [fd-tab-process]" }, { kind: "directive", type: i9.TabHeaderDirective, selector: "[fdTabHeader], [fd-tab-header]" }, { kind: "component", type: i10.TabItemExpandComponent, selector: "fd-item-expand", inputs: ["label"] }, { kind: "directive", type: i9.TabCounterHeaderDirective, selector: "[fdTabCounterHeader], [fd-tab-counter-header]" }, { kind: "directive", type: i9.TabProcessIconDirective, selector: "[fdTabProcessIcon], [fd-tab-process-icon]" }, { kind: "directive", type: i9.TabSeparatorDirective, selector: "[fdTabSeparator], [fd-tab-separator]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
241
|
+
], queries: [{ propertyName: "tabPanels", predicate: i0.forwardRef(function () { return TabPanelComponent; }) }], viewQueries: [{ propertyName: "overflowTrigger", first: true, predicate: TabItemExpandComponent, descendants: true, read: ElementRef }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true, read: ElementRef }, { propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "_overflowLayout", first: true, predicate: OverflowLayoutComponent, descendants: true }, { propertyName: "tabHeaderLinks", predicate: TabLinkDirective, descendants: true }, { propertyName: "tabHeaders", predicate: TabItemDirective, descendants: true }], ngImport: i0, template: "<div\n #headerContainer\n role=\"tablist\"\n class=\"fd-tabs\"\n [class]=\"(mode ? 'fd-tabs--' + mode : '') + (' fd-tabs--' + size)\"\n [class.fd-tabs--compact]=\"_contentDensityObserver.isCompact\"\n>\n <fd-overflow-layout\n [maxVisibleItems]=\"maxVisibleTabs\"\n [enableKeyboardNavigation]=\"true\"\n navigationTrigger=\"keydown\"\n (hiddenItemsCount)=\"hiddenItemsCount.emit($event)\"\n (visibleItemsCount)=\"visibleItemsCount.emit($event)\"\n >\n <ng-container *ngFor=\"let tab of _tabArray; let i = index; let last = last\">\n <div\n fd-tab-item\n *fdOverflowItemRef=\"tab\"\n fdOverflowLayoutItem\n [forceVisibility]=\"tab.panel._forcedVisibility\"\n [header]=\"tab.isHeader\"\n [tabItemState]=\"tab.tabState\"\n [attr.aria-selected]=\"tab.active\"\n >\n <a\n fd-tab-link\n role=\"tab\"\n [id]=\"tab.id\"\n [attr.aria-controls]=\"tab.panelId\"\n [attr.aria-label]=\"tab.ariaLabel || null\"\n [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledBy ? tab.ariaLabelledBy : null\"\n fdOverflowLayoutFocusableItem\n [focusable]=\"tab.active\"\n [navigable]=\"!tab.disabled\"\n [active]=\"tab.active\"\n [disabled]=\"tab.disabled\"\n (keydown)=\"_tabHeaderKeydownHandler($event, tab.panel)\"\n (click)=\"_tabHeaderClickHandler(tab.panel)\"\n >\n <ng-container *ngTemplateOutlet=\"tab.titleTemplate || null\"></ng-container>\n\n <ng-container *ngIf=\"!tab.titleTemplate\" [ngSwitch]=\"mode\">\n <ng-container *ngSwitchCase=\"'filter'\">\n <span fd-tab-header *ngIf=\"tab.isHeader\">\n <span fd-tab-counter-header *ngIf=\"tab.count\">{{ tab.count }}</span>\n <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n </span>\n <ng-container *ngIf=\"!tab.isHeader\">\n <span fd-tab-icon [icon]=\"tab.glyph\">\n <p fd-tab-count>{{ tab.count }}</p>\n </span>\n <span fd-tab-label>{{ tab.title }}</span>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'icon-only'\">\n <span fd-tab-icon [icon]=\"tab.glyph\">\n <p fd-tab-count>{{ tab.count }}</p>\n </span>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'process'\">\n <span fd-tab-icon *ngIf=\"tab.glyph\" [icon]=\"tab.glyph\"></span>\n <div fd-tab-process>\n <span fd-tab-label *ngIf=\"tab.count\">{{ tab.count }}</span>\n <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <p fd-tab-count *ngIf=\"tab.count\">{{ tab.count }}</p>\n <span fd-tab-tag>{{ tab.title }}</span>\n </ng-container>\n </ng-container>\n </a>\n\n <div fd-tab-process-icon *ngIf=\"mode === 'process' && !last\"></div>\n </div>\n\n <div *ngIf=\"tab.isHeader\" fd-tab-separator></div>\n </ng-container>\n\n <ng-container *fdOverflowExpand=\"let tabs; items: _tabArray\">\n <fd-item-expand\n [fdMenuTrigger]=\"menu\"\n [label]=\"expandOverflowText\"\n *ngIf=\"tabs.length > 0\"\n (keydown)=\"_onTriggerKeydown($event, menu)\"\n >\n </fd-item-expand>\n\n <fd-menu #menu>\n <li\n fd-menu-item\n *ngFor=\"let tab of tabs\"\n (onSelect)=\"_overflowingTabHeaderClickHandler(tab.item.panel)\"\n >\n <div fd-menu-interactive>\n <ng-container\n *ngTemplateOutlet=\"\n !tab.item.titleTemplate && mode === 'icon-only'\n ? iconOnlyTemplate\n : tab.item.titleTemplate || textTitle;\n context: { $implicit: tab.item }\n \"\n ></ng-container>\n </div>\n </li>\n </fd-menu>\n </ng-container>\n </fd-overflow-layout>\n</div>\n\n<div\n #contentContainer\n class=\"fd-tabs__content\"\n [style.maxHeight]=\"maxContentHeight\"\n fdScrollSpy\n [trackedTags]=\"['fd-tab']\"\n [scrollSpyDisabled]=\"_disableScrollSpy\"\n (spyChange)=\"_highlightActiveTab($event)\"\n>\n <ng-content></ng-content>\n</div>\n\n<ng-template #textTitle let-tab>\n <span fd-menu-title>{{ tab.title }}</span>\n</ng-template>\n\n<ng-template #iconOnlyTemplate let-tab>\n <span fd-tab-icon [icon]=\"tab.glyph\">\n <p fd-tab-count>{{ tab.count }}</p>\n </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.27\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-tabs+()\n .fd-tabs__item?+(([aria-selected=true]),)\n .fd-tabs__link+((.is-selected,)\n.fd-tabs__panel+([aria-expanded]|.is-expanded)\n*/.fd-tabs{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:2.625rem;-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-ms-flex-wrap:wrap;-webkit-box-shadow:var(--sapContent_HeaderShadow);align-items:center;background-color:var(--sapObjectHeader_Background);border:0;border-color:var(--sapObjectHeader_BorderColor);box-shadow:var(--sapContent_HeaderShadow);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-tabs:after,.fd-tabs:before{box-sizing:inherit;font-size:inherit}.fd-tabs__count{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0 0 .125rem}.fd-tabs__count:after,.fd-tabs__count:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link{-webkit-box-sizing:border-box;-webkit-transition:0s;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);cursor:pointer;display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:.875rem .75rem;position:relative;text-decoration:none;transition:0s}.fd-tabs__link:after,.fd-tabs__link:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link.is-selected .fd-tabs__icon,.fd-tabs__link[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__link.is-selected .fd-tabs__icon:after,.fd-tabs__link.is-selected .fd-tabs__tag:after,.fd-tabs__link[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__link[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__link.is-focus,.fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs__link.is-focus .fd-tabs__icon:before,.fd-tabs__link.is-focus .fd-tabs__tag:before,.fd-tabs__link:focus .fd-tabs__icon:before,.fd-tabs__link:focus .fd-tabs__tag:before{content:\"\";inset:0;outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--sapContent_FocusWidth);position:absolute}.fd-tabs__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0 .25rem;padding:0;position:relative}.fd-tabs__item:after,.fd-tabs__item:before{box-sizing:inherit;font-size:inherit}.fd-tabs__item.is-selected .fd-tabs__tag,.fd-tabs__item[aria-selected=true] .fd-tabs__tag{color:var(--fdIcon_Tab_Bar_Selection_Color)}.fd-tabs__item.is-selected .fd-tabs__icon,.fd-tabs__item[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item.is-selected .fd-tabs__icon:after,.fd-tabs__item.is-selected .fd-tabs__link:after,.fd-tabs__item.is-selected .fd-tabs__tag:after,.fd-tabs__item[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__item--error .fd-tabs__icon{border-color:var(--sapErrorColor);color:var(--sapErrorColor)}.fd-tabs__item--error .fd-tabs__link .fd-tabs__tag{color:var(--sapErrorColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon{background-color:var(--sapErrorColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon:after,.fd-tabs__item--error.is-selected .fd-tabs__link:after,.fd-tabs__item--error.is-selected .fd-tabs__tag:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapErrorColor)}.fd-tabs__item--warning .fd-tabs__icon{border-color:var(--sapWarningColor);color:var(--sapWarningColor)}.fd-tabs__item--warning .fd-tabs__link .fd-tabs__tag{color:var(--sapWarningColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon{background-color:var(--sapWarningColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon:after,.fd-tabs__item--warning.is-selected .fd-tabs__link:after,.fd-tabs__item--warning.is-selected .fd-tabs__tag:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapWarningColor)}.fd-tabs__item--success .fd-tabs__icon{border-color:var(--sapSuccessColor);color:var(--sapSuccessColor)}.fd-tabs__item--success .fd-tabs__link .fd-tabs__tag{color:var(--sapSuccessColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSuccessColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon:after,.fd-tabs__item--success.is-selected .fd-tabs__link:after,.fd-tabs__item--success.is-selected .fd-tabs__tag:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapSuccessColor)}.fd-tabs__item--information .fd-tabs__icon{border-color:var(--sapInformationColor);color:var(--sapInformationColor)}.fd-tabs__item--information .fd-tabs__link .fd-tabs__tag{color:var(--sapInformationColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon{background-color:var(--sapInformationColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon:after,.fd-tabs__item--information.is-selected .fd-tabs__link:after,.fd-tabs__item--information.is-selected .fd-tabs__tag:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapInformationColor)}.fd-tabs__item--neutral .fd-tabs__icon{border-color:var(--sapNeutralColor);color:var(--sapNeutralColor)}.fd-tabs__item--neutral .fd-tabs__link .fd-tabs__tag{color:var(--sapNeutralColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon{background-color:var(--sapNeutralColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon:after,.fd-tabs__item--neutral.is-selected .fd-tabs__link:after,.fd-tabs__item--neutral.is-selected .fd-tabs__tag:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapNeutralColor)}.fd-tabs__item:first-child{margin-left:0}.fd-tabs__item:first-child .fd-tabs__link{margin-left:.1875rem;padding-left:0}.fd-tabs__item:first-child .fd-tabs__link[dir=rtl],[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{margin-left:0;margin-right:.1875rem}.fd-tabs__item[dir=rtl]:first-child,[dir=rtl] .fd-tabs__item:first-child{margin-left:.25rem;margin-right:0}.fd-tabs__item[dir=rtl]:first-child .fd-tabs__link,[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{padding-left:.875rem;padding-right:0}.fd-tabs__icon{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;border:var(--fdIcon_Tab_Bar_Icon_Border_Weight) solid var(--fdIcon_Tab_Bar_Icon_Border_Color);border-radius:50%;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdIcon_Tab_Bar_Inactive_Tab_Icon_Color);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:var(--fdTabs_Icon_Selection_Height);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 .188rem;padding:0;position:relative;width:var(--fdTabs_Icon_Selection_Height)}.fd-tabs__icon:after,.fd-tabs__icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__icon [class*=sap-icon],.fd-tabs__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;font-size:var(--fdTabs_Icon_Size);line-height:1}.fd-tabs__icon:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__tag{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0;position:relative}.fd-tabs__tag:after,.fd-tabs__tag:before{box-sizing:inherit;font-size:inherit}.fd-tabs__tag:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__panel{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__panel:after,.fd-tabs__panel:before{box-sizing:inherit;font-size:inherit}.fd-tabs__panel[aria-expanded=false]{display:none}.fd-tabs__panel.is-expanded,.fd-tabs__panel[aria-expanded=true]{display:block}.fd-tabs__counter-header{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1.5rem;font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;padding:0 .5rem 0 0}.fd-tabs__counter-header:after,.fd-tabs__counter-header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-tabs__overflow:after,.fd-tabs__overflow:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow [class*=sap-icon],.fd-tabs__overflow[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;line-height:1}.fd-tabs__process-icon{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1;margin:0;padding:0 .5rem}.fd-tabs__process-icon:after,.fd-tabs__process-icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__process-icon:before{content:\"\\e0c7\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-tabs__label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;padding:0 0 0 .125rem}.fd-tabs__label:after,.fd-tabs__label:before{box-sizing:inherit;font-size:inherit}.fd-tabs__label:first-child{padding-bottom:.375rem}.fd-tabs__separator{-webkit-box-sizing:border-box;border:0;border-right:solid var(--sapGroup_TitleBorderColor);border-right-width:.0625rem;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2rem;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0 .25rem;padding:0}.fd-tabs__separator:after,.fd-tabs__separator:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__header:after,.fd-tabs__header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header .fd-tabs__label{max-width:4rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count,.fd-tabs--process .fd-tabs__count{font-size:var(--sapFontSmallSize)}.fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--icon-only .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{margin:0}.fd-tabs--icon-only .fd-tabs__link,.fd-tabs--process .fd-tabs__link{padding-bottom:1rem;padding-top:1rem}.fd-tabs--icon-only .fd-tabs__icon:after,.fd-tabs--process .fd-tabs__icon:after{bottom:-1.0625rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count{left:calc(100% + .1875rem);position:absolute;top:0}.fd-tabs--filter[dir=rtl] .fd-tabs__count,.fd-tabs--icon-only[dir=rtl] .fd-tabs__count,[dir=rtl] .fd-tabs--filter .fd-tabs__count,[dir=rtl] .fd-tabs--icon-only .fd-tabs__count{left:auto;right:calc(100% + .1875rem)}.fd-tabs--process .fd-tabs__item{margin:0 .25rem 0 0}.fd-tabs--process .fd-tabs__item,.fd-tabs--process .fd-tabs__link{align-items:center;display:flex}.fd-tabs--process .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--process .fd-tabs__icon{margin:0 .1875rem}.fd-tabs--process .fd-tabs__label{line-height:.875rem;max-width:7.5rem;overflow:hidden;white-space:nowrap}.fd-tabs--process[dir=rtl] .fd-tabs__item,[dir=rtl] .fd-tabs--process .fd-tabs__item{margin:0 0 0 .25rem}.fd-tabs--process[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--filter{align-items:center;display:flex}.fd-tabs--filter .fd-tabs__item{margin:0;padding:0 .25rem;width:5.375rem}.fd-tabs--filter .fd-tabs__item[dir=rtl],[dir=rtl] .fd-tabs--filter .fd-tabs__item{margin:0}.fd-tabs--filter .fd-tabs__item--header{width:auto}.fd-tabs--filter .fd-tabs__icon{margin-bottom:.375rem}.fd-tabs--filter .fd-tabs__icon:after{content:none}.fd-tabs--filter .fd-tabs__label{line-height:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-tabs--filter .fd-tabs__link{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:flex;flex-direction:column;height:5.5rem;justify-content:center;padding:.875rem .188rem .625rem;position:relative;text-align:center}.fd-tabs--filter .fd-tabs__link:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;bottom:0;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs--filter .fd-tabs__link.is-focus,.fd-tabs--filter .fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs--filter[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link{padding-left:.188rem;padding-right:.188rem}.fd-tabs--compact{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:1.875rem}.fd-tabs--compact .fd-tabs__label:first-child{padding-bottom:.25rem}.fd-tabs--compact.fd-tabs--filter .fd-tabs__link{height:4.75rem}.fd-tabs--s{padding:0 1rem}.fd-tabs--l,.fd-tabs--m{padding:0 2rem}.fd-tabs--xl,.fd-tabs--xxl{padding:0 3rem}.fd-tabs[dir=rtl] .fd-tabs__process-icon,[dir=rtl] .fd-tabs .fd-tabs__process-icon{transform:rotate(180deg)}.fd-tabs[dir=rtl] .fd-tabs__counter-header,[dir=rtl] .fd-tabs .fd-tabs__counter-header{padding-left:.5rem;padding-right:0}.fd-tabs[dir=rtl] .fd-tabs__overflow,[dir=rtl] .fd-tabs .fd-tabs__overflow{margin-left:0;margin-right:auto}.fd-tabs__process{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__process:after,.fd-tabs__process:before{box-sizing:inherit;font-size:inherit}.fd-tabs-custom{display:flex;flex-direction:column;height:100%}.fd-tabs-custom .is-disabled{pointer-events:none;opacity:.4}.fd-tabs{flex-grow:0;flex-wrap:nowrap}.fd-tabs__content{overflow-y:auto;flex-grow:1}.fd-tabs__item{flex-shrink:0}.fd-tabs__tag{white-space:nowrap}.fd-tabs__wrapper{flex-grow:1;display:flex;flex-wrap:wrap;align-items:center}.fd-tabs__wrapper--collapsible{overflow:hidden;flex-wrap:nowrap}.fd-tabs .fd-overflow-layout__items-container .fd-tabs__item:first-child{margin-left:.25rem}.fd-tabs .fd-overflow-layout__items-container .fd-tabs__item:first-child .fd-tabs__link{margin:0;padding:.875rem .75rem}.fd-tabs .fd-overflow-layout__items-container .fd-overflow-layout__item--first .fd-tabs__item{margin-left:0}.fd-tabs .fd-overflow-layout__items-container .fd-overflow-layout__item--first .fd-tabs__item .fd-tabs__link{margin-left:.1875rem;padding-left:0}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "tabbableScrollbar", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i4.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i4.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i4.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i4.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "directive", type: i5.ScrollSpyDirective, selector: "[fdScrollSpy]", inputs: ["trackedTags", "fireEmpty", "targetPercent", "targetOffset", "scrollSpyDisabled"], outputs: ["spyChange"] }, { kind: "component", type: i6.OverflowLayoutComponent, selector: "fd-overflow-layout", inputs: ["maxVisibleItems", "navigationTrigger", "showMorePosition", "reverseHiddenItems", "enableKeyboardNavigation", "moreItemsButtonText"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "directive", type: i6.OverflowItemRefDirective, selector: "[fdOverflowItemRef]", inputs: ["fdOverflowItemRef"] }, { kind: "directive", type: i6.OverflowExpandDirective, selector: "[fdOverflowExpand]", inputs: ["fdOverflowExpandItems"] }, { kind: "directive", type: i6.OverflowLayoutItemDirective, selector: "[fdOverflowLayoutItem]", inputs: ["forceVisibility"], outputs: ["hiddenChange"] }, { kind: "directive", type: i6.OverflowLayoutFocusableItemDirective, selector: "[fdOverflowLayoutFocusableItem], [fdOverflowLayoutItem][focusable]", inputs: ["focusable", "navigable"] }, { kind: "directive", type: i7.TabLinkDirective, selector: "[fd-tab-link]", inputs: ["active", "disabled"], outputs: ["keyDown", "focused"] }, { kind: "directive", type: i8.TabItemDirective, selector: "[fd-tab-item]", inputs: ["class", "tabItemState", "header", "disabled", "fdTabItemClass"] }, { kind: "directive", type: i9.TabTagDirective, selector: "[fdTabTag], [fd-tab-tag]" }, { kind: "component", type: i9.TabIconComponent, selector: "[fd-tab-icon]", inputs: ["class", "icon"] }, { kind: "directive", type: i9.TabCountDirective, selector: "[fdTabCount], [fd-tab-count]" }, { kind: "directive", type: i9.TabLabelDirective, selector: "[fdTabLabel], [fd-tab-label]" }, { kind: "directive", type: i9.TabProcessDirective, selector: "[fdTabProcess], [fd-tab-process]" }, { kind: "directive", type: i9.TabHeaderDirective, selector: "[fdTabHeader], [fd-tab-header]" }, { kind: "component", type: i10.TabItemExpandComponent, selector: "fd-item-expand", inputs: ["label"] }, { kind: "directive", type: i9.TabCounterHeaderDirective, selector: "[fdTabCounterHeader], [fd-tab-counter-header]" }, { kind: "directive", type: i9.TabProcessIconDirective, selector: "[fdTabProcessIcon], [fd-tab-process-icon]" }, { kind: "directive", type: i9.TabSeparatorDirective, selector: "[fdTabSeparator], [fd-tab-separator]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
242
242
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: TabListComponent, decorators: [{
|
|
243
243
|
type: Component,
|
|
244
244
|
args: [{ selector: 'fd-tab-list', host: {
|
|
@@ -250,7 +250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
|
|
|
250
250
|
provide: LIST_COMPONENT,
|
|
251
251
|
useExisting: forwardRef(() => TabListComponent)
|
|
252
252
|
}
|
|
253
|
-
], template: "<div\n #headerContainer\n role=\"tablist\"\n class=\"fd-tabs\"\n [class]=\"(mode ? 'fd-tabs--' + mode : '') + (' fd-tabs--' + size)\"\n [class.fd-tabs--compact]=\"_contentDensityObserver.isCompact\"\n>\n <fd-overflow-layout\n [maxVisibleItems]=\"maxVisibleTabs\"\n [enableKeyboardNavigation]=\"true\"\n navigationTrigger=\"keydown\"\n (hiddenItemsCount)=\"hiddenItemsCount.emit($event)\"\n (visibleItemsCount)=\"visibleItemsCount.emit($event)\"\n >\n <ng-container *ngFor=\"let tab of _tabArray; let i = index; let last = last\">\n <div\n fd-tab-item\n *fdOverflowItemRef=\"tab\"\n fdOverflowLayoutItem\n [forceVisibility]=\"tab.panel._forcedVisibility\"\n [header]=\"tab.isHeader\"\n [tabItemState]=\"tab.tabState\"\n [attr.aria-selected]=\"tab.active\"\n >\n <a\n fd-tab-link\n role=\"tab\"\n [id]=\"tab.id\"\n [attr.aria-controls]=\"tab.panelId\"\n [attr.aria-label]=\"tab.ariaLabel || null\"\n [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledBy ? tab.ariaLabelledBy : null\"\n fdOverflowLayoutFocusableItem\n [focusable]=\"tab.active\"\n [navigable]=\"!tab.disabled\"\n [active]=\"tab.active\"\n [disabled]=\"tab.disabled\"\n (keydown)=\"_tabHeaderKeydownHandler($event, tab.panel)\"\n (click)=\"_tabHeaderClickHandler(tab.panel)\"\n >\n <ng-container *ngTemplateOutlet=\"tab.titleTemplate || null\"></ng-container>\n\n <ng-container *ngIf=\"!tab.titleTemplate\" [ngSwitch]=\"mode\">\n <ng-container *ngSwitchCase=\"'filter'\">\n <span fd-tab-header *ngIf=\"tab.isHeader\">\n <span fd-tab-counter-header *ngIf=\"tab.count\">{{ tab.count }}</span>\n <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n </span>\n <ng-container *ngIf=\"!tab.isHeader\">\n <span fd-tab-icon [icon]=\"tab.glyph\">\n <p fd-tab-count>{{ tab.count }}</p>\n </span>\n <span fd-tab-label>{{ tab.title }}</span>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'icon-only'\">\n <span fd-tab-icon [icon]=\"tab.glyph\">\n <p fd-tab-count>{{ tab.count }}</p>\n </span>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'process'\">\n <span fd-tab-icon *ngIf=\"tab.glyph\" [icon]=\"tab.glyph\"></span>\n <div fd-tab-process>\n <span fd-tab-label *ngIf=\"tab.count\">{{ tab.count }}</span>\n <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <p fd-tab-count *ngIf=\"tab.count\">{{ tab.count }}</p>\n <span fd-tab-tag>{{ tab.title }}</span>\n </ng-container>\n </ng-container>\n </a>\n\n <div fd-tab-process-icon *ngIf=\"mode === 'process' && !last\"></div>\n </div>\n\n <div *ngIf=\"tab.isHeader\" fd-tab-separator></div>\n </ng-container>\n\n <ng-container *fdOverflowExpand=\"let tabs; items: _tabArray\">\n <fd-item-expand\n [fdMenuTrigger]=\"menu\"\n [label]=\"expandOverflowText\"\n *ngIf=\"tabs.length > 0\"\n (keydown)=\"_onTriggerKeydown($event, menu)\"\n >\n </fd-item-expand>\n\n <fd-menu #menu>\n <li\n fd-menu-item\n *ngFor=\"let tab of tabs\"\n (onSelect)=\"_overflowingTabHeaderClickHandler(tab.item.panel)\"\n >\n <div fd-menu-interactive>\n <ng-container\n *ngTemplateOutlet=\"\n !tab.item.titleTemplate && mode === 'icon-only'\n ? iconOnlyTemplate\n : tab.item.titleTemplate || textTitle;\n context: { $implicit: tab.item }\n \"\n ></ng-container>\n </div>\n </li>\n </fd-menu>\n </ng-container>\n </fd-overflow-layout>\n</div>\n\n<div\n #contentContainer\n class=\"fd-tabs__content\"\n [style.maxHeight]=\"maxContentHeight\"\n fdScrollSpy\n [trackedTags]=\"['fd-tab']\"\n [scrollSpyDisabled]=\"_disableScrollSpy\"\n (spyChange)=\"_highlightActiveTab($event)\"\n>\n <ng-content></ng-content>\n</div>\n\n<ng-template #textTitle let-tab>\n <span fd-menu-title>{{ tab.title }}</span>\n</ng-template>\n\n<ng-template #iconOnlyTemplate let-tab>\n <span fd-tab-icon [icon]=\"tab.glyph\">\n <p fd-tab-count>{{ tab.count }}</p>\n </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.27\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-tabs+()\n .fd-tabs__item?+(([aria-selected=true]),)\n .fd-tabs__link+((.is-selected,)\n.fd-tabs__panel+([aria-expanded]|.is-expanded)\n*/.fd-tabs{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:2.625rem;-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-ms-flex-wrap:wrap;-webkit-box-shadow:var(--sapContent_HeaderShadow);align-items:center;background-color:var(--sapObjectHeader_Background);border:0;border-color:var(--sapObjectHeader_BorderColor);box-shadow:var(--sapContent_HeaderShadow);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-tabs:after,.fd-tabs:before{box-sizing:inherit;font-size:inherit}.fd-tabs__count{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0 0 .125rem}.fd-tabs__count:after,.fd-tabs__count:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link{-webkit-box-sizing:border-box;-webkit-transition:0s;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);cursor:pointer;display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:.875rem .75rem;position:relative;text-decoration:none;transition:0s}.fd-tabs__link:after,.fd-tabs__link:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link.is-selected .fd-tabs__icon,.fd-tabs__link[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__link.is-selected .fd-tabs__icon:after,.fd-tabs__link.is-selected .fd-tabs__tag:after,.fd-tabs__link[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__link[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__link.is-focus,.fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs__link.is-focus .fd-tabs__icon:before,.fd-tabs__link.is-focus .fd-tabs__tag:before,.fd-tabs__link:focus .fd-tabs__icon:before,.fd-tabs__link:focus .fd-tabs__tag:before{content:\"\";inset:0;outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--sapContent_FocusWidth);position:absolute}.fd-tabs__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0 .25rem;padding:0;position:relative}.fd-tabs__item:after,.fd-tabs__item:before{box-sizing:inherit;font-size:inherit}.fd-tabs__item.is-selected .fd-tabs__tag,.fd-tabs__item[aria-selected=true] .fd-tabs__tag{color:var(--fdIcon_Tab_Bar_Selection_Color)}.fd-tabs__item.is-selected .fd-tabs__icon,.fd-tabs__item[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item.is-selected .fd-tabs__icon:after,.fd-tabs__item.is-selected .fd-tabs__link:after,.fd-tabs__item.is-selected .fd-tabs__tag:after,.fd-tabs__item[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__item--error .fd-tabs__icon{border-color:var(--sapErrorColor);color:var(--sapErrorColor)}.fd-tabs__item--error .fd-tabs__link .fd-tabs__tag{color:var(--sapErrorColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon{background-color:var(--sapErrorColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon:after,.fd-tabs__item--error.is-selected .fd-tabs__link:after,.fd-tabs__item--error.is-selected .fd-tabs__tag:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapErrorColor)}.fd-tabs__item--warning .fd-tabs__icon{border-color:var(--sapWarningColor);color:var(--sapWarningColor)}.fd-tabs__item--warning .fd-tabs__link .fd-tabs__tag{color:var(--sapWarningColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon{background-color:var(--sapWarningColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon:after,.fd-tabs__item--warning.is-selected .fd-tabs__link:after,.fd-tabs__item--warning.is-selected .fd-tabs__tag:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapWarningColor)}.fd-tabs__item--success .fd-tabs__icon{border-color:var(--sapSuccessColor);color:var(--sapSuccessColor)}.fd-tabs__item--success .fd-tabs__link .fd-tabs__tag{color:var(--sapSuccessColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSuccessColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon:after,.fd-tabs__item--success.is-selected .fd-tabs__link:after,.fd-tabs__item--success.is-selected .fd-tabs__tag:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapSuccessColor)}.fd-tabs__item--information .fd-tabs__icon{border-color:var(--sapInformationColor);color:var(--sapInformationColor)}.fd-tabs__item--information .fd-tabs__link .fd-tabs__tag{color:var(--sapInformationColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon{background-color:var(--sapInformationColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon:after,.fd-tabs__item--information.is-selected .fd-tabs__link:after,.fd-tabs__item--information.is-selected .fd-tabs__tag:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapInformationColor)}.fd-tabs__item--neutral .fd-tabs__icon{border-color:var(--sapNeutralColor);color:var(--sapNeutralColor)}.fd-tabs__item--neutral .fd-tabs__link .fd-tabs__tag{color:var(--sapNeutralColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon{background-color:var(--sapNeutralColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon:after,.fd-tabs__item--neutral.is-selected .fd-tabs__link:after,.fd-tabs__item--neutral.is-selected .fd-tabs__tag:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapNeutralColor)}.fd-tabs__item:first-child{margin-left:0}.fd-tabs__item:first-child .fd-tabs__link{margin-left:.1875rem;padding-left:0}.fd-tabs__item:first-child .fd-tabs__link[dir=rtl],[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{margin-left:0;margin-right:.1875rem}.fd-tabs__item[dir=rtl]:first-child,[dir=rtl] .fd-tabs__item:first-child{margin-left:.25rem;margin-right:0}.fd-tabs__item[dir=rtl]:first-child .fd-tabs__link,[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{padding-left:.875rem;padding-right:0}.fd-tabs__icon{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;border:var(--fdIcon_Tab_Bar_Icon_Border_Weight) solid var(--fdIcon_Tab_Bar_Icon_Border_Color);border-radius:50%;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdIcon_Tab_Bar_Inactive_Tab_Icon_Color);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:var(--fdTabs_Icon_Selection_Height);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 .188rem;padding:0;position:relative;width:var(--fdTabs_Icon_Selection_Height)}.fd-tabs__icon:after,.fd-tabs__icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__icon [class*=sap-icon],.fd-tabs__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;font-size:var(--fdTabs_Icon_Size);line-height:1}.fd-tabs__icon:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__tag{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0;position:relative}.fd-tabs__tag:after,.fd-tabs__tag:before{box-sizing:inherit;font-size:inherit}.fd-tabs__tag:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__panel{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__panel:after,.fd-tabs__panel:before{box-sizing:inherit;font-size:inherit}.fd-tabs__panel[aria-expanded=false]{display:none}.fd-tabs__panel.is-expanded,.fd-tabs__panel[aria-expanded=true]{display:block}.fd-tabs__counter-header{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1.5rem;font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;padding:0 .5rem 0 0}.fd-tabs__counter-header:after,.fd-tabs__counter-header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-tabs__overflow:after,.fd-tabs__overflow:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow [class*=sap-icon],.fd-tabs__overflow[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;line-height:1}.fd-tabs__process-icon{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1;margin:0;padding:0 .5rem}.fd-tabs__process-icon:after,.fd-tabs__process-icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__process-icon:before{content:\"\\e0c7\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-tabs__label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;padding:0 0 0 .125rem}.fd-tabs__label:after,.fd-tabs__label:before{box-sizing:inherit;font-size:inherit}.fd-tabs__label:first-child{padding-bottom:.375rem}.fd-tabs__separator{-webkit-box-sizing:border-box;border:0;border-right:solid var(--sapGroup_TitleBorderColor);border-right-width:.0625rem;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2rem;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0 .25rem;padding:0}.fd-tabs__separator:after,.fd-tabs__separator:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__header:after,.fd-tabs__header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header .fd-tabs__label{max-width:4rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count,.fd-tabs--process .fd-tabs__count{font-size:var(--sapFontSmallSize)}.fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--icon-only .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{margin:0}.fd-tabs--icon-only .fd-tabs__link,.fd-tabs--process .fd-tabs__link{padding-bottom:1rem;padding-top:1rem}.fd-tabs--icon-only .fd-tabs__icon:after,.fd-tabs--process .fd-tabs__icon:after{bottom:-1.0625rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count{left:calc(100% + .1875rem);position:absolute;top:0}.fd-tabs--filter[dir=rtl] .fd-tabs__count,.fd-tabs--icon-only[dir=rtl] .fd-tabs__count,[dir=rtl] .fd-tabs--filter .fd-tabs__count,[dir=rtl] .fd-tabs--icon-only .fd-tabs__count{left:auto;right:calc(100% + .1875rem)}.fd-tabs--process .fd-tabs__item{margin:0 .25rem 0 0}.fd-tabs--process .fd-tabs__item,.fd-tabs--process .fd-tabs__link{align-items:center;display:flex}.fd-tabs--process .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--process .fd-tabs__icon{margin:0 .1875rem}.fd-tabs--process .fd-tabs__label{line-height:.875rem;max-width:7.5rem;overflow:hidden;white-space:nowrap}.fd-tabs--process[dir=rtl] .fd-tabs__item,[dir=rtl] .fd-tabs--process .fd-tabs__item{margin:0 0 0 .25rem}.fd-tabs--process[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--filter{align-items:center;display:flex}.fd-tabs--filter .fd-tabs__item{margin:0;padding:0 .25rem;width:5.375rem}.fd-tabs--filter .fd-tabs__item[dir=rtl],[dir=rtl] .fd-tabs--filter .fd-tabs__item{margin:0}.fd-tabs--filter .fd-tabs__item--header{width:auto}.fd-tabs--filter .fd-tabs__icon{margin-bottom:.375rem}.fd-tabs--filter .fd-tabs__icon:after{content:none}.fd-tabs--filter .fd-tabs__label{line-height:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-tabs--filter .fd-tabs__link{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:flex;flex-direction:column;height:5.5rem;justify-content:center;padding:.875rem .188rem .625rem;position:relative;text-align:center}.fd-tabs--filter .fd-tabs__link:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;bottom:0;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs--filter .fd-tabs__link.is-focus,.fd-tabs--filter .fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs--filter[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link{padding-left:.188rem;padding-right:.188rem}.fd-tabs--compact{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:1.875rem}.fd-tabs--compact .fd-tabs__label:first-child{padding-bottom:.25rem}.fd-tabs--compact.fd-tabs--filter .fd-tabs__link{height:4.75rem}.fd-tabs--s{padding:0 1rem}.fd-tabs--l,.fd-tabs--m{padding:0 2rem}.fd-tabs--xl,.fd-tabs--xxl{padding:0 3rem}.fd-tabs[dir=rtl] .fd-tabs__process-icon,[dir=rtl] .fd-tabs .fd-tabs__process-icon{transform:rotate(180deg)}.fd-tabs[dir=rtl] .fd-tabs__counter-header,[dir=rtl] .fd-tabs .fd-tabs__counter-header{padding-left:.5rem;padding-right:0}.fd-tabs[dir=rtl] .fd-tabs__overflow,[dir=rtl] .fd-tabs .fd-tabs__overflow{margin-left:0;margin-right:auto}.fd-tabs__process{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__process:after,.fd-tabs__process:before{box-sizing:inherit;font-size:inherit}.fd-tabs-custom{display:flex;flex-direction:column;height:100%}.is-disabled{pointer-events:none;opacity:.4}.fd-tabs{flex-grow:0;flex-wrap:nowrap}.fd-tabs__content{overflow-y:auto;flex-grow:1}.fd-tabs__item{flex-shrink:0}.fd-tabs__tag{white-space:nowrap}.fd-tabs__wrapper{flex-grow:1;display:flex;flex-wrap:wrap;align-items:center}.fd-tabs__wrapper--collapsible{overflow:hidden;flex-wrap:nowrap}.fd-tabs .fd-overflow-layout__items-container .fd-tabs__item:first-child{margin-left:.25rem}.fd-tabs .fd-overflow-layout__items-container .fd-tabs__item:first-child .fd-tabs__link{margin:0;padding:.875rem .75rem}.fd-tabs .fd-overflow-layout__items-container .fd-overflow-layout__item--first .fd-tabs__item{margin-left:0}.fd-tabs .fd-overflow-layout__items-container .fd-overflow-layout__item--first .fd-tabs__item .fd-tabs__link{margin-left:.1875rem;padding-left:0}.fd-tabs__item--success .fd-tabs__link .fd-tabs__tag{color:#107e3e;color:var(--sapSuccessColor, #107e3e)}.fd-tabs__item--error .fd-tabs__link .fd-tabs__tag{color:#b00;color:var(--sapErrorColor, #b00)}.fd-tabs__item--warning .fd-tabs__link .fd-tabs__tag{color:#e9730c;color:var(--sapWarningColor, #e9730c)}.fd-tabs__item--information .fd-tabs__link .fd-tabs__tag{color:#0a6ed1;color:var(--sapInformationColor, #0a6ed1)}.fd-tabs__item--neutral .fd-tabs__link .fd-tabs__tag{border-right-color:#6a6d70;border-right-color:var(--sapNeutralBorderColor, #6a6d70)}.fd-tabs--filter .fd-tabs__link.is-selected:after{background-color:#0854a0;background-color:var(--fdTabs_Selected_Color, var(--sapSelectedColor, #0854a0))}\n"] }]
|
|
253
|
+
], template: "<div\n #headerContainer\n role=\"tablist\"\n class=\"fd-tabs\"\n [class]=\"(mode ? 'fd-tabs--' + mode : '') + (' fd-tabs--' + size)\"\n [class.fd-tabs--compact]=\"_contentDensityObserver.isCompact\"\n>\n <fd-overflow-layout\n [maxVisibleItems]=\"maxVisibleTabs\"\n [enableKeyboardNavigation]=\"true\"\n navigationTrigger=\"keydown\"\n (hiddenItemsCount)=\"hiddenItemsCount.emit($event)\"\n (visibleItemsCount)=\"visibleItemsCount.emit($event)\"\n >\n <ng-container *ngFor=\"let tab of _tabArray; let i = index; let last = last\">\n <div\n fd-tab-item\n *fdOverflowItemRef=\"tab\"\n fdOverflowLayoutItem\n [forceVisibility]=\"tab.panel._forcedVisibility\"\n [header]=\"tab.isHeader\"\n [tabItemState]=\"tab.tabState\"\n [attr.aria-selected]=\"tab.active\"\n >\n <a\n fd-tab-link\n role=\"tab\"\n [id]=\"tab.id\"\n [attr.aria-controls]=\"tab.panelId\"\n [attr.aria-label]=\"tab.ariaLabel || null\"\n [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledBy ? tab.ariaLabelledBy : null\"\n fdOverflowLayoutFocusableItem\n [focusable]=\"tab.active\"\n [navigable]=\"!tab.disabled\"\n [active]=\"tab.active\"\n [disabled]=\"tab.disabled\"\n (keydown)=\"_tabHeaderKeydownHandler($event, tab.panel)\"\n (click)=\"_tabHeaderClickHandler(tab.panel)\"\n >\n <ng-container *ngTemplateOutlet=\"tab.titleTemplate || null\"></ng-container>\n\n <ng-container *ngIf=\"!tab.titleTemplate\" [ngSwitch]=\"mode\">\n <ng-container *ngSwitchCase=\"'filter'\">\n <span fd-tab-header *ngIf=\"tab.isHeader\">\n <span fd-tab-counter-header *ngIf=\"tab.count\">{{ tab.count }}</span>\n <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n </span>\n <ng-container *ngIf=\"!tab.isHeader\">\n <span fd-tab-icon [icon]=\"tab.glyph\">\n <p fd-tab-count>{{ tab.count }}</p>\n </span>\n <span fd-tab-label>{{ tab.title }}</span>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'icon-only'\">\n <span fd-tab-icon [icon]=\"tab.glyph\">\n <p fd-tab-count>{{ tab.count }}</p>\n </span>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'process'\">\n <span fd-tab-icon *ngIf=\"tab.glyph\" [icon]=\"tab.glyph\"></span>\n <div fd-tab-process>\n <span fd-tab-label *ngIf=\"tab.count\">{{ tab.count }}</span>\n <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <p fd-tab-count *ngIf=\"tab.count\">{{ tab.count }}</p>\n <span fd-tab-tag>{{ tab.title }}</span>\n </ng-container>\n </ng-container>\n </a>\n\n <div fd-tab-process-icon *ngIf=\"mode === 'process' && !last\"></div>\n </div>\n\n <div *ngIf=\"tab.isHeader\" fd-tab-separator></div>\n </ng-container>\n\n <ng-container *fdOverflowExpand=\"let tabs; items: _tabArray\">\n <fd-item-expand\n [fdMenuTrigger]=\"menu\"\n [label]=\"expandOverflowText\"\n *ngIf=\"tabs.length > 0\"\n (keydown)=\"_onTriggerKeydown($event, menu)\"\n >\n </fd-item-expand>\n\n <fd-menu #menu>\n <li\n fd-menu-item\n *ngFor=\"let tab of tabs\"\n (onSelect)=\"_overflowingTabHeaderClickHandler(tab.item.panel)\"\n >\n <div fd-menu-interactive>\n <ng-container\n *ngTemplateOutlet=\"\n !tab.item.titleTemplate && mode === 'icon-only'\n ? iconOnlyTemplate\n : tab.item.titleTemplate || textTitle;\n context: { $implicit: tab.item }\n \"\n ></ng-container>\n </div>\n </li>\n </fd-menu>\n </ng-container>\n </fd-overflow-layout>\n</div>\n\n<div\n #contentContainer\n class=\"fd-tabs__content\"\n [style.maxHeight]=\"maxContentHeight\"\n fdScrollSpy\n [trackedTags]=\"['fd-tab']\"\n [scrollSpyDisabled]=\"_disableScrollSpy\"\n (spyChange)=\"_highlightActiveTab($event)\"\n>\n <ng-content></ng-content>\n</div>\n\n<ng-template #textTitle let-tab>\n <span fd-menu-title>{{ tab.title }}</span>\n</ng-template>\n\n<ng-template #iconOnlyTemplate let-tab>\n <span fd-tab-icon [icon]=\"tab.glyph\">\n <p fd-tab-count>{{ tab.count }}</p>\n </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.27\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-tabs+()\n .fd-tabs__item?+(([aria-selected=true]),)\n .fd-tabs__link+((.is-selected,)\n.fd-tabs__panel+([aria-expanded]|.is-expanded)\n*/.fd-tabs{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:2.625rem;-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-ms-flex-wrap:wrap;-webkit-box-shadow:var(--sapContent_HeaderShadow);align-items:center;background-color:var(--sapObjectHeader_Background);border:0;border-color:var(--sapObjectHeader_BorderColor);box-shadow:var(--sapContent_HeaderShadow);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-tabs:after,.fd-tabs:before{box-sizing:inherit;font-size:inherit}.fd-tabs__count{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0 0 .125rem}.fd-tabs__count:after,.fd-tabs__count:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link{-webkit-box-sizing:border-box;-webkit-transition:0s;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);cursor:pointer;display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:.875rem .75rem;position:relative;text-decoration:none;transition:0s}.fd-tabs__link:after,.fd-tabs__link:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link.is-selected .fd-tabs__icon,.fd-tabs__link[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__link.is-selected .fd-tabs__icon:after,.fd-tabs__link.is-selected .fd-tabs__tag:after,.fd-tabs__link[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__link[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__link.is-focus,.fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs__link.is-focus .fd-tabs__icon:before,.fd-tabs__link.is-focus .fd-tabs__tag:before,.fd-tabs__link:focus .fd-tabs__icon:before,.fd-tabs__link:focus .fd-tabs__tag:before{content:\"\";inset:0;outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--sapContent_FocusWidth);position:absolute}.fd-tabs__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0 .25rem;padding:0;position:relative}.fd-tabs__item:after,.fd-tabs__item:before{box-sizing:inherit;font-size:inherit}.fd-tabs__item.is-selected .fd-tabs__tag,.fd-tabs__item[aria-selected=true] .fd-tabs__tag{color:var(--fdIcon_Tab_Bar_Selection_Color)}.fd-tabs__item.is-selected .fd-tabs__icon,.fd-tabs__item[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item.is-selected .fd-tabs__icon:after,.fd-tabs__item.is-selected .fd-tabs__link:after,.fd-tabs__item.is-selected .fd-tabs__tag:after,.fd-tabs__item[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__item--error .fd-tabs__icon{border-color:var(--sapErrorColor);color:var(--sapErrorColor)}.fd-tabs__item--error .fd-tabs__link .fd-tabs__tag{color:var(--sapErrorColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon{background-color:var(--sapErrorColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon:after,.fd-tabs__item--error.is-selected .fd-tabs__link:after,.fd-tabs__item--error.is-selected .fd-tabs__tag:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapErrorColor)}.fd-tabs__item--warning .fd-tabs__icon{border-color:var(--sapWarningColor);color:var(--sapWarningColor)}.fd-tabs__item--warning .fd-tabs__link .fd-tabs__tag{color:var(--sapWarningColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon{background-color:var(--sapWarningColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon:after,.fd-tabs__item--warning.is-selected .fd-tabs__link:after,.fd-tabs__item--warning.is-selected .fd-tabs__tag:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapWarningColor)}.fd-tabs__item--success .fd-tabs__icon{border-color:var(--sapSuccessColor);color:var(--sapSuccessColor)}.fd-tabs__item--success .fd-tabs__link .fd-tabs__tag{color:var(--sapSuccessColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSuccessColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon:after,.fd-tabs__item--success.is-selected .fd-tabs__link:after,.fd-tabs__item--success.is-selected .fd-tabs__tag:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapSuccessColor)}.fd-tabs__item--information .fd-tabs__icon{border-color:var(--sapInformationColor);color:var(--sapInformationColor)}.fd-tabs__item--information .fd-tabs__link .fd-tabs__tag{color:var(--sapInformationColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon{background-color:var(--sapInformationColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon:after,.fd-tabs__item--information.is-selected .fd-tabs__link:after,.fd-tabs__item--information.is-selected .fd-tabs__tag:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapInformationColor)}.fd-tabs__item--neutral .fd-tabs__icon{border-color:var(--sapNeutralColor);color:var(--sapNeutralColor)}.fd-tabs__item--neutral .fd-tabs__link .fd-tabs__tag{color:var(--sapNeutralColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon{background-color:var(--sapNeutralColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon:after,.fd-tabs__item--neutral.is-selected .fd-tabs__link:after,.fd-tabs__item--neutral.is-selected .fd-tabs__tag:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapNeutralColor)}.fd-tabs__item:first-child{margin-left:0}.fd-tabs__item:first-child .fd-tabs__link{margin-left:.1875rem;padding-left:0}.fd-tabs__item:first-child .fd-tabs__link[dir=rtl],[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{margin-left:0;margin-right:.1875rem}.fd-tabs__item[dir=rtl]:first-child,[dir=rtl] .fd-tabs__item:first-child{margin-left:.25rem;margin-right:0}.fd-tabs__item[dir=rtl]:first-child .fd-tabs__link,[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{padding-left:.875rem;padding-right:0}.fd-tabs__icon{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;border:var(--fdIcon_Tab_Bar_Icon_Border_Weight) solid var(--fdIcon_Tab_Bar_Icon_Border_Color);border-radius:50%;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdIcon_Tab_Bar_Inactive_Tab_Icon_Color);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:var(--fdTabs_Icon_Selection_Height);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 .188rem;padding:0;position:relative;width:var(--fdTabs_Icon_Selection_Height)}.fd-tabs__icon:after,.fd-tabs__icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__icon [class*=sap-icon],.fd-tabs__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;font-size:var(--fdTabs_Icon_Size);line-height:1}.fd-tabs__icon:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__tag{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0;position:relative}.fd-tabs__tag:after,.fd-tabs__tag:before{box-sizing:inherit;font-size:inherit}.fd-tabs__tag:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__panel{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__panel:after,.fd-tabs__panel:before{box-sizing:inherit;font-size:inherit}.fd-tabs__panel[aria-expanded=false]{display:none}.fd-tabs__panel.is-expanded,.fd-tabs__panel[aria-expanded=true]{display:block}.fd-tabs__counter-header{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1.5rem;font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;padding:0 .5rem 0 0}.fd-tabs__counter-header:after,.fd-tabs__counter-header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-tabs__overflow:after,.fd-tabs__overflow:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow [class*=sap-icon],.fd-tabs__overflow[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;line-height:1}.fd-tabs__process-icon{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1;margin:0;padding:0 .5rem}.fd-tabs__process-icon:after,.fd-tabs__process-icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__process-icon:before{content:\"\\e0c7\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-tabs__label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;padding:0 0 0 .125rem}.fd-tabs__label:after,.fd-tabs__label:before{box-sizing:inherit;font-size:inherit}.fd-tabs__label:first-child{padding-bottom:.375rem}.fd-tabs__separator{-webkit-box-sizing:border-box;border:0;border-right:solid var(--sapGroup_TitleBorderColor);border-right-width:.0625rem;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2rem;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0 .25rem;padding:0}.fd-tabs__separator:after,.fd-tabs__separator:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__header:after,.fd-tabs__header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header .fd-tabs__label{max-width:4rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count,.fd-tabs--process .fd-tabs__count{font-size:var(--sapFontSmallSize)}.fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--icon-only .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{margin:0}.fd-tabs--icon-only .fd-tabs__link,.fd-tabs--process .fd-tabs__link{padding-bottom:1rem;padding-top:1rem}.fd-tabs--icon-only .fd-tabs__icon:after,.fd-tabs--process .fd-tabs__icon:after{bottom:-1.0625rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count{left:calc(100% + .1875rem);position:absolute;top:0}.fd-tabs--filter[dir=rtl] .fd-tabs__count,.fd-tabs--icon-only[dir=rtl] .fd-tabs__count,[dir=rtl] .fd-tabs--filter .fd-tabs__count,[dir=rtl] .fd-tabs--icon-only .fd-tabs__count{left:auto;right:calc(100% + .1875rem)}.fd-tabs--process .fd-tabs__item{margin:0 .25rem 0 0}.fd-tabs--process .fd-tabs__item,.fd-tabs--process .fd-tabs__link{align-items:center;display:flex}.fd-tabs--process .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--process .fd-tabs__icon{margin:0 .1875rem}.fd-tabs--process .fd-tabs__label{line-height:.875rem;max-width:7.5rem;overflow:hidden;white-space:nowrap}.fd-tabs--process[dir=rtl] .fd-tabs__item,[dir=rtl] .fd-tabs--process .fd-tabs__item{margin:0 0 0 .25rem}.fd-tabs--process[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--filter{align-items:center;display:flex}.fd-tabs--filter .fd-tabs__item{margin:0;padding:0 .25rem;width:5.375rem}.fd-tabs--filter .fd-tabs__item[dir=rtl],[dir=rtl] .fd-tabs--filter .fd-tabs__item{margin:0}.fd-tabs--filter .fd-tabs__item--header{width:auto}.fd-tabs--filter .fd-tabs__icon{margin-bottom:.375rem}.fd-tabs--filter .fd-tabs__icon:after{content:none}.fd-tabs--filter .fd-tabs__label{line-height:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-tabs--filter .fd-tabs__link{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:flex;flex-direction:column;height:5.5rem;justify-content:center;padding:.875rem .188rem .625rem;position:relative;text-align:center}.fd-tabs--filter .fd-tabs__link:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;bottom:0;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs--filter .fd-tabs__link.is-focus,.fd-tabs--filter .fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs--filter[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link{padding-left:.188rem;padding-right:.188rem}.fd-tabs--compact{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:1.875rem}.fd-tabs--compact .fd-tabs__label:first-child{padding-bottom:.25rem}.fd-tabs--compact.fd-tabs--filter .fd-tabs__link{height:4.75rem}.fd-tabs--s{padding:0 1rem}.fd-tabs--l,.fd-tabs--m{padding:0 2rem}.fd-tabs--xl,.fd-tabs--xxl{padding:0 3rem}.fd-tabs[dir=rtl] .fd-tabs__process-icon,[dir=rtl] .fd-tabs .fd-tabs__process-icon{transform:rotate(180deg)}.fd-tabs[dir=rtl] .fd-tabs__counter-header,[dir=rtl] .fd-tabs .fd-tabs__counter-header{padding-left:.5rem;padding-right:0}.fd-tabs[dir=rtl] .fd-tabs__overflow,[dir=rtl] .fd-tabs .fd-tabs__overflow{margin-left:0;margin-right:auto}.fd-tabs__process{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__process:after,.fd-tabs__process:before{box-sizing:inherit;font-size:inherit}.fd-tabs-custom{display:flex;flex-direction:column;height:100%}.fd-tabs-custom .is-disabled{pointer-events:none;opacity:.4}.fd-tabs{flex-grow:0;flex-wrap:nowrap}.fd-tabs__content{overflow-y:auto;flex-grow:1}.fd-tabs__item{flex-shrink:0}.fd-tabs__tag{white-space:nowrap}.fd-tabs__wrapper{flex-grow:1;display:flex;flex-wrap:wrap;align-items:center}.fd-tabs__wrapper--collapsible{overflow:hidden;flex-wrap:nowrap}.fd-tabs .fd-overflow-layout__items-container .fd-tabs__item:first-child{margin-left:.25rem}.fd-tabs .fd-overflow-layout__items-container .fd-tabs__item:first-child .fd-tabs__link{margin:0;padding:.875rem .75rem}.fd-tabs .fd-overflow-layout__items-container .fd-overflow-layout__item--first .fd-tabs__item{margin-left:0}.fd-tabs .fd-overflow-layout__items-container .fd-overflow-layout__item--first .fd-tabs__item .fd-tabs__link{margin-left:.1875rem;padding-left:0}\n"] }]
|
|
254
254
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.ContentDensityObserver }, { type: i2.DestroyedService }]; }, propDecorators: { size: [{
|
|
255
255
|
type: Input
|
|
256
256
|
}], mode: [{
|
|
@@ -4,10 +4,10 @@ import * as i0 from "@angular/core";
|
|
|
4
4
|
export class VerticalNavigationMainNavigationComponent {
|
|
5
5
|
}
|
|
6
6
|
VerticalNavigationMainNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: VerticalNavigationMainNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7
|
-
VerticalNavigationMainNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: VerticalNavigationMainNavigationComponent, selector: "fd-vertical-navigation-main-navigation", queries: [{ propertyName: "_list", first: true, predicate: ListComponent, descendants: true }], ngImport: i0, template: `<nav class="fd-vertical-nav__main-navigation"><ng-content></ng-content></nav>`, isInline: true, styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.27\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-vertical-nav{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-shadow:var(--sapContent_Shadow0);background-color:var(--sapList_AlternatingBackground);border:0;box-shadow:var(--sapContent_Shadow0);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:100%;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0;text-shadow:var(--fdVerticalNav_Text_Shadow);width:15rem}.fd-vertical-nav:after,.fd-vertical-nav:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator:after,.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator:after{background-color:var(--sapSelectedColor);border-radius:var(--sapField_BorderCornerRadius);color:var(--sapSelectedColor);content:\"\";display:inline-block;height:var(--fdVerticalNav_Item_Indicator_Height);margin-right:var(--fdVerticalNavigation_Indicator_Spacing);position:absolute;right:0;top:var(--fdVerticalNav_Item_Indicator_Top);width:.1875rem}.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator[dir=rtl]:after,[dir=rtl] .fd-vertical-nav .fd-list .fd-list__navigation-item-indicator:after{left:0;margin-left:var(--fdVerticalNavigation_Indicator_Spacing);margin-right:0;right:unset}.fd-vertical-nav .fd-list__navigation-item{-webkit-box-sizing:border-box;background:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.75rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0 1rem 0 .5rem;position:relative}.fd-vertical-nav .fd-list__navigation-item:after,.fd-vertical-nav .fd-list__navigation-item:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list__navigation-item.is-focus,.fd-vertical-nav .fd-list__navigation-item:focus{outline-color:var(--sapContent_FocusColor);outline-offset:-.1875rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-vertical-nav .fd-list__navigation-item[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item{padding-left:1rem;padding-right:.5rem}.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated,.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-text{color:var(--sapSelectedColor)}.fd-vertical-nav .fd-list__navigation-item.is-focus,.fd-vertical-nav .fd-list__navigation-item:focus{outline-offset:var(--fdVerticalNav_Item_Focus_Outline_Offset);z-index:5}.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated.is-focus,.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated:focus{outline-offset:var(--fdVerticalNav_Item_Indicated_Outline_Offset);z-index:5}.fd-vertical-nav .fd-list__navigation-item .fd-list{display:none}.fd-vertical-nav .fd-list__navigation-item--expandable{margin:var(--fdVerticalNav_Item_Expandable_Margin)}.fd-vertical-nav .fd-list__navigation-item.is-expanded{-webkit-box-shadow:var(--fdVerticalNav_Item_Expanded_Box_Shadow);border-radius:var(--fdVerticalNav_Item_Expanded_Border_Radius);box-shadow:var(--fdVerticalNav_Item_Expanded_Box_Shadow);height:100%;overflow:hidden;padding-left:var(--fdVerticalNav_Item_Expanded_Padding_Left)}.fd-vertical-nav .fd-list__navigation-item.is-expanded,.fd-vertical-nav .fd-list__navigation-item.is-expanded[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded{margin-left:var(--fdVerticalNav_Item_Expanded_Margin);margin-right:var(--fdVerticalNav_Item_Expanded_Margin)}.fd-vertical-nav .fd-list__navigation-item.is-expanded[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded{padding-left:0;padding-right:var(--fdVerticalNav_Item_Expanded_Padding_Left)}.fd-vertical-nav .fd-list__navigation-item.is-expanded.is-hover .fd-list,.fd-vertical-nav .fd-list__navigation-item.is-expanded:hover .fd-list{background-color:var(--sapList_AlternatingBackground)}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item{border-bottom:none;width:100%}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated,.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-text{color:var(--sapSelectedColor)}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator:after{margin-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator:after[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator:after{margin-left:0;margin-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdVerticalNav_Item_Child_Text_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:2.75rem;margin:0;margin-left:var(--fdVerticalNav_Item_Text_No_Icon_Margin);padding:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text:after,.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text{margin-left:0;margin-right:var(--fdVerticalNav_Item_Text_No_Icon_Margin)}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text{padding-left:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text{padding-left:0;padding-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon{padding-right:.5rem}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon{padding-left:.5rem;padding-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list{display:block;margin-left:var(--fdVerticalNav_Expanded_Item_Margin_Left);margin-right:-1rem;width:auto}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list{margin-left:0;margin-right:var(--fdVerticalNav_Expanded_Item_Margin_Left)}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator:after{margin-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator:after[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator:after{margin-left:0;margin-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded>.fd-list__navigation-item-indicator:after{display:none}.fd-vertical-nav .fd-list__navigation-item .fd-list__navigation-item--indicated .fd-list__navigation-item-text{color:var(--sapSelectedColor)}.fd-vertical-nav .fd-list__navigation-item--condensed{padding-left:0;padding-right:0;position:relative;width:3.25rem}.fd-vertical-nav .fd-list__navigation-item--condensed[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed{padding-left:0;padding-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-popover--first-level,.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-popover--second-level{background:var(--sapList_AlternatingBackground);display:none}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-text{display:none}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-icon{height:2.75rem;line-height:2.75rem;margin-left:.5rem;margin-right:.5rem}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-icon[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-icon{margin-left:.5rem;margin-right:.5rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded{height:2.75rem;margin-left:0;margin-right:0;overflow:visible;visibility:hidden}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item[dir=rtl],.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded,[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item{margin-left:0;margin-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon{margin-left:0;padding-left:.875rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon{margin-left:.5rem;margin-right:0;padding-right:.875rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level{display:block;overflow:hidden}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list{border-top-left-radius:0;border-top-right-radius:0;display:block;margin:0 auto;width:100%}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text{margin-left:0;padding-left:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text[dir=rtl],.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text,[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text{margin-left:0;margin-right:0;padding-left:0;padding-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level{border-bottom-right-radius:0;height:100%;left:.325rem;top:0;width:14.325rem;z-index:3}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level{border-bottom-left-radius:0;border-bottom-right-radius:var(--sapElement_BorderCornerRadius);left:unset;right:.325rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level{border-top-left-radius:0;border-top-right-radius:0;left:3.25rem;width:11.4rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level{left:auto;right:3.25rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text{margin-left:1rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text{margin-left:0;margin-right:1rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator:after{display:inline-block;margin-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator:after[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator:after{margin-left:0;margin-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-text{display:inline}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-indicator:after{display:none}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow{width:100%}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow.is-focus,.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:focus{z-index:5}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow.is-focus:after,.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:focus:after{border-radius:0}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:before{border-color:transparent var(--sapContent_NonInteractiveIconColor) transparent transparent;border-style:solid;border-width:.25rem .25rem 0 0;bottom:0;content:\"\";display:inline-block;margin-bottom:.5625rem;margin-right:.75rem;min-height:0;min-width:0;position:absolute;right:0}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:before[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:before{left:0;margin-left:.75rem;margin-right:0;right:unset}.fd-vertical-nav .fd-list__navigation-item-icon{color:var(--fdVerticalNav_Icon_Color);font-family:SAP-icons;font-size:1rem;height:2.75rem;line-height:2.75rem;text-align:center;vertical-align:top;width:2.25rem}.fd-vertical-nav .fd-list__navigation-item-text{color:var(--sapList_TextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontLargeSize);line-height:2.75rem;max-width:9rem;overflow:hidden;padding-left:.25rem;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.fd-vertical-nav .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item-text{padding-left:0;padding-right:.25rem}.fd-vertical-nav .fd-list__navigation-item-arrow{-webkit-box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;appearance:none;background-color:transparent;background-image:none;border:0;border-radius:var(--sapButton_BorderCornerRadius);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-family:SAP-icons;font-size:var(--sapFontSize);font-size:1rem;font-weight:400;height:2.75rem;line-height:var(--sapContent_LineHeight);line-height:2.75rem;margin:0;outline:0;padding:0;position:absolute;right:0;text-decoration:none;user-select:none;vertical-align:middle;white-space:nowrap;width:2.75rem}.fd-vertical-nav .fd-list__navigation-item-arrow:after,.fd-vertical-nav .fd-list__navigation-item-arrow:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list__navigation-item-arrow::-moz-focus-inner{border:0}.fd-vertical-nav .fd-list__navigation-item-arrow[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item-arrow{-webkit-transform:scaleX(-1);left:0;right:auto;transform:scaleX(-1)}.fd-vertical-nav .fd-list__navigation-item-arrow.is-focus,.fd-vertical-nav .fd-list__navigation-item-arrow:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--fdVerticalNav_Item_Indicated_Outline_Offset);z-index:5}.fd-vertical-nav .fd-list__navigation-item--condensed.is-hover,.fd-vertical-nav .fd-list__navigation-item--condensed:hover,.fd-vertical-nav .fd-list__navigation-item.is-hover,.fd-vertical-nav .fd-list__navigation-item:hover{background:var(--sapList_Hover_Background)}.fd-vertical-nav .fd-list__navigation-item--condensed.is-hover .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item--condensed:hover .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item.is-hover .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item:hover .fd-list__navigation-item-icon{color:var(--sapList_TextColor)}.fd-vertical-nav .fd-list__navigation-item--condensed.is-pressed,.fd-vertical-nav .fd-list__navigation-item--condensed[aria-pressed=true],.fd-vertical-nav .fd-list__navigation-item.is-pressed,.fd-vertical-nav .fd-list__navigation-item[aria-pressed=true]{background:var(--sapList_Active_Background);color:var(--sapContent_ContrastTextColor)}.fd-vertical-nav .fd-list__navigation-item--condensed.is-pressed .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item--condensed.is-pressed .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item--condensed[aria-pressed=true] .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item--condensed[aria-pressed=true] .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item.is-pressed .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item.is-pressed .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item[aria-pressed=true] .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item[aria-pressed=true] .fd-list__navigation-item-icon{color:var(--sapContent_ContrastIconColor)}.fd-vertical-nav .fd-list__navigation-item--condensed:not(:last-child),.fd-vertical-nav .fd-list__navigation-item:not(:last-child){border-bottom:var(--fdVerticalNav_Item_Border_Top_Bottom)}.fd-vertical-nav .fd-list__navigation-item-icon+.fd-list__navigation-item-text+.fd-list__navigation-item-arrow+.fd-list .fd-list__navigation-item-text{margin-left:var(--fdVerticalNav_Item_Text_Spacing)}.fd-vertical-nav .fd-list__navigation-item-icon+.fd-list__navigation-item-text+.fd-list__navigation-item-arrow+.fd-list .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item-icon+.fd-list__navigation-item-text+.fd-list__navigation-item-arrow+.fd-list .fd-list__navigation-item-text{margin-left:0;margin-right:var(--fdVerticalNav_Item_Text_Spacing)}.fd-vertical-nav--overflow{overflow-y:scroll}.fd-vertical-nav--condensed{width:3.25rem}.fd-vertical-nav--condensed .fd-vertical-nav__utility-section .fd-list__navigation-item-text{display:none}.fd-vertical-nav--condensed .fd-vertical-nav__utility-section:before{width:calc(100% - 1rem)}.fd-vertical-nav__main-navigation .fd-list__navigation-item--condensed:first-child,.fd-vertical-nav__main-navigation .fd-list__navigation-item:first-child{border-top:var(--fdVerticalNav_Item_Border_Top_Bottom)}.fd-vertical-nav__main-navigation,.fd-vertical-nav__utility-section{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-vertical-nav__main-navigation:after,.fd-vertical-nav__main-navigation:before,.fd-vertical-nav__utility-section:after,.fd-vertical-nav__utility-section:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav__utility-section{margin-top:auto}.fd-vertical-nav__utility-section:before{background-color:var(--sapAccentColor6);content:\" \";display:block;height:.0625rem;margin:.25rem auto;width:calc(100% - 2rem)}.fd-vertical-nav .fd-vertical-nav__group-header{background:var(--sapList_AlternatingBackground)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7
|
+
VerticalNavigationMainNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: VerticalNavigationMainNavigationComponent, selector: "fd-vertical-navigation-main-navigation", queries: [{ propertyName: "_list", first: true, predicate: ListComponent, descendants: true }], ngImport: i0, template: `<nav class="fd-vertical-nav__main-navigation"><ng-content></ng-content></nav>`, isInline: true, styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.27\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-vertical-nav{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-shadow:var(--sapContent_Shadow0);background-color:var(--sapList_AlternatingBackground);border:0;box-shadow:var(--sapContent_Shadow0);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:100%;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0;text-shadow:var(--fdVerticalNav_Text_Shadow);width:15rem}.fd-vertical-nav:after,.fd-vertical-nav:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator:after,.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator:after{background-color:var(--sapSelectedColor);border-radius:var(--sapField_BorderCornerRadius);color:var(--sapSelectedColor);content:\"\";display:inline-block;height:var(--fdVerticalNav_Item_Indicator_Height);margin-right:var(--fdVerticalNavigation_Indicator_Spacing);position:absolute;right:0;top:var(--fdVerticalNav_Item_Indicator_Top);width:.1875rem}.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator[dir=rtl]:after,[dir=rtl] .fd-vertical-nav .fd-list .fd-list__navigation-item-indicator:after{left:0;margin-left:var(--fdVerticalNavigation_Indicator_Spacing);margin-right:0;right:unset}.fd-vertical-nav .fd-list__navigation-item{-webkit-box-sizing:border-box;background:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.75rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0 1rem 0 .5rem;position:relative}.fd-vertical-nav .fd-list__navigation-item:after,.fd-vertical-nav .fd-list__navigation-item:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list__navigation-item.is-focus,.fd-vertical-nav .fd-list__navigation-item:focus{outline-color:var(--sapContent_FocusColor);outline-offset:-.1875rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-vertical-nav .fd-list__navigation-item[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item{padding-left:1rem;padding-right:.5rem}.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated,.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-text{color:var(--sapSelectedColor)}.fd-vertical-nav .fd-list__navigation-item.is-focus,.fd-vertical-nav .fd-list__navigation-item:focus{outline-offset:var(--fdVerticalNav_Item_Focus_Outline_Offset);z-index:5}.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated.is-focus,.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated:focus{outline-offset:var(--fdVerticalNav_Item_Indicated_Outline_Offset);z-index:5}.fd-vertical-nav .fd-list__navigation-item .fd-list{display:none}.fd-vertical-nav .fd-list__navigation-item--expandable{margin:var(--fdVerticalNav_Item_Expandable_Margin)}.fd-vertical-nav .fd-list__navigation-item.is-expanded{-webkit-box-shadow:var(--fdVerticalNav_Item_Expanded_Box_Shadow);border-radius:var(--fdVerticalNav_Item_Expanded_Border_Radius);box-shadow:var(--fdVerticalNav_Item_Expanded_Box_Shadow);height:100%;overflow:hidden;padding-left:var(--fdVerticalNav_Item_Expanded_Padding_Left)}.fd-vertical-nav .fd-list__navigation-item.is-expanded,.fd-vertical-nav .fd-list__navigation-item.is-expanded[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded{margin-left:var(--fdVerticalNav_Item_Expanded_Margin);margin-right:var(--fdVerticalNav_Item_Expanded_Margin)}.fd-vertical-nav .fd-list__navigation-item.is-expanded[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded{padding-left:0;padding-right:var(--fdVerticalNav_Item_Expanded_Padding_Left)}.fd-vertical-nav .fd-list__navigation-item.is-expanded.is-hover .fd-list,.fd-vertical-nav .fd-list__navigation-item.is-expanded:hover .fd-list{background-color:var(--sapList_AlternatingBackground)}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item{border-bottom:none;width:100%}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated,.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-text{color:var(--sapSelectedColor)}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator:after{margin-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator:after[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator:after{margin-left:0;margin-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdVerticalNav_Item_Child_Text_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:2.75rem;margin:0;margin-left:var(--fdVerticalNav_Item_Text_No_Icon_Margin);padding:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text:after,.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text{margin-left:0;margin-right:var(--fdVerticalNav_Item_Text_No_Icon_Margin)}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text{padding-left:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text{padding-left:0;padding-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon{padding-right:.5rem}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon{padding-left:.5rem;padding-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list{display:block;margin-left:var(--fdVerticalNav_Expanded_Item_Margin_Left);margin-right:-1rem;width:auto}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list{margin-left:0;margin-right:var(--fdVerticalNav_Expanded_Item_Margin_Left)}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator:after{margin-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator:after[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator:after{margin-left:0;margin-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded>.fd-list__navigation-item-indicator:after{display:none}.fd-vertical-nav .fd-list__navigation-item .fd-list__navigation-item--indicated .fd-list__navigation-item-text{color:var(--sapSelectedColor)}.fd-vertical-nav .fd-list__navigation-item--condensed{padding-left:0;padding-right:0;position:relative;width:3.25rem}.fd-vertical-nav .fd-list__navigation-item--condensed[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed{padding-left:0;padding-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-popover--first-level,.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-popover--second-level{background:var(--sapList_AlternatingBackground);display:none}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-text{display:none}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-icon{height:2.75rem;line-height:2.75rem;margin-left:.5rem;margin-right:.5rem}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-icon[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-icon{margin-left:.5rem;margin-right:.5rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded{height:2.75rem;margin-left:0;margin-right:0;overflow:visible;visibility:hidden}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item[dir=rtl],.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded,[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item{margin-left:0;margin-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon{margin-left:0;padding-left:.875rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon{margin-left:.5rem;margin-right:0;padding-right:.875rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level{display:block;overflow:hidden}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list{border-top-left-radius:0;border-top-right-radius:0;display:block;margin:0 auto;width:100%}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text{margin-left:0;padding-left:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text[dir=rtl],.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text,[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text{margin-left:0;margin-right:0;padding-left:0;padding-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level{border-bottom-right-radius:0;height:100%;left:.325rem;top:0;width:14.325rem;z-index:3}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level{border-bottom-left-radius:0;border-bottom-right-radius:var(--sapElement_BorderCornerRadius);left:unset;right:.325rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level{border-top-left-radius:0;border-top-right-radius:0;left:3.25rem;width:11.4rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level{left:auto;right:3.25rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text{margin-left:1rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text{margin-left:0;margin-right:1rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator:after{display:inline-block;margin-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator:after[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator:after{margin-left:0;margin-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-text{display:inline}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-indicator:after{display:none}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow{width:100%}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow.is-focus,.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:focus{z-index:5}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow.is-focus:after,.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:focus:after{border-radius:0}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:before{border-color:transparent var(--sapContent_NonInteractiveIconColor) transparent transparent;border-style:solid;border-width:.25rem .25rem 0 0;bottom:0;content:\"\";display:inline-block;margin-bottom:.5625rem;margin-right:.75rem;min-height:0;min-width:0;position:absolute;right:0}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:before[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:before{left:0;margin-left:.75rem;margin-right:0;right:unset}.fd-vertical-nav .fd-list__navigation-item-icon{color:var(--fdVerticalNav_Icon_Color);font-family:SAP-icons;font-size:1rem;height:2.75rem;line-height:2.75rem;text-align:center;vertical-align:top;width:2.25rem}.fd-vertical-nav .fd-list__navigation-item-text{color:var(--sapList_TextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontLargeSize);line-height:2.75rem;max-width:9rem;overflow:hidden;padding-left:.25rem;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.fd-vertical-nav .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item-text{padding-left:0;padding-right:.25rem}.fd-vertical-nav .fd-list__navigation-item-arrow{-webkit-box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;appearance:none;background-color:transparent;background-image:none;border:0;border-radius:var(--sapButton_BorderCornerRadius);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-family:SAP-icons;font-size:var(--sapFontSize);font-size:1rem;font-weight:400;height:2.75rem;line-height:var(--sapContent_LineHeight);line-height:2.75rem;margin:0;outline:0;padding:0;position:absolute;right:0;text-decoration:none;user-select:none;vertical-align:middle;white-space:nowrap;width:2.75rem}.fd-vertical-nav .fd-list__navigation-item-arrow:after,.fd-vertical-nav .fd-list__navigation-item-arrow:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list__navigation-item-arrow::-moz-focus-inner{border:0}.fd-vertical-nav .fd-list__navigation-item-arrow[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item-arrow{-webkit-transform:scaleX(-1);left:0;right:auto;transform:scaleX(-1)}.fd-vertical-nav .fd-list__navigation-item-arrow.is-focus,.fd-vertical-nav .fd-list__navigation-item-arrow:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--fdVerticalNav_Item_Indicated_Outline_Offset);z-index:5}.fd-vertical-nav .fd-list__navigation-item--condensed.is-hover,.fd-vertical-nav .fd-list__navigation-item--condensed:hover,.fd-vertical-nav .fd-list__navigation-item.is-hover,.fd-vertical-nav .fd-list__navigation-item:hover{background:var(--sapList_Hover_Background)}.fd-vertical-nav .fd-list__navigation-item--condensed.is-hover .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item--condensed:hover .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item.is-hover .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item:hover .fd-list__navigation-item-icon{color:var(--sapList_TextColor)}.fd-vertical-nav .fd-list__navigation-item--condensed.is-pressed,.fd-vertical-nav .fd-list__navigation-item--condensed[aria-pressed=true],.fd-vertical-nav .fd-list__navigation-item.is-pressed,.fd-vertical-nav .fd-list__navigation-item[aria-pressed=true]{background:var(--sapList_Active_Background);color:var(--sapContent_ContrastTextColor)}.fd-vertical-nav .fd-list__navigation-item--condensed.is-pressed .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item--condensed.is-pressed .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item--condensed[aria-pressed=true] .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item--condensed[aria-pressed=true] .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item.is-pressed .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item.is-pressed .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item[aria-pressed=true] .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item[aria-pressed=true] .fd-list__navigation-item-icon{color:var(--sapContent_ContrastIconColor)}.fd-vertical-nav .fd-list__navigation-item--condensed:not(:last-child),.fd-vertical-nav .fd-list__navigation-item:not(:last-child){border-bottom:var(--fdVerticalNav_Item_Border_Top_Bottom)}.fd-vertical-nav .fd-list__navigation-item-icon+.fd-list__navigation-item-text+.fd-list__navigation-item-arrow+.fd-list .fd-list__navigation-item-text{margin-left:var(--fdVerticalNav_Item_Text_Spacing)}.fd-vertical-nav .fd-list__navigation-item-icon+.fd-list__navigation-item-text+.fd-list__navigation-item-arrow+.fd-list .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item-icon+.fd-list__navigation-item-text+.fd-list__navigation-item-arrow+.fd-list .fd-list__navigation-item-text{margin-left:0;margin-right:var(--fdVerticalNav_Item_Text_Spacing)}.fd-vertical-nav--overflow{overflow-y:scroll}.fd-vertical-nav--condensed{width:3.25rem}.fd-vertical-nav--condensed .fd-vertical-nav__utility-section .fd-list__navigation-item-text{display:none}.fd-vertical-nav--condensed .fd-vertical-nav__utility-section:before{width:calc(100% - 1rem)}.fd-vertical-nav__main-navigation .fd-list__navigation-item--condensed:first-child,.fd-vertical-nav__main-navigation .fd-list__navigation-item:first-child{border-top:var(--fdVerticalNav_Item_Border_Top_Bottom)}.fd-vertical-nav__main-navigation,.fd-vertical-nav__utility-section{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-vertical-nav__main-navigation:after,.fd-vertical-nav__main-navigation:before,.fd-vertical-nav__utility-section:after,.fd-vertical-nav__utility-section:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav__utility-section{margin-top:auto}.fd-vertical-nav__utility-section:before{background-color:var(--sapAccentColor6);content:\" \";display:block;height:.0625rem;margin:.25rem auto;width:calc(100% - 2rem)}.fd-vertical-nav .fd-vertical-nav__group-header{background:var(--sapList_AlternatingBackground)}.fd-vertical-nav .fd-popover__body{--fdPopover_Offset: 100%;max-width:unset;max-height:unset}.fd-vertical-nav .fd-popover__body.fd-list__navigation-item-popover--first-level{z-index:1001}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8
8
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: VerticalNavigationMainNavigationComponent, decorators: [{
|
|
9
9
|
type: Component,
|
|
10
|
-
args: [{ selector: 'fd-vertical-navigation-main-navigation', template: `<nav class="fd-vertical-nav__main-navigation"><ng-content></ng-content></nav>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.27\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-vertical-nav{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-shadow:var(--sapContent_Shadow0);background-color:var(--sapList_AlternatingBackground);border:0;box-shadow:var(--sapContent_Shadow0);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:100%;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0;text-shadow:var(--fdVerticalNav_Text_Shadow);width:15rem}.fd-vertical-nav:after,.fd-vertical-nav:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator:after,.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator:after{background-color:var(--sapSelectedColor);border-radius:var(--sapField_BorderCornerRadius);color:var(--sapSelectedColor);content:\"\";display:inline-block;height:var(--fdVerticalNav_Item_Indicator_Height);margin-right:var(--fdVerticalNavigation_Indicator_Spacing);position:absolute;right:0;top:var(--fdVerticalNav_Item_Indicator_Top);width:.1875rem}.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator[dir=rtl]:after,[dir=rtl] .fd-vertical-nav .fd-list .fd-list__navigation-item-indicator:after{left:0;margin-left:var(--fdVerticalNavigation_Indicator_Spacing);margin-right:0;right:unset}.fd-vertical-nav .fd-list__navigation-item{-webkit-box-sizing:border-box;background:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.75rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0 1rem 0 .5rem;position:relative}.fd-vertical-nav .fd-list__navigation-item:after,.fd-vertical-nav .fd-list__navigation-item:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list__navigation-item.is-focus,.fd-vertical-nav .fd-list__navigation-item:focus{outline-color:var(--sapContent_FocusColor);outline-offset:-.1875rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-vertical-nav .fd-list__navigation-item[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item{padding-left:1rem;padding-right:.5rem}.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated,.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-text{color:var(--sapSelectedColor)}.fd-vertical-nav .fd-list__navigation-item.is-focus,.fd-vertical-nav .fd-list__navigation-item:focus{outline-offset:var(--fdVerticalNav_Item_Focus_Outline_Offset);z-index:5}.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated.is-focus,.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated:focus{outline-offset:var(--fdVerticalNav_Item_Indicated_Outline_Offset);z-index:5}.fd-vertical-nav .fd-list__navigation-item .fd-list{display:none}.fd-vertical-nav .fd-list__navigation-item--expandable{margin:var(--fdVerticalNav_Item_Expandable_Margin)}.fd-vertical-nav .fd-list__navigation-item.is-expanded{-webkit-box-shadow:var(--fdVerticalNav_Item_Expanded_Box_Shadow);border-radius:var(--fdVerticalNav_Item_Expanded_Border_Radius);box-shadow:var(--fdVerticalNav_Item_Expanded_Box_Shadow);height:100%;overflow:hidden;padding-left:var(--fdVerticalNav_Item_Expanded_Padding_Left)}.fd-vertical-nav .fd-list__navigation-item.is-expanded,.fd-vertical-nav .fd-list__navigation-item.is-expanded[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded{margin-left:var(--fdVerticalNav_Item_Expanded_Margin);margin-right:var(--fdVerticalNav_Item_Expanded_Margin)}.fd-vertical-nav .fd-list__navigation-item.is-expanded[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded{padding-left:0;padding-right:var(--fdVerticalNav_Item_Expanded_Padding_Left)}.fd-vertical-nav .fd-list__navigation-item.is-expanded.is-hover .fd-list,.fd-vertical-nav .fd-list__navigation-item.is-expanded:hover .fd-list{background-color:var(--sapList_AlternatingBackground)}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item{border-bottom:none;width:100%}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated,.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-text{color:var(--sapSelectedColor)}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator:after{margin-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator:after[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator:after{margin-left:0;margin-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdVerticalNav_Item_Child_Text_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:2.75rem;margin:0;margin-left:var(--fdVerticalNav_Item_Text_No_Icon_Margin);padding:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text:after,.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text{margin-left:0;margin-right:var(--fdVerticalNav_Item_Text_No_Icon_Margin)}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text{padding-left:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text{padding-left:0;padding-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon{padding-right:.5rem}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon{padding-left:.5rem;padding-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list{display:block;margin-left:var(--fdVerticalNav_Expanded_Item_Margin_Left);margin-right:-1rem;width:auto}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list{margin-left:0;margin-right:var(--fdVerticalNav_Expanded_Item_Margin_Left)}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator:after{margin-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator:after[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator:after{margin-left:0;margin-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded>.fd-list__navigation-item-indicator:after{display:none}.fd-vertical-nav .fd-list__navigation-item .fd-list__navigation-item--indicated .fd-list__navigation-item-text{color:var(--sapSelectedColor)}.fd-vertical-nav .fd-list__navigation-item--condensed{padding-left:0;padding-right:0;position:relative;width:3.25rem}.fd-vertical-nav .fd-list__navigation-item--condensed[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed{padding-left:0;padding-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-popover--first-level,.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-popover--second-level{background:var(--sapList_AlternatingBackground);display:none}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-text{display:none}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-icon{height:2.75rem;line-height:2.75rem;margin-left:.5rem;margin-right:.5rem}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-icon[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-icon{margin-left:.5rem;margin-right:.5rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded{height:2.75rem;margin-left:0;margin-right:0;overflow:visible;visibility:hidden}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item[dir=rtl],.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded,[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item{margin-left:0;margin-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon{margin-left:0;padding-left:.875rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon{margin-left:.5rem;margin-right:0;padding-right:.875rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level{display:block;overflow:hidden}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list{border-top-left-radius:0;border-top-right-radius:0;display:block;margin:0 auto;width:100%}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text{margin-left:0;padding-left:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text[dir=rtl],.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text,[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text{margin-left:0;margin-right:0;padding-left:0;padding-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level{border-bottom-right-radius:0;height:100%;left:.325rem;top:0;width:14.325rem;z-index:3}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level{border-bottom-left-radius:0;border-bottom-right-radius:var(--sapElement_BorderCornerRadius);left:unset;right:.325rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level{border-top-left-radius:0;border-top-right-radius:0;left:3.25rem;width:11.4rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level{left:auto;right:3.25rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text{margin-left:1rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text{margin-left:0;margin-right:1rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator:after{display:inline-block;margin-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator:after[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator:after{margin-left:0;margin-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-text{display:inline}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-indicator:after{display:none}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow{width:100%}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow.is-focus,.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:focus{z-index:5}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow.is-focus:after,.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:focus:after{border-radius:0}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:before{border-color:transparent var(--sapContent_NonInteractiveIconColor) transparent transparent;border-style:solid;border-width:.25rem .25rem 0 0;bottom:0;content:\"\";display:inline-block;margin-bottom:.5625rem;margin-right:.75rem;min-height:0;min-width:0;position:absolute;right:0}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:before[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:before{left:0;margin-left:.75rem;margin-right:0;right:unset}.fd-vertical-nav .fd-list__navigation-item-icon{color:var(--fdVerticalNav_Icon_Color);font-family:SAP-icons;font-size:1rem;height:2.75rem;line-height:2.75rem;text-align:center;vertical-align:top;width:2.25rem}.fd-vertical-nav .fd-list__navigation-item-text{color:var(--sapList_TextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontLargeSize);line-height:2.75rem;max-width:9rem;overflow:hidden;padding-left:.25rem;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.fd-vertical-nav .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item-text{padding-left:0;padding-right:.25rem}.fd-vertical-nav .fd-list__navigation-item-arrow{-webkit-box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;appearance:none;background-color:transparent;background-image:none;border:0;border-radius:var(--sapButton_BorderCornerRadius);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-family:SAP-icons;font-size:var(--sapFontSize);font-size:1rem;font-weight:400;height:2.75rem;line-height:var(--sapContent_LineHeight);line-height:2.75rem;margin:0;outline:0;padding:0;position:absolute;right:0;text-decoration:none;user-select:none;vertical-align:middle;white-space:nowrap;width:2.75rem}.fd-vertical-nav .fd-list__navigation-item-arrow:after,.fd-vertical-nav .fd-list__navigation-item-arrow:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list__navigation-item-arrow::-moz-focus-inner{border:0}.fd-vertical-nav .fd-list__navigation-item-arrow[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item-arrow{-webkit-transform:scaleX(-1);left:0;right:auto;transform:scaleX(-1)}.fd-vertical-nav .fd-list__navigation-item-arrow.is-focus,.fd-vertical-nav .fd-list__navigation-item-arrow:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--fdVerticalNav_Item_Indicated_Outline_Offset);z-index:5}.fd-vertical-nav .fd-list__navigation-item--condensed.is-hover,.fd-vertical-nav .fd-list__navigation-item--condensed:hover,.fd-vertical-nav .fd-list__navigation-item.is-hover,.fd-vertical-nav .fd-list__navigation-item:hover{background:var(--sapList_Hover_Background)}.fd-vertical-nav .fd-list__navigation-item--condensed.is-hover .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item--condensed:hover .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item.is-hover .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item:hover .fd-list__navigation-item-icon{color:var(--sapList_TextColor)}.fd-vertical-nav .fd-list__navigation-item--condensed.is-pressed,.fd-vertical-nav .fd-list__navigation-item--condensed[aria-pressed=true],.fd-vertical-nav .fd-list__navigation-item.is-pressed,.fd-vertical-nav .fd-list__navigation-item[aria-pressed=true]{background:var(--sapList_Active_Background);color:var(--sapContent_ContrastTextColor)}.fd-vertical-nav .fd-list__navigation-item--condensed.is-pressed .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item--condensed.is-pressed .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item--condensed[aria-pressed=true] .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item--condensed[aria-pressed=true] .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item.is-pressed .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item.is-pressed .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item[aria-pressed=true] .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item[aria-pressed=true] .fd-list__navigation-item-icon{color:var(--sapContent_ContrastIconColor)}.fd-vertical-nav .fd-list__navigation-item--condensed:not(:last-child),.fd-vertical-nav .fd-list__navigation-item:not(:last-child){border-bottom:var(--fdVerticalNav_Item_Border_Top_Bottom)}.fd-vertical-nav .fd-list__navigation-item-icon+.fd-list__navigation-item-text+.fd-list__navigation-item-arrow+.fd-list .fd-list__navigation-item-text{margin-left:var(--fdVerticalNav_Item_Text_Spacing)}.fd-vertical-nav .fd-list__navigation-item-icon+.fd-list__navigation-item-text+.fd-list__navigation-item-arrow+.fd-list .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item-icon+.fd-list__navigation-item-text+.fd-list__navigation-item-arrow+.fd-list .fd-list__navigation-item-text{margin-left:0;margin-right:var(--fdVerticalNav_Item_Text_Spacing)}.fd-vertical-nav--overflow{overflow-y:scroll}.fd-vertical-nav--condensed{width:3.25rem}.fd-vertical-nav--condensed .fd-vertical-nav__utility-section .fd-list__navigation-item-text{display:none}.fd-vertical-nav--condensed .fd-vertical-nav__utility-section:before{width:calc(100% - 1rem)}.fd-vertical-nav__main-navigation .fd-list__navigation-item--condensed:first-child,.fd-vertical-nav__main-navigation .fd-list__navigation-item:first-child{border-top:var(--fdVerticalNav_Item_Border_Top_Bottom)}.fd-vertical-nav__main-navigation,.fd-vertical-nav__utility-section{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-vertical-nav__main-navigation:after,.fd-vertical-nav__main-navigation:before,.fd-vertical-nav__utility-section:after,.fd-vertical-nav__utility-section:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav__utility-section{margin-top:auto}.fd-vertical-nav__utility-section:before{background-color:var(--sapAccentColor6);content:\" \";display:block;height:.0625rem;margin:.25rem auto;width:calc(100% - 2rem)}.fd-vertical-nav .fd-vertical-nav__group-header{background:var(--sapList_AlternatingBackground)}\n"] }]
|
|
10
|
+
args: [{ selector: 'fd-vertical-navigation-main-navigation', template: `<nav class="fd-vertical-nav__main-navigation"><ng-content></ng-content></nav>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.27\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-vertical-nav{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-shadow:var(--sapContent_Shadow0);background-color:var(--sapList_AlternatingBackground);border:0;box-shadow:var(--sapContent_Shadow0);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:100%;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0;text-shadow:var(--fdVerticalNav_Text_Shadow);width:15rem}.fd-vertical-nav:after,.fd-vertical-nav:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator:after,.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator:after{background-color:var(--sapSelectedColor);border-radius:var(--sapField_BorderCornerRadius);color:var(--sapSelectedColor);content:\"\";display:inline-block;height:var(--fdVerticalNav_Item_Indicator_Height);margin-right:var(--fdVerticalNavigation_Indicator_Spacing);position:absolute;right:0;top:var(--fdVerticalNav_Item_Indicator_Top);width:.1875rem}.fd-vertical-nav .fd-list .fd-list__navigation-item-indicator[dir=rtl]:after,[dir=rtl] .fd-vertical-nav .fd-list .fd-list__navigation-item-indicator:after{left:0;margin-left:var(--fdVerticalNavigation_Indicator_Spacing);margin-right:0;right:unset}.fd-vertical-nav .fd-list__navigation-item{-webkit-box-sizing:border-box;background:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.75rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0 1rem 0 .5rem;position:relative}.fd-vertical-nav .fd-list__navigation-item:after,.fd-vertical-nav .fd-list__navigation-item:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list__navigation-item.is-focus,.fd-vertical-nav .fd-list__navigation-item:focus{outline-color:var(--sapContent_FocusColor);outline-offset:-.1875rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-vertical-nav .fd-list__navigation-item[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item{padding-left:1rem;padding-right:.5rem}.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated,.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-text{color:var(--sapSelectedColor)}.fd-vertical-nav .fd-list__navigation-item.is-focus,.fd-vertical-nav .fd-list__navigation-item:focus{outline-offset:var(--fdVerticalNav_Item_Focus_Outline_Offset);z-index:5}.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated.is-focus,.fd-vertical-nav .fd-list__navigation-item.fd-list__navigation-item--indicated:focus{outline-offset:var(--fdVerticalNav_Item_Indicated_Outline_Offset);z-index:5}.fd-vertical-nav .fd-list__navigation-item .fd-list{display:none}.fd-vertical-nav .fd-list__navigation-item--expandable{margin:var(--fdVerticalNav_Item_Expandable_Margin)}.fd-vertical-nav .fd-list__navigation-item.is-expanded{-webkit-box-shadow:var(--fdVerticalNav_Item_Expanded_Box_Shadow);border-radius:var(--fdVerticalNav_Item_Expanded_Border_Radius);box-shadow:var(--fdVerticalNav_Item_Expanded_Box_Shadow);height:100%;overflow:hidden;padding-left:var(--fdVerticalNav_Item_Expanded_Padding_Left)}.fd-vertical-nav .fd-list__navigation-item.is-expanded,.fd-vertical-nav .fd-list__navigation-item.is-expanded[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded{margin-left:var(--fdVerticalNav_Item_Expanded_Margin);margin-right:var(--fdVerticalNav_Item_Expanded_Margin)}.fd-vertical-nav .fd-list__navigation-item.is-expanded[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded{padding-left:0;padding-right:var(--fdVerticalNav_Item_Expanded_Padding_Left)}.fd-vertical-nav .fd-list__navigation-item.is-expanded.is-hover .fd-list,.fd-vertical-nav .fd-list__navigation-item.is-expanded:hover .fd-list{background-color:var(--sapList_AlternatingBackground)}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item{border-bottom:none;width:100%}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated,.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item.fd-list__navigation-item--indicated .fd-list__navigation-item-text{color:var(--sapSelectedColor)}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator:after{margin-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator:after[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-indicator:after{margin-left:0;margin-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdVerticalNav_Item_Child_Text_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:2.75rem;margin:0;margin-left:var(--fdVerticalNav_Item_Text_No_Icon_Margin);padding:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text:after,.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item .fd-list__navigation-item-text{margin-left:0;margin-right:var(--fdVerticalNav_Item_Text_No_Icon_Margin)}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text{padding-left:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-text{padding-left:0;padding-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon{padding-right:.5rem}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-icon{padding-left:.5rem;padding-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list{display:block;margin-left:var(--fdVerticalNav_Expanded_Item_Margin_Left);margin-right:-1rem;width:auto}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list{margin-left:0;margin-right:var(--fdVerticalNav_Expanded_Item_Margin_Left)}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator:after{margin-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator:after[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item.is-expanded .fd-list__navigation-item-indicator:after{margin-left:0;margin-right:0}.fd-vertical-nav .fd-list__navigation-item.is-expanded>.fd-list__navigation-item-indicator:after{display:none}.fd-vertical-nav .fd-list__navigation-item .fd-list__navigation-item--indicated .fd-list__navigation-item-text{color:var(--sapSelectedColor)}.fd-vertical-nav .fd-list__navigation-item--condensed{padding-left:0;padding-right:0;position:relative;width:3.25rem}.fd-vertical-nav .fd-list__navigation-item--condensed[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed{padding-left:0;padding-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-popover--first-level,.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-popover--second-level{background:var(--sapList_AlternatingBackground);display:none}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-text{display:none}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-icon{height:2.75rem;line-height:2.75rem;margin-left:.5rem;margin-right:.5rem}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-icon[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-icon{margin-left:.5rem;margin-right:.5rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded{height:2.75rem;margin-left:0;margin-right:0;overflow:visible;visibility:hidden}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item[dir=rtl],.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded,[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item{margin-left:0;margin-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon{margin-left:0;padding-left:.875rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item--condensed .fd-list__navigation-item-icon{margin-left:.5rem;margin-right:0;padding-right:.875rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level{display:block;overflow:hidden}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list{border-top-left-radius:0;border-top-right-radius:0;display:block;margin:0 auto;width:100%}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text{margin-left:0;padding-left:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text[dir=rtl],.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level .fd-list__navigation-item-text,[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item-text{margin-left:0;margin-right:0;padding-left:0;padding-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level{border-bottom-right-radius:0;height:100%;left:.325rem;top:0;width:14.325rem;z-index:3}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--first-level{border-bottom-left-radius:0;border-bottom-right-radius:var(--sapElement_BorderCornerRadius);left:unset;right:.325rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level{border-top-left-radius:0;border-top-right-radius:0;left:3.25rem;width:11.4rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level{left:auto;right:3.25rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text{margin-left:1rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-text{margin-left:0;margin-right:1rem}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator:after{display:inline-block;margin-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator:after[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-popover--second-level .fd-list__navigation-item .fd-list__navigation-item-indicator:after{margin-left:0;margin-right:0}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-text{display:inline}.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item--condensed.is-expanded .fd-list__navigation-item-indicator:after{display:none}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow{width:100%}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow.is-focus,.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:focus{z-index:5}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow.is-focus:after,.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:focus:after{border-radius:0}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:before{border-color:transparent var(--sapContent_NonInteractiveIconColor) transparent transparent;border-style:solid;border-width:.25rem .25rem 0 0;bottom:0;content:\"\";display:inline-block;margin-bottom:.5625rem;margin-right:.75rem;min-height:0;min-width:0;position:absolute;right:0}.fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:before[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item--condensed .fd-list__navigation-item-arrow:before{left:0;margin-left:.75rem;margin-right:0;right:unset}.fd-vertical-nav .fd-list__navigation-item-icon{color:var(--fdVerticalNav_Icon_Color);font-family:SAP-icons;font-size:1rem;height:2.75rem;line-height:2.75rem;text-align:center;vertical-align:top;width:2.25rem}.fd-vertical-nav .fd-list__navigation-item-text{color:var(--sapList_TextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontLargeSize);line-height:2.75rem;max-width:9rem;overflow:hidden;padding-left:.25rem;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.fd-vertical-nav .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item-text{padding-left:0;padding-right:.25rem}.fd-vertical-nav .fd-list__navigation-item-arrow{-webkit-box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;appearance:none;background-color:transparent;background-image:none;border:0;border-radius:var(--sapButton_BorderCornerRadius);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-family:SAP-icons;font-size:var(--sapFontSize);font-size:1rem;font-weight:400;height:2.75rem;line-height:var(--sapContent_LineHeight);line-height:2.75rem;margin:0;outline:0;padding:0;position:absolute;right:0;text-decoration:none;user-select:none;vertical-align:middle;white-space:nowrap;width:2.75rem}.fd-vertical-nav .fd-list__navigation-item-arrow:after,.fd-vertical-nav .fd-list__navigation-item-arrow:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav .fd-list__navigation-item-arrow::-moz-focus-inner{border:0}.fd-vertical-nav .fd-list__navigation-item-arrow[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item-arrow{-webkit-transform:scaleX(-1);left:0;right:auto;transform:scaleX(-1)}.fd-vertical-nav .fd-list__navigation-item-arrow.is-focus,.fd-vertical-nav .fd-list__navigation-item-arrow:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--fdVerticalNav_Item_Indicated_Outline_Offset);z-index:5}.fd-vertical-nav .fd-list__navigation-item--condensed.is-hover,.fd-vertical-nav .fd-list__navigation-item--condensed:hover,.fd-vertical-nav .fd-list__navigation-item.is-hover,.fd-vertical-nav .fd-list__navigation-item:hover{background:var(--sapList_Hover_Background)}.fd-vertical-nav .fd-list__navigation-item--condensed.is-hover .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item--condensed:hover .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item.is-hover .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item:hover .fd-list__navigation-item-icon{color:var(--sapList_TextColor)}.fd-vertical-nav .fd-list__navigation-item--condensed.is-pressed,.fd-vertical-nav .fd-list__navigation-item--condensed[aria-pressed=true],.fd-vertical-nav .fd-list__navigation-item.is-pressed,.fd-vertical-nav .fd-list__navigation-item[aria-pressed=true]{background:var(--sapList_Active_Background);color:var(--sapContent_ContrastTextColor)}.fd-vertical-nav .fd-list__navigation-item--condensed.is-pressed .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item--condensed.is-pressed .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item--condensed[aria-pressed=true] .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item--condensed[aria-pressed=true] .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item.is-pressed .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item.is-pressed .fd-list__navigation-item-icon,.fd-vertical-nav .fd-list__navigation-item[aria-pressed=true] .fd-list__navigation-item-arrow,.fd-vertical-nav .fd-list__navigation-item[aria-pressed=true] .fd-list__navigation-item-icon{color:var(--sapContent_ContrastIconColor)}.fd-vertical-nav .fd-list__navigation-item--condensed:not(:last-child),.fd-vertical-nav .fd-list__navigation-item:not(:last-child){border-bottom:var(--fdVerticalNav_Item_Border_Top_Bottom)}.fd-vertical-nav .fd-list__navigation-item-icon+.fd-list__navigation-item-text+.fd-list__navigation-item-arrow+.fd-list .fd-list__navigation-item-text{margin-left:var(--fdVerticalNav_Item_Text_Spacing)}.fd-vertical-nav .fd-list__navigation-item-icon+.fd-list__navigation-item-text+.fd-list__navigation-item-arrow+.fd-list .fd-list__navigation-item-text[dir=rtl],[dir=rtl] .fd-vertical-nav .fd-list__navigation-item-icon+.fd-list__navigation-item-text+.fd-list__navigation-item-arrow+.fd-list .fd-list__navigation-item-text{margin-left:0;margin-right:var(--fdVerticalNav_Item_Text_Spacing)}.fd-vertical-nav--overflow{overflow-y:scroll}.fd-vertical-nav--condensed{width:3.25rem}.fd-vertical-nav--condensed .fd-vertical-nav__utility-section .fd-list__navigation-item-text{display:none}.fd-vertical-nav--condensed .fd-vertical-nav__utility-section:before{width:calc(100% - 1rem)}.fd-vertical-nav__main-navigation .fd-list__navigation-item--condensed:first-child,.fd-vertical-nav__main-navigation .fd-list__navigation-item:first-child{border-top:var(--fdVerticalNav_Item_Border_Top_Bottom)}.fd-vertical-nav__main-navigation,.fd-vertical-nav__utility-section{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-vertical-nav__main-navigation:after,.fd-vertical-nav__main-navigation:before,.fd-vertical-nav__utility-section:after,.fd-vertical-nav__utility-section:before{box-sizing:inherit;font-size:inherit}.fd-vertical-nav__utility-section{margin-top:auto}.fd-vertical-nav__utility-section:before{background-color:var(--sapAccentColor6);content:\" \";display:block;height:.0625rem;margin:.25rem auto;width:calc(100% - 2rem)}.fd-vertical-nav .fd-vertical-nav__group-header{background:var(--sapList_AlternatingBackground)}.fd-vertical-nav .fd-popover__body{--fdPopover_Offset: 100%;max-width:unset;max-height:unset}.fd-vertical-nav .fd-popover__body.fd-list__navigation-item-popover--first-level{z-index:1001}\n"] }]
|
|
11
11
|
}], propDecorators: { _list: [{
|
|
12
12
|
type: ContentChild,
|
|
13
13
|
args: [ListComponent]
|