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

package/fesm2022/fundamental-ngx-platform-settings-generator.mjs

@@ -1,33 +1,28 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ViewChild, ChangeDetectorRef, EventEmitter, Output, HostBinding, ViewChildren, InjectionToken, Directive, DestroyRef, ElementRef, Injector, ViewContainerRef, Inject, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i5 from '@fundamental-ngx/core/button';
-import { ButtonModule } from '@fundamental-ngx/core/button';
-import * as i2$2 from '@fundamental-ngx/core/list';
-import { ListModule } from '@fundamental-ngx/core/list';
-import * as i2$1 from '@fundamental-ngx/core/icon';
-import { IconModule } from '@fundamental-ngx/core/icon';
-import * as i3$2 from '@fundamental-ngx/core/avatar';
-import { AvatarModule } from '@fundamental-ngx/core/avatar';
-import { ScrollbarModule } from '@fundamental-ngx/core/scrollbar';
-import { SplitterModule } from '@fundamental-ngx/core/splitter';
-import { PortalModule } from '@angular/cdk/portal';
-import * as i2 from '@fundamental-ngx/core/title';
-import { TitleModule } from '@fundamental-ngx/core/title';
-import * as i1$1 from '@fundamental-ngx/platform/form';
+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';
+import * as i1$2 from '@fundamental-ngx/platform/form';
 import { FormGeneratorComponent, BaseDynamicFormGeneratorControl, dynamicFormFieldProvider, dynamicFormGroupChildProvider, PlatformFormGeneratorModule } from '@fundamental-ngx/platform/form';
-import * as i3$1 from '@fundamental-ngx/core/tabs';
-import { TabPanelComponent, TabsModule } from '@fundamental-ngx/core/tabs';
-import * as i3 from '@fundamental-ngx/cdk/utils';
-import { isSubscribable, resizeObservable, PipeModule, ClickedBehaviorModule } from '@fundamental-ngx/cdk/utils';
-import * as i4 from '@fundamental-ngx/core/skeleton';
-import { SkeletonModule } from '@fundamental-ngx/core/skeleton';
+import * as i2$2 from '@fundamental-ngx/cdk/utils';
+import { AsyncOrSyncPipe, isSubscribable, resizeObservable, ClickedBehaviorModule } from '@fundamental-ngx/cdk/utils';
 import { BehaviorSubject, Subject, filter, take, takeUntil, delay, tap, switchMap, map, combineLatest, startWith, debounceTime, distinctUntilChanged } from 'rxjs';
+import * as i3 from '@fundamental-ngx/core/tabs';
+import { TabPanelComponent, TabsModule } from '@fundamental-ngx/core/tabs';
 import { MessagePopoverFormWrapperComponent } from '@fundamental-ngx/platform/message-popover';
 import { set, merge } from 'lodash-es';
