@fundamental-ngx/platform 0.47.0-rc.2 → 0.47.0-rc.21

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.
Files changed (77) hide show
  1. package/esm2022/form/combobox/combobox/combobox.component.mjs +2 -2
  2. package/esm2022/form/form-generator/controls/dynamic-form-generator-datepicker/dynamic-form-generator-datepicker.component.mjs +5 -6
  3. package/esm2022/form/form-generator/controls/dynamic-form-generator-editor/dynamic-form-generator-editor.component.mjs +5 -6
  4. package/esm2022/form/form-generator/controls/dynamic-form-generator-input/dynamic-form-generator-input.component.mjs +6 -7
  5. package/esm2022/form/form-generator/controls/dynamic-form-generator-multi-input/dynamic-form-generator-multi-input.component.mjs +5 -6
  6. package/esm2022/form/form-generator/controls/dynamic-form-generator-select/dynamic-form-generator-select.component.mjs +6 -6
  7. package/esm2022/form/form-generator/controls/dynamic-form-generator-switch/dynamic-form-generator-switch.component.mjs +5 -6
  8. package/esm2022/form/form-generator/form-generator/form-generator.component.mjs +14 -15
  9. package/esm2022/form/form-group/form-field/form-field.component.mjs +6 -8
  10. package/esm2022/form/form-group/form-group-header/form-group-header.component.mjs +6 -8
  11. package/esm2022/form/form-group/form-group.component.mjs +17 -19
  12. package/esm2022/form/multi-combobox/multi-combobox/multi-combobox.component.mjs +3 -3
  13. package/esm2022/form/multi-combobox/multi-combobox-mobile/multi-combobox/multi-combobox-mobile.component.mjs +11 -13
  14. package/esm2022/form/multi-input/index.mjs +8 -0
  15. package/esm2022/form/multi-input/multi-input.component.mjs +5 -5
  16. package/esm2022/form/radio-group/radio/radio.component.mjs +10 -12
  17. package/esm2022/form/select/select/select.component.mjs +7 -8
  18. package/esm2022/form/step-input/number/number-step-input.component.mjs +7 -8
  19. package/esm2022/form/switch/switch/index.mjs +2 -0
  20. package/esm2022/form/switch/switch/switch.component.mjs +7 -8
  21. package/esm2022/form/time-picker/time-picker.component.mjs +9 -10
  22. package/esm2022/message-popover/message-popover.component.mjs +8 -10
  23. package/esm2022/search-field/search-field.component.mjs +3 -3
  24. package/esm2022/settings-generator/controls/theme-selector-list/theme-selector-list.component.mjs +6 -7
  25. package/esm2022/settings-generator/layouts/settings-generator-sidebar-layout/settings-generator-sidebar-icon/settings-generator-sidebar-icon.component.mjs +5 -7
  26. package/esm2022/settings-generator/layouts/settings-generator-sidebar-layout/settings-generator-sidebar-layout.component.mjs +8 -9
  27. package/esm2022/settings-generator/settings-generator-content/settings-generator-content.component.mjs +10 -12
  28. package/esm2022/settings-generator/settings-generator.module.mjs +6 -10
  29. package/esm2022/shared/form/base.input.mjs +12 -10
  30. package/esm2022/table/components/table-header-cell-content/table-header-cell-content.component.mjs +3 -3
  31. package/esm2022/table/components/table-header-row/table-header-row.component.mjs +7 -4
  32. package/esm2022/table/components/table-p13-dialog/filtering/filtering.component.mjs +3 -3
  33. package/esm2022/table/components/table-row/table-row.component.mjs +3 -3
  34. package/esm2022/table-helpers/pipes/column-sorting-direction.pipe.mjs +27 -0
  35. package/esm2022/table-helpers/pipes/index.mjs +2 -1
  36. package/esm2022/upload-collection/upload-collection/upload-collection.component.mjs +2 -2
  37. package/esm2022/wizard-generator/components/dialog-wizard-generator/dialog-wizard-generator.component.mjs +14 -16
  38. package/esm2022/wizard-generator/components/wizard-body/wizard-body.component.mjs +8 -10
  39. package/esm2022/wizard-generator/components/wizard-generator/wizard-generator.component.mjs +9 -10
  40. package/esm2022/wizard-generator/components/wizard-summary-step/wizard-summary-section/wizard-summary-section.component.mjs +4 -5
  41. package/fesm2022/fundamental-ngx-platform-form.mjs +456 -463
  42. package/fesm2022/fundamental-ngx-platform-form.mjs.map +1 -1
  43. package/fesm2022/fundamental-ngx-platform-message-popover.mjs +9 -11
  44. package/fesm2022/fundamental-ngx-platform-message-popover.mjs.map +1 -1
  45. package/fesm2022/fundamental-ngx-platform-search-field.mjs +2 -2
  46. package/fesm2022/fundamental-ngx-platform-search-field.mjs.map +1 -1
  47. package/fesm2022/fundamental-ngx-platform-settings-generator.mjs +118 -124
  48. package/fesm2022/fundamental-ngx-platform-settings-generator.mjs.map +1 -1
  49. package/fesm2022/fundamental-ngx-platform-shared.mjs +7 -5
  50. package/fesm2022/fundamental-ngx-platform-shared.mjs.map +1 -1
  51. package/fesm2022/fundamental-ngx-platform-table-helpers.mjs +26 -1
  52. package/fesm2022/fundamental-ngx-platform-table-helpers.mjs.map +1 -1
  53. package/fesm2022/fundamental-ngx-platform-table.mjs +12 -9
  54. package/fesm2022/fundamental-ngx-platform-table.mjs.map +1 -1
  55. package/fesm2022/fundamental-ngx-platform-upload-collection.mjs +1 -1
  56. package/fesm2022/fundamental-ngx-platform-upload-collection.mjs.map +1 -1
  57. package/fesm2022/fundamental-ngx-platform-wizard-generator.mjs +175 -179
  58. package/fesm2022/fundamental-ngx-platform-wizard-generator.mjs.map +1 -1
  59. package/form/form-generator/form-generator/form-generator.component.d.ts +4 -4
  60. package/form/form-group/form-group-header/form-group-header.component.d.ts +1 -1
  61. package/form/form-group/form-group.component.d.ts +3 -3
  62. package/form/multi-combobox/multi-combobox-mobile/multi-combobox/multi-combobox-mobile.component.d.ts +2 -2
  63. package/form/multi-input/index.d.ts +7 -0
  64. package/form/radio-group/radio/radio.component.d.ts +2 -2
  65. package/form/switch/switch/index.d.ts +1 -0
  66. package/form/time-picker/time-picker.component.d.ts +2 -2
  67. package/fundamental-ngx-platform-v0.47.0-rc.21.tgz +0 -0
  68. package/package.json +4 -4
  69. package/schematics/ng-add/index.js +1 -1
  70. package/settings-generator/settings-generator.module.d.ts +8 -9
  71. package/shared/form/base.input.d.ts +5 -5
  72. package/table/components/table-header-row/table-header-row.component.d.ts +3 -1
  73. package/table-helpers/pipes/column-sorting-direction.pipe.d.ts +12 -0
  74. package/table-helpers/pipes/index.d.ts +1 -0
  75. package/wizard-generator/components/wizard-body/wizard-body.component.d.ts +1 -1
  76. package/wizard-generator/components/wizard-generator/wizard-generator.component.d.ts +1 -1
  77. package/fundamental-ngx-platform-v0.47.0-rc.2.tgz +0 -0
package/fesm2022/fundamental-ngx-platform-settings-generator.mjs CHANGED
@@ -1,27 +1,63 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ViewChild, ChangeDetectorRef, EventEmitter, Output, HostBinding, ViewChildren, InjectionToken, Directive, DestroyRef, forwardRef, ElementRef, Injector, ViewContainerRef, Inject, NgModule } from '@angular/core';
2
+ import { Component, ChangeDetectionStrategy, ViewEncapsulation, forwardRef, Input, inject, DestroyRef, ChangeDetectorRef, Injectable, ViewChild, EventEmitter, Output, HostBinding, ViewChildren, InjectionToken, Directive, ElementRef, Injector, ViewContainerRef, Inject, NgModule } from '@angular/core';
3
3
  import * as i1$2 from '@fundamental-ngx/platform/form';
