import * as i0 from '@angular/core';
import { inject, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, Input, DestroyRef, ChangeDetectorRef, Injectable, ViewChild, EventEmitter, input, computed, signal, ViewChildren, HostBinding, Output, InjectionToken, Directive, ElementRef, Injector, ViewContainerRef, Inject, NgModule } from '@angular/core';
import * as i1$1 from '@fundamental-ngx/platform/form';
import { BaseDynamicFormGeneratorControl, dynamicFormFieldProvider, dynamicFormGroupChildProvider, FormGeneratorComponent, PlatformFormGeneratorModule } from '@fundamental-ngx/platform/form';
import { NgTemplateOutlet } from '@angular/common';
import { ClickedDirective, isSubscribable, AsyncOrSyncPipe, resizeObservable } from '@fundamental-ngx/cdk/utils';
import * as i1 from '@fundamental-ngx/core/list';
import { ListModule } from '@fundamental-ngx/core/list';
import { ThemingService } from '@fundamental-ngx/core/theming';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { AvatarComponent } from '@fundamental-ngx/core/avatar';
import { IconComponent } from '@fundamental-ngx/core/icon';
import { SkeletonComponent } from '@fundamental-ngx/core/skeleton';
import { ListAvatarConfig, ListIconConfig } from '@fundamental-ngx/platform/list';
import { merge, set } from 'lodash-es';
import { FormsModule } from '@angular/forms';
import { TitleComponent } from '@fundamental-ngx/core/title';
import { FdTranslatePipe } from '@fundamental-ngx/i18n';
import { BehaviorSubject, Subject, filter, take, delay, tap, switchMap, map, combineLatest, startWith, debounceTime, distinctUntilChanged } from 'rxjs';
import { ButtonComponent } from '@fundamental-ngx/core/button';
import { TabPanelComponent } from '@fundamental-ngx/core/tabs';
import { IconTabBarComponent } from '@fundamental-ngx/platform/icon-tab-bar';
import { MessagePopoverFormWrapperComponent } from '@fundamental-ngx/platform/message-popover';

class ThemeSelectorListComponent extends BaseDynamicFormGeneratorControl {
    constructor() {
        super(...arguments);
        /** @hidden */
        this._themingService = inject(ThemingService, {
            optional: true
        });
    }
    /** @hidden */
    ngOnInit() {
        this.currentTheme = this.formItem.default;
    }
    /** @hidden */
    setTheme(value) {
        const control = this.form.get([this.formGroupName, this.name]);
        this.currentTheme = value;
        control?.setValue(value);
        this._themingService?.setTheme(value);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ThemeSelectorListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ThemeSelectorListComponent, isStandalone: true, selector: "fdp-theme-selector-list", usesInheritance: true, ngImport: i0, template: "<ul fd-list [byline]=\"true\">\n    @for (item of formItem.choices; track item) {\n        <li fd-list-item [selected]=\"currentTheme === item.value\">\n            <a fd-list-link (fdkClicked)=\"setTheme(item.value)\">\n                @if (!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                } @else {\n                    <ng-template\n                        [ngTemplateOutlet]=\"item.template!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                    ></ng-template>\n                }\n            </a>\n        </li>\n    }\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(() => ListModule) }, { kind: "component", type: i0.forwardRef(() => i1.ListComponent), selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i0.forwardRef(() => i1.ListItemComponent), selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i0.forwardRef(() => i1.ListTitleDirective), selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i0.forwardRef(() => i1.ListLinkDirective), selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i0.forwardRef(() => i1.ListBylineDirective), selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i0.forwardRef(() => i1.ListContentDirective), selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i0.forwardRef(() => i1.ListThumbnailDirective), selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "directive", type: i0.forwardRef(() => ClickedDirective), selector: "[fdkClicked]", outputs: ["fdkClicked"] }, { kind: "component", type: i0.forwardRef(() => ThemeSelectorListIconComponent), selector: "fdp-theme-selector-list-icon", inputs: ["size"] }, { kind: "directive", type: i0.forwardRef(() => 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: "20.1.4", ngImport: i0, type: ThemeSelectorListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fdp-theme-selector-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], imports: [ListModule, ClickedDirective, forwardRef(() => ThemeSelectorListIconComponent), NgTemplateOutlet], template: "<ul fd-list [byline]=\"true\">\n    @for (item of formItem.choices; track item) {\n        <li fd-list-item [selected]=\"currentTheme === item.value\">\n            <a fd-list-link (fdkClicked)=\"setTheme(item.value)\">\n                @if (!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                } @else {\n                    <ng-template\n                        [ngTemplateOutlet]=\"item.template!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                    ></ng-template>\n                }\n            </a>\n        </li>\n    }\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() {
        /** @hidden */
        this.size = 40;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ThemeSelectorListIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", 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: "20.1.4", ngImport: i0, type: ThemeSelectorListIconComponent, decorators: [{
            type: Component,
            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
            }] } });

const FDP_SETTINGS_GENERATOR_DEFAULT_CONFIG = {
    defaultLayout: 'sidebar',
    sidebar: {
        mobileBreakpoint: 700,
        width: '20rem'
    }
};