+import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
+import { TitleComponent } from '@fundamental-ngx/core/title';
+import * as i1 from '@fundamental-ngx/core/button';
+import { ButtonModule } from '@fundamental-ngx/core/button';
+import * as i2 from '@fundamental-ngx/core/skeleton';
+import { SkeletonModule } from '@fundamental-ngx/core/skeleton';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ListAvatarConfig, ListIconConfig } from '@fundamental-ngx/platform/list';
+import * as i2$1 from '@fundamental-ngx/core/icon';
+import { IconModule } from '@fundamental-ngx/core/icon';
+import * as i3$1 from '@fundamental-ngx/core/avatar';
+import { AvatarModule } from '@fundamental-ngx/core/avatar';
+import * as i1$1 from '@fundamental-ngx/core/list';
+import { ListModule } from '@fundamental-ngx/core/list';
 
 const FDP_SETTINGS_GENERATOR_DEFAULT_CONFIG = {
     defaultLayout: 'sidebar',
@@ -180,11 +175,11 @@ class SettingsGeneratorSectionComponent {
         return !!settings?.template;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SettingsGeneratorSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: SettingsGeneratorSectionComponent, selector: "fdp-settings-generator-section", inputs: { groupName: "groupName", items: "items" }, viewQueries: [{ propertyName: "_formGeneratorCmp", first: true, predicate: FormGeneratorComponent, descendants: true }], ngImport: i0, template: "<fdp-form-generator\n    *ngIf=\"_renderer === 'form'\"\n    [noAdditionalContent]=\"true\"\n    [mainTitle]=\"items?.title | fdkAsyncOrSync\"\n    [hideMainTItle]=\"true\"\n    [formItems]=\"_formItems\"\n    [unifiedLayout]=\"false\"\n></fdp-form-generator>\n\n<ng-container *ngIf=\"_renderer === 'template' && items?.template\" [ngTemplateOutlet]=\"_templateRef\"></ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$1.FormGeneratorComponent, selector: "fdp-form-generator", inputs: ["formName", "formItems", "mainTitle", "hideMainTItle", "hint", "columnLayout", "labelColumnLayout", "fieldColumnLayout", "gapColumnLayout", "unifiedLayout", "inlineColumnLayout", "noAdditionalContent"], outputs: ["formCreated", "formSubmitted", "formSubmittedStatus"] }, { kind: "pipe", type: i3.AsyncOrSyncPipe, name: "fdkAsyncOrSync" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: SettingsGeneratorSectionComponent, isStandalone: true, selector: "fdp-settings-generator-section", inputs: { groupName: "groupName", items: "items" }, viewQueries: [{ propertyName: "_formGeneratorCmp", first: true, predicate: FormGeneratorComponent, descendants: true }], ngImport: i0, template: "<fdp-form-generator\n    *ngIf=\"_renderer === 'form'\"\n    [noAdditionalContent]=\"true\"\n    [mainTitle]=\"items?.title | fdkAsyncOrSync\"\n    [hideMainTItle]=\"true\"\n    [formItems]=\"_formItems\"\n    [unifiedLayout]=\"false\"\n></fdp-form-generator>\n\n<ng-container *ngIf=\"_renderer === 'template' && items?.template\" [ngTemplateOutlet]=\"_templateRef\"></ng-container>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormGeneratorComponent, selector: "fdp-form-generator", inputs: ["formName", "formItems", "mainTitle", "hideMainTItle", "hint", "columnLayout", "labelColumnLayout", "fieldColumnLayout", "gapColumnLayout", "unifiedLayout", "inlineColumnLayout", "noAdditionalContent"], outputs: ["formCreated", "formSubmitted", "formSubmittedStatus"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncOrSyncPipe, name: "fdkAsyncOrSync" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SettingsGeneratorSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-settings-generator-section', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<fdp-form-generator\n    *ngIf=\"_renderer === 'form'\"\n    [noAdditionalContent]=\"true\"\n    [mainTitle]=\"items?.title | fdkAsyncOrSync\"\n    [hideMainTItle]=\"true\"\n    [formItems]=\"_formItems\"\n    [unifiedLayout]=\"false\"\n></fdp-form-generator>\n\n<ng-container *ngIf=\"_renderer === 'template' && items?.template\" [ngTemplateOutlet]=\"_templateRef\"></ng-container>\n" }]
+            args: [{ selector: 'fdp-settings-generator-section', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, FormGeneratorComponent, NgTemplateOutlet, AsyncOrSyncPipe], template: "<fdp-form-generator\n    *ngIf=\"_renderer === 'form'\"\n    [noAdditionalContent]=\"true\"\n    [mainTitle]=\"items?.title | fdkAsyncOrSync\"\n    [hideMainTItle]=\"true\"\n    [formItems]=\"_formItems\"\n    [unifiedLayout]=\"false\"\n></fdp-form-generator>\n\n<ng-container *ngIf=\"_renderer === 'template' && items?.template\" [ngTemplateOutlet]=\"_templateRef\"></ng-container>\n" }]
         }], propDecorators: { groupName: [{
                 type: Input
             }], items: [{
@@ -251,11 +246,21 @@ class SettingsGeneratorContentComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SettingsGeneratorContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: SettingsGeneratorContentComponent, 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: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.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: "component", type: i3$1.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i3$1.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { kind: "component", type: i4.SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: SettingsGeneratorSectionComponent, selector: "fdp-settings-generator-section", inputs: ["groupName", "items"] }, { kind: "pipe", type: i3.AsyncOrSyncPipe, name: "fdkAsyncOrSync" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", 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", "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SettingsGeneratorContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-settings-generator-content', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+            args: [{ selector: 'fdp-settings-generator-content', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        TitleComponent,
+                        NgIf,
+                        ButtonModule,
+                        SkeletonModule,
+                        TabsModule,
+                        NgFor,
+                        SettingsGeneratorSectionComponent,
+                        NgTemplateOutlet,
+                        AsyncOrSyncPipe
+                    ], 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" }]
         }], propDecorators: { settings: [{
                 type: Input
             }], mobile: [{
@@ -349,11 +354,11 @@ class SettingsGeneratorSidebarIconComponent {
         callback(config);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SettingsGeneratorSidebarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: SettingsGeneratorSidebarIconComponent, 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i3$2.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i4.SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", 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", "class", "ariaLabel"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i3$1.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SettingsGeneratorSidebarIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-settings-generator-sidebar-icon', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+            args: [{ selector: 'fdp-settings-generator-sidebar-icon', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, SkeletonModule, IconModule, AvatarModule], 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" }]
         }], propDecorators: { thumbnail: [{
                 type: Input
             }] } });
@@ -463,11 +468,19 @@ class SettingsGeneratorSidebarLayoutComponent extends BaseSettingsGeneratorLayou
         return !!section.id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SettingsGeneratorSidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: SettingsGeneratorSidebarLayoutComponent, 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: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i2$2.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i2$2.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i2$2.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i2$2.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i2$2.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i2$2.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "component", type: i4.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: "component", type: SettingsGeneratorSidebarIconComponent, selector: "fdp-settings-generator-sidebar-icon", inputs: ["thumbnail"] }, { kind: "pipe", type: i3.AsyncOrSyncPipe, name: "fdkAsyncOrSync" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", 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"], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SettingsGeneratorSidebarLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-settings-generator-sidebar-layout', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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" }]