4
- import { FormGeneratorComponent, BaseDynamicFormGeneratorControl, dynamicFormFieldProvider, dynamicFormGroupChildProvider, PlatformFormGeneratorModule } from '@fundamental-ngx/platform/form';
5
- import * as i2$2 from '@fundamental-ngx/cdk/utils';
6
- import { AsyncOrSyncPipe, isSubscribable, resizeObservable, ClickedBehaviorModule } from '@fundamental-ngx/cdk/utils';
7
- import { BehaviorSubject, Subject, filter, take, takeUntil, delay, tap, switchMap, map, combineLatest, startWith, debounceTime, distinctUntilChanged } from 'rxjs';
8
- import * as i3 from '@fundamental-ngx/core/tabs';
9
- import { TabPanelComponent, TabsModule } from '@fundamental-ngx/core/tabs';
10
- import { MessagePopoverFormWrapperComponent } from '@fundamental-ngx/platform/message-popover';
11
- import { set, merge } from 'lodash-es';
12
- import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
13
- import { TitleComponent } from '@fundamental-ngx/core/title';
14
- import * as i1 from '@fundamental-ngx/core/button';
15
- import { ButtonModule } from '@fundamental-ngx/core/button';
16
- import * as i2 from '@fundamental-ngx/core/skeleton';
17
- import { SkeletonModule } from '@fundamental-ngx/core/skeleton';
4
+ import { BaseDynamicFormGeneratorControl, dynamicFormFieldProvider, dynamicFormGroupChildProvider, FormGeneratorComponent, PlatformFormGeneratorModule } from '@fundamental-ngx/platform/form';
5
+ import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
6
+ import { ClickedDirective, isSubscribable, AsyncOrSyncPipe, resizeObservable } from '@fundamental-ngx/cdk/utils';
7
+ import * as i1 from '@fundamental-ngx/core/list';
8
+ import { ListModule } from '@fundamental-ngx/core/list';
18
9
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
19
10
  import { AvatarComponent } from '@fundamental-ngx/core/avatar';
20
- import * as i2$1 from '@fundamental-ngx/core/icon';
21
- import { IconModule } from '@fundamental-ngx/core/icon';
11
+ import { IconComponent } from '@fundamental-ngx/core/icon';
12
+ import { SkeletonComponent } from '@fundamental-ngx/core/skeleton';
22
13
  import { ListAvatarConfig, ListIconConfig } from '@fundamental-ngx/platform/list';