class SettingsGeneratorSidebarIconComponent {
    constructor() {
        /** @hidden */
        this._destroyRef = inject(DestroyRef);
        /** @hidden */
        this._cdr = inject(ChangeDetectorRef);
    }
    /** Thumbnail configuration. */
    set thumbnail(value) {
        this._thumbnail = value;
        if (this.thumbnail.avatar) {
            this._transformAvatarConfig(this.thumbnail.avatar);
        }
        if (this.thumbnail.icon) {
            this._transformIconConfig(this.thumbnail.icon);
        }
    }
    get thumbnail() {
        return this._thumbnail;
    }
    /** @hidden */
    _transformAvatarConfig(config$) {
        this._getConfigFromObservable(config$, (parsedConfig) => {
            const avatarConfig = typeof parsedConfig === 'string' ? { image: parsedConfig } : parsedConfig;
            this._avatarConfig = merge(new ListAvatarConfig(), avatarConfig);
            this._cdr.detectChanges();
        });
    }
    /** @Hidden */
    _transformIconConfig(config$) {
        this._getConfigFromObservable(config$, (parsedConfig) => {
            const iconConfig = typeof parsedConfig === 'string' ? { glyph: parsedConfig } : parsedConfig;
            this._iconConfig = merge(new ListIconConfig(), iconConfig);
            this._cdr.detectChanges();
        });
    }
    /** @hidden */
    _getConfigFromObservable(config, callback) {
        if (isSubscribable(config)) {
            config.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((_config) => {
                callback(_config);
            });
            return;
        }
        callback(config);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorSidebarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SettingsGeneratorSidebarIconComponent, isStandalone: true, selector: "fdp-settings-generator-sidebar-icon", inputs: { thumbnail: "thumbnail" }, ngImport: i0, template: "@if (!_iconConfig && !_avatarConfig) {\n    <fd-skeleton type=\"rectangle\" width=\"48px\" height=\"48px\"></fd-skeleton>\n} @else {\n    @if (_iconConfig && _iconConfig.glyph) {\n        <fd-icon [glyph]=\"_iconConfig.glyph\" [ariaLabel]=\"_iconConfig.ariaLabel\" [font]=\"_iconConfig.font\"></fd-icon>\n    }\n    @if (\n        _avatarConfig && (_avatarConfig.image || _avatarConfig.glyph || _avatarConfig.zoomGlyph || _avatarConfig.label)\n    ) {\n        <fd-avatar\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    }\n}\n", dependencies: [{ kind: "component", type: SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorSidebarIconComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fdp-settings-generator-sidebar-icon', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkeletonComponent, IconComponent, AvatarComponent], template: "@if (!_iconConfig && !_avatarConfig) {\n    <fd-skeleton type=\"rectangle\" width=\"48px\" height=\"48px\"></fd-skeleton>\n} @else {\n    @if (_iconConfig && _iconConfig.glyph) {\n        <fd-icon [glyph]=\"_iconConfig.glyph\" [ariaLabel]=\"_iconConfig.ariaLabel\" [font]=\"_iconConfig.font\"></fd-icon>\n    }\n    @if (\n        _avatarConfig && (_avatarConfig.image || _avatarConfig.glyph || _avatarConfig.zoomGlyph || _avatarConfig.label)\n    ) {\n        <fd-avatar\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    }\n}\n" }]
        }], propDecorators: { thumbnail: [{
                type: Input
            }] } });