+            args: [{ selector: 'fdp-settings-generator-sidebar-layout', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                        ListModule,
+                        NgFor,
+                        NgIf,
+                        SettingsGeneratorSidebarIconComponent,
+                        SkeletonModule,
+                        SettingsGeneratorContentComponent,
+                        AsyncOrSyncPipe
+                    ], 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" }]
         }], ctorParameters: function () { return []; }, propDecorators: { _isMobile: [{
                 type: HostBinding,
                 args: ['class.fdp-settings-generator__sidebar-layout--mobile']
@@ -521,11 +534,18 @@ class ThemeSelectorListComponent extends BaseDynamicFormGeneratorControl {
         control?.setValue(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ThemeSelectorListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: ThemeSelectorListComponent, 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: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(function () { return i2$2.ListComponent; }), selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i0.forwardRef(function () { return i2$2.ListItemComponent; }), selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i0.forwardRef(function () { return i2$2.ListTitleDirective; }), selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i0.forwardRef(function () { return i2$2.ListLinkDirective; }), selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i0.forwardRef(function () { return i2$2.ListBylineDirective; }), selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i0.forwardRef(function () { return i2$2.ListContentDirective; }), selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i0.forwardRef(function () { return i2$2.ListThumbnailDirective; }), selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "directive", type: i0.forwardRef(function () { return i3.ClickedDirective; }), selector: "[fdkClicked]", outputs: ["fdkClicked"] }, { kind: "component", type: i0.forwardRef(function () { return ThemeSelectorListIconComponent; }), selector: "fdp-theme-selector-list-icon", inputs: ["size"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", 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"], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ThemeSelectorListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-theme-selector-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], 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"] }]
+            args: [{ selector: 'fdp-theme-selector-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], standalone: true, imports: [
+                        ListModule,
+                        NgFor,
+                        ClickedBehaviorModule,
+                        NgIf,
+                        forwardRef(() => ThemeSelectorListIconComponent),
+                        NgTemplateOutlet
+                    ], 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"] }]
         }] });
 class ThemeSelectorListIconComponent {
     constructor() {
@@ -533,11 +553,11 @@ class ThemeSelectorListIconComponent {
         this.size = 40;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ThemeSelectorListIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: ThemeSelectorListIconComponent, 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ThemeSelectorListIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-theme-selector-list-icon', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+            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" }]
         }], propDecorators: { size: [{
                 type: Input
             }] } });
