@fundamental-ngx/core 0.63.2-rc.5 → 0.63.2-rc.6
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/fesm2022/fundamental-ngx-core-action-bar.mjs +27 -26
- package/fesm2022/fundamental-ngx-core-action-bar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-action-sheet.mjs +25 -22
- package/fesm2022/fundamental-ngx-core-action-sheet.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-avatar-group-legacy.mjs +35 -31
- package/fesm2022/fundamental-ngx-core-avatar-group-legacy.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-avatar-group.mjs +52 -43
- package/fesm2022/fundamental-ngx-core-avatar-group.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-avatar.mjs +67 -43
- package/fesm2022/fundamental-ngx-core-avatar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-bar.mjs +50 -41
- package/fesm2022/fundamental-ngx-core-bar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-breadcrumb.mjs +18 -14
- package/fesm2022/fundamental-ngx-core-breadcrumb.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-busy-indicator.mjs +34 -23
- package/fesm2022/fundamental-ngx-core-busy-indicator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-button.mjs +56 -37
- package/fesm2022/fundamental-ngx-core-button.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-calendar.mjs +87 -62
- package/fesm2022/fundamental-ngx-core-calendar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-card.mjs +264 -188
- package/fesm2022/fundamental-ngx-core-card.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-carousel.mjs +35 -26
- package/fesm2022/fundamental-ngx-core-carousel.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-checkbox.mjs +7 -7
- package/fesm2022/fundamental-ngx-core-combobox.mjs +19 -18
- package/fesm2022/fundamental-ngx-core-combobox.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-content-density.mjs +46 -36
- package/fesm2022/fundamental-ngx-core-content-density.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-date-picker.mjs +13 -13
- package/fesm2022/fundamental-ngx-core-date-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-datetime-picker.mjs +15 -14
- package/fesm2022/fundamental-ngx-core-datetime-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-datetime.mjs +32 -31
- package/fesm2022/fundamental-ngx-core-datetime.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-dialog.mjs +116 -89
- package/fesm2022/fundamental-ngx-core-dialog.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-dynamic-page.mjs +100 -77
- package/fesm2022/fundamental-ngx-core-dynamic-page.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-dynamic-side-content.mjs +13 -13
- package/fesm2022/fundamental-ngx-core-facets.mjs +24 -20
- package/fesm2022/fundamental-ngx-core-facets.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-feed-input.mjs +18 -17
- package/fesm2022/fundamental-ngx-core-feed-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-feed-list-item.mjs +22 -22
- package/fesm2022/fundamental-ngx-core-file-uploader.mjs +16 -16
- package/fesm2022/fundamental-ngx-core-fixed-card-layout.mjs +17 -15
- package/fesm2022/fundamental-ngx-core-fixed-card-layout.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-flexible-column-layout.mjs +7 -7
- package/fesm2022/fundamental-ngx-core-form.mjs +74 -74
- package/fesm2022/fundamental-ngx-core-form.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-formatted-text.mjs +17 -12
- package/fesm2022/fundamental-ngx-core-formatted-text.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-generic-tag.mjs +19 -13
- package/fesm2022/fundamental-ngx-core-generic-tag.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-grid-list.mjs +56 -51
- package/fesm2022/fundamental-ngx-core-grid-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-icon.mjs +33 -20
- package/fesm2022/fundamental-ngx-core-icon.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-illustrated-message.mjs +42 -31
- package/fesm2022/fundamental-ngx-core-illustrated-message.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-infinite-scroll.mjs +11 -9
- package/fesm2022/fundamental-ngx-core-infinite-scroll.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-info-label.mjs +29 -18
- package/fesm2022/fundamental-ngx-core-info-label.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-inline-help.mjs +35 -25
- package/fesm2022/fundamental-ngx-core-inline-help.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-input-group.mjs +21 -21
- package/fesm2022/fundamental-ngx-core-input-group.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-layout-grid.mjs +40 -27
- package/fesm2022/fundamental-ngx-core-layout-grid.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-layout-panel.mjs +41 -37
- package/fesm2022/fundamental-ngx-core-layout-panel.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-link.mjs +24 -19
- package/fesm2022/fundamental-ngx-core-link.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-list.mjs +100 -91
- package/fesm2022/fundamental-ngx-core-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-menu.mjs +125 -101
- package/fesm2022/fundamental-ngx-core-menu.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-message-box.mjs +39 -38
- package/fesm2022/fundamental-ngx-core-message-box.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-message-page.mjs +19 -19
- package/fesm2022/fundamental-ngx-core-message-strip.mjs +79 -55
- package/fesm2022/fundamental-ngx-core-message-strip.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-message-toast.mjs +17 -17
- package/fesm2022/fundamental-ngx-core-message-toast.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-micro-process-flow.mjs +21 -20
- package/fesm2022/fundamental-ngx-core-micro-process-flow.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-mobile-mode.mjs +3 -3
- package/fesm2022/fundamental-ngx-core-multi-combobox.mjs +98 -66
- package/fesm2022/fundamental-ngx-core-multi-combobox.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-multi-input.mjs +27 -21
- package/fesm2022/fundamental-ngx-core-multi-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-nested-list.mjs +46 -43
- package/fesm2022/fundamental-ngx-core-nested-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-notification.mjs +178 -132
- package/fesm2022/fundamental-ngx-core-notification.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-attribute.mjs +7 -7
- package/fesm2022/fundamental-ngx-core-object-identifier.mjs +24 -17
- package/fesm2022/fundamental-ngx-core-object-identifier.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-marker.mjs +41 -24
- package/fesm2022/fundamental-ngx-core-object-marker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-number.mjs +33 -21
- package/fesm2022/fundamental-ngx-core-object-number.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-status.mjs +41 -26
- package/fesm2022/fundamental-ngx-core-object-status.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-overflow-layout.mjs +33 -32
- package/fesm2022/fundamental-ngx-core-overflow-layout.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-pagination.mjs +10 -10
- package/fesm2022/fundamental-ngx-core-pagination.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-panel.mjs +51 -35
- package/fesm2022/fundamental-ngx-core-panel.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-popover.mjs +267 -164
- package/fesm2022/fundamental-ngx-core-popover.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-product-switch.mjs +46 -32
- package/fesm2022/fundamental-ngx-core-product-switch.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-progress-indicator.mjs +7 -7
- package/fesm2022/fundamental-ngx-core-quick-view.mjs +47 -44
- package/fesm2022/fundamental-ngx-core-quick-view.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-radio.mjs +8 -8
- package/fesm2022/fundamental-ngx-core-radio.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-rating-indicator.mjs +61 -39
- package/fesm2022/fundamental-ngx-core-rating-indicator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-resizable-card-layout.mjs +12 -11
- package/fesm2022/fundamental-ngx-core-resizable-card-layout.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-scroll-spy.mjs +17 -12
- package/fesm2022/fundamental-ngx-core-scroll-spy.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-scrollbar.mjs +14 -12
- package/fesm2022/fundamental-ngx-core-scrollbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-segmented-button.mjs +9 -8
- package/fesm2022/fundamental-ngx-core-segmented-button.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-select.mjs +22 -21
- package/fesm2022/fundamental-ngx-core-select.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-settings.mjs +70 -60
- package/fesm2022/fundamental-ngx-core-settings.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-shared.mjs +3 -3
- package/fesm2022/fundamental-ngx-core-shellbar.mjs +77 -63
- package/fesm2022/fundamental-ngx-core-shellbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-side-navigation.mjs +13 -13
- package/fesm2022/fundamental-ngx-core-skeleton.mjs +24 -16
- package/fesm2022/fundamental-ngx-core-skeleton.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-slider.mjs +15 -13
- package/fesm2022/fundamental-ngx-core-slider.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-split-button.mjs +10 -10
- package/fesm2022/fundamental-ngx-core-status-indicator.mjs +62 -35
- package/fesm2022/fundamental-ngx-core-status-indicator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-step-input.mjs +11 -9
- package/fesm2022/fundamental-ngx-core-step-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-switch.mjs +8 -8
- package/fesm2022/fundamental-ngx-core-switch.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-table.mjs +51 -50
- package/fesm2022/fundamental-ngx-core-table.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-tabs.mjs +56 -55
- package/fesm2022/fundamental-ngx-core-tabs.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-text.mjs +29 -19
- package/fesm2022/fundamental-ngx-core-text.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-theming.mjs +7 -7
- package/fesm2022/fundamental-ngx-core-tile.mjs +171 -136
- package/fesm2022/fundamental-ngx-core-tile.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-time-picker.mjs +9 -8
- package/fesm2022/fundamental-ngx-core-time-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-time.mjs +16 -13
- package/fesm2022/fundamental-ngx-core-time.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-timeline.mjs +43 -43
- package/fesm2022/fundamental-ngx-core-title.mjs +12 -10
- package/fesm2022/fundamental-ngx-core-title.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-token.mjs +33 -24
- package/fesm2022/fundamental-ngx-core-token.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-toolbar.mjs +35 -32
- package/fesm2022/fundamental-ngx-core-toolbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-tree.mjs +41 -36
- package/fesm2022/fundamental-ngx-core-tree.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-upload-collection.mjs +37 -37
- package/fesm2022/fundamental-ngx-core-upload-collection.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-user-menu.mjs +108 -84
- package/fesm2022/fundamental-ngx-core-user-menu.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-vertical-navigation.mjs +20 -17
- package/fesm2022/fundamental-ngx-core-vertical-navigation.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-wizard.mjs +41 -32
- package/fesm2022/fundamental-ngx-core-wizard.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core.mjs +4 -4
- package/package.json +11 -10
- package/schematics/add-styles/index.js +3 -3
- package/schematics/add-styles/index.js.map +1 -1
- package/schematics/add-theming/index.js +1 -1
- package/schematics/add-theming/index.js.map +1 -1
- package/schematics/package.json +7 -0
- package/schematics/tsconfig.json +12 -6
- package/schematics/tsconfig.spec.json +2 -0
- package/schematics/utils/calls-providers-function.js +34 -1
- package/schematics/utils/calls-providers-function.js.map +1 -1
- package/schematics/utils/ng-module-utils.js +34 -1
- package/schematics/utils/ng-module-utils.js.map +1 -1
- package/types/fundamental-ngx-core-avatar-group-legacy.d.ts +1 -0
- package/types/fundamental-ngx-core-carousel.d.ts +2 -0
- package/types/fundamental-ngx-core-list.d.ts +2 -2
- package/types/fundamental-ngx-core-menu.d.ts +4 -4
- package/types/fundamental-ngx-core-notification.d.ts +0 -2
- package/types/fundamental-ngx-core-popover.d.ts +8 -6
- package/types/fundamental-ngx-core-product-switch.d.ts +6 -3
- package/types/fundamental-ngx-core-wizard.d.ts +4 -1
|
@@ -11,10 +11,10 @@ class SideNavigationMainDirective {
|
|
|
11
11
|
/** @hidden */
|
|
12
12
|
this.classSideNavMainNavigation = true;
|
|
13
13
|
}
|
|
14
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
15
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
14
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SideNavigationMainDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
15
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: SideNavigationMainDirective, isStandalone: true, selector: "[fdSideNavigationMain], [fd-side-nav-main]", host: { properties: { "class.fd-side-nav__main-navigation": "this.classSideNavMainNavigation" } }, queries: [{ propertyName: "list", first: true, predicate: NestedListDirective, descendants: true }], ngImport: i0 }); }
|
|
16
16
|
}
|
|
17
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
17
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SideNavigationMainDirective, decorators: [{
|
|
18
18
|
type: Directive,
|
|
19
19
|
args: [{
|
|
20
20
|
selector: '[fdSideNavigationMain], [fd-side-nav-main]',
|
|
@@ -33,10 +33,10 @@ class SideNavigationUtilityDirective {
|
|
|
33
33
|
/** @hidden */
|
|
34
34
|
this.classSideNavUtility = true;
|
|
35
35
|
}
|
|
36
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
37
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
36
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SideNavigationUtilityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
37
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: SideNavigationUtilityDirective, isStandalone: true, selector: "[fdSideNavigationUtility], [fd-side-nav-utility]", host: { properties: { "class.fd-side-nav__utility": "this.classSideNavUtility" } }, queries: [{ propertyName: "list", first: true, predicate: NestedListDirective, descendants: true }], ngImport: i0 }); }
|
|
38
38
|
}
|
|
39
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
39
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SideNavigationUtilityDirective, decorators: [{
|
|
40
40
|
type: Directive,
|
|
41
41
|
args: [{
|
|
42
42
|
selector: '[fdSideNavigationUtility], [fd-side-nav-utility]',
|
|
@@ -127,10 +127,10 @@ class SideNavigationComponent {
|
|
|
127
127
|
}
|
|
128
128
|
return lists;
|
|
129
129
|
}
|
|
130
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
131
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SideNavigationComponent, isStandalone: true, selector: "fd-side-nav", inputs: { sideNavigationConfiguration: "sideNavigationConfiguration", condensed: "condensed", collapseWidth: "collapseWidth", selectable: "selectable" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.fd-side-nav--condensed": "this.condensed" } }, providers: [MenuKeyboardService, NestedListKeyboardService, NestedListStateService], queries: [{ propertyName: "sideNavUtility", first: true, predicate: SideNavigationUtilityDirective, descendants: true }, { propertyName: "sideNavMain", first: true, predicate: SideNavigationMainDirective, descendants: true }], viewQueries: [{ propertyName: "preparedNestedList", predicate: PreparedNestedListComponent, descendants: true }], ngImport: i0, template: "<nav class=\"fd-side-nav\" [class.fd-side-nav--condensed]=\"condensed || sideNavigationConfiguration?.condensed\">\n @if (!sideNavigationConfiguration) {\n <ng-content></ng-content>\n } @else {\n @if (sideNavigationConfiguration.mainNavigation) {\n <div fd-side-nav-main>\n <fd-prepared-nested-list\n [condensed]=\"condensed || !!sideNavigationConfiguration.condensed\"\n [first]=\"true\"\n [list]=\"sideNavigationConfiguration.mainNavigation\"\n >\n </fd-prepared-nested-list>\n </div>\n }\n @if (sideNavigationConfiguration.utilityNavigation) {\n <div fd-side-nav-utility>\n <fd-prepared-nested-list\n [condensed]=\"condensed || !!sideNavigationConfiguration.condensed\"\n [first]=\"true\"\n [list]=\"sideNavigationConfiguration.utilityNavigation\"\n >\n </fd-prepared-nested-list>\n </div>\n }\n }\n</nav>\n", styles: [".fd-nested-list{--fdNestedList_Link_Height:2.75rem;--fdNestedList_Title_Font_Size:var(--sapFontLargeSize);--fdNestedList_Icon_Font_Size:var(--sapFontHeader4Size);--fdNestedList_Item_Padding_Left:0;--fdNestedList_Item_Padding_Right:0;border:0;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;list-style:none;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;width:100%}.fd-nested-list:after,.fd-nested-list:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-nested-list [class*=level]{border-bottom:none}.fd-nested-list [class*=level] .fd-nested-list__content,.fd-nested-list [class*=level] .fd-nested-list__link{border-top:none}.fd-nested-list .fd-nested-list__content,.fd-nested-list .fd-nested-list__link{border-bottom:none;padding-inline:var(--fdNestedList_Item_Padding_Left) var(--fdNestedList_Item_Padding_Right)}.fd-nested-list .fd-nested-list__content.is-selected,.fd-nested-list .fd-nested-list__content[aria-selected=true],.fd-nested-list .fd-nested-list__link.is-selected,.fd-nested-list .fd-nested-list__link[aria-selected=true]{border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-nested-list .fd-nested-list__content.has-child,.fd-nested-list .fd-nested-list__link.has-child{padding-inline:0}.fd-nested-list .fd-nested-list__content.has-child>.fd-nested-list__title{padding-inline:var(--fdNestedList_Item_Padding_Left) var(--fdNestedList_Item_Padding_Right)}.fd-nested-list .level-2{--fdNestedList_Item_Padding_Left:2.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-3{--fdNestedList_Item_Padding_Left:3.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-4{--fdNestedList_Item_Padding_Left:4.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-5{--fdNestedList_Item_Padding_Left:5.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-6{--fdNestedList_Item_Padding_Left:6.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-7{--fdNestedList_Item_Padding_Left:7.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-8{--fdNestedList_Item_Padding_Left:8.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-9{--fdNestedList_Item_Padding_Left:9.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-10{--fdNestedList_Item_Padding_Left:10.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list[aria-hidden=true]{display:none}.fd-nested-list--popover{border-bottom:none}.fd-nested-list--popover .fd-nested-list__group-header{border-bottom:none;border-top-left-radius:var(--fdNested_List_Border_Corner_Radius);border-top-right-radius:var(--fdNested_List_Border_Corner_Radius)}.fd-nested-list--popover .fd-nested-list__item:first-child,.fd-nested-list--popover .fd-nested-list__item:first-child .fd-nested-list__content,.fd-nested-list--popover .fd-nested-list__item:first-child .fd-nested-list__link{border-top-left-radius:var(--fdNested_List_Border_Corner_Radius);border-top-right-radius:var(--fdNested_List_Border_Corner_Radius)}.fd-nested-list--popover .fd-nested-list__item:last-child,.fd-nested-list--popover .fd-nested-list__item:last-child .fd-nested-list__content,.fd-nested-list--popover .fd-nested-list__item:last-child .fd-nested-list__link{border-bottom-left-radius:var(--fdNested_List_Border_Corner_Radius);border-bottom-right-radius:var(--fdNested_List_Border_Corner_Radius)}.fd-nested-list__item{background:var(--sapList_Background);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;text-shadow:var(--fdVerticalNav_Text_Shadow)}.fd-nested-list__item:after,.fd-nested-list__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-nested-list__item:first-child .fd-nested-list__content,.fd-nested-list__item:first-child .fd-nested-list__link{border-top:none}.fd-nested-list__content,.fd-nested-list__link{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdNestedList_Link_Height);line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;text-decoration:none;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-top:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}.fd-nested-list__content:after,.fd-nested-list__content:before,.fd-nested-list__link:after,.fd-nested-list__link:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-nested-list__content.is-hover,.fd-nested-list__content.is-hover .fd-nested-list__button,.fd-nested-list__content:hover,.fd-nested-list__content:hover .fd-nested-list__button,.fd-nested-list__link.is-hover,.fd-nested-list__link.is-hover .fd-nested-list__button,.fd-nested-list__link:hover,.fd-nested-list__link:hover .fd-nested-list__button{background:var(--sapList_Hover_Background)}.fd-nested-list__content.is-focus,.fd-nested-list__content:focus,.fd-nested-list__link.is-focus,.fd-nested-list__link:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-nested-list__content.is-selected,.fd-nested-list__content[aria-selected=true],.fd-nested-list__link.is-selected,.fd-nested-list__link[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid;border-bottom-color:var(--sapList_SelectionBorderColor)}.fd-nested-list__content.is-selected .fd-nested-list__button,.fd-nested-list__content[aria-selected=true] .fd-nested-list__button,.fd-nested-list__link.is-selected .fd-nested-list__button,.fd-nested-list__link[aria-selected=true] .fd-nested-list__button{background:var(--sapList_SelectionBackgroundColor)}.fd-nested-list__content.is-selected.is-hover,.fd-nested-list__content.is-selected.is-hover .fd-nested-list__button,.fd-nested-list__content.is-selected:hover,.fd-nested-list__content.is-selected:hover .fd-nested-list__button,.fd-nested-list__content[aria-selected=true].is-hover,.fd-nested-list__content[aria-selected=true].is-hover .fd-nested-list__button,.fd-nested-list__content[aria-selected=true]:hover,.fd-nested-list__content[aria-selected=true]:hover .fd-nested-list__button,.fd-nested-list__link.is-selected.is-hover,.fd-nested-list__link.is-selected.is-hover .fd-nested-list__button,.fd-nested-list__link.is-selected:hover,.fd-nested-list__link.is-selected:hover .fd-nested-list__button,.fd-nested-list__link[aria-selected=true].is-hover,.fd-nested-list__link[aria-selected=true].is-hover .fd-nested-list__button,.fd-nested-list__link[aria-selected=true]:hover,.fd-nested-list__link[aria-selected=true]:hover .fd-nested-list__button{background:var(--sapList_Hover_SelectionBackground)}.fd-nested-list__content.is-active,.fd-nested-list__content.is-active .fd-nested-list__button,.fd-nested-list__content.is-active.is-selected,.fd-nested-list__content.is-active.is-selected .fd-nested-list__button,.fd-nested-list__content.is-active[aria-selected=true],.fd-nested-list__content.is-active[aria-selected=true] .fd-nested-list__button,.fd-nested-list__content:active,.fd-nested-list__content:active .fd-nested-list__button,.fd-nested-list__content:active.is-selected,.fd-nested-list__content:active.is-selected .fd-nested-list__button,.fd-nested-list__content:active[aria-selected=true],.fd-nested-list__content:active[aria-selected=true] .fd-nested-list__button,.fd-nested-list__link.is-active,.fd-nested-list__link.is-active .fd-nested-list__button,.fd-nested-list__link.is-active.is-selected,.fd-nested-list__link.is-active.is-selected .fd-nested-list__button,.fd-nested-list__link.is-active[aria-selected=true],.fd-nested-list__link.is-active[aria-selected=true] .fd-nested-list__button,.fd-nested-list__link:active,.fd-nested-list__link:active .fd-nested-list__button,.fd-nested-list__link:active.is-selected,.fd-nested-list__link:active.is-selected .fd-nested-list__button,.fd-nested-list__link:active[aria-selected=true],.fd-nested-list__link:active[aria-selected=true] .fd-nested-list__button{background:var(--sapList_Active_Background)}.fd-nested-list__content.is-active .fd-nested-list__button,.fd-nested-list__content.is-active .fd-nested-list__icon,.fd-nested-list__content.is-active .fd-nested-list__title,.fd-nested-list__content:active .fd-nested-list__button,.fd-nested-list__content:active .fd-nested-list__icon,.fd-nested-list__content:active .fd-nested-list__title,.fd-nested-list__link.is-active .fd-nested-list__button,.fd-nested-list__link.is-active .fd-nested-list__icon,.fd-nested-list__link.is-active .fd-nested-list__title,.fd-nested-list__link:active .fd-nested-list__button,.fd-nested-list__link:active .fd-nested-list__icon,.fd-nested-list__link:active .fd-nested-list__title{color:var(--sapList_Active_TextColor)}.fd-nested-list__content.has-child,.fd-nested-list__link.has-child{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding-block:0;padding-inline:0}.fd-nested-list__content.has-child>.fd-nested-list__item,.fd-nested-list__content.has-child>.fd-nested-list__link,.fd-nested-list__link.has-child>.fd-nested-list__item,.fd-nested-list__link.has-child>.fd-nested-list__link{border:none}.fd-nested-list__content.has-child>.fd-nested-list__link,.fd-nested-list__link.has-child>.fd-nested-list__link{background:transparent;border:none;height:100%}.fd-nested-list__content.has-child>.fd-nested-list__link.is-focus,.fd-nested-list__content.has-child>.fd-nested-list__link:focus,.fd-nested-list__link.has-child>.fd-nested-list__link.is-focus,.fd-nested-list__link.has-child>.fd-nested-list__link:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-nested-list__content.has-child>.fd-nested-list__link>.fd-nested-list__title,.fd-nested-list__link.has-child>.fd-nested-list__link>.fd-nested-list__title{-webkit-padding-end:0;padding-inline-end:0}.fd-nested-list__link{cursor:pointer}.fd-nested-list__button.fd-button{background:none;border:none;color:var(--sapContent_IconColor);height:100%;max-height:100%;min-height:100%;min-width:2.5rem;outline:none;text-decoration:none}.fd-nested-list__button.fd-button [class*=sap-icon],.fd-nested-list__button.fd-button[class*=sap-icon]{font-size:var(--sapFontLargeSize)}.fd-nested-list__icon [class*=sap-icon],.fd-nested-list__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;color:var(--sapList_TextColor);font-size:var(--fdNestedList_Icon_Font_Size);justify-content:center;min-width:2.75rem}.fd-nested-list__icon [class*=sap-icon],.fd-nested-list__icon[class*=sap-icon],.fd-nested-list__title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%}.fd-nested-list__title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--fdNestedList_Title_Font_Size);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap;width:100%;-webkit-padding-end:1rem;padding-inline-end:1rem;text-align:start}.fd-nested-list__title:after,.fd-nested-list__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-nested-list__title:first-child{-webkit-padding-start:2.75rem;padding-inline-start:2.75rem}.fd-nested-list__group-header{background:var(--sapList_GroupHeaderBackground);border:0;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_GroupHeaderTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-weight:400;forced-color-adjust:none;height:2.75rem;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;font-size:var(--sapFontSize);font-weight:700;line-height:2rem;overflow:hidden;padding-inline:1rem;text-overflow:ellipsis;white-space:nowrap}.fd-nested-list__group-header:after,.fd-nested-list__group-header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-nested-list--no-border .fd-nested-list__group-header,.fd-nested-list--no-border .fd-nested-list__item,.fd-nested-list--no-border .fd-nested-list__link{border-top:none}.fd-nested-list--text-only{--fdNestedList_Item_Padding_Left:1rem}.fd-nested-list--text-only .fd-nested-list__content.has-child,.fd-nested-list--text-only .fd-nested-list__link.has-child{padding-block:0;padding-inline:0}.fd-nested-list--text-only .fd-nested-list__title:first-child{-webkit-padding-start:0;padding-inline-start:0}.fd-nested-list--text-only .level-2{--fdNestedList_Item_Padding_Left:2rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-2{--fdNestedList_Item_Padding_Left:2.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-3{--fdNestedList_Item_Padding_Left:3rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-3{--fdNestedList_Item_Padding_Left:3.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-4{--fdNestedList_Item_Padding_Left:4rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-4{--fdNestedList_Item_Padding_Left:4.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-5{--fdNestedList_Item_Padding_Left:5rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-5{--fdNestedList_Item_Padding_Left:5.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-6{--fdNestedList_Item_Padding_Left:6rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-6{--fdNestedList_Item_Padding_Left:6.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-7{--fdNestedList_Item_Padding_Left:7rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-7{--fdNestedList_Item_Padding_Left:7.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-8{--fdNestedList_Item_Padding_Left:8rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-8{--fdNestedList_Item_Padding_Left:8.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-9{--fdNestedList_Item_Padding_Left:9rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-9{--fdNestedList_Item_Padding_Left:9.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-10{--fdNestedList_Item_Padding_Left:10rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-10{--fdNestedList_Item_Padding_Left:10.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list[class*=-compact],[class*=-compact] .fd-nested-list:not([class*=-cozy]){--fdNestedList_Link_Height:2rem;--fdNestedList_Title_Font_Size:var(--sapFontSize);--fdNestedList_Icon_Font_Size:var(--sapFontLargeSize)}.fd-side-nav{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;background:var(--sapList_Background);-ms-flex-direction:column;flex-direction:column;height:100%;max-height:100%;width:var(--fdSideNav_Width,100%)}.fd-side-nav:after,.fd-side-nav:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-side-nav__container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding-inline:.5rem}.fd-side-nav__container:after,.fd-side-nav__container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-side-nav__container--top{-webkit-box-flex:1;-ms-flex:1;flex:1;height:100%;overflow-y:var(--fdSideNav_Overflow,scroll);position:relative;-webkit-padding-before:.5rem;padding-block-start:.5rem}.fd-side-nav__container--bottom{-webkit-padding-after:.5rem;padding-block-end:.5rem}.fd-side-nav__separator{background:var(--sapToolbar_SeparatorColor);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:.0625rem;line-height:normal;margin-block:0;margin-block:.25rem;margin-inline:0;margin-inline:.5rem;min-height:.0625rem;padding-block:0;padding-inline:0}.fd-side-nav__separator:after,.fd-side-nav__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-side-nav__group-header{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-side-nav__group-header:after,.fd-side-nav__group-header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-side-nav[class*=-collapsed],[class*=-collapsed]{--fdSideNav_Width:4rem;--fdSideNav_Overflow:visible}.fd-nested-list__item{display:block}.fd-nested-list__item .fd-nested-list__link{cursor:pointer}.fd-nested-list__item .fd-nested-list__content .fd-nested-list__button.fd-button{background:none}\n/*! Bundled license information:\n\nfundamental-styles/dist/side-nav.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 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*/\n"], dependencies: [{ kind: "directive", type: SideNavigationMainDirective, selector: "[fdSideNavigationMain], [fd-side-nav-main]" }, { kind: "component", type: PreparedNestedListComponent, selector: "fd-prepared-nested-list", inputs: ["first", "condensed", "list"] }, { kind: "directive", type: SideNavigationUtilityDirective, selector: "[fdSideNavigationUtility], [fd-side-nav-utility]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
130
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SideNavigationComponent, deps: [{ token: i1.NestedListKeyboardService }, { token: i1.NestedListStateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
131
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SideNavigationComponent, isStandalone: true, selector: "fd-side-nav", inputs: { sideNavigationConfiguration: "sideNavigationConfiguration", condensed: "condensed", collapseWidth: "collapseWidth", selectable: "selectable" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.fd-side-nav--condensed": "this.condensed" } }, providers: [MenuKeyboardService, NestedListKeyboardService, NestedListStateService], queries: [{ propertyName: "sideNavUtility", first: true, predicate: SideNavigationUtilityDirective, descendants: true }, { propertyName: "sideNavMain", first: true, predicate: SideNavigationMainDirective, descendants: true }], viewQueries: [{ propertyName: "preparedNestedList", predicate: PreparedNestedListComponent, descendants: true }], ngImport: i0, template: "<nav class=\"fd-side-nav\" [class.fd-side-nav--condensed]=\"condensed || sideNavigationConfiguration?.condensed\">\n @if (!sideNavigationConfiguration) {\n <ng-content></ng-content>\n } @else {\n @if (sideNavigationConfiguration.mainNavigation) {\n <div fd-side-nav-main>\n <fd-prepared-nested-list\n [condensed]=\"condensed || !!sideNavigationConfiguration.condensed\"\n [first]=\"true\"\n [list]=\"sideNavigationConfiguration.mainNavigation\"\n >\n </fd-prepared-nested-list>\n </div>\n }\n @if (sideNavigationConfiguration.utilityNavigation) {\n <div fd-side-nav-utility>\n <fd-prepared-nested-list\n [condensed]=\"condensed || !!sideNavigationConfiguration.condensed\"\n [first]=\"true\"\n [list]=\"sideNavigationConfiguration.utilityNavigation\"\n >\n </fd-prepared-nested-list>\n </div>\n }\n }\n</nav>\n", styles: [".fd-nested-list{--fdNestedList_Link_Height:2.75rem;--fdNestedList_Title_Font_Size:var(--sapFontLargeSize);--fdNestedList_Icon_Font_Size:var(--sapFontHeader4Size);--fdNestedList_Item_Padding_Left:0;--fdNestedList_Item_Padding_Right:0;border:0;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;list-style:none;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;width:100%}.fd-nested-list:after,.fd-nested-list:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-nested-list [class*=level]{border-bottom:none}.fd-nested-list [class*=level] .fd-nested-list__content,.fd-nested-list [class*=level] .fd-nested-list__link{border-top:none}.fd-nested-list .fd-nested-list__content,.fd-nested-list .fd-nested-list__link{border-bottom:none;padding-inline:var(--fdNestedList_Item_Padding_Left) var(--fdNestedList_Item_Padding_Right)}.fd-nested-list .fd-nested-list__content.is-selected,.fd-nested-list .fd-nested-list__content[aria-selected=true],.fd-nested-list .fd-nested-list__link.is-selected,.fd-nested-list .fd-nested-list__link[aria-selected=true]{border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-nested-list .fd-nested-list__content.has-child,.fd-nested-list .fd-nested-list__link.has-child{padding-inline:0}.fd-nested-list .fd-nested-list__content.has-child>.fd-nested-list__title{padding-inline:var(--fdNestedList_Item_Padding_Left) var(--fdNestedList_Item_Padding_Right)}.fd-nested-list .level-2{--fdNestedList_Item_Padding_Left:2.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-3{--fdNestedList_Item_Padding_Left:3.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-4{--fdNestedList_Item_Padding_Left:4.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-5{--fdNestedList_Item_Padding_Left:5.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-6{--fdNestedList_Item_Padding_Left:6.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-7{--fdNestedList_Item_Padding_Left:7.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-8{--fdNestedList_Item_Padding_Left:8.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-9{--fdNestedList_Item_Padding_Left:9.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-10{--fdNestedList_Item_Padding_Left:10.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list[aria-hidden=true]{display:none}.fd-nested-list--popover{border-bottom:none}.fd-nested-list--popover .fd-nested-list__group-header{border-bottom:none;border-top-left-radius:var(--fdNested_List_Border_Corner_Radius);border-top-right-radius:var(--fdNested_List_Border_Corner_Radius)}.fd-nested-list--popover .fd-nested-list__item:first-child,.fd-nested-list--popover .fd-nested-list__item:first-child .fd-nested-list__content,.fd-nested-list--popover .fd-nested-list__item:first-child .fd-nested-list__link{border-top-left-radius:var(--fdNested_List_Border_Corner_Radius);border-top-right-radius:var(--fdNested_List_Border_Corner_Radius)}.fd-nested-list--popover .fd-nested-list__item:last-child,.fd-nested-list--popover .fd-nested-list__item:last-child .fd-nested-list__content,.fd-nested-list--popover .fd-nested-list__item:last-child .fd-nested-list__link{border-bottom-left-radius:var(--fdNested_List_Border_Corner_Radius);border-bottom-right-radius:var(--fdNested_List_Border_Corner_Radius)}.fd-nested-list__item{background:var(--sapList_Background);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;text-shadow:var(--fdVerticalNav_Text_Shadow)}.fd-nested-list__item:after,.fd-nested-list__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-nested-list__item:first-child .fd-nested-list__content,.fd-nested-list__item:first-child .fd-nested-list__link{border-top:none}.fd-nested-list__content,.fd-nested-list__link{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdNestedList_Link_Height);line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;text-decoration:none;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-top:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}.fd-nested-list__content:after,.fd-nested-list__content:before,.fd-nested-list__link:after,.fd-nested-list__link:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-nested-list__content.is-hover,.fd-nested-list__content.is-hover .fd-nested-list__button,.fd-nested-list__content:hover,.fd-nested-list__content:hover .fd-nested-list__button,.fd-nested-list__link.is-hover,.fd-nested-list__link.is-hover .fd-nested-list__button,.fd-nested-list__link:hover,.fd-nested-list__link:hover .fd-nested-list__button{background:var(--sapList_Hover_Background)}.fd-nested-list__content.is-focus,.fd-nested-list__content:focus,.fd-nested-list__link.is-focus,.fd-nested-list__link:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-nested-list__content.is-selected,.fd-nested-list__content[aria-selected=true],.fd-nested-list__link.is-selected,.fd-nested-list__link[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid;border-bottom-color:var(--sapList_SelectionBorderColor)}.fd-nested-list__content.is-selected .fd-nested-list__button,.fd-nested-list__content[aria-selected=true] .fd-nested-list__button,.fd-nested-list__link.is-selected .fd-nested-list__button,.fd-nested-list__link[aria-selected=true] .fd-nested-list__button{background:var(--sapList_SelectionBackgroundColor)}.fd-nested-list__content.is-selected.is-hover,.fd-nested-list__content.is-selected.is-hover .fd-nested-list__button,.fd-nested-list__content.is-selected:hover,.fd-nested-list__content.is-selected:hover .fd-nested-list__button,.fd-nested-list__content[aria-selected=true].is-hover,.fd-nested-list__content[aria-selected=true].is-hover .fd-nested-list__button,.fd-nested-list__content[aria-selected=true]:hover,.fd-nested-list__content[aria-selected=true]:hover .fd-nested-list__button,.fd-nested-list__link.is-selected.is-hover,.fd-nested-list__link.is-selected.is-hover .fd-nested-list__button,.fd-nested-list__link.is-selected:hover,.fd-nested-list__link.is-selected:hover .fd-nested-list__button,.fd-nested-list__link[aria-selected=true].is-hover,.fd-nested-list__link[aria-selected=true].is-hover .fd-nested-list__button,.fd-nested-list__link[aria-selected=true]:hover,.fd-nested-list__link[aria-selected=true]:hover .fd-nested-list__button{background:var(--sapList_Hover_SelectionBackground)}.fd-nested-list__content.is-active,.fd-nested-list__content.is-active .fd-nested-list__button,.fd-nested-list__content.is-active.is-selected,.fd-nested-list__content.is-active.is-selected .fd-nested-list__button,.fd-nested-list__content.is-active[aria-selected=true],.fd-nested-list__content.is-active[aria-selected=true] .fd-nested-list__button,.fd-nested-list__content:active,.fd-nested-list__content:active .fd-nested-list__button,.fd-nested-list__content:active.is-selected,.fd-nested-list__content:active.is-selected .fd-nested-list__button,.fd-nested-list__content:active[aria-selected=true],.fd-nested-list__content:active[aria-selected=true] .fd-nested-list__button,.fd-nested-list__link.is-active,.fd-nested-list__link.is-active .fd-nested-list__button,.fd-nested-list__link.is-active.is-selected,.fd-nested-list__link.is-active.is-selected .fd-nested-list__button,.fd-nested-list__link.is-active[aria-selected=true],.fd-nested-list__link.is-active[aria-selected=true] .fd-nested-list__button,.fd-nested-list__link:active,.fd-nested-list__link:active .fd-nested-list__button,.fd-nested-list__link:active.is-selected,.fd-nested-list__link:active.is-selected .fd-nested-list__button,.fd-nested-list__link:active[aria-selected=true],.fd-nested-list__link:active[aria-selected=true] .fd-nested-list__button{background:var(--sapList_Active_Background)}.fd-nested-list__content.is-active .fd-nested-list__button,.fd-nested-list__content.is-active .fd-nested-list__icon,.fd-nested-list__content.is-active .fd-nested-list__title,.fd-nested-list__content:active .fd-nested-list__button,.fd-nested-list__content:active .fd-nested-list__icon,.fd-nested-list__content:active .fd-nested-list__title,.fd-nested-list__link.is-active .fd-nested-list__button,.fd-nested-list__link.is-active .fd-nested-list__icon,.fd-nested-list__link.is-active .fd-nested-list__title,.fd-nested-list__link:active .fd-nested-list__button,.fd-nested-list__link:active .fd-nested-list__icon,.fd-nested-list__link:active .fd-nested-list__title{color:var(--sapList_Active_TextColor)}.fd-nested-list__content.has-child,.fd-nested-list__link.has-child{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding-block:0;padding-inline:0}.fd-nested-list__content.has-child>.fd-nested-list__item,.fd-nested-list__content.has-child>.fd-nested-list__link,.fd-nested-list__link.has-child>.fd-nested-list__item,.fd-nested-list__link.has-child>.fd-nested-list__link{border:none}.fd-nested-list__content.has-child>.fd-nested-list__link,.fd-nested-list__link.has-child>.fd-nested-list__link{background:transparent;border:none;height:100%}.fd-nested-list__content.has-child>.fd-nested-list__link.is-focus,.fd-nested-list__content.has-child>.fd-nested-list__link:focus,.fd-nested-list__link.has-child>.fd-nested-list__link.is-focus,.fd-nested-list__link.has-child>.fd-nested-list__link:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-nested-list__content.has-child>.fd-nested-list__link>.fd-nested-list__title,.fd-nested-list__link.has-child>.fd-nested-list__link>.fd-nested-list__title{-webkit-padding-end:0;padding-inline-end:0}.fd-nested-list__link{cursor:pointer}.fd-nested-list__button.fd-button{background:none;border:none;color:var(--sapContent_IconColor);height:100%;max-height:100%;min-height:100%;min-width:2.5rem;outline:none;text-decoration:none}.fd-nested-list__button.fd-button [class*=sap-icon],.fd-nested-list__button.fd-button[class*=sap-icon]{font-size:var(--sapFontLargeSize)}.fd-nested-list__icon [class*=sap-icon],.fd-nested-list__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;color:var(--sapList_TextColor);font-size:var(--fdNestedList_Icon_Font_Size);justify-content:center;min-width:2.75rem}.fd-nested-list__icon [class*=sap-icon],.fd-nested-list__icon[class*=sap-icon],.fd-nested-list__title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%}.fd-nested-list__title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--fdNestedList_Title_Font_Size);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap;width:100%;-webkit-padding-end:1rem;padding-inline-end:1rem;text-align:start}.fd-nested-list__title:after,.fd-nested-list__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-nested-list__title:first-child{-webkit-padding-start:2.75rem;padding-inline-start:2.75rem}.fd-nested-list__group-header{background:var(--sapList_GroupHeaderBackground);border:0;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_GroupHeaderTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-weight:400;forced-color-adjust:none;height:2.75rem;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;font-size:var(--sapFontSize);font-weight:700;line-height:2rem;overflow:hidden;padding-inline:1rem;text-overflow:ellipsis;white-space:nowrap}.fd-nested-list__group-header:after,.fd-nested-list__group-header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-nested-list--no-border .fd-nested-list__group-header,.fd-nested-list--no-border .fd-nested-list__item,.fd-nested-list--no-border .fd-nested-list__link{border-top:none}.fd-nested-list--text-only{--fdNestedList_Item_Padding_Left:1rem}.fd-nested-list--text-only .fd-nested-list__content.has-child,.fd-nested-list--text-only .fd-nested-list__link.has-child{padding-block:0;padding-inline:0}.fd-nested-list--text-only .fd-nested-list__title:first-child{-webkit-padding-start:0;padding-inline-start:0}.fd-nested-list--text-only .level-2{--fdNestedList_Item_Padding_Left:2rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-2{--fdNestedList_Item_Padding_Left:2.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-3{--fdNestedList_Item_Padding_Left:3rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-3{--fdNestedList_Item_Padding_Left:3.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-4{--fdNestedList_Item_Padding_Left:4rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-4{--fdNestedList_Item_Padding_Left:4.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-5{--fdNestedList_Item_Padding_Left:5rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-5{--fdNestedList_Item_Padding_Left:5.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-6{--fdNestedList_Item_Padding_Left:6rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-6{--fdNestedList_Item_Padding_Left:6.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-7{--fdNestedList_Item_Padding_Left:7rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-7{--fdNestedList_Item_Padding_Left:7.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-8{--fdNestedList_Item_Padding_Left:8rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-8{--fdNestedList_Item_Padding_Left:8.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-9{--fdNestedList_Item_Padding_Left:9rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-9{--fdNestedList_Item_Padding_Left:9.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-10{--fdNestedList_Item_Padding_Left:10rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-10{--fdNestedList_Item_Padding_Left:10.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list[class*=-compact],[class*=-compact] .fd-nested-list:not([class*=-cozy]){--fdNestedList_Link_Height:2rem;--fdNestedList_Title_Font_Size:var(--sapFontSize);--fdNestedList_Icon_Font_Size:var(--sapFontLargeSize)}.fd-side-nav{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;background:var(--sapList_Background);-ms-flex-direction:column;flex-direction:column;height:100%;max-height:100%;width:var(--fdSideNav_Width,100%)}.fd-side-nav:after,.fd-side-nav:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-side-nav__container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding-inline:.5rem}.fd-side-nav__container:after,.fd-side-nav__container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-side-nav__container--top{-webkit-box-flex:1;-ms-flex:1;flex:1;height:100%;overflow-y:var(--fdSideNav_Overflow,scroll);position:relative;-webkit-padding-before:.5rem;padding-block-start:.5rem}.fd-side-nav__container--bottom{-webkit-padding-after:.5rem;padding-block-end:.5rem}.fd-side-nav__separator{background:var(--sapToolbar_SeparatorColor);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:.0625rem;line-height:normal;margin-block:0;margin-block:.25rem;margin-inline:0;margin-inline:.5rem;min-height:.0625rem;padding-block:0;padding-inline:0}.fd-side-nav__separator:after,.fd-side-nav__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-side-nav__group-header{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-side-nav__group-header:after,.fd-side-nav__group-header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-side-nav[class*=-collapsed],[class*=-collapsed]{--fdSideNav_Width:4rem;--fdSideNav_Overflow:visible}.fd-nested-list__item{display:block}.fd-nested-list__item .fd-nested-list__link{cursor:pointer}.fd-nested-list__item .fd-nested-list__content .fd-nested-list__button.fd-button{background:none}\n/*! Bundled license information:\n\nfundamental-styles/dist/side-nav.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 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*/\n"], dependencies: [{ kind: "directive", type: SideNavigationMainDirective, selector: "[fdSideNavigationMain], [fd-side-nav-main]" }, { kind: "component", type: PreparedNestedListComponent, selector: "fd-prepared-nested-list", inputs: ["first", "condensed", "list"] }, { kind: "directive", type: SideNavigationUtilityDirective, selector: "[fdSideNavigationUtility], [fd-side-nav-utility]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
132
132
|
}
|
|
133
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
133
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SideNavigationComponent, decorators: [{
|
|
134
134
|
type: Component,
|
|
135
135
|
args: [{ selector: 'fd-side-nav', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [MenuKeyboardService, NestedListKeyboardService, NestedListStateService], imports: [SideNavigationMainDirective, PreparedNestedListComponent, SideNavigationUtilityDirective], template: "<nav class=\"fd-side-nav\" [class.fd-side-nav--condensed]=\"condensed || sideNavigationConfiguration?.condensed\">\n @if (!sideNavigationConfiguration) {\n <ng-content></ng-content>\n } @else {\n @if (sideNavigationConfiguration.mainNavigation) {\n <div fd-side-nav-main>\n <fd-prepared-nested-list\n [condensed]=\"condensed || !!sideNavigationConfiguration.condensed\"\n [first]=\"true\"\n [list]=\"sideNavigationConfiguration.mainNavigation\"\n >\n </fd-prepared-nested-list>\n </div>\n }\n @if (sideNavigationConfiguration.utilityNavigation) {\n <div fd-side-nav-utility>\n <fd-prepared-nested-list\n [condensed]=\"condensed || !!sideNavigationConfiguration.condensed\"\n [first]=\"true\"\n [list]=\"sideNavigationConfiguration.utilityNavigation\"\n >\n </fd-prepared-nested-list>\n </div>\n }\n }\n</nav>\n", styles: [".fd-nested-list{--fdNestedList_Link_Height:2.75rem;--fdNestedList_Title_Font_Size:var(--sapFontLargeSize);--fdNestedList_Icon_Font_Size:var(--sapFontHeader4Size);--fdNestedList_Item_Padding_Left:0;--fdNestedList_Item_Padding_Right:0;border:0;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;list-style:none;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;width:100%}.fd-nested-list:after,.fd-nested-list:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-nested-list [class*=level]{border-bottom:none}.fd-nested-list [class*=level] .fd-nested-list__content,.fd-nested-list [class*=level] .fd-nested-list__link{border-top:none}.fd-nested-list .fd-nested-list__content,.fd-nested-list .fd-nested-list__link{border-bottom:none;padding-inline:var(--fdNestedList_Item_Padding_Left) var(--fdNestedList_Item_Padding_Right)}.fd-nested-list .fd-nested-list__content.is-selected,.fd-nested-list .fd-nested-list__content[aria-selected=true],.fd-nested-list .fd-nested-list__link.is-selected,.fd-nested-list .fd-nested-list__link[aria-selected=true]{border-bottom:var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor)}.fd-nested-list .fd-nested-list__content.has-child,.fd-nested-list .fd-nested-list__link.has-child{padding-inline:0}.fd-nested-list .fd-nested-list__content.has-child>.fd-nested-list__title{padding-inline:var(--fdNestedList_Item_Padding_Left) var(--fdNestedList_Item_Padding_Right)}.fd-nested-list .level-2{--fdNestedList_Item_Padding_Left:2.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-3{--fdNestedList_Item_Padding_Left:3.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-4{--fdNestedList_Item_Padding_Left:4.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-5{--fdNestedList_Item_Padding_Left:5.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-6{--fdNestedList_Item_Padding_Left:6.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-7{--fdNestedList_Item_Padding_Left:7.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-8{--fdNestedList_Item_Padding_Left:8.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-9{--fdNestedList_Item_Padding_Left:9.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list .level-10{--fdNestedList_Item_Padding_Left:10.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list[aria-hidden=true]{display:none}.fd-nested-list--popover{border-bottom:none}.fd-nested-list--popover .fd-nested-list__group-header{border-bottom:none;border-top-left-radius:var(--fdNested_List_Border_Corner_Radius);border-top-right-radius:var(--fdNested_List_Border_Corner_Radius)}.fd-nested-list--popover .fd-nested-list__item:first-child,.fd-nested-list--popover .fd-nested-list__item:first-child .fd-nested-list__content,.fd-nested-list--popover .fd-nested-list__item:first-child .fd-nested-list__link{border-top-left-radius:var(--fdNested_List_Border_Corner_Radius);border-top-right-radius:var(--fdNested_List_Border_Corner_Radius)}.fd-nested-list--popover .fd-nested-list__item:last-child,.fd-nested-list--popover .fd-nested-list__item:last-child .fd-nested-list__content,.fd-nested-list--popover .fd-nested-list__item:last-child .fd-nested-list__link{border-bottom-left-radius:var(--fdNested_List_Border_Corner_Radius);border-bottom-right-radius:var(--fdNested_List_Border_Corner_Radius)}.fd-nested-list__item{background:var(--sapList_Background);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;text-shadow:var(--fdVerticalNav_Text_Shadow)}.fd-nested-list__item:after,.fd-nested-list__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-nested-list__item:first-child .fd-nested-list__content,.fd-nested-list__item:first-child .fd-nested-list__link{border-top:none}.fd-nested-list__content,.fd-nested-list__link{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdNestedList_Link_Height);line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;text-decoration:none;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-top:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}.fd-nested-list__content:after,.fd-nested-list__content:before,.fd-nested-list__link:after,.fd-nested-list__link:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-nested-list__content.is-hover,.fd-nested-list__content.is-hover .fd-nested-list__button,.fd-nested-list__content:hover,.fd-nested-list__content:hover .fd-nested-list__button,.fd-nested-list__link.is-hover,.fd-nested-list__link.is-hover .fd-nested-list__button,.fd-nested-list__link:hover,.fd-nested-list__link:hover .fd-nested-list__button{background:var(--sapList_Hover_Background)}.fd-nested-list__content.is-focus,.fd-nested-list__content:focus,.fd-nested-list__link.is-focus,.fd-nested-list__link:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-nested-list__content.is-selected,.fd-nested-list__content[aria-selected=true],.fd-nested-list__link.is-selected,.fd-nested-list__link[aria-selected=true]{background:var(--sapList_SelectionBackgroundColor);border-bottom:var(--sapList_BorderWidth) solid;border-bottom-color:var(--sapList_SelectionBorderColor)}.fd-nested-list__content.is-selected .fd-nested-list__button,.fd-nested-list__content[aria-selected=true] .fd-nested-list__button,.fd-nested-list__link.is-selected .fd-nested-list__button,.fd-nested-list__link[aria-selected=true] .fd-nested-list__button{background:var(--sapList_SelectionBackgroundColor)}.fd-nested-list__content.is-selected.is-hover,.fd-nested-list__content.is-selected.is-hover .fd-nested-list__button,.fd-nested-list__content.is-selected:hover,.fd-nested-list__content.is-selected:hover .fd-nested-list__button,.fd-nested-list__content[aria-selected=true].is-hover,.fd-nested-list__content[aria-selected=true].is-hover .fd-nested-list__button,.fd-nested-list__content[aria-selected=true]:hover,.fd-nested-list__content[aria-selected=true]:hover .fd-nested-list__button,.fd-nested-list__link.is-selected.is-hover,.fd-nested-list__link.is-selected.is-hover .fd-nested-list__button,.fd-nested-list__link.is-selected:hover,.fd-nested-list__link.is-selected:hover .fd-nested-list__button,.fd-nested-list__link[aria-selected=true].is-hover,.fd-nested-list__link[aria-selected=true].is-hover .fd-nested-list__button,.fd-nested-list__link[aria-selected=true]:hover,.fd-nested-list__link[aria-selected=true]:hover .fd-nested-list__button{background:var(--sapList_Hover_SelectionBackground)}.fd-nested-list__content.is-active,.fd-nested-list__content.is-active .fd-nested-list__button,.fd-nested-list__content.is-active.is-selected,.fd-nested-list__content.is-active.is-selected .fd-nested-list__button,.fd-nested-list__content.is-active[aria-selected=true],.fd-nested-list__content.is-active[aria-selected=true] .fd-nested-list__button,.fd-nested-list__content:active,.fd-nested-list__content:active .fd-nested-list__button,.fd-nested-list__content:active.is-selected,.fd-nested-list__content:active.is-selected .fd-nested-list__button,.fd-nested-list__content:active[aria-selected=true],.fd-nested-list__content:active[aria-selected=true] .fd-nested-list__button,.fd-nested-list__link.is-active,.fd-nested-list__link.is-active .fd-nested-list__button,.fd-nested-list__link.is-active.is-selected,.fd-nested-list__link.is-active.is-selected .fd-nested-list__button,.fd-nested-list__link.is-active[aria-selected=true],.fd-nested-list__link.is-active[aria-selected=true] .fd-nested-list__button,.fd-nested-list__link:active,.fd-nested-list__link:active .fd-nested-list__button,.fd-nested-list__link:active.is-selected,.fd-nested-list__link:active.is-selected .fd-nested-list__button,.fd-nested-list__link:active[aria-selected=true],.fd-nested-list__link:active[aria-selected=true] .fd-nested-list__button{background:var(--sapList_Active_Background)}.fd-nested-list__content.is-active .fd-nested-list__button,.fd-nested-list__content.is-active .fd-nested-list__icon,.fd-nested-list__content.is-active .fd-nested-list__title,.fd-nested-list__content:active .fd-nested-list__button,.fd-nested-list__content:active .fd-nested-list__icon,.fd-nested-list__content:active .fd-nested-list__title,.fd-nested-list__link.is-active .fd-nested-list__button,.fd-nested-list__link.is-active .fd-nested-list__icon,.fd-nested-list__link.is-active .fd-nested-list__title,.fd-nested-list__link:active .fd-nested-list__button,.fd-nested-list__link:active .fd-nested-list__icon,.fd-nested-list__link:active .fd-nested-list__title{color:var(--sapList_Active_TextColor)}.fd-nested-list__content.has-child,.fd-nested-list__link.has-child{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding-block:0;padding-inline:0}.fd-nested-list__content.has-child>.fd-nested-list__item,.fd-nested-list__content.has-child>.fd-nested-list__link,.fd-nested-list__link.has-child>.fd-nested-list__item,.fd-nested-list__link.has-child>.fd-nested-list__link{border:none}.fd-nested-list__content.has-child>.fd-nested-list__link,.fd-nested-list__link.has-child>.fd-nested-list__link{background:transparent;border:none;height:100%}.fd-nested-list__content.has-child>.fd-nested-list__link.is-focus,.fd-nested-list__content.has-child>.fd-nested-list__link:focus,.fd-nested-list__link.has-child>.fd-nested-list__link.is-focus,.fd-nested-list__link.has-child>.fd-nested-list__link:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.1875rem}.fd-nested-list__content.has-child>.fd-nested-list__link>.fd-nested-list__title,.fd-nested-list__link.has-child>.fd-nested-list__link>.fd-nested-list__title{-webkit-padding-end:0;padding-inline-end:0}.fd-nested-list__link{cursor:pointer}.fd-nested-list__button.fd-button{background:none;border:none;color:var(--sapContent_IconColor);height:100%;max-height:100%;min-height:100%;min-width:2.5rem;outline:none;text-decoration:none}.fd-nested-list__button.fd-button [class*=sap-icon],.fd-nested-list__button.fd-button[class*=sap-icon]{font-size:var(--sapFontLargeSize)}.fd-nested-list__icon [class*=sap-icon],.fd-nested-list__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;line-height:1;-webkit-box-pack:center;-ms-flex-pack:center;color:var(--sapList_TextColor);font-size:var(--fdNestedList_Icon_Font_Size);justify-content:center;min-width:2.75rem}.fd-nested-list__icon [class*=sap-icon],.fd-nested-list__icon[class*=sap-icon],.fd-nested-list__title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%}.fd-nested-list__title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--fdNestedList_Title_Font_Size);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap;width:100%;-webkit-padding-end:1rem;padding-inline-end:1rem;text-align:start}.fd-nested-list__title:after,.fd-nested-list__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-nested-list__title:first-child{-webkit-padding-start:2.75rem;padding-inline-start:2.75rem}.fd-nested-list__group-header{background:var(--sapList_GroupHeaderBackground);border:0;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_GroupHeaderTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-weight:400;forced-color-adjust:none;height:2.75rem;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;font-size:var(--sapFontSize);font-weight:700;line-height:2rem;overflow:hidden;padding-inline:1rem;text-overflow:ellipsis;white-space:nowrap}.fd-nested-list__group-header:after,.fd-nested-list__group-header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-nested-list--no-border .fd-nested-list__group-header,.fd-nested-list--no-border .fd-nested-list__item,.fd-nested-list--no-border .fd-nested-list__link{border-top:none}.fd-nested-list--text-only{--fdNestedList_Item_Padding_Left:1rem}.fd-nested-list--text-only .fd-nested-list__content.has-child,.fd-nested-list--text-only .fd-nested-list__link.has-child{padding-block:0;padding-inline:0}.fd-nested-list--text-only .fd-nested-list__title:first-child{-webkit-padding-start:0;padding-inline-start:0}.fd-nested-list--text-only .level-2{--fdNestedList_Item_Padding_Left:2rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-2{--fdNestedList_Item_Padding_Left:2.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-3{--fdNestedList_Item_Padding_Left:3rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-3{--fdNestedList_Item_Padding_Left:3.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-4{--fdNestedList_Item_Padding_Left:4rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-4{--fdNestedList_Item_Padding_Left:4.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-5{--fdNestedList_Item_Padding_Left:5rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-5{--fdNestedList_Item_Padding_Left:5.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-6{--fdNestedList_Item_Padding_Left:6rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-6{--fdNestedList_Item_Padding_Left:6.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-7{--fdNestedList_Item_Padding_Left:7rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-7{--fdNestedList_Item_Padding_Left:7.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-8{--fdNestedList_Item_Padding_Left:8rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-8{--fdNestedList_Item_Padding_Left:8.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-9{--fdNestedList_Item_Padding_Left:9rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-9{--fdNestedList_Item_Padding_Left:9.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only .level-10{--fdNestedList_Item_Padding_Left:10rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list--text-only.level-10{--fdNestedList_Item_Padding_Left:10.75rem;--fdNestedList_Item_Padding_Right:0}.fd-nested-list[class*=-compact],[class*=-compact] .fd-nested-list:not([class*=-cozy]){--fdNestedList_Link_Height:2rem;--fdNestedList_Title_Font_Size:var(--sapFontSize);--fdNestedList_Icon_Font_Size:var(--sapFontLargeSize)}.fd-side-nav{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;background:var(--sapList_Background);-ms-flex-direction:column;flex-direction:column;height:100%;max-height:100%;width:var(--fdSideNav_Width,100%)}.fd-side-nav:after,.fd-side-nav:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-side-nav__container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding-inline:.5rem}.fd-side-nav__container:after,.fd-side-nav__container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-side-nav__container--top{-webkit-box-flex:1;-ms-flex:1;flex:1;height:100%;overflow-y:var(--fdSideNav_Overflow,scroll);position:relative;-webkit-padding-before:.5rem;padding-block-start:.5rem}.fd-side-nav__container--bottom{-webkit-padding-after:.5rem;padding-block-end:.5rem}.fd-side-nav__separator{background:var(--sapToolbar_SeparatorColor);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:.0625rem;line-height:normal;margin-block:0;margin-block:.25rem;margin-inline:0;margin-inline:.5rem;min-height:.0625rem;padding-block:0;padding-inline:0}.fd-side-nav__separator:after,.fd-side-nav__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-side-nav__group-header{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-side-nav__group-header:after,.fd-side-nav__group-header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-side-nav[class*=-collapsed],[class*=-collapsed]{--fdSideNav_Width:4rem;--fdSideNav_Overflow:visible}.fd-nested-list__item{display:block}.fd-nested-list__item .fd-nested-list__link{cursor:pointer}.fd-nested-list__item .fd-nested-list__content .fd-nested-list__button.fd-button{background:none}\n/*! Bundled license information:\n\nfundamental-styles/dist/side-nav.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 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*/\n"] }]
|
|
136
136
|
}], ctorParameters: () => [{ type: i1.NestedListKeyboardService }, { type: i1.NestedListStateService }], propDecorators: { sideNavigationConfiguration: [{
|
|
@@ -162,11 +162,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
162
162
|
* @deprecated
|
|
163
163
|
*/
|
|
164
164
|
class SideNavigationModule {
|
|
165
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
166
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
167
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
165
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SideNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
166
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: SideNavigationModule, imports: [SideNavigationComponent, SideNavigationMainDirective, SideNavigationUtilityDirective], exports: [SideNavigationComponent, SideNavigationMainDirective, SideNavigationUtilityDirective] }); }
|
|
167
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SideNavigationModule, providers: [MenuKeyboardService, NestedListKeyboardService, NestedListStateService], imports: [SideNavigationComponent] }); }
|
|
168
168
|
}
|
|
169
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
169
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SideNavigationModule, decorators: [{
|
|
170
170
|
type: NgModule,
|
|
171
171
|
args: [{
|
|
172
172
|
imports: [SideNavigationComponent, SideNavigationMainDirective, SideNavigationUtilityDirective],
|
|
@@ -15,7 +15,8 @@ class SkeletonComponent {
|
|
|
15
15
|
* @type {boolean}
|
|
16
16
|
* @default true
|
|
17
17
|
*/
|
|
18
|
-
this.animated = input(true,
|
|
18
|
+
this.animated = input(true, /* @ts-ignore */
|
|
19
|
+
...(ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []));
|
|
19
20
|
/**
|
|
20
21
|
* Type of the skeleton visualization.
|
|
21
22
|
*
|
|
@@ -27,7 +28,8 @@ class SkeletonComponent {
|
|
|
27
28
|
*
|
|
28
29
|
* @default null
|
|
29
30
|
*/
|
|
30
|
-
this.type = input(null,
|
|
31
|
+
this.type = input(null, /* @ts-ignore */
|
|
32
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
31
33
|
/**
|
|
32
34
|
* Number of lines when type is `'text'`. Last line is 60% width if more than 1 line.
|
|
33
35
|
*
|
|
@@ -36,7 +38,7 @@ class SkeletonComponent {
|
|
|
36
38
|
* @type {number}
|
|
37
39
|
* @default 3
|
|
38
40
|
*/
|
|
39
|
-
this.textLines = input(3, { ...(ngDevMode ? { debugName: "textLines" } : {}), transform: coerceNumberProperty });
|
|
41
|
+
this.textLines = input(3, { ...(ngDevMode ? { debugName: "textLines" } : /* istanbul ignore next */ {}), transform: coerceNumberProperty });
|
|
40
42
|
/**
|
|
41
43
|
* Width of skeleton.
|
|
42
44
|
*
|
|
@@ -46,7 +48,8 @@ class SkeletonComponent {
|
|
|
46
48
|
* @type {string | null}
|
|
47
49
|
* @default null
|
|
48
50
|
*/
|
|
49
|
-
this.width = input(null,
|
|
51
|
+
this.width = input(null, /* @ts-ignore */
|
|
52
|
+
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
50
53
|
/**
|
|
51
54
|
* Height of skeleton.
|
|
52
55
|
*
|
|
@@ -56,7 +59,8 @@ class SkeletonComponent {
|
|
|
56
59
|
* @type {string | null}
|
|
57
60
|
* @default null
|
|
58
61
|
*/
|
|
59
|
-
this.height = input(null,
|
|
62
|
+
this.height = input(null, /* @ts-ignore */
|
|
63
|
+
...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
60
64
|
/**
|
|
61
65
|
* Vertical spacing between text lines in pixels.
|
|
62
66
|
* Used for positioning lines in SVG and calculating total height.
|
|
@@ -92,17 +96,20 @@ class SkeletonComponent {
|
|
|
92
96
|
width: currentWidth,
|
|
93
97
|
height: currentHeight
|
|
94
98
|
};
|
|
95
|
-
},
|
|
99
|
+
}, /* @ts-ignore */
|
|
100
|
+
...(ngDevMode ? [{ debugName: "dimensions" }] : /* istanbul ignore next */ []));
|
|
96
101
|
/**
|
|
97
102
|
* Computed width value from dimensions.
|
|
98
103
|
* @hidden
|
|
99
104
|
*/
|
|
100
|
-
this.computedWidth = computed(() => this.dimensions().width,
|
|
105
|
+
this.computedWidth = computed(() => this.dimensions().width, /* @ts-ignore */
|
|
106
|
+
...(ngDevMode ? [{ debugName: "computedWidth" }] : /* istanbul ignore next */ []));
|
|
101
107
|
/**
|
|
102
108
|
* Computed height value from dimensions.
|
|
103
109
|
* @hidden
|
|
104
110
|
*/
|
|
105
|
-
this.computedHeight = computed(() => this.dimensions().height,
|
|
111
|
+
this.computedHeight = computed(() => this.dimensions().height, /* @ts-ignore */
|
|
112
|
+
...(ngDevMode ? [{ debugName: "computedHeight" }] : /* istanbul ignore next */ []));
|
|
106
113
|
/**
|
|
107
114
|
* Unique ID for SVG mask element.
|
|
108
115
|
* @hidden
|
|
@@ -120,12 +127,13 @@ class SkeletonComponent {
|
|
|
120
127
|
const hasMultipleLines = i > 0;
|
|
121
128
|
return isLastLine && hasMultipleLines ? '60%' : '100%';
|
|
122
129
|
});
|
|
123
|
-
},
|
|
130
|
+
}, /* @ts-ignore */
|
|
131
|
+
...(ngDevMode ? [{ debugName: "textLineWidths" }] : /* istanbul ignore next */ []));
|
|
124
132
|
}
|
|
125
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
126
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SkeletonComponent, isStandalone: true, selector: "fd-skeleton", inputs: { animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, textLines: { classPropertyName: "textLines", publicName: "textLines", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fd-skeleton--animated": "animated()", "style.width": "computedWidth()", "style.height": "computedHeight()" }, classAttribute: "fd-skeleton" }, ngImport: i0, template: "<svg width=\"100%\" height=\"100%\" class=\"fd-skeleton__canvas\">\n <defs>\n <linearGradient id=\"skeletonGradient\">\n <stop offset=\"0\" stop-color=\"var(--sapContent_Placeholderloading_Background)\"></stop>\n <stop class=\"fd-skeleton__middle\">\n <animate attributeName=\"offset\" values=\"0; 0; 0.5; 1; 1\" dur=\"2s\" repeatCount=\"indefinite\" />\n </stop>\n <stop offset=\"1\" stop-color=\"var(--sapContent_Placeholderloading_Background)\"></stop>\n </linearGradient>\n <mask [id]=\"svgMaskId\">\n @if (type() === 'rectangle') {\n <rect x=\"0\" y=\"0\" width=\"100%\" rx=\"4\" height=\"100%\"></rect>\n }\n @if (type() === 'circle') {\n <circle cx=\"50%\" cy=\"50%\" r=\"50%\"></circle>\n }\n @if (type() === 'text') {\n @for (width of textLineWidths(); track $index; let i = $index) {\n <rect x=\"0\" [attr.y]=\"i * LINE_SPACING\" rx=\"4\" height=\"8\" [attr.width]=\"width\"></rect>\n }\n }\n <ng-content></ng-content>\n </mask>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.mask]=\"'url(#' + svgMaskId + ')'\"></rect>\n</svg>\n", styles: [".fd-col,.fd-container,.fd-row{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-col:after,.fd-col:before,.fd-container:after,.fd-container:before,.fd-row:after,.fd-row:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;padding-block:0;padding-inline:.25rem;position:relative}.fd-container .fd-row{margin-inline:-.25rem;min-width:calc(100% + .5rem)}.fd-container>.fd-row>.fd-col{padding-block:.25rem}.fd-container.fd-container--no-gap .fd-row,.fd-container.fd-container--no-horizontal-gap .fd-row{margin-inline:0}.fd-container.fd-container--no-gap .fd-row .fd-col,.fd-container.fd-container--no-horizontal-gap .fd-row .fd-col{padding-inline:0}.fd-container.fd-container--no-gap>.fd-row>.fd-col,.fd-container.fd-container--no-vertical-gap>.fd-row>.fd-col{padding-block:0}.fd-container[dir=rtl],[dir=rtl] .fd-container{direction:rtl}.fd-row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;min-width:100%;position:relative}.fd-col{max-width:100%;min-width:100%;padding-inline:.25rem}.fd-col--0{max-width:0;min-width:0%}.fd-col--offset-0{-webkit-margin-start:0;margin-inline-start:0}.fd-col--offset-after-0{-webkit-margin-end:0;margin-inline-end:0}.fd-col--1{max-width:8.3333333333%;min-width:8.3333333333%}.fd-col--offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.fd-col--offset-after-1{-webkit-margin-end:8.3333333333%;margin-inline-end:8.3333333333%}.fd-col--2{max-width:16.6666666667%;min-width:16.6666666667%}.fd-col--offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.fd-col--offset-after-2{-webkit-margin-end:16.6666666667%;margin-inline-end:16.6666666667%}.fd-col--3{max-width:25%;min-width:25%}.fd-col--offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.fd-col--offset-after-3{-webkit-margin-end:25%;margin-inline-end:25%}.fd-col--4{max-width:33.3333333333%;min-width:33.3333333333%}.fd-col--offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.fd-col--offset-after-4{-webkit-margin-end:33.3333333333%;margin-inline-end:33.3333333333%}.fd-col--5{max-width:41.6666666667%;min-width:41.6666666667%}.fd-col--offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.fd-col--offset-after-5{-webkit-margin-end:41.6666666667%;margin-inline-end:41.6666666667%}.fd-col--6{max-width:50%;min-width:50%}.fd-col--offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.fd-col--offset-after-6{-webkit-margin-end:50%;margin-inline-end:50%}.fd-col--7{max-width:58.3333333333%;min-width:58.3333333333%}.fd-col--offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.fd-col--offset-after-7{-webkit-margin-end:58.3333333333%;margin-inline-end:58.3333333333%}.fd-col--8{max-width:66.6666666667%;min-width:66.6666666667%}.fd-col--offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.fd-col--offset-after-8{-webkit-margin-end:66.6666666667%;margin-inline-end:66.6666666667%}.fd-col--9{max-width:75%;min-width:75%}.fd-col--offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.fd-col--offset-after-9{-webkit-margin-end:75%;margin-inline-end:75%}.fd-col--10{max-width:83.3333333333%;min-width:83.3333333333%}.fd-col--offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.fd-col--offset-after-10{-webkit-margin-end:83.3333333333%;margin-inline-end:83.3333333333%}.fd-col--11{max-width:91.6666666667%;min-width:91.6666666667%}.fd-col--offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.fd-col--offset-after-11{-webkit-margin-end:91.6666666667%;margin-inline-end:91.6666666667%}.fd-col--12{max-width:100%;min-width:100%}.fd-col--offset-12{-webkit-margin-start:100%;margin-inline-start:100%}.fd-col--offset-after-12{-webkit-margin-end:100%;margin-inline-end:100%}.fd-col--full{max-width:none;min-width:8.3333333333%;-webkit-box-flex:1;-ms-flex:1;flex:1}.fd-col--wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}@media(width>=600px){.fd-container{padding-block:0;padding-inline:.5rem}.fd-container .fd-row{margin-inline:-.5rem;min-width:calc(100% + 1rem)}.fd-container>.fd-row>.fd-col{padding-block:.5rem}.fd-col{padding-inline:.5rem}.fd-col-md--0{max-width:0;min-width:0%}.fd-col-md--offset-0{-webkit-margin-start:0;margin-inline-start:0}.fd-col-md--offset-after-0{-webkit-margin-end:0;margin-inline-end:0}.fd-col-md--1{max-width:8.3333333333%;min-width:8.3333333333%}.fd-col-md--offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.fd-col-md--offset-after-1{-webkit-margin-end:8.3333333333%;margin-inline-end:8.3333333333%}.fd-col-md--2{max-width:16.6666666667%;min-width:16.6666666667%}.fd-col-md--offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.fd-col-md--offset-after-2{-webkit-margin-end:16.6666666667%;margin-inline-end:16.6666666667%}.fd-col-md--3{max-width:25%;min-width:25%}.fd-col-md--offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.fd-col-md--offset-after-3{-webkit-margin-end:25%;margin-inline-end:25%}.fd-col-md--4{max-width:33.3333333333%;min-width:33.3333333333%}.fd-col-md--offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.fd-col-md--offset-after-4{-webkit-margin-end:33.3333333333%;margin-inline-end:33.3333333333%}.fd-col-md--5{max-width:41.6666666667%;min-width:41.6666666667%}.fd-col-md--offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.fd-col-md--offset-after-5{-webkit-margin-end:41.6666666667%;margin-inline-end:41.6666666667%}.fd-col-md--6{max-width:50%;min-width:50%}.fd-col-md--offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.fd-col-md--offset-after-6{-webkit-margin-end:50%;margin-inline-end:50%}.fd-col-md--7{max-width:58.3333333333%;min-width:58.3333333333%}.fd-col-md--offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.fd-col-md--offset-after-7{-webkit-margin-end:58.3333333333%;margin-inline-end:58.3333333333%}.fd-col-md--8{max-width:66.6666666667%;min-width:66.6666666667%}.fd-col-md--offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.fd-col-md--offset-after-8{-webkit-margin-end:66.6666666667%;margin-inline-end:66.6666666667%}.fd-col-md--9{max-width:75%;min-width:75%}.fd-col-md--offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.fd-col-md--offset-after-9{-webkit-margin-end:75%;margin-inline-end:75%}.fd-col-md--10{max-width:83.3333333333%;min-width:83.3333333333%}.fd-col-md--offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.fd-col-md--offset-after-10{-webkit-margin-end:83.3333333333%;margin-inline-end:83.3333333333%}.fd-col-md--11{max-width:91.6666666667%;min-width:91.6666666667%}.fd-col-md--offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.fd-col-md--offset-after-11{-webkit-margin-end:91.6666666667%;margin-inline-end:91.6666666667%}.fd-col-md--12{max-width:100%;min-width:100%}.fd-col-md--offset-12{-webkit-margin-start:100%;margin-inline-start:100%}.fd-col-md--offset-after-12{-webkit-margin-end:100%;margin-inline-end:100%}}@media(width>=1024px){.fd-col-lg--0{max-width:0;min-width:0%}.fd-col-lg--offset-0{-webkit-margin-start:0;margin-inline-start:0}.fd-col-lg--offset-after-0{-webkit-margin-end:0;margin-inline-end:0}.fd-col-lg--1{max-width:8.3333333333%;min-width:8.3333333333%}.fd-col-lg--offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.fd-col-lg--offset-after-1{-webkit-margin-end:8.3333333333%;margin-inline-end:8.3333333333%}.fd-col-lg--2{max-width:16.6666666667%;min-width:16.6666666667%}.fd-col-lg--offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.fd-col-lg--offset-after-2{-webkit-margin-end:16.6666666667%;margin-inline-end:16.6666666667%}.fd-col-lg--3{max-width:25%;min-width:25%}.fd-col-lg--offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.fd-col-lg--offset-after-3{-webkit-margin-end:25%;margin-inline-end:25%}.fd-col-lg--4{max-width:33.3333333333%;min-width:33.3333333333%}.fd-col-lg--offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.fd-col-lg--offset-after-4{-webkit-margin-end:33.3333333333%;margin-inline-end:33.3333333333%}.fd-col-lg--5{max-width:41.6666666667%;min-width:41.6666666667%}.fd-col-lg--offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.fd-col-lg--offset-after-5{-webkit-margin-end:41.6666666667%;margin-inline-end:41.6666666667%}.fd-col-lg--6{max-width:50%;min-width:50%}.fd-col-lg--offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.fd-col-lg--offset-after-6{-webkit-margin-end:50%;margin-inline-end:50%}.fd-col-lg--7{max-width:58.3333333333%;min-width:58.3333333333%}.fd-col-lg--offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.fd-col-lg--offset-after-7{-webkit-margin-end:58.3333333333%;margin-inline-end:58.3333333333%}.fd-col-lg--8{max-width:66.6666666667%;min-width:66.6666666667%}.fd-col-lg--offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.fd-col-lg--offset-after-8{-webkit-margin-end:66.6666666667%;margin-inline-end:66.6666666667%}.fd-col-lg--9{max-width:75%;min-width:75%}.fd-col-lg--offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.fd-col-lg--offset-after-9{-webkit-margin-end:75%;margin-inline-end:75%}.fd-col-lg--10{max-width:83.3333333333%;min-width:83.3333333333%}.fd-col-lg--offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.fd-col-lg--offset-after-10{-webkit-margin-end:83.3333333333%;margin-inline-end:83.3333333333%}.fd-col-lg--11{max-width:91.6666666667%;min-width:91.6666666667%}.fd-col-lg--offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.fd-col-lg--offset-after-11{-webkit-margin-end:91.6666666667%;margin-inline-end:91.6666666667%}.fd-col-lg--12{max-width:100%;min-width:100%}.fd-col-lg--offset-12{-webkit-margin-start:100%;margin-inline-start:100%}.fd-col-lg--offset-after-12{-webkit-margin-end:100%;margin-inline-end:100%}}@media(width>=1440px){.fd-col-xl--0{max-width:0;min-width:0%}.fd-col-xl--offset-0{-webkit-margin-start:0;margin-inline-start:0}.fd-col-xl--offset-after-0{-webkit-margin-end:0;margin-inline-end:0}.fd-col-xl--1{max-width:8.3333333333%;min-width:8.3333333333%}.fd-col-xl--offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.fd-col-xl--offset-after-1{-webkit-margin-end:8.3333333333%;margin-inline-end:8.3333333333%}.fd-col-xl--2{max-width:16.6666666667%;min-width:16.6666666667%}.fd-col-xl--offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.fd-col-xl--offset-after-2{-webkit-margin-end:16.6666666667%;margin-inline-end:16.6666666667%}.fd-col-xl--3{max-width:25%;min-width:25%}.fd-col-xl--offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.fd-col-xl--offset-after-3{-webkit-margin-end:25%;margin-inline-end:25%}.fd-col-xl--4{max-width:33.3333333333%;min-width:33.3333333333%}.fd-col-xl--offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.fd-col-xl--offset-after-4{-webkit-margin-end:33.3333333333%;margin-inline-end:33.3333333333%}.fd-col-xl--5{max-width:41.6666666667%;min-width:41.6666666667%}.fd-col-xl--offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.fd-col-xl--offset-after-5{-webkit-margin-end:41.6666666667%;margin-inline-end:41.6666666667%}.fd-col-xl--6{max-width:50%;min-width:50%}.fd-col-xl--offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.fd-col-xl--offset-after-6{-webkit-margin-end:50%;margin-inline-end:50%}.fd-col-xl--7{max-width:58.3333333333%;min-width:58.3333333333%}.fd-col-xl--offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.fd-col-xl--offset-after-7{-webkit-margin-end:58.3333333333%;margin-inline-end:58.3333333333%}.fd-col-xl--8{max-width:66.6666666667%;min-width:66.6666666667%}.fd-col-xl--offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.fd-col-xl--offset-after-8{-webkit-margin-end:66.6666666667%;margin-inline-end:66.6666666667%}.fd-col-xl--9{max-width:75%;min-width:75%}.fd-col-xl--offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.fd-col-xl--offset-after-9{-webkit-margin-end:75%;margin-inline-end:75%}.fd-col-xl--10{max-width:83.3333333333%;min-width:83.3333333333%}.fd-col-xl--offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.fd-col-xl--offset-after-10{-webkit-margin-end:83.3333333333%;margin-inline-end:83.3333333333%}.fd-col-xl--11{max-width:91.6666666667%;min-width:91.6666666667%}.fd-col-xl--offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.fd-col-xl--offset-after-11{-webkit-margin-end:91.6666666667%;margin-inline-end:91.6666666667%}.fd-col-xl--12{max-width:100%;min-width:100%}.fd-col-xl--offset-12{-webkit-margin-start:100%;margin-inline-start:100%}.fd-col-xl--offset-after-12{-webkit-margin-end:100%;margin-inline-end:100%}}.fd-skeleton{display:inline-block;cursor:wait}.fd-skeleton__canvas{display:block;fill:var(--sapContent_Placeholderloading_Background)}.fd-skeleton__middle{stop-color:var(--fdSkeletonGradientMiddleColor);animation:fd-skeleton-shimmer 2s linear infinite}.fd-skeleton--animated .fd-skeleton__canvas{--fdSkeletonGradientMiddleColor: #999;fill:url(#skeletonGradient)}@keyframes fd-skeleton-shimmer{0%{stop-color:var(--sapContent_Placeholderloading_Background)}35%{stop-color:var(--fdSkeletonGradientMiddleColor)}65%{stop-color:var(--fdSkeletonGradientMiddleColor)}to{stop-color:var(--sapContent_Placeholderloading_Background)}}\n/*! Bundled license information:\n\nfundamental-styles/dist/layout-grid.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 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*/\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
133
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
134
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SkeletonComponent, isStandalone: true, selector: "fd-skeleton", inputs: { animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, textLines: { classPropertyName: "textLines", publicName: "textLines", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fd-skeleton--animated": "animated()", "style.width": "computedWidth()", "style.height": "computedHeight()" }, classAttribute: "fd-skeleton" }, ngImport: i0, template: "<svg width=\"100%\" height=\"100%\" class=\"fd-skeleton__canvas\">\n <defs>\n <linearGradient id=\"skeletonGradient\">\n <stop offset=\"0\" stop-color=\"var(--sapContent_Placeholderloading_Background)\"></stop>\n <stop class=\"fd-skeleton__middle\">\n <animate attributeName=\"offset\" values=\"0; 0; 0.5; 1; 1\" dur=\"2s\" repeatCount=\"indefinite\" />\n </stop>\n <stop offset=\"1\" stop-color=\"var(--sapContent_Placeholderloading_Background)\"></stop>\n </linearGradient>\n <mask [id]=\"svgMaskId\">\n @if (type() === 'rectangle') {\n <rect x=\"0\" y=\"0\" width=\"100%\" rx=\"4\" height=\"100%\"></rect>\n }\n @if (type() === 'circle') {\n <circle cx=\"50%\" cy=\"50%\" r=\"50%\"></circle>\n }\n @if (type() === 'text') {\n @for (width of textLineWidths(); track $index; let i = $index) {\n <rect x=\"0\" [attr.y]=\"i * LINE_SPACING\" rx=\"4\" height=\"8\" [attr.width]=\"width\"></rect>\n }\n }\n <ng-content></ng-content>\n </mask>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.mask]=\"'url(#' + svgMaskId + ')'\"></rect>\n</svg>\n", styles: [".fd-col,.fd-container,.fd-row{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-col:after,.fd-col:before,.fd-container:after,.fd-container:before,.fd-row:after,.fd-row:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;padding-block:0;padding-inline:.25rem;position:relative}.fd-container .fd-row{margin-inline:-.25rem;min-width:calc(100% + .5rem)}.fd-container>.fd-row>.fd-col{padding-block:.25rem}.fd-container.fd-container--no-gap .fd-row,.fd-container.fd-container--no-horizontal-gap .fd-row{margin-inline:0}.fd-container.fd-container--no-gap .fd-row .fd-col,.fd-container.fd-container--no-horizontal-gap .fd-row .fd-col{padding-inline:0}.fd-container.fd-container--no-gap>.fd-row>.fd-col,.fd-container.fd-container--no-vertical-gap>.fd-row>.fd-col{padding-block:0}.fd-container[dir=rtl],[dir=rtl] .fd-container{direction:rtl}.fd-row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;min-width:100%;position:relative}.fd-col{max-width:100%;min-width:100%;padding-inline:.25rem}.fd-col--0{max-width:0;min-width:0%}.fd-col--offset-0{-webkit-margin-start:0;margin-inline-start:0}.fd-col--offset-after-0{-webkit-margin-end:0;margin-inline-end:0}.fd-col--1{max-width:8.3333333333%;min-width:8.3333333333%}.fd-col--offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.fd-col--offset-after-1{-webkit-margin-end:8.3333333333%;margin-inline-end:8.3333333333%}.fd-col--2{max-width:16.6666666667%;min-width:16.6666666667%}.fd-col--offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.fd-col--offset-after-2{-webkit-margin-end:16.6666666667%;margin-inline-end:16.6666666667%}.fd-col--3{max-width:25%;min-width:25%}.fd-col--offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.fd-col--offset-after-3{-webkit-margin-end:25%;margin-inline-end:25%}.fd-col--4{max-width:33.3333333333%;min-width:33.3333333333%}.fd-col--offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.fd-col--offset-after-4{-webkit-margin-end:33.3333333333%;margin-inline-end:33.3333333333%}.fd-col--5{max-width:41.6666666667%;min-width:41.6666666667%}.fd-col--offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.fd-col--offset-after-5{-webkit-margin-end:41.6666666667%;margin-inline-end:41.6666666667%}.fd-col--6{max-width:50%;min-width:50%}.fd-col--offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.fd-col--offset-after-6{-webkit-margin-end:50%;margin-inline-end:50%}.fd-col--7{max-width:58.3333333333%;min-width:58.3333333333%}.fd-col--offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.fd-col--offset-after-7{-webkit-margin-end:58.3333333333%;margin-inline-end:58.3333333333%}.fd-col--8{max-width:66.6666666667%;min-width:66.6666666667%}.fd-col--offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.fd-col--offset-after-8{-webkit-margin-end:66.6666666667%;margin-inline-end:66.6666666667%}.fd-col--9{max-width:75%;min-width:75%}.fd-col--offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.fd-col--offset-after-9{-webkit-margin-end:75%;margin-inline-end:75%}.fd-col--10{max-width:83.3333333333%;min-width:83.3333333333%}.fd-col--offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.fd-col--offset-after-10{-webkit-margin-end:83.3333333333%;margin-inline-end:83.3333333333%}.fd-col--11{max-width:91.6666666667%;min-width:91.6666666667%}.fd-col--offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.fd-col--offset-after-11{-webkit-margin-end:91.6666666667%;margin-inline-end:91.6666666667%}.fd-col--12{max-width:100%;min-width:100%}.fd-col--offset-12{-webkit-margin-start:100%;margin-inline-start:100%}.fd-col--offset-after-12{-webkit-margin-end:100%;margin-inline-end:100%}.fd-col--full{max-width:none;min-width:8.3333333333%;-webkit-box-flex:1;-ms-flex:1;flex:1}.fd-col--wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}@media(width>=600px){.fd-container{padding-block:0;padding-inline:.5rem}.fd-container .fd-row{margin-inline:-.5rem;min-width:calc(100% + 1rem)}.fd-container>.fd-row>.fd-col{padding-block:.5rem}.fd-col{padding-inline:.5rem}.fd-col-md--0{max-width:0;min-width:0%}.fd-col-md--offset-0{-webkit-margin-start:0;margin-inline-start:0}.fd-col-md--offset-after-0{-webkit-margin-end:0;margin-inline-end:0}.fd-col-md--1{max-width:8.3333333333%;min-width:8.3333333333%}.fd-col-md--offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.fd-col-md--offset-after-1{-webkit-margin-end:8.3333333333%;margin-inline-end:8.3333333333%}.fd-col-md--2{max-width:16.6666666667%;min-width:16.6666666667%}.fd-col-md--offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.fd-col-md--offset-after-2{-webkit-margin-end:16.6666666667%;margin-inline-end:16.6666666667%}.fd-col-md--3{max-width:25%;min-width:25%}.fd-col-md--offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.fd-col-md--offset-after-3{-webkit-margin-end:25%;margin-inline-end:25%}.fd-col-md--4{max-width:33.3333333333%;min-width:33.3333333333%}.fd-col-md--offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.fd-col-md--offset-after-4{-webkit-margin-end:33.3333333333%;margin-inline-end:33.3333333333%}.fd-col-md--5{max-width:41.6666666667%;min-width:41.6666666667%}.fd-col-md--offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.fd-col-md--offset-after-5{-webkit-margin-end:41.6666666667%;margin-inline-end:41.6666666667%}.fd-col-md--6{max-width:50%;min-width:50%}.fd-col-md--offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.fd-col-md--offset-after-6{-webkit-margin-end:50%;margin-inline-end:50%}.fd-col-md--7{max-width:58.3333333333%;min-width:58.3333333333%}.fd-col-md--offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.fd-col-md--offset-after-7{-webkit-margin-end:58.3333333333%;margin-inline-end:58.3333333333%}.fd-col-md--8{max-width:66.6666666667%;min-width:66.6666666667%}.fd-col-md--offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.fd-col-md--offset-after-8{-webkit-margin-end:66.6666666667%;margin-inline-end:66.6666666667%}.fd-col-md--9{max-width:75%;min-width:75%}.fd-col-md--offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.fd-col-md--offset-after-9{-webkit-margin-end:75%;margin-inline-end:75%}.fd-col-md--10{max-width:83.3333333333%;min-width:83.3333333333%}.fd-col-md--offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.fd-col-md--offset-after-10{-webkit-margin-end:83.3333333333%;margin-inline-end:83.3333333333%}.fd-col-md--11{max-width:91.6666666667%;min-width:91.6666666667%}.fd-col-md--offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.fd-col-md--offset-after-11{-webkit-margin-end:91.6666666667%;margin-inline-end:91.6666666667%}.fd-col-md--12{max-width:100%;min-width:100%}.fd-col-md--offset-12{-webkit-margin-start:100%;margin-inline-start:100%}.fd-col-md--offset-after-12{-webkit-margin-end:100%;margin-inline-end:100%}}@media(width>=1024px){.fd-col-lg--0{max-width:0;min-width:0%}.fd-col-lg--offset-0{-webkit-margin-start:0;margin-inline-start:0}.fd-col-lg--offset-after-0{-webkit-margin-end:0;margin-inline-end:0}.fd-col-lg--1{max-width:8.3333333333%;min-width:8.3333333333%}.fd-col-lg--offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.fd-col-lg--offset-after-1{-webkit-margin-end:8.3333333333%;margin-inline-end:8.3333333333%}.fd-col-lg--2{max-width:16.6666666667%;min-width:16.6666666667%}.fd-col-lg--offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.fd-col-lg--offset-after-2{-webkit-margin-end:16.6666666667%;margin-inline-end:16.6666666667%}.fd-col-lg--3{max-width:25%;min-width:25%}.fd-col-lg--offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.fd-col-lg--offset-after-3{-webkit-margin-end:25%;margin-inline-end:25%}.fd-col-lg--4{max-width:33.3333333333%;min-width:33.3333333333%}.fd-col-lg--offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.fd-col-lg--offset-after-4{-webkit-margin-end:33.3333333333%;margin-inline-end:33.3333333333%}.fd-col-lg--5{max-width:41.6666666667%;min-width:41.6666666667%}.fd-col-lg--offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.fd-col-lg--offset-after-5{-webkit-margin-end:41.6666666667%;margin-inline-end:41.6666666667%}.fd-col-lg--6{max-width:50%;min-width:50%}.fd-col-lg--offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.fd-col-lg--offset-after-6{-webkit-margin-end:50%;margin-inline-end:50%}.fd-col-lg--7{max-width:58.3333333333%;min-width:58.3333333333%}.fd-col-lg--offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.fd-col-lg--offset-after-7{-webkit-margin-end:58.3333333333%;margin-inline-end:58.3333333333%}.fd-col-lg--8{max-width:66.6666666667%;min-width:66.6666666667%}.fd-col-lg--offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.fd-col-lg--offset-after-8{-webkit-margin-end:66.6666666667%;margin-inline-end:66.6666666667%}.fd-col-lg--9{max-width:75%;min-width:75%}.fd-col-lg--offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.fd-col-lg--offset-after-9{-webkit-margin-end:75%;margin-inline-end:75%}.fd-col-lg--10{max-width:83.3333333333%;min-width:83.3333333333%}.fd-col-lg--offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.fd-col-lg--offset-after-10{-webkit-margin-end:83.3333333333%;margin-inline-end:83.3333333333%}.fd-col-lg--11{max-width:91.6666666667%;min-width:91.6666666667%}.fd-col-lg--offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.fd-col-lg--offset-after-11{-webkit-margin-end:91.6666666667%;margin-inline-end:91.6666666667%}.fd-col-lg--12{max-width:100%;min-width:100%}.fd-col-lg--offset-12{-webkit-margin-start:100%;margin-inline-start:100%}.fd-col-lg--offset-after-12{-webkit-margin-end:100%;margin-inline-end:100%}}@media(width>=1440px){.fd-col-xl--0{max-width:0;min-width:0%}.fd-col-xl--offset-0{-webkit-margin-start:0;margin-inline-start:0}.fd-col-xl--offset-after-0{-webkit-margin-end:0;margin-inline-end:0}.fd-col-xl--1{max-width:8.3333333333%;min-width:8.3333333333%}.fd-col-xl--offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.fd-col-xl--offset-after-1{-webkit-margin-end:8.3333333333%;margin-inline-end:8.3333333333%}.fd-col-xl--2{max-width:16.6666666667%;min-width:16.6666666667%}.fd-col-xl--offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.fd-col-xl--offset-after-2{-webkit-margin-end:16.6666666667%;margin-inline-end:16.6666666667%}.fd-col-xl--3{max-width:25%;min-width:25%}.fd-col-xl--offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.fd-col-xl--offset-after-3{-webkit-margin-end:25%;margin-inline-end:25%}.fd-col-xl--4{max-width:33.3333333333%;min-width:33.3333333333%}.fd-col-xl--offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.fd-col-xl--offset-after-4{-webkit-margin-end:33.3333333333%;margin-inline-end:33.3333333333%}.fd-col-xl--5{max-width:41.6666666667%;min-width:41.6666666667%}.fd-col-xl--offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.fd-col-xl--offset-after-5{-webkit-margin-end:41.6666666667%;margin-inline-end:41.6666666667%}.fd-col-xl--6{max-width:50%;min-width:50%}.fd-col-xl--offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.fd-col-xl--offset-after-6{-webkit-margin-end:50%;margin-inline-end:50%}.fd-col-xl--7{max-width:58.3333333333%;min-width:58.3333333333%}.fd-col-xl--offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.fd-col-xl--offset-after-7{-webkit-margin-end:58.3333333333%;margin-inline-end:58.3333333333%}.fd-col-xl--8{max-width:66.6666666667%;min-width:66.6666666667%}.fd-col-xl--offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.fd-col-xl--offset-after-8{-webkit-margin-end:66.6666666667%;margin-inline-end:66.6666666667%}.fd-col-xl--9{max-width:75%;min-width:75%}.fd-col-xl--offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.fd-col-xl--offset-after-9{-webkit-margin-end:75%;margin-inline-end:75%}.fd-col-xl--10{max-width:83.3333333333%;min-width:83.3333333333%}.fd-col-xl--offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.fd-col-xl--offset-after-10{-webkit-margin-end:83.3333333333%;margin-inline-end:83.3333333333%}.fd-col-xl--11{max-width:91.6666666667%;min-width:91.6666666667%}.fd-col-xl--offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.fd-col-xl--offset-after-11{-webkit-margin-end:91.6666666667%;margin-inline-end:91.6666666667%}.fd-col-xl--12{max-width:100%;min-width:100%}.fd-col-xl--offset-12{-webkit-margin-start:100%;margin-inline-start:100%}.fd-col-xl--offset-after-12{-webkit-margin-end:100%;margin-inline-end:100%}}.fd-skeleton{display:inline-block;cursor:wait}.fd-skeleton__canvas{display:block;fill:var(--sapContent_Placeholderloading_Background)}.fd-skeleton__middle{stop-color:var(--fdSkeletonGradientMiddleColor);animation:fd-skeleton-shimmer 2s linear infinite}.fd-skeleton--animated .fd-skeleton__canvas{--fdSkeletonGradientMiddleColor: #999;fill:url(#skeletonGradient)}@keyframes fd-skeleton-shimmer{0%{stop-color:var(--sapContent_Placeholderloading_Background)}35%{stop-color:var(--fdSkeletonGradientMiddleColor)}65%{stop-color:var(--fdSkeletonGradientMiddleColor)}to{stop-color:var(--sapContent_Placeholderloading_Background)}}\n/*! Bundled license information:\n\nfundamental-styles/dist/layout-grid.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 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*/\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
127
135
|
}
|
|
128
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SkeletonComponent, decorators: [{
|
|
129
137
|
type: Component,
|
|
130
138
|
args: [{ selector: 'fd-skeleton', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
131
139
|
class: 'fd-skeleton',
|
|
@@ -140,11 +148,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
140
148
|
* Use direct `SkeletonComponent` import.
|
|
141
149
|
*/
|
|
142
150
|
class SkeletonModule {
|
|
143
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
144
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
145
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
151
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
152
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: SkeletonModule, imports: [SkeletonComponent], exports: [SkeletonComponent] }); }
|
|
153
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SkeletonModule }); }
|
|
146
154
|
}
|
|
147
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
155
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SkeletonModule, decorators: [{
|
|
148
156
|
type: NgModule,
|
|
149
157
|
args: [{
|
|
150
158
|
imports: [SkeletonComponent],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fundamental-ngx-core-skeleton.mjs","sources":["../../../../libs/core/skeleton/components/skeleton.component.ts","../../../../libs/core/skeleton/components/skeleton.component.html","../../../../libs/core/skeleton/skeleton.module.ts","../../../../libs/core/skeleton/fundamental-ngx-core-skeleton.ts"],"sourcesContent":["import { coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';\nimport { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { range } from '@fundamental-ngx/cdk/utils';\n\n/**\n * Type of skeleton visualization.\n * - `'rectangle'` - Rectangular skeleton with rounded corners\n * - `'circle'` - Circular skeleton\n * - `'text'` - Multi-line text skeleton\n * - `null` - No predefined shape, allows custom SVG projection\n */\nexport type SkeletonType = 'rectangle' | 'circle' | 'text' | null;\n\nlet skeletonUniqueId = 0;\n\n/**\n * Skeleton component for displaying loading placeholders with animated pulse effect.\n */\n@Component({\n selector: 'fd-skeleton',\n templateUrl: './skeleton.component.html',\n styleUrl: './skeleton.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'fd-skeleton',\n '[class.fd-skeleton--animated]': 'animated()',\n '[style.width]': 'computedWidth()',\n '[style.height]': 'computedHeight()'\n },\n imports: []\n})\nexport class SkeletonComponent {\n /**\n * Whether the skeleton displays animated pulse effect.\n *\n * @type {boolean}\n * @default true\n */\n readonly animated = input(true);\n\n /**\n * Type of the skeleton visualization.\n *\n * Available types:\n * - `'rectangle'` - Rectangular skeleton with rounded corners\n * - `'circle'` - Circular skeleton\n * - `'text'` - Multi-line text skeleton\n * - `null` - No predefined shape, allows custom SVG projection\n *\n * @default null\n */\n readonly type = input<SkeletonType>(null);\n\n /**\n * Number of lines when type is `'text'`. Last line is 60% width if more than 1 line.\n *\n * Accepts numbers or coercible number values (e.g., `'3'` will be coerced to `3`).\n *\n * @type {number}\n * @default 3\n */\n readonly textLines = input<number, NumberInput>(3, {\n transform: coerceNumberProperty\n });\n\n /**\n * Width of skeleton.\n *\n * Accepts any valid CSS width value (e.g., `'100px'`, `'50%'`, `'10rem'`).\n * Auto-calculated for text and circle types if not provided.\n *\n * @type {string | null}\n * @default null\n */\n readonly width = input<string | null>(null);\n\n /**\n * Height of skeleton.\n *\n * Accepts any valid CSS height value (e.g., `'100px'`, `'50%'`, `'10rem'`).\n * Auto-calculated for text and circle types if not provided.\n *\n * @type {string | null}\n * @default null\n */\n readonly height = input<string | null>(null);\n\n /**\n * Vertical spacing between text lines in pixels.\n * Used for positioning lines in SVG and calculating total height.\n * @hidden\n */\n protected readonly LINE_SPACING = 20;\n\n /**\n * Computed dimensions (width and height) based on skeleton type.\n * @hidden\n */\n protected readonly dimensions = computed(() => {\n const currentType = this.type();\n const currentWidth = this.width();\n const currentHeight = this.height();\n\n if (currentType === 'text') {\n const lines = Math.max(1, this.textLines());\n return {\n width: currentWidth ?? '100%',\n height: currentHeight ?? (lines > 1 ? `${this.LINE_SPACING * lines}px` : '8px')\n };\n }\n\n if (currentType === 'circle') {\n // Make circle square by mirroring the provided dimension\n if (!currentWidth && currentHeight) {\n return { width: currentHeight, height: currentHeight };\n }\n if (!currentHeight && currentWidth) {\n return { width: currentWidth, height: currentWidth };\n }\n }\n\n // Default: pass through provided values\n return {\n width: currentWidth,\n height: currentHeight\n };\n });\n\n /**\n * Computed width value from dimensions.\n * @hidden\n */\n protected readonly computedWidth = computed(() => this.dimensions().width);\n\n /**\n * Computed height value from dimensions.\n * @hidden\n */\n protected readonly computedHeight = computed(() => this.dimensions().height);\n\n /**\n * Unique ID for SVG mask element.\n * @hidden\n */\n protected readonly svgMaskId = `fd-skeleton-${skeletonUniqueId++}`;\n\n /**\n * Computed array of line widths for text type.\n * Last line is 60% width when there are multiple lines.\n * @hidden\n */\n protected readonly textLineWidths = computed(() => {\n const totalLines = this.textLines();\n return range(totalLines, (i) => {\n const isLastLine = i + 1 === totalLines;\n const hasMultipleLines = i > 0;\n return isLastLine && hasMultipleLines ? '60%' : '100%';\n });\n });\n}\n","<svg width=\"100%\" height=\"100%\" class=\"fd-skeleton__canvas\">\n <defs>\n <linearGradient id=\"skeletonGradient\">\n <stop offset=\"0\" stop-color=\"var(--sapContent_Placeholderloading_Background)\"></stop>\n <stop class=\"fd-skeleton__middle\">\n <animate attributeName=\"offset\" values=\"0; 0; 0.5; 1; 1\" dur=\"2s\" repeatCount=\"indefinite\" />\n </stop>\n <stop offset=\"1\" stop-color=\"var(--sapContent_Placeholderloading_Background)\"></stop>\n </linearGradient>\n <mask [id]=\"svgMaskId\">\n @if (type() === 'rectangle') {\n <rect x=\"0\" y=\"0\" width=\"100%\" rx=\"4\" height=\"100%\"></rect>\n }\n @if (type() === 'circle') {\n <circle cx=\"50%\" cy=\"50%\" r=\"50%\"></circle>\n }\n @if (type() === 'text') {\n @for (width of textLineWidths(); track $index; let i = $index) {\n <rect x=\"0\" [attr.y]=\"i * LINE_SPACING\" rx=\"4\" height=\"8\" [attr.width]=\"width\"></rect>\n }\n }\n <ng-content></ng-content>\n </mask>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.mask]=\"'url(#' + svgMaskId + ')'\"></rect>\n</svg>\n","import { NgModule } from '@angular/core';\n\nimport { SkeletonComponent } from './components/skeleton.component';\n\n/**\n * @deprecated\n * Use direct `SkeletonComponent` import.\n */\n@NgModule({\n imports: [SkeletonComponent],\n exports: [SkeletonComponent]\n})\nexport class SkeletonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-core-skeleton.mjs","sources":["../../../../libs/core/skeleton/components/skeleton.component.ts","../../../../libs/core/skeleton/components/skeleton.component.html","../../../../libs/core/skeleton/skeleton.module.ts","../../../../libs/core/skeleton/fundamental-ngx-core-skeleton.ts"],"sourcesContent":["import { coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';\nimport { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { range } from '@fundamental-ngx/cdk/utils';\n\n/**\n * Type of skeleton visualization.\n * - `'rectangle'` - Rectangular skeleton with rounded corners\n * - `'circle'` - Circular skeleton\n * - `'text'` - Multi-line text skeleton\n * - `null` - No predefined shape, allows custom SVG projection\n */\nexport type SkeletonType = 'rectangle' | 'circle' | 'text' | null;\n\nlet skeletonUniqueId = 0;\n\n/**\n * Skeleton component for displaying loading placeholders with animated pulse effect.\n */\n@Component({\n selector: 'fd-skeleton',\n templateUrl: './skeleton.component.html',\n styleUrl: './skeleton.component.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'fd-skeleton',\n '[class.fd-skeleton--animated]': 'animated()',\n '[style.width]': 'computedWidth()',\n '[style.height]': 'computedHeight()'\n },\n imports: []\n})\nexport class SkeletonComponent {\n /**\n * Whether the skeleton displays animated pulse effect.\n *\n * @type {boolean}\n * @default true\n */\n readonly animated = input(true);\n\n /**\n * Type of the skeleton visualization.\n *\n * Available types:\n * - `'rectangle'` - Rectangular skeleton with rounded corners\n * - `'circle'` - Circular skeleton\n * - `'text'` - Multi-line text skeleton\n * - `null` - No predefined shape, allows custom SVG projection\n *\n * @default null\n */\n readonly type = input<SkeletonType>(null);\n\n /**\n * Number of lines when type is `'text'`. Last line is 60% width if more than 1 line.\n *\n * Accepts numbers or coercible number values (e.g., `'3'` will be coerced to `3`).\n *\n * @type {number}\n * @default 3\n */\n readonly textLines = input<number, NumberInput>(3, {\n transform: coerceNumberProperty\n });\n\n /**\n * Width of skeleton.\n *\n * Accepts any valid CSS width value (e.g., `'100px'`, `'50%'`, `'10rem'`).\n * Auto-calculated for text and circle types if not provided.\n *\n * @type {string | null}\n * @default null\n */\n readonly width = input<string | null>(null);\n\n /**\n * Height of skeleton.\n *\n * Accepts any valid CSS height value (e.g., `'100px'`, `'50%'`, `'10rem'`).\n * Auto-calculated for text and circle types if not provided.\n *\n * @type {string | null}\n * @default null\n */\n readonly height = input<string | null>(null);\n\n /**\n * Vertical spacing between text lines in pixels.\n * Used for positioning lines in SVG and calculating total height.\n * @hidden\n */\n protected readonly LINE_SPACING = 20;\n\n /**\n * Computed dimensions (width and height) based on skeleton type.\n * @hidden\n */\n protected readonly dimensions = computed(() => {\n const currentType = this.type();\n const currentWidth = this.width();\n const currentHeight = this.height();\n\n if (currentType === 'text') {\n const lines = Math.max(1, this.textLines());\n return {\n width: currentWidth ?? '100%',\n height: currentHeight ?? (lines > 1 ? `${this.LINE_SPACING * lines}px` : '8px')\n };\n }\n\n if (currentType === 'circle') {\n // Make circle square by mirroring the provided dimension\n if (!currentWidth && currentHeight) {\n return { width: currentHeight, height: currentHeight };\n }\n if (!currentHeight && currentWidth) {\n return { width: currentWidth, height: currentWidth };\n }\n }\n\n // Default: pass through provided values\n return {\n width: currentWidth,\n height: currentHeight\n };\n });\n\n /**\n * Computed width value from dimensions.\n * @hidden\n */\n protected readonly computedWidth = computed(() => this.dimensions().width);\n\n /**\n * Computed height value from dimensions.\n * @hidden\n */\n protected readonly computedHeight = computed(() => this.dimensions().height);\n\n /**\n * Unique ID for SVG mask element.\n * @hidden\n */\n protected readonly svgMaskId = `fd-skeleton-${skeletonUniqueId++}`;\n\n /**\n * Computed array of line widths for text type.\n * Last line is 60% width when there are multiple lines.\n * @hidden\n */\n protected readonly textLineWidths = computed(() => {\n const totalLines = this.textLines();\n return range(totalLines, (i) => {\n const isLastLine = i + 1 === totalLines;\n const hasMultipleLines = i > 0;\n return isLastLine && hasMultipleLines ? '60%' : '100%';\n });\n });\n}\n","<svg width=\"100%\" height=\"100%\" class=\"fd-skeleton__canvas\">\n <defs>\n <linearGradient id=\"skeletonGradient\">\n <stop offset=\"0\" stop-color=\"var(--sapContent_Placeholderloading_Background)\"></stop>\n <stop class=\"fd-skeleton__middle\">\n <animate attributeName=\"offset\" values=\"0; 0; 0.5; 1; 1\" dur=\"2s\" repeatCount=\"indefinite\" />\n </stop>\n <stop offset=\"1\" stop-color=\"var(--sapContent_Placeholderloading_Background)\"></stop>\n </linearGradient>\n <mask [id]=\"svgMaskId\">\n @if (type() === 'rectangle') {\n <rect x=\"0\" y=\"0\" width=\"100%\" rx=\"4\" height=\"100%\"></rect>\n }\n @if (type() === 'circle') {\n <circle cx=\"50%\" cy=\"50%\" r=\"50%\"></circle>\n }\n @if (type() === 'text') {\n @for (width of textLineWidths(); track $index; let i = $index) {\n <rect x=\"0\" [attr.y]=\"i * LINE_SPACING\" rx=\"4\" height=\"8\" [attr.width]=\"width\"></rect>\n }\n }\n <ng-content></ng-content>\n </mask>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.mask]=\"'url(#' + svgMaskId + ')'\"></rect>\n</svg>\n","import { NgModule } from '@angular/core';\n\nimport { SkeletonComponent } from './components/skeleton.component';\n\n/**\n * @deprecated\n * Use direct `SkeletonComponent` import.\n */\n@NgModule({\n imports: [SkeletonComponent],\n exports: [SkeletonComponent]\n})\nexport class SkeletonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|