class SettingsGeneratorService {
    /** @hidden */
    constructor() {
        /**
         * Settings configuration subject.
         */
        this.settings = new BehaviorSubject(null);
        /**
         * Stream emitted when user clicked on message popover error entry.
         */
        this.onItemFocus = new Subject();
        /**
         * Stream emitted when mobile state has been changed.
         */
        this.mobileState$ = new BehaviorSubject(false);
        /**
         * @hidden
         * Form generators collected from all items and groups.
         */
        this._formGenerators = new Map();
        /** @hidden */
        this._messagePopover = inject(MessagePopoverFormWrapperComponent, {
            optional: true
        });
        /** @hidden */
        this._destroyRef = inject(DestroyRef);
        this._listenToMessagePopoverItemClick();
    }
    /** @hidden */
    _addFormGenerator(path, formGenerator) {
        const joinedPath = path.join('.');
        this._formGenerators.set(joinedPath, formGenerator);
        formGenerator.loading$
            .pipe(filter((loading) => !loading), take(1), takeUntilDestroyed(this._destroyRef))
            .subscribe(() => {
            this._messagePopover?.addForms(formGenerator.formGroup);
            this._messagePopover?.addFormFields(formGenerator.formFields);
        });
    }
    /** @hidden */
    _removeFormGenerator(path) {
        const joinedPath = path.join('.');
        this._formGenerators.delete(joinedPath);
    }
    /**
     * Submits registered forms and emits result if submission status was successful (no errors).
     */
    submit() {
        const joinedEvents = {};
        this._formGenerators.forEach((formGenerator, key) => {
            joinedEvents[key] = formGenerator.loading$.pipe(filter((result) => !result), delay(50), tap(() => formGenerator.submit()), switchMap(() => formGenerator.formSubmittedStatus$), filter((status) => status.success), take(1), map((result) => result.value), takeUntilDestroyed(this._destroyRef));
        });
        return combineLatest(joinedEvents).pipe(map((result) => Object.entries(result).reduce((a, b) => set(a, b[0], b[1]), {})), take(1), takeUntilDestroyed(this._destroyRef));
    }
    /**
     * Sets mobile state.
     * @param isMobile Whether mobile state should be applied.
     */
    setMobileState(isMobile) {
        this.mobileState$.next(isMobile);
    }
    /** @hidden */
    ngOnDestroy() {
        this._formGenerators.clear();
    }
    /**
     * @hidden
     * Subscribes to click events from message popover and tries to open the section where invalid input is located.
     */
    _listenToMessagePopoverItemClick() {
        this._messagePopover?.messagePopover$
            ?.pipe(switchMap((messagePopover) => messagePopover.focusItem), filter((entry) => !!entry.formField), takeUntilDestroyed(this._destroyRef))
            .subscribe((entry) => {
            this._formGenerators.forEach((formGenerator, path) => {
                const formFields = formGenerator.formFields;
                // We already filtered entries with present form field.
                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                if (formFields.includes(entry.formField)) {
                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                    this.onItemFocus.next({ path, element: entry.formField.elementRef });
                    return false;
                }
            });
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [] });

class SettingsGeneratorSectionComponent {
    constructor() {
        /** @hidden */
        this._renderer = 'form';
        /** @hidden */
        this._templateRef = null;
        /** @hidden */
        this._formItems = [];
        /** @hidden */
        this._settingsGeneratorService = inject(SettingsGeneratorService);
    }
    /**
     * Section items.
     * @param value {Nullable<SettingsSectionItemsModel>} Can be either a template Ref, or Form generator items.
     */
    set items(value) {
        this._items = value;
        if (this._isTemplateLayout(value)) {
            this._renderer = 'template';
            this._templateRef = value.template;
        }
        else {
            this._renderer = 'form';
            this._formItems = value?.items || [];
        }
    }
    get items() {
        return this._items;
    }
    /** @hidden */
    set _formGeneratorCmp(component) {
        if (!this.items) {
            return;
        }
        const config = this.items;
        const path = [this.groupName, config.id].filter((v) => !!v);
        if (component) {
            this._settingsGeneratorService._addFormGenerator(path, component);
        }
        else {
            this._settingsGeneratorService._removeFormGenerator(path);
        }
    }
    /** @hidden */
    _isTemplateLayout(settings) {
        return !!settings?.template;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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: "@if (_renderer === 'form') {\n    <fdp-form-generator\n        [noAdditionalContent]=\"true\"\n        [mainTitle]=\"items?.title | fdkAsyncOrSync\"\n        [hideMainTItle]=\"true\"\n        [formItems]=\"_formItems\"\n        [unifiedLayout]=\"false\"\n    ></fdp-form-generator>\n}\n@if (_renderer === 'template' && items?.template) {\n    <ng-template [ngTemplateOutlet]=\"_templateRef\"></ng-template>\n}\n", dependencies: [{ 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: "20.1.4", ngImport: i0, type: SettingsGeneratorSectionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fdp-settings-generator-section', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormGeneratorComponent, NgTemplateOutlet, AsyncOrSyncPipe], template: "@if (_renderer === 'form') {\n    <fdp-form-generator\n        [noAdditionalContent]=\"true\"\n        [mainTitle]=\"items?.title | fdkAsyncOrSync\"\n        [hideMainTItle]=\"true\"\n        [formItems]=\"_formItems\"\n        [unifiedLayout]=\"false\"\n    ></fdp-form-generator>\n}\n@if (_renderer === 'template' && items?.template) {\n    <ng-template [ngTemplateOutlet]=\"_templateRef\"></ng-template>\n}\n" }]
        }], propDecorators: { groupName: [{
                type: Input
            }], items: [{
                type: Input
            }], _formGeneratorCmp: [{
                type: ViewChild,
                args: [FormGeneratorComponent]
            }] } });

class SettingsGeneratorContentComponent {
    constructor() {
        /** Whether to render content component in mobile view. */
        this.mobile = false;
        /** Event emits when user needs to be moved back to navigation screen. */
        this.goBack = new EventEmitter();
        /** @hidden */
        this._initialClass = 'fdp-settings-generator__content-section';
        /** Optional alternative text for the settings generator dialog back button. */
        this.backButtonLabel = input(...(ngDevMode ? [undefined, { debugName: "backButtonLabel" }] : []));
        /** @hidden */
        this._renderer$ = computed(() => (this.isTemplateLayout(this._settings$()) ? 'template' : 'form'), ...(ngDevMode ? [{ debugName: "_renderer$" }] : []));
        /** @hidden */
        this._contentLayout$ = computed(() => (this.isGroupedSettings(this._settings$()) ? 'tabs' : 'form'), ...(ngDevMode ? [{ debugName: "_contentLayout$" }] : []));
        /** @hidden */
        this._groups$ = computed(() => {
            const settings = this._settings$();
            return this.isGroupedSettings(settings) ? settings.groups : [];
        }, ...(ngDevMode ? [{ debugName: "_groups$" }] : []));
        /** @hidden */
        this._tabs$ = computed(() => this._groups$().map((group, index) => ({
            label: group.title,
            active: index === this._activeTab$()
        })), ...(ngDevMode ? [{ debugName: "_tabs$" }] : []));
        /** @hidden */
        this._activeTab$ = signal(0, ...(ngDevMode ? [{ debugName: "_activeTab$" }] : []));
        /** @hidden */
        this._settings$ = signal(null, ...(ngDevMode ? [{ debugName: "_settings$" }] : []));
    }
    /** @hidden */
    set settings(value) {
        this._settings$.set(value);
    }
    get settings() {
        return this._settings$();
    }
    /** @hidden */
    isTemplateLayout(settings) {
        return !!settings?.template;
    }
    /** @hidden */
    isGroupedSettings(settings) {
        return settings?.groups?.length > 0;
    }
    /** @hidden */
    changeTab(item) {
        this._activeTab$.set(item.index);
    }
    /**
     * Activates tab by group ID.
     * @param id ID of the group.
     */
    setActiveTab(id) {
        if (!this.isGroupedSettings(this._settings)) {
            return;
        }
        this._tabPanels?.forEach((tab, index) => {
            const group = this._groups$()[index];
            if (group.id === id) {
                tab.open(true);
                return false;
            }
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SettingsGeneratorContentComponent, isStandalone: true, selector: "fdp-settings-generator-content", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: false, isRequired: false, transformFunction: null }, mobile: { classPropertyName: "mobile", publicName: "mobile", isSignal: false, isRequired: false, transformFunction: null }, backButtonLabel: { classPropertyName: "backButtonLabel", publicName: "backButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { goBack: "goBack" }, host: { properties: { "class": "this._initialClass" } }, viewQueries: [{ propertyName: "_tabPanels", predicate: TabPanelComponent, descendants: true }], ngImport: i0, template: "<h5 fd-title [wrap]=\"!!settings?.wrapSectionTitle\" class=\"fdp-settings-generator__title\">\n    @if (mobile) {\n        <button\n            [attr.title]=\"backButtonLabel() || ('platformSettingsGenerator.backButtonLabel' | fdTranslate)\"\n            [attr.aria-label]=\"backButtonLabel() || ('platformSettingsGenerator.backButtonLabel' | fdTranslate)\"\n            fd-button\n            glyph=\"navigation-left-arrow\"\n            fdType=\"transparent\"\n            (click)=\"goBack.emit()\"\n        ></button>\n    }\n    @if (settings?.title | fdkAsyncOrSync; as settingsTitle) {\n        {{ settingsTitle }}\n    } @else {\n        <fd-skeleton height=\"40px\" type=\"rectangle\" width=\"40%\" textLines=\"1\" [style.margin]=\"'auto 0'\"></fd-skeleton>\n    }\n</h5>\n<ng-template #tabbedLayout>\n    <fdp-icon-tab-bar\n        class=\"fdp-settings-generator__tabs-container\"\n        [tabsConfig]=\"_tabs$()\"\n        (iconTabSelected)=\"changeTab($event)\"\n    ></fdp-icon-tab-bar>\n    @for (group of _groups$(); track group) {\n        <div [attr.hidden]=\"$index === _activeTab$() ? null : true\" class=\"fdp-settings-generator__content-container\">\n            <fdp-settings-generator-section\n                [groupName]=\"$any(settings).id\"\n                [items]=\"group\"\n            ></fdp-settings-generator-section>\n        </div>\n    }\n</ng-template>\n<ng-template #formLayout>\n    <fdp-settings-generator-section [items]=\"settings!\"></fdp-settings-generator-section>\n</ng-template>\n<ng-template [ngTemplateOutlet]=\"_contentLayout$() === 'tabs' ? tabbedLayout : formLayout\"></ng-template>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "component", type: SettingsGeneratorSectionComponent, selector: "fdp-settings-generator-section", inputs: ["groupName", "items"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconTabBarComponent, selector: "fdp-icon-tab-bar", inputs: ["stackContent", "tabHeadingLevel", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "settings", "maxContentHeight"], outputs: ["tabsConfigChange", "densityModeChange", "iconTabSelected", "iconTabReordered", "closeTab"] }, { kind: "pipe", type: AsyncOrSyncPipe, name: "fdkAsyncOrSync" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorContentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fdp-settings-generator-content', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        TitleComponent,
                        ButtonComponent,
                        SkeletonComponent,
                        SettingsGeneratorSectionComponent,
                        NgTemplateOutlet,
                        AsyncOrSyncPipe,
                        IconTabBarComponent,
                        FdTranslatePipe
                    ], template: "<h5 fd-title [wrap]=\"!!settings?.wrapSectionTitle\" class=\"fdp-settings-generator__title\">\n    @if (mobile) {\n        <button\n            [attr.title]=\"backButtonLabel() || ('platformSettingsGenerator.backButtonLabel' | fdTranslate)\"\n            [attr.aria-label]=\"backButtonLabel() || ('platformSettingsGenerator.backButtonLabel' | fdTranslate)\"\n            fd-button\n            glyph=\"navigation-left-arrow\"\n            fdType=\"transparent\"\n            (click)=\"goBack.emit()\"\n        ></button>\n    }\n    @if (settings?.title | fdkAsyncOrSync; as settingsTitle) {\n        {{ settingsTitle }}\n    } @else {\n        <fd-skeleton height=\"40px\" type=\"rectangle\" width=\"40%\" textLines=\"1\" [style.margin]=\"'auto 0'\"></fd-skeleton>\n    }\n</h5>\n<ng-template #tabbedLayout>\n    <fdp-icon-tab-bar\n        class=\"fdp-settings-generator__tabs-container\"\n        [tabsConfig]=\"_tabs$()\"\n        (iconTabSelected)=\"changeTab($event)\"\n    ></fdp-icon-tab-bar>\n    @for (group of _groups$(); track group) {\n        <div [attr.hidden]=\"$index === _activeTab$() ? null : true\" class=\"fdp-settings-generator__content-container\">\n            <fdp-settings-generator-section\n                [groupName]=\"$any(settings).id\"\n                [items]=\"group\"\n            ></fdp-settings-generator-section>\n        </div>\n    }\n</ng-template>\n<ng-template #formLayout>\n    <fdp-settings-generator-section [items]=\"settings!\"></fdp-settings-generator-section>\n</ng-template>\n<ng-template [ngTemplateOutlet]=\"_contentLayout$() === 'tabs' ? tabbedLayout : formLayout\"></ng-template>\n" }]
        }], propDecorators: { settings: [{
                type: Input
            }], mobile: [{
                type: Input
            }], goBack: [{
                type: Output
            }], _initialClass: [{
                type: HostBinding,
                args: ['class']
            }], _tabPanels: [{
                type: ViewChildren,
                args: [TabPanelComponent]
            }] } });