23
- import * as i1$1 from '@fundamental-ngx/core/list';
24
- import { ListModule } from '@fundamental-ngx/core/list';
14
+ import { merge, set } from 'lodash-es';
15
+ import { BehaviorSubject, Subject, filter, take, takeUntil, delay, tap, switchMap, map, combineLatest, startWith, debounceTime, distinctUntilChanged } from 'rxjs';
16
+ import { ButtonComponent } from '@fundamental-ngx/core/button';
17
+ import * as i1$1 from '@fundamental-ngx/core/tabs';
18
+ import { TabPanelComponent, TabsModule } from '@fundamental-ngx/core/tabs';
19
+ import { TitleComponent } from '@fundamental-ngx/core/title';
20
+ import { MessagePopoverFormWrapperComponent } from '@fundamental-ngx/platform/message-popover';
21
+
22
+ class ThemeSelectorListComponent extends BaseDynamicFormGeneratorControl {
23
+ /** @hidden */
24
+ ngOnInit() {
25
+ this.currentTheme = this.formItem.default;
26
+ }
27
+ /** @hidden */
28
+ setTheme(value) {
29
+ const control = this.form.get([this.formGroupName, this.name]);
30
+ this.currentTheme = value;
31
+ control?.setValue(value);
32
+ }
33
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ThemeSelectorListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
34
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ThemeSelectorListComponent, isStandalone: true, selector: "fdp-theme-selector-list", usesInheritance: true, ngImport: i0, template: "<ul fd-list [byline]=\"true\">\n <li fd-list-item *ngFor=\"let item of formItem.choices\" [selected]=\"currentTheme === item.value\">\n <a fd-list-link (fdkClicked)=\"setTheme(item.value)\">\n <ng-container *ngIf=\"!item.template\">\n <div fd-list-thumbnail class=\"settings-selector-list__theme--{{ item.value }}\">\n <fdp-theme-selector-list-icon></fdp-theme-selector-list-icon>\n </div>\n <div fd-list-content>\n <div fd-list-title>{{ item.label }}</div>\n <div fd-list-byline>{{ item.description }}</div>\n </div>\n </ng-container>\n <ng-template\n [ngIf]=\"item.template\"\n [ngTemplateOutlet]=\"item.template!\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n ></ng-template>\n </a>\n </li>\n</ul>\n", styles: [".settings-selector-list__theme--sap_fiori_3{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-1{fill:#f7f7f7}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-2{fill:#ccc}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-3{fill:#fff}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-4{fill:#d9d9d9}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-5{fill:#0854a0}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-6{fill:#6a6d70}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-7{fill:#354a5f}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-8{fill:#7996b4}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-9{fill:#fff}.settings-selector-list__theme--sap_fiori_3_dark{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-1{fill:#1c2228}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-2{fill:#424f5e}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-3{fill:#29313a}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-4{fill:#3a4552}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-5{fill:#91c8f6}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-6{fill:#d3d7d9}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-7{fill:#354a5f}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-8{fill:#7996b4}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-9{fill:#fafafa}.settings-selector-list__theme--sap_fiori_3_hcb{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-1{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-2{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-3{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-4{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-5{fill:#0f5d94}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-6{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-7{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-8,.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-9{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcw{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-1{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-2{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-3{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-4{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-5{fill:#8fb5ff}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-6{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-7{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-8,.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-9{fill:#000}.settings-selector-list__theme--sap_horizon{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-1{fill:#f5f6f7}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-2{fill:#ccc}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-3{fill:#fff}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-4{fill:#d9d9d9}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-5{fill:#0070f2}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-6{fill:#556b82}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-7{fill:#fff}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-8{fill:#788fa6}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-9{fill:#223548}.settings-selector-list__theme--sap_horizon_dark{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-1{fill:#12171c}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-2{fill:#475566}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-3{fill:#1d232a}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-4{fill:#2e3742}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-5{fill:#4db1ff}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-6{fill:#8396a8}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-7{fill:#1d232a}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-8{fill:#a9b4be}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-9{fill:#eaecee}.settings-selector-list__theme--sap_horizon_hcb{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-1{fill:#000}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-2{fill:#fff}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-3{fill:#000}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-4{fill:#fff}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-5{fill:#0f5d94}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-6{fill:#fff}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-7{fill:#000}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-8,.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-9{fill:#fff}.settings-selector-list__theme--sap_horizon_hcw{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-1{fill:#fff}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-2{fill:#000}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-3{fill:#fff}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-4{fill:#000}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-5{fill:#8fb5ff}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-6{fill:#000}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-7{fill:#fff}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-8,.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-9{fill:#000}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return ListModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i1.ListComponent; }), selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i0.forwardRef(function () { return i1.ListItemComponent; }), selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.ListTitleDirective; }), selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.ListLinkDirective; }), selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.ListBylineDirective; }), selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.ListContentDirective; }), selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.ListThumbnailDirective; }), selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "directive", type: i0.forwardRef(function () { return NgFor; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return ClickedDirective; }), selector: "[fdkClicked]", outputs: ["fdkClicked"] }, { kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ThemeSelectorListIconComponent; }), selector: "fdp-theme-selector-list-icon", inputs: ["size"] }, { kind: "directive", type: i0.forwardRef(function () { return NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
35
+ }
36
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ThemeSelectorListComponent, decorators: [{
37
+ type: Component,
38
+ args: [{ selector: 'fdp-theme-selector-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], standalone: true, imports: [
39
+ ListModule,
40
+ NgFor,
41
+ ClickedDirective,
42
+ NgIf,
43
+ forwardRef(() => ThemeSelectorListIconComponent),
44
+ NgTemplateOutlet
45
+ ], template: "<ul fd-list [byline]=\"true\">\n <li fd-list-item *ngFor=\"let item of formItem.choices\" [selected]=\"currentTheme === item.value\">\n <a fd-list-link (fdkClicked)=\"setTheme(item.value)\">\n <ng-container *ngIf=\"!item.template\">\n <div fd-list-thumbnail class=\"settings-selector-list__theme--{{ item.value }}\">\n <fdp-theme-selector-list-icon></fdp-theme-selector-list-icon>\n </div>\n <div fd-list-content>\n <div fd-list-title>{{ item.label }}</div>\n <div fd-list-byline>{{ item.description }}</div>\n </div>\n </ng-container>\n <ng-template\n [ngIf]=\"item.template\"\n [ngTemplateOutlet]=\"item.template!\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n ></ng-template>\n </a>\n </li>\n</ul>\n", styles: [".settings-selector-list__theme--sap_fiori_3{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-1{fill:#f7f7f7}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-2{fill:#ccc}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-3{fill:#fff}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-4{fill:#d9d9d9}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-5{fill:#0854a0}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-6{fill:#6a6d70}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-7{fill:#354a5f}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-8{fill:#7996b4}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-9{fill:#fff}.settings-selector-list__theme--sap_fiori_3_dark{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-1{fill:#1c2228}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-2{fill:#424f5e}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-3{fill:#29313a}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-4{fill:#3a4552}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-5{fill:#91c8f6}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-6{fill:#d3d7d9}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-7{fill:#354a5f}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-8{fill:#7996b4}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-9{fill:#fafafa}.settings-selector-list__theme--sap_fiori_3_hcb{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-1{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-2{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-3{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-4{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-5{fill:#0f5d94}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-6{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-7{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-8,.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-9{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcw{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-1{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-2{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-3{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-4{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-5{fill:#8fb5ff}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-6{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-7{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-8,.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-9{fill:#000}.settings-selector-list__theme--sap_horizon{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-1{fill:#f5f6f7}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-2{fill:#ccc}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-3{fill:#fff}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-4{fill:#d9d9d9}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-5{fill:#0070f2}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-6{fill:#556b82}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-7{fill:#fff}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-8{fill:#788fa6}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-9{fill:#223548}.settings-selector-list__theme--sap_horizon_dark{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-1{fill:#12171c}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-2{fill:#475566}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-3{fill:#1d232a}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-4{fill:#2e3742}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-5{fill:#4db1ff}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-6{fill:#8396a8}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-7{fill:#1d232a}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-8{fill:#a9b4be}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-9{fill:#eaecee}.settings-selector-list__theme--sap_horizon_hcb{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-1{fill:#000}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-2{fill:#fff}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-3{fill:#000}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-4{fill:#fff}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-5{fill:#0f5d94}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-6{fill:#fff}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-7{fill:#000}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-8,.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-9{fill:#fff}.settings-selector-list__theme--sap_horizon_hcw{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-1{fill:#fff}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-2{fill:#000}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-3{fill:#fff}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-4{fill:#000}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-5{fill:#8fb5ff}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-6{fill:#000}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-7{fill:#fff}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-8,.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-9{fill:#000}\n"] }]
46
+ }] });
47
+ class ThemeSelectorListIconComponent {
48
+ constructor() {
49
+ /** @hidden */
50
+ this.size = 40;
51
+ }
52
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ThemeSelectorListIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
53
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ThemeSelectorListIconComponent, isStandalone: true, selector: "fdp-theme-selector-list-icon", inputs: { size: "size" }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\" [style.width.px]=\"size\" [style.height.px]=\"size\">\n <defs>\n <style>\n .settings-selector-list-icon__cls-1 {\n fill: #1c2228;\n }\n\n .settings-selector-list-icon__cls-2 {\n fill: #424f5e;\n }\n\n .settings-selector-list-icon__cls-3 {\n fill: #29313a;\n }\n\n .settings-selector-list-icon__cls-4 {\n fill: #3a4552;\n }\n\n .settings-selector-list-icon__cls-5 {\n fill: #91c8f6;\n }\n\n .settings-selector-list-icon__cls-6 {\n fill: #d3d7d9;\n }\n\n .settings-selector-list-icon__cls-7 {\n fill: #354a5f;\n }\n\n .settings-selector-list-icon__cls-8 {\n fill: #7996b4;\n }\n\n .settings-selector-list-icon__cls-9 {\n fill: #fff;\n }\n </style>\n </defs>\n <rect class=\"settings-selector-list-icon__cls-1\" y=\"88\" width=\"200\" height=\"112\" />\n <path class=\"settings-selector-list-icon__cls-2\" d=\"M200,105v95H59V110a5,5,0,0,1,5-5Z\" />\n <path class=\"settings-selector-list-icon__cls-3\" d=\"M64,106H200v94H60V110A4,4,0,0,1,64,106Z\" />\n <rect class=\"settings-selector-list-icon__cls-3\" y=\"44\" width=\"200\" height=\"44\" />\n <rect class=\"settings-selector-list-icon__cls-4\" y=\"87\" width=\"200\" height=\"1\" />\n <path\n class=\"settings-selector-list-icon__cls-5\"\n d=\"M64,63h46a5,5,0,0,1,5,5h0a5,5,0,0,1-5,5H64a5,5,0,0,1-5-5h0A5,5,0,0,1,64,63Z\"\n />\n <path class=\"settings-selector-list-icon__cls-6\" d=\"M153,63h47V73H153a5,5,0,0,1-5-5h0A5,5,0,0,1,153,63Z\" />\n <path class=\"settings-selector-list-icon__cls-5\" d=\"M62,85h50a3,3,0,0,1,3,3H59A3,3,0,0,1,62,85Z\" />\n <rect class=\"settings-selector-list-icon__cls-7\" width=\"200\" height=\"44\" />\n <path\n class=\"settings-selector-list-icon__cls-8\"\n d=\"M68.459,13a1,1,0,0,1,.714,1.707l-16.155,16A1.01,1.01,0,0,1,52.3,31H33.539a1,1,0,0,1-1.01-.99V14a1,1,0,0,1,1-1h34.93m0-3H33.539A4.024,4.024,0,0,0,29.5,14V30a4.024,4.024,0,0,0,4.039,4H52.3a4.033,4.033,0,0,0,2.857-1.172l16.154-16a3.961,3.961,0,0,0,.876-4.359A4.027,4.027,0,0,0,68.459,10Z\"\n />\n <rect class=\"settings-selector-list-icon__cls-9\" x=\"82.121\" y=\"16.949\" width=\"75.758\" height=\"10.101\" rx=\"5\" />\n <path class=\"settings-selector-list-icon__cls-9\" d=\"M170,18h30v8H170a4,4,0,0,1-4-4h0A4,4,0,0,1,170,18Z\" />\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
54
+ }
55
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ThemeSelectorListIconComponent, decorators: [{
56
+ type: Component,
57
+ args: [{ selector: 'fdp-theme-selector-list-icon', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\" [style.width.px]=\"size\" [style.height.px]=\"size\">\n <defs>\n <style>\n .settings-selector-list-icon__cls-1 {\n fill: #1c2228;\n }\n\n .settings-selector-list-icon__cls-2 {\n fill: #424f5e;\n }\n\n .settings-selector-list-icon__cls-3 {\n fill: #29313a;\n }\n\n .settings-selector-list-icon__cls-4 {\n fill: #3a4552;\n }\n\n .settings-selector-list-icon__cls-5 {\n fill: #91c8f6;\n }\n\n .settings-selector-list-icon__cls-6 {\n fill: #d3d7d9;\n }\n\n .settings-selector-list-icon__cls-7 {\n fill: #354a5f;\n }\n\n .settings-selector-list-icon__cls-8 {\n fill: #7996b4;\n }\n\n .settings-selector-list-icon__cls-9 {\n fill: #fff;\n }\n </style>\n </defs>\n <rect class=\"settings-selector-list-icon__cls-1\" y=\"88\" width=\"200\" height=\"112\" />\n <path class=\"settings-selector-list-icon__cls-2\" d=\"M200,105v95H59V110a5,5,0,0,1,5-5Z\" />\n <path class=\"settings-selector-list-icon__cls-3\" d=\"M64,106H200v94H60V110A4,4,0,0,1,64,106Z\" />\n <rect class=\"settings-selector-list-icon__cls-3\" y=\"44\" width=\"200\" height=\"44\" />\n <rect class=\"settings-selector-list-icon__cls-4\" y=\"87\" width=\"200\" height=\"1\" />\n <path\n class=\"settings-selector-list-icon__cls-5\"\n d=\"M64,63h46a5,5,0,0,1,5,5h0a5,5,0,0,1-5,5H64a5,5,0,0,1-5-5h0A5,5,0,0,1,64,63Z\"\n />\n <path class=\"settings-selector-list-icon__cls-6\" d=\"M153,63h47V73H153a5,5,0,0,1-5-5h0A5,5,0,0,1,153,63Z\" />\n <path class=\"settings-selector-list-icon__cls-5\" d=\"M62,85h50a3,3,0,0,1,3,3H59A3,3,0,0,1,62,85Z\" />\n <rect class=\"settings-selector-list-icon__cls-7\" width=\"200\" height=\"44\" />\n <path\n class=\"settings-selector-list-icon__cls-8\"\n d=\"M68.459,13a1,1,0,0,1,.714,1.707l-16.155,16A1.01,1.01,0,0,1,52.3,31H33.539a1,1,0,0,1-1.01-.99V14a1,1,0,0,1,1-1h34.93m0-3H33.539A4.024,4.024,0,0,0,29.5,14V30a4.024,4.024,0,0,0,4.039,4H52.3a4.033,4.033,0,0,0,2.857-1.172l16.154-16a3.961,3.961,0,0,0,.876-4.359A4.027,4.027,0,0,0,68.459,10Z\"\n />\n <rect class=\"settings-selector-list-icon__cls-9\" x=\"82.121\" y=\"16.949\" width=\"75.758\" height=\"10.101\" rx=\"5\" />\n <path class=\"settings-selector-list-icon__cls-9\" d=\"M170,18h30v8H170a4,4,0,0,1-4-4h0A4,4,0,0,1,170,18Z\" />\n</svg>\n" }]
58
+ }], propDecorators: { size: [{
59
+ type: Input
60
+ }] } });
25
61
 
26
62
  const FDP_SETTINGS_GENERATOR_DEFAULT_CONFIG = {
27
63
  defaultLayout: 'sidebar',
@@ -31,6 +67,62 @@ const FDP_SETTINGS_GENERATOR_DEFAULT_CONFIG = {
31
67
  }
32
68
  };
33
69
 
