@fundamental-ngx/platform 0.44.0-rc.2 → 0.44.0-rc.4

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ViewChild, ChangeDetectorRef, EventEmitter, Output, HostBinding, ViewChildren, InjectionToken, Directive, ElementRef, Injector, ViewContainerRef, Inject, NgModule } 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';
@@ -20,13 +20,13 @@ import { FormGeneratorComponent, BaseDynamicFormGeneratorControl, dynamicFormFie
 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 { DestroyedService, isSubscribable, resizeObservable, PipeModule, ClickedBehaviorModule } 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 { BehaviorSubject, Subject, filter, take, takeUntil, delay, tap, switchMap, map, combineLatest, startWith, debounceTime, distinctUntilChanged } from 'rxjs';
 import { MessagePopoverFormWrapperComponent } from '@fundamental-ngx/platform/message-popover';
 import { set, merge } from 'lodash-es';
-import { takeUntil as takeUntil$1 } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ListAvatarConfig, ListIconConfig } from '@fundamental-ngx/platform/list';
 
 const FDP_SETTINGS_GENERATOR_DEFAULT_CONFIG = {
@@ -290,7 +290,7 @@ class BaseSettingsGeneratorLayout {
     }
     /** @hidden */
     ngOnInit() {
-        this._settingsGeneratorService.settings.pipe(takeUntil$1(this._destroy$)).subscribe((settings) => {
+        this._settingsGeneratorService.settings.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((settings) => {
             this.settings = settings;
             this._cdr.detectChanges();
         });
@@ -305,7 +305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
 class SettingsGeneratorSidebarIconComponent {
     constructor() {
         /** @hidden */
-        this._destroy$ = inject(DestroyedService);
+        this._destroyRef = inject(DestroyRef);
         /** @hidden */
         this._cdr = inject(ChangeDetectorRef);
     }
@@ -341,7 +341,7 @@ class SettingsGeneratorSidebarIconComponent {
     /** @hidden */
     _getConfigFromObservable(config, callback) {
         if (isSubscribable(config)) {
-            config.pipe(takeUntil(this._destroy$)).subscribe((_config) => {
+            config.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((_config) => {
                 callback(_config);
             });
             return;
@@ -349,11 +349,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" }, providers: [DestroyedService], 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", "backgroundImage", "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, 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", "backgroundImage", "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 }); }
 }
 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, providers: [DestroyedService], 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, 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
             }] } });
@@ -367,15 +367,15 @@ class SettingsGeneratorSidebarLayoutComponent extends BaseSettingsGeneratorLayou
     constructor() {
         super();
         /** @hidden */
-        this._destroy$ = inject(DestroyedService);
-        /** @hidden */
-        this._config = inject(FDP_SETTINGS_GENERATOR_CONFIG);
+        this._initialClass = 'fdp-settings-generator__sidebar-layout';
         /**
          * Selected settings section.
          */
         this._selectedIndex = -1;
         /** @hidden */
-        this._initialClass = 'fdp-settings-generator__sidebar-layout';
+        this._destroyRef = inject(DestroyRef);
+        /** @hidden */
+        this._config = inject(FDP_SETTINGS_GENERATOR_CONFIG);
         /** @hidden */
         this._sidebarVisible = true;
         /** @hidden */
@@ -385,7 +385,7 @@ class SettingsGeneratorSidebarLayoutComponent extends BaseSettingsGeneratorLayou
     /** @hidden */
     ngOnInit() {
         super.ngOnInit();
-        this._settingsGeneratorService.settings.pipe(takeUntil(this._destroy$)).subscribe((settings) => {
+        this._settingsGeneratorService.settings.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((settings) => {
             if (this._isSidebarSettings(settings) && settings.sidebarWidth) {
                 this._sidebarWidth = this._getNormalizedSidebarWidth(settings.sidebarWidth);
                 this._cdr.detectChanges();
@@ -408,7 +408,7 @@ class SettingsGeneratorSidebarLayoutComponent extends BaseSettingsGeneratorLayou
         }
         // Currently we support only 2 level nesting of form groups.
         if (pathArray.length > 0) {
-            this.settingsGeneratorContent.setActiveTab(pathArray[1]);
+            this._settingsGeneratorContent.setActiveTab(pathArray[1]);
         }
         setTimeout(() => {
             element.nativeElement.focus();
@@ -418,7 +418,7 @@ class SettingsGeneratorSidebarLayoutComponent extends BaseSettingsGeneratorLayou
     ngAfterViewInit() {
         if (this._settingsGenerator.elementRef.nativeElement && this._config.sidebar?.mobileBreakpoint) {
             resizeObservable(this._settingsGenerator.elementRef.nativeElement)
-                .pipe(startWith(null), debounceTime(30), distinctUntilChanged(), takeUntil(this._destroy$))
+                .pipe(startWith(null), debounceTime(30), distinctUntilChanged(), takeUntilDestroyed(this._destroyRef))
                 .subscribe(() => {
                 const { width } = this._settingsGenerator.elementRef.nativeElement.getBoundingClientRect();
                 const isMobile = width <= this._config.sidebar.mobileBreakpoint;
@@ -463,20 +463,20 @@ 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" } }, providers: [DestroyedService], 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", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], 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, 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", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], 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 }); }
 }
 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, providers: [DestroyedService], 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: { settingsGeneratorContent: [{
-                type: ViewChild,
-                args: ['settingsGeneratorContent']
-            }], _isMobile: [{
+            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" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { _isMobile: [{
                 type: HostBinding,
                 args: ['class.fdp-settings-generator__sidebar-layout--mobile']
             }], _initialClass: [{
                 type: HostBinding,
                 args: ['class']
+            }], _settingsGeneratorContent: [{
+                type: ViewChild,
+                args: ['settingsGeneratorContent']
             }] } });
 
 /**
@@ -558,13 +558,15 @@ class SettingsGeneratorComponent {
         return this._settings;
     }
     /** @hidden */
-    constructor(_fgService, _settingsLayoutService, _injector, _cdr, _destroy$, _config) {
+    constructor(_fgService, _settingsLayoutService, _injector, _cdr, _destroyRef, _config) {
         this._fgService = _fgService;
         this._settingsLayoutService = _settingsLayoutService;
         this._injector = _injector;
         this._cdr = _cdr;
-        this._destroy$ = _destroy$;
+        this._destroyRef = _destroyRef;
         this._config = _config;
+        /** @hidden */
+        this._initialClass = 'fdp-settings-generator';
         /**
          * Settings Generator Element Ref.
          */
@@ -572,8 +574,6 @@ class SettingsGeneratorComponent {
         /** @hidden */
         this._settingsGeneratorService = inject(SettingsGeneratorService);
         /** @hidden */
-        this._initialClass = 'fdp-settings-generator';
-        /** @hidden */
         this._viewReady = new BehaviorSubject(false);
         this._settingsLayoutService.addLayout('sidebar', SettingsGeneratorSidebarLayoutComponent);
         this._fgService.addComponent(ThemeSelectorListComponent, ['theme-list']);
@@ -585,7 +585,7 @@ class SettingsGeneratorComponent {
     ngAfterViewInit() {
         this._viewReady.next(true);
         // We need to notify children components to update their classes.
-        this._settingsGeneratorService.mobileState$.pipe(takeUntil(this._destroy$)).subscribe(() => {
+        this._settingsGeneratorService.mobileState$.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
             this._cdr.markForCheck();
         });
     }
@@ -625,10 +625,9 @@ 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: i3.DestroyedService }, { token: FDP_SETTINGS_GENERATOR_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
+    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: [
             SettingsGeneratorService,
-            DestroyedService,
             {
                 provide: FDP_SETTINGS_GENERATOR,
                 useExisting: SettingsGeneratorComponent
@@ -639,23 +638,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             type: Component,
             args: [{ selector: 'fdp-settings-generator', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         SettingsGeneratorService,
-                        DestroyedService,
                         {
                             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: i3.DestroyedService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.FormGeneratorService }, { type: SettingsGeneratorLayoutAccessorService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [FDP_SETTINGS_GENERATOR_CONFIG]
-                }] }]; }, propDecorators: { settings: [{
-                type: Input
-            }], _initialClass: [{
+                }] }]; }, propDecorators: { _initialClass: [{
                 type: HostBinding,
                 args: ['class']
             }], _viewRef: [{
                 type: ViewChild,
                 args: ['renderer', { read: ViewContainerRef }]
+            }], settings: [{
+                type: Input
             }] } });
 
 class SettingsGeneratorModule {