const FDP_SETTINGS_GENERATOR_CONFIG = new InjectionToken('FdpSettingsGeneratorConfig');
const FDP_SETTINGS_GENERATOR = new InjectionToken('FdpSettingsGenerator');

class BaseSettingsGeneratorLayout {
    constructor() {
        /**
         * Settings generator service.
         */
        this._settingsGeneratorService = inject(SettingsGeneratorService);
        /**
         * Change detector ref.
         */
        this._cdr = inject(ChangeDetectorRef);
        /**
         * Settings generator component ref.
         */
        this._settingsGenerator = inject(FDP_SETTINGS_GENERATOR);
    }
    /** @hidden */
    ngOnInit() {
        this._settingsGeneratorService.settings.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((settings) => {
            this.settings = settings;
            this._cdr.detectChanges();
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BaseSettingsGeneratorLayout, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: BaseSettingsGeneratorLayout, isStandalone: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BaseSettingsGeneratorLayout, decorators: [{
            type: Directive
        }] });

class SettingsGeneratorSidebarLayoutComponent extends BaseSettingsGeneratorLayout {
    /** @hidden */
    get _mobileSidebarVisible() {
        return this._isMobile && this._sidebarVisible;
    }
    /** @hidden */
    constructor() {
        super();
        /** @hidden */
        this._initialClass = 'fdp-settings-generator__sidebar-layout';
        /**
         * Selected settings section.
         */
        this._selectedIndex = -1;
        /** @hidden */
        this._destroyRef = inject(DestroyRef);
        /** @hidden */
        this._config = inject(FDP_SETTINGS_GENERATOR_CONFIG);
        /** @hidden */
        this._sidebarVisible = true;
        /** @hidden */
        this._initialSelectedItemSet = false;
        this._sidebarWidth = this._getNormalizedSidebarWidth(this._config.sidebar?.width);
    }
    /** @hidden */
    ngOnInit() {
        super.ngOnInit();
        this._settingsGeneratorService.settings.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((settings) => {
            if (this._isSidebarSettings(settings) && settings.sidebarWidth) {
                this._sidebarWidth = this._getNormalizedSidebarWidth(settings.sidebarWidth);
                this._cdr.detectChanges();
            }
        });
    }
    /** @hidden */
    focusElementByPath(path, element) {
        const pathArray = path.split('.');
        // We are interested only in sections with ID.
        const sectionIndex = this.settings?.items.findIndex((section) => {
            if (!this._isFormGeneratorSection(section)) {
                return;
            }
            return section.id === pathArray[0];
        }) ?? -1;
        // Focus on section.
        if (sectionIndex > -1) {
            this._setSelectedIndex(sectionIndex);
        }
        // Currently we support only 2 level nesting of form groups.
        if (pathArray.length > 0) {
            this._settingsGeneratorContent.setActiveTab(pathArray[1]);
        }
        setTimeout(() => {
            element.nativeElement.focus();
        });
    }
    /** @hidden */
    ngAfterViewInit() {
        if (this._settingsGenerator.elementRef.nativeElement && this._config.sidebar?.mobileBreakpoint) {
            resizeObservable(this._settingsGenerator.elementRef.nativeElement)
                .pipe(startWith(null), debounceTime(30), distinctUntilChanged(), takeUntilDestroyed(this._destroyRef))
                .subscribe(() => {
                const { width } = this._settingsGenerator.elementRef.nativeElement.getBoundingClientRect();
                const isMobile = width <= this._config.sidebar.mobileBreakpoint;
                if (this._isMobile === isMobile) {
                    return;
                }
                this._settingsGeneratorService.setMobileState(isMobile);
                this._isMobile = isMobile;
                // User opened section previously, so focus on that section
                if (this._isMobile && this._selectedIndex >= 0) {
                    this._sidebarVisible = false;
                }
                // In mobile view, we don't need to set initial index, since the section won't be visible to the end user.
                if (!this._initialSelectedItemSet && !this._isMobile) {
                    this._setSelectedIndex(this._selectedIndex > -1 ? this._selectedIndex : 0);
                    this._initialSelectedItemSet = true;
                }
                if (!this._isMobile && this._selectedIndex === -1) {
                    this._setSelectedIndex(0);
                }
                this._cdr.detectChanges();
            });
        }
    }
    /** @hidden */
    _displaySettingsSearchInput() {
        const listEl = this._listElement;
        if (!listEl) {
            return false;
        }
        else {
            return !!this.searchTerm || listEl.nativeElement.scrollHeight > listEl.nativeElement.clientHeight;
        }
    }
    /** @hidden */
    _setSelectedIndex(index) {
        this._selectedIndex = index;
        this._sidebarVisible = index === -1;
        this._cdr.detectChanges();
    }
    /** @Hidden */
    _goBack() {
        this._setSelectedIndex(-1);
    }
    /** @hidden */
    _getNormalizedSidebarWidth(width) {
        return typeof width === 'string' ? { minWidth: width, maxWidth: width, width } : width;
    }
    /** @hidden */
    _isSidebarSettings(settings) {
        return settings?.appearance === 'sidebar';
    }
    /** @hidden */
    _isFormGeneratorSection(section) {
        return !!section.id;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorSidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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 }, { propertyName: "_listElement", first: true, predicate: ["listElement"], descendants: true, read: ElementRef }], 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    <div class=\"fdp-settings-generator__search-header\">\n        <h5 fd-title class=\"fdp-settings-generator__title\">\n            {{ 'platformSettingsGenerator.settingsLabel' | fdTranslate }}\n        </h5>\n        <!-- TODO: implement search input\n        @if (_displaySettingsSearchInput()) {\n            <fd-input-group\n                type=\"search\"\n                glyph=\"search\"\n                [glyphAriaLabel]=\"'platformSettingsGenerator.searchLabel' | fdTranslate\"\n                [attr.placeholder]=\"'platformSettingsGenerator.searchLabel' | fdTranslate\"\n                [button]=\"true\"\n                [disabled]=\"false\"\n                [(ngModel)]=\"searchTerm\"\n                class=\"fdp-settings-generator__search-input\"\n            >\n            </fd-input-group>\n        }\n        -->\n    </div>\n    <div class=\"fdp-settings-generator__list-container\" #listElement>\n        <ul fd-list [byline]=\"true\" [navigationIndicator]=\"true\">\n            @for (item of settings?.items; track item; let i = $index) {\n                <li (click)=\"_setSelectedIndex(i)\" fd-list-item [selected]=\"i === _selectedIndex\" [id]=\"item.id\">\n                    <a fd-list-link [navigated]=\"i === _selectedIndex\">\n                        @if (item.thumbnail) {\n                            <span fd-list-thumbnail>\n                                <fdp-settings-generator-sidebar-icon\n                                    [thumbnail]=\"item.thumbnail\"\n                                ></fdp-settings-generator-sidebar-icon>\n                            </span>\n                        }\n                        <div fd-list-content>\n                            @if (item.title | fdkAsyncOrSync; as titleValue) {\n                                <div fd-list-title [wrap]=\"!!_sidebarWidth.wrapSidebarTitle\">{{ titleValue }}</div>\n                            } @else {\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                            }\n                            @if (item.description) {\n                                <div fd-list-byline [wrap]=\"!!_sidebarWidth.wrapSidebarDescription\">\n                                    @if (item.description | fdkAsyncOrSync; as descriptionValue) {\n                                        {{ descriptionValue }}\n                                    } @else {\n                                        <fd-skeleton\n                                            type=\"text\"\n                                            width=\"60%\"\n                                            textLines=\"1\"\n                                            [style.margin]=\"'auto 0'\"\n                                        ></fd-skeleton>\n                                    }\n                                </div>\n                            }\n                        </div>\n                    </a>\n                </li>\n            }\n        </ul>\n    </div>\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    @for (item of settings?.items; track item; 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    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ListModule }, { kind: "component", type: i1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i1.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i1.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i1.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "component", type: SettingsGeneratorSidebarIconComponent, selector: "fdp-settings-generator-sidebar-icon", inputs: ["thumbnail"] }, { kind: "component", type: SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "component", type: SettingsGeneratorContentComponent, selector: "fdp-settings-generator-content", inputs: ["settings", "mobile", "backButtonLabel"], outputs: ["goBack"] }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: AsyncOrSyncPipe, name: "fdkAsyncOrSync" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorSidebarLayoutComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fdp-settings-generator-sidebar-layout', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                        ListModule,
                        SettingsGeneratorSidebarIconComponent,
                        SkeletonComponent,
                        SettingsGeneratorContentComponent,
                        AsyncOrSyncPipe,
                        TitleComponent,
                        FdTranslatePipe,
                        FormsModule
                    ], 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    <div class=\"fdp-settings-generator__search-header\">\n        <h5 fd-title class=\"fdp-settings-generator__title\">\n            {{ 'platformSettingsGenerator.settingsLabel' | fdTranslate }}\n        </h5>\n        <!-- TODO: implement search input\n        @if (_displaySettingsSearchInput()) {\n            <fd-input-group\n                type=\"search\"\n                glyph=\"search\"\n                [glyphAriaLabel]=\"'platformSettingsGenerator.searchLabel' | fdTranslate\"\n                [attr.placeholder]=\"'platformSettingsGenerator.searchLabel' | fdTranslate\"\n                [button]=\"true\"\n                [disabled]=\"false\"\n                [(ngModel)]=\"searchTerm\"\n                class=\"fdp-settings-generator__search-input\"\n            >\n            </fd-input-group>\n        }\n        -->\n    </div>\n    <div class=\"fdp-settings-generator__list-container\" #listElement>\n        <ul fd-list [byline]=\"true\" [navigationIndicator]=\"true\">\n            @for (item of settings?.items; track item; let i = $index) {\n                <li (click)=\"_setSelectedIndex(i)\" fd-list-item [selected]=\"i === _selectedIndex\" [id]=\"item.id\">\n                    <a fd-list-link [navigated]=\"i === _selectedIndex\">\n                        @if (item.thumbnail) {\n                            <span fd-list-thumbnail>\n                                <fdp-settings-generator-sidebar-icon\n                                    [thumbnail]=\"item.thumbnail\"\n                                ></fdp-settings-generator-sidebar-icon>\n                            </span>\n                        }\n                        <div fd-list-content>\n                            @if (item.title | fdkAsyncOrSync; as titleValue) {\n                                <div fd-list-title [wrap]=\"!!_sidebarWidth.wrapSidebarTitle\">{{ titleValue }}</div>\n                            } @else {\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                            }\n                            @if (item.description) {\n                                <div fd-list-byline [wrap]=\"!!_sidebarWidth.wrapSidebarDescription\">\n                                    @if (item.description | fdkAsyncOrSync; as descriptionValue) {\n                                        {{ descriptionValue }}\n                                    } @else {\n                                        <fd-skeleton\n                                            type=\"text\"\n                                            width=\"60%\"\n                                            textLines=\"1\"\n                                            [style.margin]=\"'auto 0'\"\n                                        ></fd-skeleton>\n                                    }\n                                </div>\n                            }\n                        </div>\n                    </a>\n                </li>\n            }\n        </ul>\n    </div>\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    @for (item of settings?.items; track item; 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    }\n</div>\n" }]
        }], ctorParameters: () => [], propDecorators: { _isMobile: [{
                type: HostBinding,
                args: ['class.fdp-settings-generator__sidebar-layout--mobile']
            }], _initialClass: [{
                type: HostBinding,
                args: ['class']
            }], _settingsGeneratorContent: [{
                type: ViewChild,
                args: ['settingsGeneratorContent']
            }], _listElement: [{
                type: ViewChild,
                args: ['listElement', { read: ElementRef }]
            }] } });