70
+ class SettingsGeneratorSidebarIconComponent {
71
+ constructor() {
72
+ /** @hidden */
73
+ this._destroyRef = inject(DestroyRef);
74
+ /** @hidden */
75
+ this._cdr = inject(ChangeDetectorRef);
76
+ }
77
+ /** Thumbnail configuration. */
78
+ set thumbnail(value) {
79
+ this._thumbnail = value;
80
+ if (this.thumbnail.avatar) {
81
+ this._transformAvatarConfig(this.thumbnail.avatar);
82
+ }
83
+ if (this.thumbnail.icon) {
84
+ this._transformIconConfig(this.thumbnail.icon);
85
+ }
86
+ }
87
+ get thumbnail() {
88
+ return this._thumbnail;
89
+ }
90
+ /** @hidden */
91
+ _transformAvatarConfig(config$) {
92
+ this._getConfigFromObservable(config$, (parsedConfig) => {
93
+ const avatarConfig = typeof parsedConfig === 'string' ? { image: parsedConfig } : parsedConfig;
94
+ this._avatarConfig = merge(new ListAvatarConfig(), avatarConfig);
95
+ this._cdr.detectChanges();
96
+ });
97
+ }
98
+ /** @Hidden */
99
+ _transformIconConfig(config$) {
100
+ this._getConfigFromObservable(config$, (parsedConfig) => {
101
+ const iconConfig = typeof parsedConfig === 'string' ? { glyph: parsedConfig } : parsedConfig;
102
+ this._iconConfig = merge(new ListIconConfig(), iconConfig);
103
+ this._cdr.detectChanges();
104
+ });
105
+ }
106
+ /** @hidden */
107
+ _getConfigFromObservable(config, callback) {
108
+ if (isSubscribable(config)) {
109
+ config.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((_config) => {
110
+ callback(_config);
111
+ });
112
+ return;
113
+ }
114
+ callback(config);
115
+ }
116
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SettingsGeneratorSidebarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
117
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: SettingsGeneratorSidebarIconComponent, isStandalone: true, selector: "fdp-settings-generator-sidebar-icon", inputs: { thumbnail: "thumbnail" }, ngImport: i0, template: "<ng-container *ngIf=\"!_iconConfig && !_avatarConfig; else iconBlock\">\n <fd-skeleton type=\"rectangle\" width=\"48px\" height=\"48px\"></fd-skeleton>\n</ng-container>\n<ng-template #iconBlock>\n <fd-icon\n *ngIf=\"_iconConfig && _iconConfig.glyph\"\n [glyph]=\"_iconConfig.glyph\"\n [ariaLabel]=\"_iconConfig.ariaLabel\"\n [font]=\"_iconConfig.font\"\n ></fd-icon>\n <fd-avatar\n *ngIf=\"_avatarConfig && (_avatarConfig.image || _avatarConfig.glyph || _avatarConfig.zoomGlyph)\"\n [size]=\"_avatarConfig.size\"\n [glyph]=\"_avatarConfig.glyph\"\n [zoomGlyph]=\"_avatarConfig.zoomGlyph\"\n [label]=\"_avatarConfig.label\"\n [circle]=\"_avatarConfig.circle\"\n [placeholder]=\"_avatarConfig.placeholder\"\n [tile]=\"_avatarConfig.tile\"\n [colorAccent]=\"_avatarConfig.colorAccent\"\n [image]=\"_avatarConfig.image\"\n [transparent]=\"_avatarConfig.transparent\"\n [random]=\"_avatarConfig.random\"\n [class]=\"'fd-list__icon ' + _avatarConfig.class\"\n [ariaLabel]=\"_avatarConfig.ariaLabel\"\n [ariaLabelledby]=\"_avatarConfig.ariaLabelledby\"\n [contain]=\"_avatarConfig.contain\"\n [border]=\"_avatarConfig.border\"\n [alterIcon]=\"_avatarConfig.alterIcon\"\n [backupImage]=\"_avatarConfig.backupImage\"\n [clickable]=\"_avatarConfig.clickable\"\n [attr.alt]=\"_avatarConfig.ariaLabel\"\n role=\"img\"\n ></fd-avatar>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
118
+ }
119
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SettingsGeneratorSidebarIconComponent, decorators: [{
120
+ type: Component,
121
+ args: [{ selector: 'fdp-settings-generator-sidebar-icon', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, SkeletonComponent, IconComponent, AvatarComponent], template: "<ng-container *ngIf=\"!_iconConfig && !_avatarConfig; else iconBlock\">\n <fd-skeleton type=\"rectangle\" width=\"48px\" height=\"48px\"></fd-skeleton>\n</ng-container>\n<ng-template #iconBlock>\n <fd-icon\n *ngIf=\"_iconConfig && _iconConfig.glyph\"\n [glyph]=\"_iconConfig.glyph\"\n [ariaLabel]=\"_iconConfig.ariaLabel\"\n [font]=\"_iconConfig.font\"\n ></fd-icon>\n <fd-avatar\n *ngIf=\"_avatarConfig && (_avatarConfig.image || _avatarConfig.glyph || _avatarConfig.zoomGlyph)\"\n [size]=\"_avatarConfig.size\"\n [glyph]=\"_avatarConfig.glyph\"\n [zoomGlyph]=\"_avatarConfig.zoomGlyph\"\n [label]=\"_avatarConfig.label\"\n [circle]=\"_avatarConfig.circle\"\n [placeholder]=\"_avatarConfig.placeholder\"\n [tile]=\"_avatarConfig.tile\"\n [colorAccent]=\"_avatarConfig.colorAccent\"\n [image]=\"_avatarConfig.image\"\n [transparent]=\"_avatarConfig.transparent\"\n [random]=\"_avatarConfig.random\"\n [class]=\"'fd-list__icon ' + _avatarConfig.class\"\n [ariaLabel]=\"_avatarConfig.ariaLabel\"\n [ariaLabelledby]=\"_avatarConfig.ariaLabelledby\"\n [contain]=\"_avatarConfig.contain\"\n [border]=\"_avatarConfig.border\"\n [alterIcon]=\"_avatarConfig.alterIcon\"\n [backupImage]=\"_avatarConfig.backupImage\"\n [clickable]=\"_avatarConfig.clickable\"\n [attr.alt]=\"_avatarConfig.ariaLabel\"\n role=\"img\"\n ></fd-avatar>\n</ng-template>\n" }]
122
+ }], propDecorators: { thumbnail: [{
123
+ type: Input
124
+ }] } });
125
+
34
126
  class SettingsGeneratorService {
35
127
  /** @hidden */
36
128
  constructor() {
@@ -245,15 +337,15 @@ class SettingsGeneratorContentComponent {
245
337
  });
246
338
  }
