{"version":3,"file":"fundamental-ngx-platform-settings-generator.mjs","sources":["../../../../libs/platform/settings-generator/controls/theme-selector-list/theme-selector-list.component.ts","../../../../libs/platform/settings-generator/controls/theme-selector-list/theme-selector-list.component.html","../../../../libs/platform/settings-generator/controls/theme-selector-list/icon.html","../../../../libs/platform/settings-generator/default-config.ts","../../../../libs/platform/settings-generator/layouts/settings-generator-sidebar-layout/settings-generator-sidebar-icon/settings-generator-sidebar-icon.component.ts","../../../../libs/platform/settings-generator/layouts/settings-generator-sidebar-layout/settings-generator-sidebar-icon/settings-generator-sidebar-icon.component.html","../../../../libs/platform/settings-generator/settings-generator.service.ts","../../../../libs/platform/settings-generator/settings-generator-content/settings-generator-section/settings-generator-section.component.ts","../../../../libs/platform/settings-generator/settings-generator-content/settings-generator-section/settings-generator-section.component.html","../../../../libs/platform/settings-generator/settings-generator-content/settings-generator-content.component.ts","../../../../libs/platform/settings-generator/settings-generator-content/settings-generator-content.component.html","../../../../libs/platform/settings-generator/tokens.ts","../../../../libs/platform/settings-generator/layouts/base-settings-generator-layout.ts","../../../../libs/platform/settings-generator/layouts/settings-generator-sidebar-layout/settings-generator-sidebar-layout.component.ts","../../../../libs/platform/settings-generator/layouts/settings-generator-sidebar-layout/settings-generator-sidebar-layout.component.html","../../../../libs/platform/settings-generator/settings-generator-layout-accessor.service.ts","../../../../libs/platform/settings-generator/settings-generator.component.ts","../../../../libs/platform/settings-generator/settings-generator.component.html","../../../../libs/platform/settings-generator/settings-generator.module.ts","../../../../libs/platform/settings-generator/fundamental-ngx-platform-settings-generator.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n Input,\n OnInit,\n ViewEncapsulation,\n forwardRef,\n inject\n} from '@angular/core';\nimport { ClickedDirective } from '@fundamental-ngx/cdk/utils';\nimport { ListModule } from '@fundamental-ngx/core/list';\nimport { ThemingService } from '@fundamental-ngx/core/theming';\nimport {\n BaseDynamicFormGeneratorControl,\n dynamicFormFieldProvider,\n dynamicFormGroupChildProvider\n} from '@fundamental-ngx/platform/form';\n\n@Component({\n selector: 'fdp-theme-selector-list',\n templateUrl: './theme-selector-list.component.html',\n styleUrl: './theme-selector-list.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider],\n imports: [ListModule, ClickedDirective, forwardRef(() => ThemeSelectorListIconComponent), NgTemplateOutlet]\n})\nexport class ThemeSelectorListComponent extends BaseDynamicFormGeneratorControl implements OnInit {\n /** @hidden */\n currentTheme: string;\n\n /** @hidden */\n private readonly _themingService = inject(ThemingService, {\n optional: true\n });\n\n /** @hidden */\n ngOnInit(): void {\n this.currentTheme = this.formItem.default;\n }\n\n /** @hidden */\n setTheme(value: string): void {\n const control = this.form.get([this.formGroupName, this.name]);\n this.currentTheme = value;\n control?.setValue(value);\n this._themingService?.setTheme(value);\n }\n}\n\n@Component({\n selector: 'fdp-theme-selector-list-icon',\n templateUrl: './icon.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true\n})\nexport class ThemeSelectorListIconComponent {\n /** @hidden */\n @Input()\n size = 40;\n}\n","\n","\n","import { SidebarSettingsGeneratorConfig } from './models/settings-config.model';\n\nexport const FDP_SETTINGS_GENERATOR_DEFAULT_CONFIG: SidebarSettingsGeneratorConfig = {\n defaultLayout: 'sidebar',\n sidebar: {\n mobileBreakpoint: 700,\n width: '20rem'\n }\n};\n","import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DestroyRef,\n inject,\n Input,\n ViewEncapsulation\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { isSubscribable, merge } from '@fundamental-ngx/cdk/utils';\nimport { AvatarComponent } from '@fundamental-ngx/core/avatar';\nimport { IconComponent } from '@fundamental-ngx/core/icon';\nimport { SkeletonComponent } from '@fundamental-ngx/core/skeleton';\nimport { ListAvatarConfig, ListIconConfig } from '@fundamental-ngx/platform/list';\nimport { Observable } from 'rxjs';\nimport { ThumbnailSettingsItem } from '../../../models/settings.model';\n\n@Component({\n selector: 'fdp-settings-generator-sidebar-icon',\n templateUrl: './settings-generator-sidebar-icon.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [SkeletonComponent, IconComponent, AvatarComponent]\n})\nexport class SettingsGeneratorSidebarIconComponent {\n /** Thumbnail configuration. */\n @Input()\n set thumbnail(value: ThumbnailSettingsItem) {\n this._thumbnail = value;\n if (this.thumbnail.avatar) {\n this._transformAvatarConfig(this.thumbnail.avatar);\n }\n\n if (this.thumbnail.icon) {\n this._transformIconConfig(this.thumbnail.icon);\n }\n }\n\n get thumbnail(): ThumbnailSettingsItem {\n return this._thumbnail;\n }\n\n /** @hidden */\n _avatarConfig: ListAvatarConfig | undefined;\n\n /** @hidden */\n _iconConfig: ListIconConfig | undefined;\n\n /** @hidden */\n private _thumbnail: ThumbnailSettingsItem;\n\n /** @hidden */\n private readonly _destroyRef = inject(DestroyRef);\n\n /** @hidden */\n private readonly _cdr = inject(ChangeDetectorRef);\n\n /** @hidden */\n private _transformAvatarConfig(\n config$: Partial | string | Observable | string>\n ): void {\n this._getConfigFromObservable(config$, (parsedConfig) => {\n const avatarConfig = typeof parsedConfig === 'string' ? { image: parsedConfig } : parsedConfig;\n this._avatarConfig = merge(new ListAvatarConfig(), avatarConfig);\n this._cdr.detectChanges();\n });\n }\n\n /** @Hidden */\n private _transformIconConfig(\n config$: Partial | string | Observable | string>\n ): void {\n this._getConfigFromObservable(config$, (parsedConfig) => {\n const iconConfig = typeof parsedConfig === 'string' ? { glyph: parsedConfig } : parsedConfig;\n this._iconConfig = merge(new ListIconConfig(), iconConfig);\n this._cdr.detectChanges();\n });\n }\n\n /** @hidden */\n private _getConfigFromObservable(config: T | Observable, callback: (config: T) => void): void {\n if (isSubscribable(config)) {\n config.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((_config) => {\n callback(_config);\n });\n\n return;\n }\n\n callback(config);\n }\n}\n","@if (!_iconConfig && !_avatarConfig) {\n \n} @else {\n @if (_iconConfig && _iconConfig.glyph) {\n \n }\n @if (\n _avatarConfig && (_avatarConfig.image || _avatarConfig.glyph || _avatarConfig.zoomGlyph || _avatarConfig.label)\n ) {\n \n }\n}\n","import { DestroyRef, ElementRef, Injectable, OnDestroy, inject } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { Nullable, set } from '@fundamental-ngx/cdk/utils';\nimport { DynamicFormValue, FormGeneratorComponent } from '@fundamental-ngx/platform/form';\nimport { MessagePopoverFormWrapperComponent } from '@fundamental-ngx/platform/message-popover';\nimport { BehaviorSubject, Observable, Subject, combineLatest, delay, filter, map, switchMap, take, tap } from 'rxjs';\nimport { SettingsModel } from './models/settings.model';\n\nexport type SettingsGeneratorReturnValue = Record;\n\n@Injectable()\nexport class SettingsGeneratorService implements OnDestroy {\n /**\n * Settings configuration subject.\n */\n readonly settings = new BehaviorSubject>(null);\n\n /**\n * Stream emitted when user clicked on message popover error entry.\n */\n readonly onItemFocus = new Subject<{ path: string; element: ElementRef }>();\n\n /**\n * Stream emitted when mobile state has been changed.\n */\n readonly mobileState$ = new BehaviorSubject(false);\n\n /**\n * @hidden\n * Form generators collected from all items and groups.\n */\n private readonly _formGenerators = new Map();\n\n /** @hidden */\n private readonly _messagePopover = inject(MessagePopoverFormWrapperComponent, {\n optional: true\n });\n\n /** @hidden */\n private readonly _destroyRef = inject(DestroyRef);\n\n /** @hidden */\n constructor() {\n this._listenToMessagePopoverItemClick();\n }\n\n /** @hidden */\n _addFormGenerator(path: string[], formGenerator: FormGeneratorComponent): void {\n const joinedPath = path.join('.');\n this._formGenerators.set(joinedPath, formGenerator);\n formGenerator.loading$\n .pipe(\n filter((loading) => !loading),\n take(1),\n takeUntilDestroyed(this._destroyRef)\n )\n .subscribe(() => {\n this._messagePopover?.addForms(formGenerator.formGroup);\n this._messagePopover?.addFormFields(formGenerator.formFields);\n });\n }\n\n /** @hidden */\n _removeFormGenerator(path: string[]): void {\n const joinedPath = path.join('.');\n this._formGenerators.delete(joinedPath);\n }\n\n /**\n * Submits registered forms and emits result if submission status was successful (no errors).\n */\n submit(): Observable {\n const joinedEvents: Record> = {};\n this._formGenerators.forEach((formGenerator, key) => {\n joinedEvents[key] = formGenerator.loading$.pipe(\n filter((result) => !result),\n delay(50),\n tap(() => formGenerator.submit()),\n switchMap(() => formGenerator.formSubmittedStatus$),\n filter((status) => status.success),\n take(1),\n map((result) => result.value as DynamicFormValue),\n takeUntilDestroyed(this._destroyRef)\n );\n });\n\n return combineLatest(joinedEvents).pipe(\n map((result) => Object.entries(result).reduce((a, b) => set(a, b[0], b[1]), {})),\n take(1),\n takeUntilDestroyed(this._destroyRef)\n );\n }\n\n /**\n * Sets mobile state.\n * @param isMobile Whether mobile state should be applied.\n */\n setMobileState(isMobile: boolean): void {\n this.mobileState$.next(isMobile);\n }\n\n /** @hidden */\n ngOnDestroy(): void {\n this._formGenerators.clear();\n }\n\n /**\n * @hidden\n * Subscribes to click events from message popover and tries to open the section where invalid input is located.\n */\n private _listenToMessagePopoverItemClick(): void {\n this._messagePopover?.messagePopover$\n ?.pipe(\n switchMap((messagePopover) => messagePopover.focusItem),\n filter((entry) => !!entry.formField),\n takeUntilDestroyed(this._destroyRef)\n )\n .subscribe((entry) => {\n this._formGenerators.forEach((formGenerator, path) => {\n const formFields = formGenerator.formFields;\n // We already filtered entries with present form field.\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n if (formFields.includes(entry.formField!)) {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n this.onItemFocus.next({ path, element: entry.formField!.elementRef });\n return false;\n }\n });\n });\n }\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n Input,\n TemplateRef,\n ViewChild,\n ViewEncapsulation,\n inject\n} from '@angular/core';\nimport { AsyncOrSyncPipe, Nullable } from '@fundamental-ngx/cdk/utils';\nimport { DynamicFormItem, FormGeneratorComponent } from '@fundamental-ngx/platform/form';\nimport {\n FormSettingsItem,\n SettingsFormTab,\n SettingsItem,\n SettingsTemplateTab,\n TemplateSettingsItem\n} from '../../models/settings.model';\nimport { SettingsGeneratorService } from '../../settings-generator.service';\n\nexport type SettingsSectionItemsModel = SettingsTemplateTab | SettingsFormTab | SettingsItem;\n\n@Component({\n selector: 'fdp-settings-generator-section',\n templateUrl: './settings-generator-section.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [FormGeneratorComponent, NgTemplateOutlet, AsyncOrSyncPipe]\n})\nexport class SettingsGeneratorSectionComponent {\n /**\n * Group name. Used to define full path of the inner form.\n */\n @Input()\n groupName: Nullable;\n\n /**\n * Section items.\n * @param value {Nullable} Can be either a template Ref, or Form generator items.\n */\n @Input()\n set items(value: Nullable) {\n this._items = value;\n\n if (this._isTemplateLayout(value)) {\n this._renderer = 'template';\n this._templateRef = value.template;\n } else {\n this._renderer = 'form';\n this._formItems = value?.items || [];\n }\n }\n\n get items(): Nullable {\n return this._items;\n }\n\n /** @hidden */\n _renderer: 'form' | 'template' = 'form';\n\n /** @hidden */\n _templateRef: TemplateRef | null = null;\n\n /** @hidden */\n _formItems: DynamicFormItem[] = [];\n\n /** @hidden */\n private readonly _settingsGeneratorService = inject(SettingsGeneratorService);\n\n /** @hidden */\n private _items: Nullable;\n\n /** @hidden */\n @ViewChild(FormGeneratorComponent)\n private set _formGeneratorCmp(component: FormGeneratorComponent | undefined) {\n if (!this.items) {\n return;\n }\n\n const config = this.items as SettingsFormTab | FormSettingsItem;\n\n const path = [this.groupName, config.id].filter((v) => !!v) as string[];\n\n if (component) {\n this._settingsGeneratorService._addFormGenerator(path, component);\n } else {\n this._settingsGeneratorService._removeFormGenerator(path);\n }\n }\n\n /** @hidden */\n _isTemplateLayout(settings: any): settings is TemplateSettingsItem {\n return !!settings?.template;\n }\n}\n","@if (_renderer === 'form') {\n \n}\n@if (_renderer === 'template' && items?.template) {\n \n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n HostBinding,\n Input,\n Output,\n QueryList,\n Signal,\n ViewChildren,\n ViewEncapsulation,\n computed,\n input,\n signal\n} from '@angular/core';\nimport { AsyncOrSyncPipe, Nullable } from '@fundamental-ngx/cdk/utils';\nimport { ButtonComponent } from '@fundamental-ngx/core/button';\nimport { SkeletonComponent } from '@fundamental-ngx/core/skeleton';\nimport { TabPanelComponent } from '@fundamental-ngx/core/tabs';\nimport { TitleComponent } from '@fundamental-ngx/core/title';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { IconTabBarComponent, IconTabBarItem, TabConfig } from '@fundamental-ngx/platform/icon-tab-bar';\nimport {\n GroupedFormSettingsItem,\n GroupedTemplateSettingsItem,\n SettingsFormTab,\n SettingsItem,\n SettingsTemplateTab,\n TemplateSettingsItem\n} from '../models/settings.model';\nimport { SettingsGeneratorSectionComponent } from './settings-generator-section/settings-generator-section.component';\n\n@Component({\n selector: 'fdp-settings-generator-content',\n templateUrl: './settings-generator-content.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n TitleComponent,\n ButtonComponent,\n SkeletonComponent,\n SettingsGeneratorSectionComponent,\n NgTemplateOutlet,\n AsyncOrSyncPipe,\n IconTabBarComponent,\n FdTranslatePipe\n ]\n})\nexport class SettingsGeneratorContentComponent {\n /** @hidden */\n @Input()\n set settings(value: Nullable) {\n this._settings$.set(value);\n }\n\n get settings(): Nullable {\n return this._settings$();\n }\n\n /** Whether to render content component in mobile view. */\n @Input()\n mobile = false;\n\n /** Event emits when user needs to be moved back to navigation screen. */\n @Output()\n goBack = new EventEmitter();\n\n /** @hidden */\n @HostBinding('class')\n protected readonly _initialClass = 'fdp-settings-generator__content-section';\n\n /** @hidden */\n @ViewChildren(TabPanelComponent)\n private readonly _tabPanels: QueryList;\n\n /** Optional alternative text for the settings generator dialog back button. */\n backButtonLabel = input();\n\n /** @hidden */\n _id: Nullable;\n\n /** @hidden */\n _renderer$ = computed<'form' | 'template'>(() => (this.isTemplateLayout(this._settings$()) ? 'template' : 'form'));\n\n /** @hidden */\n _contentLayout$ = computed<'form' | 'tabs'>(() => (this.isGroupedSettings(this._settings$()) ? 'tabs' : 'form'));\n\n /** @hidden */\n _groups$: Signal<(SettingsTemplateTab | SettingsFormTab)[]> = computed(() => {\n const settings = this._settings$();\n return this.isGroupedSettings(settings) ? settings.groups : [];\n });\n\n /** @hidden */\n _tabs$: Signal = computed(() =>\n this._groups$().map((group, index) => ({\n label: group.title,\n active: index === this._activeTab$()\n }))\n );\n\n /** @hidden */\n _index: number;\n\n /** @hidden */\n readonly _activeTab$ = signal(0);\n\n /** @hidden */\n readonly _settings$ = signal>(null);\n\n /** @hidden */\n private _settings: Nullable;\n\n /** @hidden */\n isTemplateLayout(settings: Nullable): settings is TemplateSettingsItem {\n return !!settings?.template;\n }\n\n /** @hidden */\n isGroupedSettings(settings: any): settings is GroupedFormSettingsItem | GroupedTemplateSettingsItem {\n return settings?.groups?.length > 0;\n }\n\n /** @hidden */\n changeTab(item: IconTabBarItem): void {\n this._activeTab$.set(item.index);\n }\n\n /**\n * Activates tab by group ID.\n * @param id ID of the group.\n */\n setActiveTab(id: string): void {\n if (!this.isGroupedSettings(this._settings)) {\n return;\n }\n this._tabPanels?.forEach((tab, index) => {\n const group = this._groups$()[index];\n\n if (group.id === id) {\n tab.open(true);\n return false;\n }\n });\n }\n}\n","\n @if (mobile) {\n \n }\n @if (settings?.title | fdkAsyncOrSync; as settingsTitle) {\n {{ settingsTitle }}\n } @else {\n \n }\n\n\n \n @for (group of _groups$(); track group) {\n \n \n
\n }\n\n\n \n\n\n","import { InjectionToken } from '@angular/core';\nimport { SettingsConfig } from './models/settings-config.model';\nimport { SettingsGenerator } from './models/settings-generator.model';\n\nexport const FDP_SETTINGS_GENERATOR_CONFIG = new InjectionToken('FdpSettingsGeneratorConfig');\nexport const FDP_SETTINGS_GENERATOR = new InjectionToken('FdpSettingsGenerator');\n","import { ChangeDetectorRef, DestroyRef, Directive, ElementRef, inject, OnInit } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { Nullable } from '@fundamental-ngx/cdk/utils';\nimport { SettingsModel } from '../models/settings.model';\nimport { SettingsGeneratorService } from '../settings-generator.service';\nimport { FDP_SETTINGS_GENERATOR } from '../tokens';\n\n@Directive()\nexport abstract class BaseSettingsGeneratorLayout implements OnInit {\n /**\n * Subject to notify subscriptions to unsubscribe when component destroys.\n */\n protected abstract _destroyRef: DestroyRef;\n\n /**\n * Method for focusing inner form control.\n * It is responsible for activating the section and placing focus on the element.\n * @param path path of the control joined by dot(.). Usually represents section ID and inner group ID.\n * @param element ElementRef of native element to focus.\n */\n abstract focusElementByPath(path: string, element: ElementRef): void;\n\n /**\n * Settings schema.\n */\n settings: Nullable;\n\n /**\n * Settings generator service.\n */\n protected readonly _settingsGeneratorService = inject(SettingsGeneratorService);\n\n /**\n * Change detector ref.\n */\n protected readonly _cdr = inject(ChangeDetectorRef);\n\n /**\n * Settings generator component ref.\n */\n protected _settingsGenerator = inject(FDP_SETTINGS_GENERATOR);\n\n /** @hidden */\n ngOnInit(): void {\n this._settingsGeneratorService.settings.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((settings) => {\n this.settings = settings;\n this._cdr.detectChanges();\n });\n }\n}\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n HostBinding,\n inject,\n OnInit,\n ViewChild,\n ViewEncapsulation\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { AsyncOrSyncPipe, Nullable, resizeObservable } from '@fundamental-ngx/cdk/utils';\nimport { ListModule } from '@fundamental-ngx/core/list';\nimport { SkeletonComponent } from '@fundamental-ngx/core/skeleton';\nimport { TitleComponent } from '@fundamental-ngx/core/title';\nimport { FdTranslatePipe } from '@fundamental-ngx/i18n';\nimport { debounceTime, distinctUntilChanged, startWith } from 'rxjs';\nimport { SidebarSettingsGeneratorConfig } from '../../models/settings-config.model';\nimport {\n FormSettingsItem,\n GroupedFormSettingsItem,\n SettingsItem,\n SidebarSettingsModel,\n SidebarWidthConfiguration\n} from '../../models/settings.model';\nimport { SettingsGeneratorContentComponent } from '../../settings-generator-content/settings-generator-content.component';\nimport { FDP_SETTINGS_GENERATOR_CONFIG } from '../../tokens';\nimport { BaseSettingsGeneratorLayout } from '../base-settings-generator-layout';\nimport { SettingsGeneratorSidebarIconComponent } from './settings-generator-sidebar-icon/settings-generator-sidebar-icon.component';\n\n@Component({\n selector: 'fdp-settings-generator-sidebar-layout',\n templateUrl: './settings-generator-sidebar-layout.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [\n ListModule,\n SettingsGeneratorSidebarIconComponent,\n SkeletonComponent,\n SettingsGeneratorContentComponent,\n AsyncOrSyncPipe,\n TitleComponent,\n FdTranslatePipe,\n FormsModule\n ]\n})\nexport class SettingsGeneratorSidebarLayoutComponent\n extends BaseSettingsGeneratorLayout\n implements OnInit, AfterViewInit\n{\n /** @hidden */\n @HostBinding('class.fdp-settings-generator__sidebar-layout--mobile')\n _isMobile: boolean;\n\n /** @hidden */\n @HostBinding('class')\n protected readonly _initialClass = 'fdp-settings-generator__sidebar-layout';\n\n /** @hidden */\n @ViewChild('settingsGeneratorContent')\n private readonly _settingsGeneratorContent: SettingsGeneratorContentComponent;\n\n /** @hidden */\n @ViewChild('listElement', { read: ElementRef })\n private _listElement: ElementRef;\n\n /** @hidden */\n searchTerm: string;\n\n /**\n * Selected settings section.\n */\n _selectedIndex = -1;\n /** @hidden */\n _sidebarWidth: SidebarWidthConfiguration;\n\n /** @hidden */\n protected readonly sidebarTitle = computed(() => {\n const settings = this.settings;\n if (this._isSidebarSettings(settings) && settings.sidebarTitle) {\n return settings.sidebarTitle;\n }\n return null;\n });\n\n /** @hidden */\n protected readonly headingLevel = computed(() => {\n const settings = this.settings;\n if (this._isSidebarSettings(settings) && settings.sidebarTitleHeadingLevel) {\n return settings.sidebarTitleHeadingLevel;\n }\n return 5; // Default to h5\n });\n\n /** @hidden */\n protected _destroyRef = inject(DestroyRef);\n\n /** @hidden */\n private readonly _config = inject(FDP_SETTINGS_GENERATOR_CONFIG);\n\n /** @hidden */\n private _sidebarVisible = true;\n\n /** @hidden */\n private _initialSelectedItemSet = false;\n\n /** @hidden */\n get _mobileSidebarVisible(): boolean {\n return this._isMobile && this._sidebarVisible;\n }\n\n /** @hidden */\n constructor() {\n super();\n this._sidebarWidth = this._getNormalizedSidebarWidth(this._config.sidebar?.width);\n }\n\n /** @hidden */\n ngOnInit(): void {\n super.ngOnInit();\n this._settingsGeneratorService.settings.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((settings) => {\n if (this._isSidebarSettings(settings) && settings.sidebarWidth) {\n this._sidebarWidth = this._getNormalizedSidebarWidth(settings.sidebarWidth);\n this._cdr.detectChanges();\n }\n });\n }\n\n /** @hidden */\n focusElementByPath(path: string, element: ElementRef): void {\n const pathArray = path.split('.');\n // We are interested only in sections with ID.\n const sectionIndex =\n this.settings?.items.findIndex((section) => {\n if (!this._isFormGeneratorSection(section)) {\n return;\n }\n return section.id === pathArray[0];\n }) ?? -1;\n\n // Focus on section.\n if (sectionIndex > -1) {\n this._setSelectedIndex(sectionIndex);\n }\n\n // Currently we support only 2 level nesting of form groups.\n if (pathArray.length > 0) {\n this._settingsGeneratorContent.setActiveTab(pathArray[1]);\n }\n\n setTimeout(() => {\n element.nativeElement.focus();\n });\n }\n\n /** @hidden */\n ngAfterViewInit(): void {\n if (this._settingsGenerator.elementRef.nativeElement && this._config.sidebar?.mobileBreakpoint) {\n resizeObservable(this._settingsGenerator.elementRef.nativeElement)\n .pipe(startWith(null), debounceTime(30), distinctUntilChanged(), takeUntilDestroyed(this._destroyRef))\n .subscribe(() => {\n const { width } = this._settingsGenerator.elementRef.nativeElement.getBoundingClientRect();\n\n const isMobile = width <= this._config.sidebar.mobileBreakpoint;\n\n if (this._isMobile === isMobile) {\n return;\n }\n\n this._settingsGeneratorService.setMobileState(isMobile);\n this._isMobile = isMobile;\n\n // User opened section previously, so focus on that section\n if (this._isMobile && this._selectedIndex >= 0) {\n this._sidebarVisible = false;\n }\n\n // In mobile view, we don't need to set initial index, since the section won't be visible to the end user.\n if (!this._initialSelectedItemSet && !this._isMobile) {\n this._setSelectedIndex(this._selectedIndex > -1 ? this._selectedIndex : 0);\n this._initialSelectedItemSet = true;\n }\n\n if (!this._isMobile && this._selectedIndex === -1) {\n this._setSelectedIndex(0);\n }\n\n this._cdr.detectChanges();\n });\n }\n }\n\n /** @hidden */\n _displaySettingsSearchInput(): boolean {\n const listEl = this._listElement;\n if (!listEl) {\n return false;\n } else {\n return !!this.searchTerm || listEl.nativeElement.scrollHeight > listEl.nativeElement.clientHeight;\n }\n }\n\n /** @hidden */\n _setSelectedIndex(index: number): void {\n this._selectedIndex = index;\n this._sidebarVisible = index === -1;\n this._cdr.detectChanges();\n }\n\n /** @Hidden */\n _goBack(): void {\n this._setSelectedIndex(-1);\n }\n\n /** @hidden */\n private _getNormalizedSidebarWidth(width: string | SidebarWidthConfiguration): SidebarWidthConfiguration {\n return typeof width === 'string' ? { minWidth: width, maxWidth: width, width } : width;\n }\n\n /** @hidden */\n private _isSidebarSettings(settings: Nullable): settings is SidebarSettingsModel {\n return settings?.appearance === 'sidebar';\n }\n\n /** @hidden */\n private _isFormGeneratorSection(section: SettingsItem): section is FormSettingsItem | GroupedFormSettingsItem {\n return !!(section as any).id;\n }\n}\n","