@@ -625,8 +645,8 @@ class SettingsGeneratorComponent {
             this._cdr.detectChanges();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SettingsGeneratorComponent, deps: [{ token: i1$1.FormGeneratorService }, { token: SettingsGeneratorLayoutAccessorService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }, { token: FDP_SETTINGS_GENERATOR_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: SettingsGeneratorComponent, selector: "fdp-settings-generator", inputs: { settings: "settings" }, host: { properties: { "class": "this._initialClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SettingsGeneratorComponent, deps: [{ token: i1$2.FormGeneratorService }, { token: SettingsGeneratorLayoutAccessorService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }, { token: FDP_SETTINGS_GENERATOR_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: SettingsGeneratorComponent, isStandalone: true, selector: "fdp-settings-generator", inputs: { settings: "settings" }, host: { properties: { "class": "this._initialClass" } }, providers: [
             SettingsGeneratorService,
             {
                 provide: FDP_SETTINGS_GENERATOR,
@@ -642,8 +662,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                             provide: FDP_SETTINGS_GENERATOR,
                             useExisting: SettingsGeneratorComponent
                         }
-                    ], template: "<ng-container #renderer></ng-container>\n", styles: [".fdp-settings-generator{display:block}.fdp-settings-generator .fdp-settings-generator__title{padding:1.5rem 1rem 1rem}.fdp-settings-generator__sidebar{border-right:.0625rem solid var(--sapGroup_ContentBorderColor);background:var(--sapBaseColor)}.fdp-settings-generator__content{background:var(--sapBaseColor);flex-grow:1}.fdp-settings-generator__content-section{display:block}.fdp-settings-generator__content-section[hidden]{display:none}.fdp-settings-generator__sidebar-layout{display:flex;position:relative}.fdp-settings-generator__sidebar-layout--mobile .fdp-settings-generator__content{min-width:100%!important;width:100%!important;max-width:100%!important}.fdp-settings-generator__sidebar-layout--mobile .fdp-settings-generator__content--hidden{display:none}.fdp-settings-generator__sidebar-layout--mobile .fdp-settings-generator__sidebar{width:100%}.fdp-settings-generator__sidebar-layout--mobile .fdp-settings-generator__sidebar--hidden{display:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.FormGeneratorService }, { type: SettingsGeneratorLayoutAccessorService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }, { type: undefined, decorators: [{
+                    ], standalone: true, template: "<ng-container #renderer></ng-container>\n", styles: [".fdp-settings-generator{display:block}.fdp-settings-generator .fdp-settings-generator__title{padding:1.5rem 1rem 1rem}.fdp-settings-generator__sidebar{border-right:.0625rem solid var(--sapGroup_ContentBorderColor);background:var(--sapBaseColor)}.fdp-settings-generator__content{background:var(--sapBaseColor);flex-grow:1}.fdp-settings-generator__content-section{display:block}.fdp-settings-generator__content-section[hidden]{display:none}.fdp-settings-generator__sidebar-layout{display:flex;position:relative}.fdp-settings-generator__sidebar-layout--mobile .fdp-settings-generator__content{min-width:100%!important;width:100%!important;max-width:100%!important}.fdp-settings-generator__sidebar-layout--mobile .fdp-settings-generator__content--hidden{display:none}.fdp-settings-generator__sidebar-layout--mobile .fdp-settings-generator__sidebar{width:100%}.fdp-settings-generator__sidebar-layout--mobile .fdp-settings-generator__sidebar--hidden{display:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.FormGeneratorService }, { type: SettingsGeneratorLayoutAccessorService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [FDP_SETTINGS_GENERATOR_CONFIG]
                 }] }]; }, propDecorators: { _initialClass: [{
@@ -673,24 +693,14 @@ class SettingsGeneratorModule {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SettingsGeneratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.0", ngImport: i0, type: SettingsGeneratorModule, declarations: [SettingsGeneratorComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.0", ngImport: i0, type: SettingsGeneratorModule, imports: [i2$2.ClickedBehaviorModule, PlatformFormGeneratorModule,
+            SettingsGeneratorComponent,
             SettingsGeneratorSidebarLayoutComponent,
             SettingsGeneratorContentComponent,
             SettingsGeneratorSectionComponent,
             ThemeSelectorListComponent,
             ThemeSelectorListIconComponent,
-            SettingsGeneratorSidebarIconComponent], imports: [CommonModule,
-            ListModule,
-            IconModule,
-            AvatarModule,
-            SplitterModule,
-            PortalModule,
-            TitleModule,
-            PlatformFormGeneratorModule,
-            TabsModule, i3.ClickedBehaviorModule, PipeModule,
-            SkeletonModule,
-            ButtonModule,
-            ScrollbarModule], exports: [SettingsGeneratorComponent,
+            SettingsGeneratorSidebarIconComponent], exports: [SettingsGeneratorComponent,
             SettingsGeneratorSidebarLayoutComponent,
             SettingsGeneratorContentComponent,
             SettingsGeneratorSectionComponent,
@@ -701,41 +711,20 @@ class SettingsGeneratorModule {
                 provide: FDP_SETTINGS_GENERATOR_CONFIG,
                 useValue: FDP_SETTINGS_GENERATOR_DEFAULT_CONFIG
             }
-        ], imports: [CommonModule,
-            ListModule,
-            IconModule,
-            AvatarModule,
-            SplitterModule,
-            PortalModule,
-            TitleModule,
+        ], imports: [ClickedBehaviorModule.forRoot(),
             PlatformFormGeneratorModule,
-            TabsModule,
-            ClickedBehaviorModule.forRoot(),
-            PipeModule,
-            SkeletonModule,
-            ButtonModule,
-            ScrollbarModule] }); }
+            SettingsGeneratorSidebarLayoutComponent,
+            SettingsGeneratorContentComponent,
+            SettingsGeneratorSectionComponent,
+            ThemeSelectorListComponent,
+            SettingsGeneratorSidebarIconComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SettingsGeneratorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        ListModule,
-                        IconModule,
-                        AvatarModule,
-                        SplitterModule,
-                        PortalModule,
-                        TitleModule,
-                        PlatformFormGeneratorModule,
-                        TabsModule,
                         ClickedBehaviorModule.forRoot(),
-                        PipeModule,
-                        SkeletonModule,
-                        ButtonModule,
-                        ScrollbarModule
-                    ],
-                    declarations: [
+                        PlatformFormGeneratorModule,
                         SettingsGeneratorComponent,
                         SettingsGeneratorSidebarLayoutComponent,
                         SettingsGeneratorContentComponent,