/**
 * Service, used as a registry of the available layouts for Settings Generator Component.
 */
class SettingsGeneratorLayoutAccessorService {
    constructor() {
        /** @hidden */
        this._layouts = new Map();
    }
    /**
     * Adds custom layout component to layouts registry for later usage with Settings Generator component.
     * @param layoutName Name of the Layout
     * @param layoutComponent Component type to be used for defined layout.
     */
    addLayout(layoutName, layoutComponent) {
        this._layouts.set(layoutName, layoutComponent);
    }
    /**
     * Gets Component type for defined layout.
     * @param layoutName
     */
    getLayout(layoutName) {
        return this._layouts.get(layoutName);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorLayoutAccessorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorLayoutAccessorService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorLayoutAccessorService, decorators: [{
            type: Injectable
        }] });

class SettingsGeneratorComponent {
    /**
     * Settings configuration.
     */
    set settings(value) {
        if (value) {
            value.appearance = value.appearance || this._config.defaultLayout;
        }
        this._settings = value;
        this._settingsGeneratorService.settings.next(value);
        this._setLayout();
    }
    get settings() {
        return this._settings;
    }
    /** @hidden */
    constructor(_fgService, _settingsLayoutService, _injector, _cdr, _destroyRef, _config) {
        this._fgService = _fgService;
        this._settingsLayoutService = _settingsLayoutService;
        this._injector = _injector;
        this._cdr = _cdr;
        this._destroyRef = _destroyRef;
        this._config = _config;
        /** @hidden */
        this._initialClass = 'fdp-settings-generator';
        /**
         * Settings Generator Element Ref.
         */
        this.elementRef = inject(ElementRef);
        /**
         * Container height.
         */
        this.height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : []));
        /**
         * Container width.
         */
        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
        /** @hidden */
        this._settingsGeneratorService = inject(SettingsGeneratorService);
        /** @hidden */
        this._viewReady = new BehaviorSubject(false);
        this._settingsLayoutService.addLayout('sidebar', SettingsGeneratorSidebarLayoutComponent);
        this._fgService.addComponent(ThemeSelectorListComponent, ['theme-list']);
        this._settingsGeneratorService.onItemFocus.subscribe((entry) => {
            this._layoutComponentRef.instance.focusElementByPath(entry.path, entry.element);
        });
    }
    /** @hidden */
    ngAfterViewInit() {
        this._viewReady.next(true);
        // We need to notify children components to update their classes.
        this._settingsGeneratorService.mobileState$.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
            this._cdr.markForCheck();
        });
    }
    /** @hidden */
    ngOnDestroy() {
        this._viewReady.complete();
        this._viewReadySub?.unsubscribe();
        this._layoutComponentRef?.destroy();
        this._viewRef?.clear();
    }
    /**
     * Programmatically submit inner forms of the settings generator.
     * @returns Observable with settings value grouped by main sections and inner sections.
     */
    submit() {
        return this._settingsGeneratorService.submit();
    }
    /** @hidden */
    _setLayout() {
        this._viewReadySub?.unsubscribe();
        this._viewReadySub = this._viewReady.pipe(filter((ready) => ready)).subscribe(() => {
            if (!this.settings?.appearance || this._currentLayout === this.settings.appearance) {
                return;
            }
            const layoutComponent = this._settingsLayoutService.getLayout(this.settings.appearance);
            if (!layoutComponent) {
                return;
            }
            const injector = Injector.create({
                providers: [],
                parent: this._injector
            });
            this._layoutComponentRef?.destroy();
            this._viewRef.clear();
            this._layoutComponentRef = this._viewRef.createComponent(layoutComponent, { injector });
            this._currentLayout = this.settings.appearance;
            this._cdr.detectChanges();
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", 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: "17.1.0", version: "20.1.4", type: SettingsGeneratorComponent, isStandalone: true, selector: "fdp-settings-generator", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "width()", "style.height": "height()", "class": "this._initialClass" } }, providers: [
            SettingsGeneratorService,
            {
                provide: FDP_SETTINGS_GENERATOR,
                useExisting: SettingsGeneratorComponent
            }
        ], viewQueries: [{ propertyName: "_viewRef", first: true, predicate: ["renderer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #renderer></ng-container>\n", styles: [".fdp-settings-generator{display:block}.fdp-settings-generator__sidebar{border-right:.0625rem solid var(--sapGroup_ContentBorderColor);background:var(--sapBaseColor);overflow:hidden;height:100%;display:flex;flex-direction:column}.fdp-settings-generator__content{background:var(--sapBackgroundColor);flex-grow:1}.fdp-settings-generator__content-section{display:block;height:100%}.fdp-settings-generator__content-section[hidden]{display:none}.fdp-settings-generator__content-container{display:block;height:100%;overflow-y:auto}.fdp-settings-generator__sidebar-layout{display:flex;position:relative;overflow:hidden;height:100%}.fdp-settings-generator__sidebar-layout .fdp-settings-generator__title{background:var(--sapObjectHeader_Background);padding:1rem}.fdp-settings-generator__sidebar-layout .fdp-settings-generator__title:not(:has(+.fdp-settings-generator__tabs-container)){box-shadow:var(--sapContent_HeaderShadow)}.fdp-settings-generator__sidebar-layout .fdp-settings-generator__search-header .fdp-settings-generator__search-input{margin:0 1rem;display:block}.fdp-settings-generator__sidebar-layout .fdp-settings-generator__list-container{overflow-y:auto}.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}.fdp-settings-generator__tabs-container{display:block}.fdp-settings-generator__tabs-container .fd-icon-tab-bar__header{padding:0 1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fdp-settings-generator', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        SettingsGeneratorService,
                        {
                            provide: FDP_SETTINGS_GENERATOR,
                            useExisting: SettingsGeneratorComponent
                        }
                    ], standalone: true, host: {
                        '[style.width]': 'width()',
                        '[style.height]': 'height()'
                    }, template: "<ng-container #renderer></ng-container>\n", styles: [".fdp-settings-generator{display:block}.fdp-settings-generator__sidebar{border-right:.0625rem solid var(--sapGroup_ContentBorderColor);background:var(--sapBaseColor);overflow:hidden;height:100%;display:flex;flex-direction:column}.fdp-settings-generator__content{background:var(--sapBackgroundColor);flex-grow:1}.fdp-settings-generator__content-section{display:block;height:100%}.fdp-settings-generator__content-section[hidden]{display:none}.fdp-settings-generator__content-container{display:block;height:100%;overflow-y:auto}.fdp-settings-generator__sidebar-layout{display:flex;position:relative;overflow:hidden;height:100%}.fdp-settings-generator__sidebar-layout .fdp-settings-generator__title{background:var(--sapObjectHeader_Background);padding:1rem}.fdp-settings-generator__sidebar-layout .fdp-settings-generator__title:not(:has(+.fdp-settings-generator__tabs-container)){box-shadow:var(--sapContent_HeaderShadow)}.fdp-settings-generator__sidebar-layout .fdp-settings-generator__search-header .fdp-settings-generator__search-input{margin:0 1rem;display:block}.fdp-settings-generator__sidebar-layout .fdp-settings-generator__list-container{overflow-y:auto}.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}.fdp-settings-generator__tabs-container{display:block}.fdp-settings-generator__tabs-container .fd-icon-tab-bar__header{padding:0 1rem}\n"] }]
        }], ctorParameters: () => [{ 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: { _initialClass: [{
                type: HostBinding,
                args: ['class']
            }], _viewRef: [{
                type: ViewChild,
                args: ['renderer', { read: ViewContainerRef }]
            }], settings: [{
                type: Input
            }] } });

class SettingsGeneratorModule {
    /**
     * Allows configuring module on a global level with custom configuration.
     * @param config User's custom configuration.
     */
    static withConfig(config) {
        return {
            ngModule: SettingsGeneratorModule,
            providers: [
                {
                    provide: FDP_SETTINGS_GENERATOR_CONFIG,
                    useValue: { ...FDP_SETTINGS_GENERATOR_DEFAULT_CONFIG, ...config }
                }
            ]
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorModule, imports: [PlatformFormGeneratorModule,
            SettingsGeneratorComponent,
            SettingsGeneratorSidebarLayoutComponent,
            SettingsGeneratorContentComponent,
            SettingsGeneratorSectionComponent,
            ThemeSelectorListComponent,
            ThemeSelectorListIconComponent,
            SettingsGeneratorSidebarIconComponent], exports: [SettingsGeneratorComponent,
            SettingsGeneratorSidebarLayoutComponent,
            SettingsGeneratorContentComponent,
            SettingsGeneratorSectionComponent,
            ThemeSelectorListIconComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorModule, providers: [
            SettingsGeneratorLayoutAccessorService,
            {
                provide: FDP_SETTINGS_GENERATOR_CONFIG,
                useValue: FDP_SETTINGS_GENERATOR_DEFAULT_CONFIG
            }
        ], imports: [PlatformFormGeneratorModule,
            SettingsGeneratorSidebarLayoutComponent,
            SettingsGeneratorContentComponent,
            SettingsGeneratorSectionComponent,
            ThemeSelectorListComponent,
            SettingsGeneratorSidebarIconComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsGeneratorModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        PlatformFormGeneratorModule,
                        SettingsGeneratorComponent,
                        SettingsGeneratorSidebarLayoutComponent,
                        SettingsGeneratorContentComponent,
                        SettingsGeneratorSectionComponent,
                        ThemeSelectorListComponent,
                        ThemeSelectorListIconComponent,
                        SettingsGeneratorSidebarIconComponent
                    ],
                    exports: [
                        SettingsGeneratorComponent,
                        SettingsGeneratorSidebarLayoutComponent,
                        SettingsGeneratorContentComponent,
                        SettingsGeneratorSectionComponent,
                        ThemeSelectorListIconComponent
                    ],
                    providers: [
                        SettingsGeneratorLayoutAccessorService,
                        {
                            provide: FDP_SETTINGS_GENERATOR_CONFIG,
                            useValue: FDP_SETTINGS_GENERATOR_DEFAULT_CONFIG
                        }
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { BaseSettingsGeneratorLayout, FDP_SETTINGS_GENERATOR_DEFAULT_CONFIG, SettingsGeneratorComponent, SettingsGeneratorContentComponent, SettingsGeneratorLayoutAccessorService, SettingsGeneratorModule, SettingsGeneratorSectionComponent, SettingsGeneratorService, SettingsGeneratorSidebarIconComponent, SettingsGeneratorSidebarLayoutComponent, ThemeSelectorListComponent, ThemeSelectorListIconComponent };
//# sourceMappingURL=fundamental-ngx-platform-settings-generator.mjs.map