247
339
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SettingsGeneratorContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
248
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: SettingsGeneratorContentComponent, isStandalone: true, selector: "fdp-settings-generator-content", inputs: { settings: "settings", mobile: "mobile" }, outputs: { goBack: "goBack" }, host: { properties: { "class": "this._initialClass" } }, viewQueries: [{ propertyName: "_tabPanels", predicate: TabPanelComponent, descendants: true }], ngImport: i0, template: "<h2 fd-title class=\"fdp-settings-generator__title\">\n <button *ngIf=\"mobile\" fd-button glyph=\"menu2\" fdType=\"transparent\" (click)=\"goBack.emit()\"></button>\n <ng-container *ngIf=\"settings?.title | fdkAsyncOrSync as settingsTitle; else loadingBlock\">\n {{ settingsTitle }}\n </ng-container>\n <ng-template #loadingBlock>\n <fd-skeleton height=\"40px\" type=\"rectangle\" width=\"40%\" textLines=\"1\" [style.margin]=\"'auto 0'\"></fd-skeleton>\n </ng-template>\n</h2>\n\n<ng-template #tabbedLayout>\n <fd-tab-list size=\"s\">\n <fd-tab *ngFor=\"let group of _groups\" [title]=\"group.title | fdkAsyncOrSync\">\n <fdp-settings-generator-section\n [groupName]=\"$any(settings).id\"\n [items]=\"group\"\n ></fdp-settings-generator-section>\n </fd-tab>\n </fd-tab-list>\n</ng-template>\n\n<ng-template #formLayout>\n <fdp-settings-generator-section [items]=\"settings!\"></fdp-settings-generator-section>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"_contentLayout === 'tabs' ? tabbedLayout : formLayout\"></ng-container>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i3.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "selectedTabIndexChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i3.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SettingsGeneratorSectionComponent, selector: "fdp-settings-generator-section", inputs: ["groupName", "items"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncOrSyncPipe, name: "fdkAsyncOrSync" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
340
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: SettingsGeneratorContentComponent, isStandalone: true, selector: "fdp-settings-generator-content", inputs: { settings: "settings", mobile: "mobile" }, outputs: { goBack: "goBack" }, host: { properties: { "class": "this._initialClass" } }, viewQueries: [{ propertyName: "_tabPanels", predicate: TabPanelComponent, descendants: true }], ngImport: i0, template: "<h2 fd-title class=\"fdp-settings-generator__title\">\n <button *ngIf=\"mobile\" fd-button glyph=\"menu2\" fdType=\"transparent\" (click)=\"goBack.emit()\"></button>\n <ng-container *ngIf=\"settings?.title | fdkAsyncOrSync as settingsTitle; else loadingBlock\">\n {{ settingsTitle }}\n </ng-container>\n <ng-template #loadingBlock>\n <fd-skeleton height=\"40px\" type=\"rectangle\" width=\"40%\" textLines=\"1\" [style.margin]=\"'auto 0'\"></fd-skeleton>\n </ng-template>\n</h2>\n\n<ng-template #tabbedLayout>\n <fd-tab-list size=\"s\">\n <fd-tab *ngFor=\"let group of _groups\" [title]=\"group.title | fdkAsyncOrSync\">\n <fdp-settings-generator-section\n [groupName]=\"$any(settings).id\"\n [items]=\"group\"\n ></fdp-settings-generator-section>\n </fd-tab>\n </fd-tab-list>\n</ng-template>\n\n<ng-template #formLayout>\n <fdp-settings-generator-section [items]=\"settings!\"></fdp-settings-generator-section>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"_contentLayout === 'tabs' ? tabbedLayout : formLayout\"></ng-container>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i1$1.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "selectedTabIndexChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i1$1.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SettingsGeneratorSectionComponent, selector: "fdp-settings-generator-section", inputs: ["groupName", "items"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncOrSyncPipe, name: "fdkAsyncOrSync" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
249
341
  }
250
342
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SettingsGeneratorContentComponent, decorators: [{
251
343
  type: Component,
252
344
  args: [{ selector: 'fdp-settings-generator-content', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
253
345
  TitleComponent,
254
346
  NgIf,
255
- ButtonModule,
256
- SkeletonModule,
347
+ ButtonComponent,
348
+ SkeletonComponent,
257
349
  TabsModule,
258
350
  NgFor,
259
351
  SettingsGeneratorSectionComponent,
@@ -306,62 +398,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
306
398
  type: Directive
307
399
  }] });
308
400
 
309
- class SettingsGeneratorSidebarIconComponent {
310
- constructor() {
311
- /** @hidden */
312
- this._destroyRef = inject(DestroyRef);
313
- /** @hidden */
314
- this._cdr = inject(ChangeDetectorRef);
315
- }
316
- /** Thumbnail configuration. */
317
- set thumbnail(value) {
318
- this._thumbnail = value;
319
- if (this.thumbnail.avatar) {
320
- this._transformAvatarConfig(this.thumbnail.avatar);
321
- }
322
- if (this.thumbnail.icon) {
323
- this._transformIconConfig(this.thumbnail.icon);
324
- }
325
- }
326
- get thumbnail() {
327
- return this._thumbnail;
328
- }
329
- /** @hidden */
330
- _transformAvatarConfig(config$) {
331
- this._getConfigFromObservable(config$, (parsedConfig) => {
332
- const avatarConfig = typeof parsedConfig === 'string' ? { image: parsedConfig } : parsedConfig;
333
- this._avatarConfig = merge(new ListAvatarConfig(), avatarConfig);
334
- this._cdr.detectChanges();
335
- });
336
- }
337
- /** @Hidden */
338
- _transformIconConfig(config$) {
339
- this._getConfigFromObservable(config$, (parsedConfig) => {
340
- const iconConfig = typeof parsedConfig === 'string' ? { glyph: parsedConfig } : parsedConfig;
341
- this._iconConfig = merge(new ListIconConfig(), iconConfig);
342
- this._cdr.detectChanges();
343
- });
344
- }
345
- /** @hidden */
346
- _getConfigFromObservable(config, callback) {
347
- if (isSubscribable(config)) {
348
- config.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((_config) => {
349
- callback(_config);
350
- });
351
- return;
352
- }
353
- callback(config);
354
- }
355
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SettingsGeneratorSidebarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
356
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: SettingsGeneratorSidebarIconComponent, isStandalone: true, selector: "fdp-settings-generator-sidebar-icon", inputs: { thumbnail: "thumbnail" }, ngImport: i0, template: "<ng-container *ngIf=\"!_iconConfig && !_avatarConfig; else iconBlock\">\n <fd-skeleton type=\"rectangle\" width=\"48px\" height=\"48px\"></fd-skeleton>\n</ng-container>\n<ng-template #iconBlock>\n <fd-icon\n *ngIf=\"_iconConfig && _iconConfig.glyph\"\n [glyph]=\"_iconConfig.glyph\"\n [ariaLabel]=\"_iconConfig.ariaLabel\"\n [font]=\"_iconConfig.font\"\n ></fd-icon>\n <fd-avatar\n *ngIf=\"_avatarConfig && (_avatarConfig.image || _avatarConfig.glyph || _avatarConfig.zoomGlyph)\"\n [size]=\"_avatarConfig.size\"\n [glyph]=\"_avatarConfig.glyph\"\n [zoomGlyph]=\"_avatarConfig.zoomGlyph\"\n [label]=\"_avatarConfig.label\"\n [circle]=\"_avatarConfig.circle\"\n [placeholder]=\"_avatarConfig.placeholder\"\n [tile]=\"_avatarConfig.tile\"\n [colorAccent]=\"_avatarConfig.colorAccent\"\n [image]=\"_avatarConfig.image\"\n [transparent]=\"_avatarConfig.transparent\"\n [random]=\"_avatarConfig.random\"\n [class]=\"'fd-list__icon ' + _avatarConfig.class\"\n [ariaLabel]=\"_avatarConfig.ariaLabel\"\n [ariaLabelledby]=\"_avatarConfig.ariaLabelledby\"\n [contain]=\"_avatarConfig.contain\"\n [border]=\"_avatarConfig.border\"\n [alterIcon]=\"_avatarConfig.alterIcon\"\n [backupImage]=\"_avatarConfig.backupImage\"\n [clickable]=\"_avatarConfig.clickable\"\n [attr.alt]=\"_avatarConfig.ariaLabel\"\n role=\"img\"\n ></fd-avatar>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i2$1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
357
- }
358
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SettingsGeneratorSidebarIconComponent, decorators: [{
359
- type: Component,
360
- args: [{ selector: 'fdp-settings-generator-sidebar-icon', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, SkeletonModule, IconModule, AvatarComponent], template: "<ng-container *ngIf=\"!_iconConfig && !_avatarConfig; else iconBlock\">\n <fd-skeleton type=\"rectangle\" width=\"48px\" height=\"48px\"></fd-skeleton>\n</ng-container>\n<ng-template #iconBlock>\n <fd-icon\n *ngIf=\"_iconConfig && _iconConfig.glyph\"\n [glyph]=\"_iconConfig.glyph\"\n [ariaLabel]=\"_iconConfig.ariaLabel\"\n [font]=\"_iconConfig.font\"\n ></fd-icon>\n <fd-avatar\n *ngIf=\"_avatarConfig && (_avatarConfig.image || _avatarConfig.glyph || _avatarConfig.zoomGlyph)\"\n [size]=\"_avatarConfig.size\"\n [glyph]=\"_avatarConfig.glyph\"\n [zoomGlyph]=\"_avatarConfig.zoomGlyph\"\n [label]=\"_avatarConfig.label\"\n [circle]=\"_avatarConfig.circle\"\n [placeholder]=\"_avatarConfig.placeholder\"\n [tile]=\"_avatarConfig.tile\"\n [colorAccent]=\"_avatarConfig.colorAccent\"\n [image]=\"_avatarConfig.image\"\n [transparent]=\"_avatarConfig.transparent\"\n [random]=\"_avatarConfig.random\"\n [class]=\"'fd-list__icon ' + _avatarConfig.class\"\n [ariaLabel]=\"_avatarConfig.ariaLabel\"\n [ariaLabelledby]=\"_avatarConfig.ariaLabelledby\"\n [contain]=\"_avatarConfig.contain\"\n [border]=\"_avatarConfig.border\"\n [alterIcon]=\"_avatarConfig.alterIcon\"\n [backupImage]=\"_avatarConfig.backupImage\"\n [clickable]=\"_avatarConfig.clickable\"\n [attr.alt]=\"_avatarConfig.ariaLabel\"\n role=\"img\"\n ></fd-avatar>\n</ng-template>\n" }]
361
- }], propDecorators: { thumbnail: [{
362
- type: Input
363
- }] } });
364
-
365
401
  class SettingsGeneratorSidebarLayoutComponent extends BaseSettingsGeneratorLayout {
366
402
  /** @hidden */
367
403
  get _mobileSidebarVisible() {
@@ -467,7 +503,7 @@ class SettingsGeneratorSidebarLayoutComponent extends BaseSettingsGeneratorLayou
467
503
  return !!section.id;
468
504
  }
469
505
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SettingsGeneratorSidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
470
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: SettingsGeneratorSidebarLayoutComponent, isStandalone: true, selector: "fdp-settings-generator-sidebar-layout", host: { properties: { "class.fdp-settings-generator__sidebar-layout--mobile": "this._isMobile", "class": "this._initialClass" } }, viewQueries: [{ propertyName: "_settingsGeneratorContent", first: true, predicate: ["settingsGeneratorContent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"fdp-settings-generator__sidebar\"\n [class.fdp-settings-generator__sidebar--hidden]=\"!_mobileSidebarVisible\"\n [style.width]=\"_mobileSidebarVisible ? null : _sidebarWidth.width\"\n [style.min-width]=\"_mobileSidebarVisible ? null : _sidebarWidth.minWidth\"\n [style.max-width]=\"_mobileSidebarVisible ? null : _sidebarWidth.maxWidth\"\n>\n <ul fd-list [byline]=\"true\" [navigationIndicator]=\"true\">\n <li\n (click)=\"_setSelectedIndex(i)\"\n fd-list-item\n [selected]=\"i === _selectedIndex\"\n *ngFor=\"let item of settings?.items; let i = index\"\n >\n <a fd-list-link [navigated]=\"i === _selectedIndex\">\n <span fd-list-thumbnail *ngIf=\"item.thumbnail\">\n <fdp-settings-generator-sidebar-icon\n [thumbnail]=\"item.thumbnail\"\n ></fdp-settings-generator-sidebar-icon>\n </span>\n <div fd-list-content>\n <ng-container *ngIf=\"item.title | fdkAsyncOrSync as titleValue; else titleElseBlock\">\n <div fd-list-title>{{ titleValue }}</div>\n </ng-container>\n <ng-template #titleElseBlock>\n <div fd-list-title>\n <fd-skeleton\n height=\"16px\"\n type=\"rectangle\"\n width=\"40%\"\n textLines=\"1\"\n [style.margin]=\"'auto 0'\"\n ></fd-skeleton>\n </div>\n </ng-template>\n <div fd-list-byline *ngIf=\"item.description\">\n <ng-container\n *ngIf=\"item.description | fdkAsyncOrSync as descriptionValue; else descriptionElseBlock\"\n >\n {{ descriptionValue }}\n </ng-container>\n <ng-template #descriptionElseBlock>\n <fd-skeleton type=\"text\" width=\"60%\" textLines=\"1\" [style.margin]=\"'auto 0'\"></fd-skeleton>\n </ng-template>\n </div>\n </div>\n </a>\n </li>\n </ul>\n</div>\n<div\n class=\"fdp-settings-generator__content\"\n [class.fdp-settings-generator__content--hidden]=\"_mobileSidebarVisible\"\n [style.width]=\"_mobileSidebarVisible ? null : 'calc(100% - ' + _sidebarWidth.width + ')'\"\n [style.min-width]=\"_mobileSidebarVisible ? null : 'calc(100% - ' + _sidebarWidth.minWidth + ')'\"\n [style.max-width]=\"_mobileSidebarVisible ? null : 'calc(100% - ' + _sidebarWidth.maxWidth + ')'\"\n>\n <ng-container *ngFor=\"let item of settings?.items; let i = index\">\n <fdp-settings-generator-content\n [attr.hidden]=\"i !== _selectedIndex ? true : null\"\n [settings]=\"item\"\n [mobile]=\"_isMobile\"\n (goBack)=\"_goBack()\"\n #settingsGeneratorContent\n ></fdp-settings-generator-content>\n </ng-container>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ListModule }, { kind: "component", type: i1$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i1$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i1$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i1$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i1$1.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i1$1.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i1$1.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SettingsGeneratorSidebarIconComponent, selector: "fdp-settings-generator-sidebar-icon", inputs: ["thumbnail"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "component", type: SettingsGeneratorContentComponent, selector: "fdp-settings-generator-content", inputs: ["settings", "mobile"], outputs: ["goBack"] }, { kind: "pipe", type: AsyncOrSyncPipe, name: "fdkAsyncOrSync" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
506
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: SettingsGeneratorSidebarLayoutComponent, isStandalone: true, selector: "fdp-settings-generator-sidebar-layout", host: { properties: { "class.fdp-settings-generator__sidebar-layout--mobile": "this._isMobile", "class": "this._initialClass" } }, viewQueries: [{ propertyName: "_settingsGeneratorContent", first: true, predicate: ["settingsGeneratorContent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"fdp-settings-generator__sidebar\"\n [class.fdp-settings-generator__sidebar--hidden]=\"!_mobileSidebarVisible\"\n [style.width]=\"_mobileSidebarVisible ? null : _sidebarWidth.width\"\n [style.min-width]=\"_mobileSidebarVisible ? null : _sidebarWidth.minWidth\"\n [style.max-width]=\"_mobileSidebarVisible ? null : _sidebarWidth.maxWidth\"\n>\n <ul fd-list [byline]=\"true\" [navigationIndicator]=\"true\">\n <li\n (click)=\"_setSelectedIndex(i)\"\n fd-list-item\n [selected]=\"i === _selectedIndex\"\n *ngFor=\"let item of settings?.items; let i = index\"\n >\n <a fd-list-link [navigated]=\"i === _selectedIndex\">\n <span fd-list-thumbnail *ngIf=\"item.thumbnail\">\n <fdp-settings-generator-sidebar-icon\n [thumbnail]=\"item.thumbnail\"\n ></fdp-settings-generator-sidebar-icon>\n </span>\n <div fd-list-content>\n <ng-container *ngIf=\"item.title | fdkAsyncOrSync as titleValue; else titleElseBlock\">\n <div fd-list-title>{{ titleValue }}</div>\n </ng-container>\n <ng-template #titleElseBlock>\n <div fd-list-title>\n <fd-skeleton\n height=\"16px\"\n type=\"rectangle\"\n width=\"40%\"\n textLines=\"1\"\n [style.margin]=\"'auto 0'\"\n ></fd-skeleton>\n </div>\n </ng-template>\n <div fd-list-byline *ngIf=\"item.description\">\n <ng-container\n *ngIf=\"item.description | fdkAsyncOrSync as descriptionValue; else descriptionElseBlock\"\n >\n {{ descriptionValue }}\n </ng-container>\n <ng-template #descriptionElseBlock>\n <fd-skeleton type=\"text\" width=\"60%\" textLines=\"1\" [style.margin]=\"'auto 0'\"></fd-skeleton>\n </ng-template>\n </div>\n </div>\n </a>\n </li>\n </ul>\n</div>\n<div\n class=\"fdp-settings-generator__content\"\n [class.fdp-settings-generator__content--hidden]=\"_mobileSidebarVisible\"\n [style.width]=\"_mobileSidebarVisible ? null : 'calc(100% - ' + _sidebarWidth.width + ')'\"\n [style.min-width]=\"_mobileSidebarVisible ? null : 'calc(100% - ' + _sidebarWidth.minWidth + ')'\"\n [style.max-width]=\"_mobileSidebarVisible ? null : 'calc(100% - ' + _sidebarWidth.maxWidth + ')'\"\n>\n <ng-container *ngFor=\"let item of settings?.items; let i = index\">\n <fdp-settings-generator-content\n [attr.hidden]=\"i !== _selectedIndex ? true : null\"\n [settings]=\"item\"\n [mobile]=\"_isMobile\"\n (goBack)=\"_goBack()\"\n #settingsGeneratorContent\n ></fdp-settings-generator-content>\n </ng-container>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ListModule }, { kind: "component", type: i1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i1.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i1.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i1.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SettingsGeneratorSidebarIconComponent, selector: "fdp-settings-generator-sidebar-icon", inputs: ["thumbnail"] }, { kind: "component", type: SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "component", type: SettingsGeneratorContentComponent, selector: "fdp-settings-generator-content", inputs: ["settings", "mobile"], outputs: ["goBack"] }, { kind: "pipe", type: AsyncOrSyncPipe, name: "fdkAsyncOrSync" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
471
507
  }
472
508
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SettingsGeneratorSidebarLayoutComponent, decorators: [{
473
509
  type: Component,
@@ -476,7 +512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
476
512
  NgFor,
477
513
  NgIf,
478
514
  SettingsGeneratorSidebarIconComponent,
479
- SkeletonModule,
515
+ SkeletonComponent,
480
516
  SettingsGeneratorContentComponent,
481
517
  AsyncOrSyncPipe
482
518
  ], template: "<div\n class=\"fdp-settings-generator__sidebar\"\n [class.fdp-settings-generator__sidebar--hidden]=\"!_mobileSidebarVisible\"\n [style.width]=\"_mobileSidebarVisible ? null : _sidebarWidth.width\"\n [style.min-width]=\"_mobileSidebarVisible ? null : _sidebarWidth.minWidth\"\n [style.max-width]=\"_mobileSidebarVisible ? null : _sidebarWidth.maxWidth\"\n>\n <ul fd-list [byline]=\"true\" [navigationIndicator]=\"true\">\n <li\n (click)=\"_setSelectedIndex(i)\"\n fd-list-item\n [selected]=\"i === _selectedIndex\"\n *ngFor=\"let item of settings?.items; let i = index\"\n >\n <a fd-list-link [navigated]=\"i === _selectedIndex\">\n <span fd-list-thumbnail *ngIf=\"item.thumbnail\">\n <fdp-settings-generator-sidebar-icon\n [thumbnail]=\"item.thumbnail\"\n ></fdp-settings-generator-sidebar-icon>\n </span>\n <div fd-list-content>\n <ng-container *ngIf=\"item.title | fdkAsyncOrSync as titleValue; else titleElseBlock\">\n <div fd-list-title>{{ titleValue }}</div>\n </ng-container>\n <ng-template #titleElseBlock>\n <div fd-list-title>\n <fd-skeleton\n height=\"16px\"\n type=\"rectangle\"\n width=\"40%\"\n textLines=\"1\"\n [style.margin]=\"'auto 0'\"\n ></fd-skeleton>\n </div>\n </ng-template>\n <div fd-list-byline *ngIf=\"item.description\">\n <ng-container\n *ngIf=\"item.description | fdkAsyncOrSync as descriptionValue; else descriptionElseBlock\"\n >\n {{ descriptionValue }}\n </ng-container>\n <ng-template #descriptionElseBlock>\n <fd-skeleton type=\"text\" width=\"60%\" textLines=\"1\" [style.margin]=\"'auto 0'\"></fd-skeleton>\n </ng-template>\n </div>\n </div>\n </a>\n </li>\n </ul>\n</div>\n<div\n class=\"fdp-settings-generator__content\"\n [class.fdp-settings-generator__content--hidden]=\"_mobileSidebarVisible\"\n [style.width]=\"_mobileSidebarVisible ? null : 'calc(100% - ' + _sidebarWidth.width + ')'\"\n [style.min-width]=\"_mobileSidebarVisible ? null : 'calc(100% - ' + _sidebarWidth.minWidth + ')'\"\n [style.max-width]=\"_mobileSidebarVisible ? null : 'calc(100% - ' + _sidebarWidth.maxWidth + ')'\"\n>\n <ng-container *ngFor=\"let item of settings?.items; let i = index\">\n <fdp-settings-generator-content\n [attr.hidden]=\"i !== _selectedIndex ? true : null\"\n [settings]=\"item\"\n [mobile]=\"_isMobile\"\n (goBack)=\"_goBack()\"\n #settingsGeneratorContent\n ></fdp-settings-generator-content>\n </ng-container>\n</div>\n" }]
@@ -521,46 +557,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
521
557
  type: Injectable
522
558
  }] });
523
559
 
524
- class ThemeSelectorListComponent extends BaseDynamicFormGeneratorControl {
525
- /** @hidden */
526
- ngOnInit() {
527
- this.currentTheme = this.formItem.default;
528
- }
529
- /** @hidden */
530
- setTheme(value) {
531
- const control = this.form.get([this.formGroupName, this.name]);
532
- this.currentTheme = value;
533
- control?.setValue(value);
534
- }
535
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ThemeSelectorListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
536
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ThemeSelectorListComponent, isStandalone: true, selector: "fdp-theme-selector-list", usesInheritance: true, ngImport: i0, template: "<ul fd-list [byline]=\"true\">\n <li fd-list-item *ngFor=\"let item of formItem.choices\" [selected]=\"currentTheme === item.value\">\n <a fd-list-link (fdkClicked)=\"setTheme(item.value)\">\n <ng-container *ngIf=\"!item.template\">\n <div fd-list-thumbnail class=\"settings-selector-list__theme--{{ item.value }}\">\n <fdp-theme-selector-list-icon></fdp-theme-selector-list-icon>\n </div>\n <div fd-list-content>\n <div fd-list-title>{{ item.label }}</div>\n <div fd-list-byline>{{ item.description }}</div>\n </div>\n </ng-container>\n <ng-template\n [ngIf]=\"item.template\"\n [ngTemplateOutlet]=\"item.template!\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n ></ng-template>\n </a>\n </li>\n</ul>\n", styles: [".settings-selector-list__theme--sap_fiori_3{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-1{fill:#f7f7f7}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-2{fill:#ccc}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-3{fill:#fff}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-4{fill:#d9d9d9}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-5{fill:#0854a0}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-6{fill:#6a6d70}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-7{fill:#354a5f}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-8{fill:#7996b4}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-9{fill:#fff}.settings-selector-list__theme--sap_fiori_3_dark{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-1{fill:#1c2228}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-2{fill:#424f5e}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-3{fill:#29313a}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-4{fill:#3a4552}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-5{fill:#91c8f6}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-6{fill:#d3d7d9}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-7{fill:#354a5f}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-8{fill:#7996b4}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-9{fill:#fafafa}.settings-selector-list__theme--sap_fiori_3_hcb{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-1{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-2{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-3{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-4{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-5{fill:#0f5d94}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-6{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-7{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-8,.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-9{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcw{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-1{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-2{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-3{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-4{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-5{fill:#8fb5ff}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-6{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-7{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-8,.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-9{fill:#000}.settings-selector-list__theme--sap_horizon{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-1{fill:#f5f6f7}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-2{fill:#ccc}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-3{fill:#fff}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-4{fill:#d9d9d9}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-5{fill:#0070f2}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-6{fill:#556b82}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-7{fill:#fff}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-8{fill:#788fa6}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-9{fill:#223548}.settings-selector-list__theme--sap_horizon_dark{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-1{fill:#12171c}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-2{fill:#475566}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-3{fill:#1d232a}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-4{fill:#2e3742}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-5{fill:#4db1ff}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-6{fill:#8396a8}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-7{fill:#1d232a}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-8{fill:#a9b4be}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-9{fill:#eaecee}.settings-selector-list__theme--sap_horizon_hcb{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-1{fill:#000}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-2{fill:#fff}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-3{fill:#000}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-4{fill:#fff}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-5{fill:#0f5d94}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-6{fill:#fff}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-7{fill:#000}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-8,.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-9{fill:#fff}.settings-selector-list__theme--sap_horizon_hcw{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-1{fill:#fff}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-2{fill:#000}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-3{fill:#fff}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-4{fill:#000}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-5{fill:#8fb5ff}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-6{fill:#000}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-7{fill:#fff}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-8,.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-9{fill:#000}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return ListModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i1$1.ListComponent; }), selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i0.forwardRef(function () { return i1$1.ListItemComponent; }), selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.ListTitleDirective; }), selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.ListLinkDirective; }), selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.ListBylineDirective; }), selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.ListContentDirective; }), selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.ListThumbnailDirective; }), selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "directive", type: i0.forwardRef(function () { return NgFor; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return ClickedBehaviorModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i2$2.ClickedDirective; }), selector: "[fdkClicked]", outputs: ["fdkClicked"] }, { kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ThemeSelectorListIconComponent; }), selector: "fdp-theme-selector-list-icon", inputs: ["size"] }, { kind: "directive", type: i0.forwardRef(function () { return NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
537
- }
538
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ThemeSelectorListComponent, decorators: [{
539
- type: Component,
540
- args: [{ selector: 'fdp-theme-selector-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], standalone: true, imports: [
541
- ListModule,
542
- NgFor,
543
- ClickedBehaviorModule,
544
- NgIf,
545
- forwardRef(() => ThemeSelectorListIconComponent),
546
- NgTemplateOutlet
547
- ], template: "<ul fd-list [byline]=\"true\">\n <li fd-list-item *ngFor=\"let item of formItem.choices\" [selected]=\"currentTheme === item.value\">\n <a fd-list-link (fdkClicked)=\"setTheme(item.value)\">\n <ng-container *ngIf=\"!item.template\">\n <div fd-list-thumbnail class=\"settings-selector-list__theme--{{ item.value }}\">\n <fdp-theme-selector-list-icon></fdp-theme-selector-list-icon>\n </div>\n <div fd-list-content>\n <div fd-list-title>{{ item.label }}</div>\n <div fd-list-byline>{{ item.description }}</div>\n </div>\n </ng-container>\n <ng-template\n [ngIf]=\"item.template\"\n [ngTemplateOutlet]=\"item.template!\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n ></ng-template>\n </a>\n </li>\n</ul>\n", styles: [".settings-selector-list__theme--sap_fiori_3{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-1{fill:#f7f7f7}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-2{fill:#ccc}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-3{fill:#fff}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-4{fill:#d9d9d9}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-5{fill:#0854a0}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-6{fill:#6a6d70}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-7{fill:#354a5f}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-8{fill:#7996b4}.settings-selector-list__theme--sap_fiori_3 .settings-selector-list-icon__cls-9{fill:#fff}.settings-selector-list__theme--sap_fiori_3_dark{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-1{fill:#1c2228}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-2{fill:#424f5e}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-3{fill:#29313a}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-4{fill:#3a4552}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-5{fill:#91c8f6}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-6{fill:#d3d7d9}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-7{fill:#354a5f}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-8{fill:#7996b4}.settings-selector-list__theme--sap_fiori_3_dark .settings-selector-list-icon__cls-9{fill:#fafafa}.settings-selector-list__theme--sap_fiori_3_hcb{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-1{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-2{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-3{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-4{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-5{fill:#0f5d94}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-6{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-7{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-8,.settings-selector-list__theme--sap_fiori_3_hcb .settings-selector-list-icon__cls-9{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcw{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-1{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-2{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-3{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-4{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-5{fill:#8fb5ff}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-6{fill:#000}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-7{fill:#fff}.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-8,.settings-selector-list__theme--sap_fiori_3_hcw .settings-selector-list-icon__cls-9{fill:#000}.settings-selector-list__theme--sap_horizon{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-1{fill:#f5f6f7}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-2{fill:#ccc}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-3{fill:#fff}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-4{fill:#d9d9d9}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-5{fill:#0070f2}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-6{fill:#556b82}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-7{fill:#fff}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-8{fill:#788fa6}.settings-selector-list__theme--sap_horizon .settings-selector-list-icon__cls-9{fill:#223548}.settings-selector-list__theme--sap_horizon_dark{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-1{fill:#12171c}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-2{fill:#475566}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-3{fill:#1d232a}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-4{fill:#2e3742}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-5{fill:#4db1ff}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-6{fill:#8396a8}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-7{fill:#1d232a}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-8{fill:#a9b4be}.settings-selector-list__theme--sap_horizon_dark .settings-selector-list-icon__cls-9{fill:#eaecee}.settings-selector-list__theme--sap_horizon_hcb{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-1{fill:#000}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-2{fill:#fff}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-3{fill:#000}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-4{fill:#fff}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-5{fill:#0f5d94}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-6{fill:#fff}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-7{fill:#000}.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-8,.settings-selector-list__theme--sap_horizon_hcb .settings-selector-list-icon__cls-9{fill:#fff}.settings-selector-list__theme--sap_horizon_hcw{border-radius:50%;border:1px solid var(--sapContent_Illustrative_Color5)}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-1{fill:#fff}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-2{fill:#000}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-3{fill:#fff}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-4{fill:#000}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-5{fill:#8fb5ff}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-6{fill:#000}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-7{fill:#fff}.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-8,.settings-selector-list__theme--sap_horizon_hcw .settings-selector-list-icon__cls-9{fill:#000}\n"] }]
548
- }] });
549
- class ThemeSelectorListIconComponent {
550
- constructor() {
551
- /** @hidden */
552
- this.size = 40;
553
- }
554
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ThemeSelectorListIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
555
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ThemeSelectorListIconComponent, isStandalone: true, selector: "fdp-theme-selector-list-icon", inputs: { size: "size" }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\" [style.width.px]=\"size\" [style.height.px]=\"size\">\n <defs>\n <style>\n .settings-selector-list-icon__cls-1 {\n fill: #1c2228;\n }\n\n .settings-selector-list-icon__cls-2 {\n fill: #424f5e;\n }\n\n .settings-selector-list-icon__cls-3 {\n fill: #29313a;\n }\n\n .settings-selector-list-icon__cls-4 {\n fill: #3a4552;\n }\n\n .settings-selector-list-icon__cls-5 {\n fill: #91c8f6;\n }\n\n .settings-selector-list-icon__cls-6 {\n fill: #d3d7d9;\n }\n\n .settings-selector-list-icon__cls-7 {\n fill: #354a5f;\n }\n\n .settings-selector-list-icon__cls-8 {\n fill: #7996b4;\n }\n\n .settings-selector-list-icon__cls-9 {\n fill: #fff;\n }\n </style>\n </defs>\n <rect class=\"settings-selector-list-icon__cls-1\" y=\"88\" width=\"200\" height=\"112\" />\n <path class=\"settings-selector-list-icon__cls-2\" d=\"M200,105v95H59V110a5,5,0,0,1,5-5Z\" />\n <path class=\"settings-selector-list-icon__cls-3\" d=\"M64,106H200v94H60V110A4,4,0,0,1,64,106Z\" />\n <rect class=\"settings-selector-list-icon__cls-3\" y=\"44\" width=\"200\" height=\"44\" />\n <rect class=\"settings-selector-list-icon__cls-4\" y=\"87\" width=\"200\" height=\"1\" />\n <path\n class=\"settings-selector-list-icon__cls-5\"\n d=\"M64,63h46a5,5,0,0,1,5,5h0a5,5,0,0,1-5,5H64a5,5,0,0,1-5-5h0A5,5,0,0,1,64,63Z\"\n />\n <path class=\"settings-selector-list-icon__cls-6\" d=\"M153,63h47V73H153a5,5,0,0,1-5-5h0A5,5,0,0,1,153,63Z\" />\n <path class=\"settings-selector-list-icon__cls-5\" d=\"M62,85h50a3,3,0,0,1,3,3H59A3,3,0,0,1,62,85Z\" />\n <rect class=\"settings-selector-list-icon__cls-7\" width=\"200\" height=\"44\" />\n <path\n class=\"settings-selector-list-icon__cls-8\"\n d=\"M68.459,13a1,1,0,0,1,.714,1.707l-16.155,16A1.01,1.01,0,0,1,52.3,31H33.539a1,1,0,0,1-1.01-.99V14a1,1,0,0,1,1-1h34.93m0-3H33.539A4.024,4.024,0,0,0,29.5,14V30a4.024,4.024,0,0,0,4.039,4H52.3a4.033,4.033,0,0,0,2.857-1.172l16.154-16a3.961,3.961,0,0,0,.876-4.359A4.027,4.027,0,0,0,68.459,10Z\"\n />\n <rect class=\"settings-selector-list-icon__cls-9\" x=\"82.121\" y=\"16.949\" width=\"75.758\" height=\"10.101\" rx=\"5\" />\n <path class=\"settings-selector-list-icon__cls-9\" d=\"M170,18h30v8H170a4,4,0,0,1-4-4h0A4,4,0,0,1,170,18Z\" />\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
556
- }
557
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ThemeSelectorListIconComponent, decorators: [{
558
- type: Component,
559
- args: [{ selector: 'fdp-theme-selector-list-icon', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\" [style.width.px]=\"size\" [style.height.px]=\"size\">\n <defs>\n <style>\n .settings-selector-list-icon__cls-1 {\n fill: #1c2228;\n }\n\n .settings-selector-list-icon__cls-2 {\n fill: #424f5e;\n }\n\n .settings-selector-list-icon__cls-3 {\n fill: #29313a;\n }\n\n .settings-selector-list-icon__cls-4 {\n fill: #3a4552;\n }\n\n .settings-selector-list-icon__cls-5 {\n fill: #91c8f6;\n }\n\n .settings-selector-list-icon__cls-6 {\n fill: #d3d7d9;\n }\n\n .settings-selector-list-icon__cls-7 {\n fill: #354a5f;\n }\n\n .settings-selector-list-icon__cls-8 {\n fill: #7996b4;\n }\n\n .settings-selector-list-icon__cls-9 {\n fill: #fff;\n }\n </style>\n </defs>\n <rect class=\"settings-selector-list-icon__cls-1\" y=\"88\" width=\"200\" height=\"112\" />\n <path class=\"settings-selector-list-icon__cls-2\" d=\"M200,105v95H59V110a5,5,0,0,1,5-5Z\" />\n <path class=\"settings-selector-list-icon__cls-3\" d=\"M64,106H200v94H60V110A4,4,0,0,1,64,106Z\" />\n <rect class=\"settings-selector-list-icon__cls-3\" y=\"44\" width=\"200\" height=\"44\" />\n <rect class=\"settings-selector-list-icon__cls-4\" y=\"87\" width=\"200\" height=\"1\" />\n <path\n class=\"settings-selector-list-icon__cls-5\"\n d=\"M64,63h46a5,5,0,0,1,5,5h0a5,5,0,0,1-5,5H64a5,5,0,0,1-5-5h0A5,5,0,0,1,64,63Z\"\n />\n <path class=\"settings-selector-list-icon__cls-6\" d=\"M153,63h47V73H153a5,5,0,0,1-5-5h0A5,5,0,0,1,153,63Z\" />\n <path class=\"settings-selector-list-icon__cls-5\" d=\"M62,85h50a3,3,0,0,1,3,3H59A3,3,0,0,1,62,85Z\" />\n <rect class=\"settings-selector-list-icon__cls-7\" width=\"200\" height=\"44\" />\n <path\n class=\"settings-selector-list-icon__cls-8\"\n d=\"M68.459,13a1,1,0,0,1,.714,1.707l-16.155,16A1.01,1.01,0,0,1,52.3,31H33.539a1,1,0,0,1-1.01-.99V14a1,1,0,0,1,1-1h34.93m0-3H33.539A4.024,4.024,0,0,0,29.5,14V30a4.024,4.024,0,0,0,4.039,4H52.3a4.033,4.033,0,0,0,2.857-1.172l16.154-16a3.961,3.961,0,0,0,.876-4.359A4.027,4.027,0,0,0,68.459,10Z\"\n />\n <rect class=\"settings-selector-list-icon__cls-9\" x=\"82.121\" y=\"16.949\" width=\"75.758\" height=\"10.101\" rx=\"5\" />\n <path class=\"settings-selector-list-icon__cls-9\" d=\"M170,18h30v8H170a4,4,0,0,1-4-4h0A4,4,0,0,1,170,18Z\" />\n</svg>\n" }]
560
- }], propDecorators: { size: [{
561
- type: Input
562
- }] } });
563
-
564
560
  class SettingsGeneratorComponent {
565
561
  /**
566
562
  * Settings configuration.
@@ -692,7 +688,7 @@ class SettingsGeneratorModule {
692
688
  };
693
689
  }
694
690
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: SettingsGeneratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
695
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: SettingsGeneratorModule, imports: [i2$2.ClickedBehaviorModule, PlatformFormGeneratorModule,
691
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: SettingsGeneratorModule, imports: [PlatformFormGeneratorModule,
696
692
  SettingsGeneratorComponent,
697
693
  SettingsGeneratorSidebarLayoutComponent,
698
694
  SettingsGeneratorContentComponent,
@@ -710,8 +706,7 @@ class SettingsGeneratorModule {
710
706
  provide: FDP_SETTINGS_GENERATOR_CONFIG,
711
707
  useValue: FDP_SETTINGS_GENERATOR_DEFAULT_CONFIG
712
708
  }
713
- ], imports: [ClickedBehaviorModule.forRoot(),
714
- PlatformFormGeneratorModule,
709
+ ], imports: [PlatformFormGeneratorModule,
715
710
  SettingsGeneratorSidebarLayoutComponent,
716
711
  SettingsGeneratorContentComponent,
717
712
  SettingsGeneratorSectionComponent,
@@ -722,7 +717,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
722
717
  type: NgModule,
723
718
  args: [{
724
719
  imports: [
725
- ClickedBehaviorModule.forRoot(),
726
720
  PlatformFormGeneratorModule,
727
721
  SettingsGeneratorComponent,
728
722
  SettingsGeneratorSidebarLayoutComponent,