@fundamental-ngx/platform 0.64.2-rc.38 → 0.64.2-rc.39

package/fesm2022/fundamental-ngx-platform-table.mjs

@@ -2,7 +2,7 @@ import * as i4 from '@angular/cdk/a11y';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { DOWN_ARROW, UP_ARROW, SPACE } from '@angular/cdk/keycodes';
 import * as i0 from '@angular/core';
-import { ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, Inject, signal, inject, DestroyRef, ViewChild, ViewChildren, Input, computed, DOCUMENT, input, ContentChild, Optional, Host, EventEmitter, Output, forwardRef, Pipe, TemplateRef, Directive, ChangeDetectorRef, afterEveryRender, output, linkedSignal, effect, untracked, viewChildren, ContentChildren, HostBinding, NgZone, ElementRef, booleanAttribute, NgModule } from '@angular/core';
+import { ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, Inject, signal, inject, DestroyRef, ViewChild, ViewChildren, Input, computed, DOCUMENT, input, ContentChild, Optional, Host, EventEmitter, Output, forwardRef, Pipe, TemplateRef, Directive, ChangeDetectorRef, ElementRef, Injector, afterEveryRender, afterNextRender, viewChildren, effect, output, linkedSignal, untracked, ContentChildren, HostBinding, NgZone, booleanAttribute, NgModule } from '@angular/core';
 import { NgTemplateOutlet, NgStyle, AsyncPipe, NgClass } from '@angular/common';
 import * as i3 from '@fundamental-ngx/cdk/utils';
 import { TemplateDirective, RtlService, InitialFocusDirective, DisabledBehaviorDirective, FDK_FOCUSABLE_ITEM_DIRECTIVE, FDK_FOCUSABLE_LIST_DIRECTIVE, ValueByPathPipe, set, uuidv4, destroyObservable, KeyUtil, get, range, RangeSelector, resizeObservable, uniq, DragAndDropModule, IntersectionSpyDirective, FDK_FOCUSABLE_GRID_DIRECTIVE, DndListDirective, FocusableGridDirective } from '@fundamental-ngx/cdk/utils';
@@ -2268,9 +2268,46 @@ class FilterCustomComponent {
         this.valueChange = new EventEmitter();
         /** @hidden */
         this._cdr = inject(ChangeDetectorRef);
+        /** @hidden */
+        this._elementRef = inject(ElementRef);
+        /** @hidden */
+        this._injector = inject(Injector);
         afterEveryRender(() => this._checkValueChanges());
     }
     /** @hidden */
+    ngAfterViewInit() {
+        const focusableSelectors = [
+            'input:not([disabled])',
+            'select:not([disabled])',
+            'textarea:not([disabled])',
+            'button:not([disabled])',
+            'a[href]',
+            '[tabindex]:not([tabindex="-1"])'
+        ].join(', ');
+        afterNextRender(() => {
+            const firstFocusable = this._elementRef.nativeElement.querySelector(focusableSelectors);
+            if (!firstFocusable ||
+                firstFocusable.style.display === 'none' ||
+                firstFocusable.style.visibility === 'hidden' ||
+                firstFocusable.style.opacity === '0') {
+                return;
+            }
+            const dialog = this._elementRef.nativeElement.closest('fd-dialog, [fd-dialog]');
+            if (!dialog) {
+                return;
+            }
+            const dialogRect = dialog.getBoundingClientRect();
+            const elementRect = firstFocusable.getBoundingClientRect();
+            const isWithinBounds = elementRect.top >= dialogRect.top &&
+                elementRect.left >= dialogRect.left &&
+                elementRect.bottom <= dialogRect.bottom &&
+                elementRect.right <= dialogRect.right;
+            if (isWithinBounds) {
+                firstFocusable.focus();
+            }
+        }, { injector: this._injector });
+    }
+    /** @hidden */
     _checkValueChanges() {
         try {
             if (JSON.stringify(this._value) === JSON.stringify(this._valueLastEmitted)) {
@@ -2297,12 +2334,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             }] } });
 
 class FilterMultiSelectComponent {
-    constructor() {
-        /** Selectable filter options */
-        this.options = [];
-        /** Filter model change event */
-        this.valueChange = new EventEmitter();
-    }
     /** The filter model */
     set filterBy(filterBy) {
         const filterByValue = filterBy?.value || [];
@@ -2313,6 +2344,22 @@ class FilterMultiSelectComponent {
         this._updateValueBasedOnOptions();
     }
     /** @hidden */
+    constructor() {
+        /** Selectable filter options */
+        this.options = [];
+        /** Filter model change event */
+        this.valueChange = new EventEmitter();
+        /** @hidden */
+        this.listItems = viewChildren(ListItemComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listItems" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const items = this.listItems();
+            if (items.length > 0) {
+                items[0].focus();
+            }
+        });
+    }
+    /** @hidden */
     _onSelectChange(option, selected) {
         option.selected = selected;
         this._updateValueBasedOnOptions();
@@ -2323,36 +2370,46 @@ class FilterMultiSelectComponent {
         this._value = this._selectableOptions.filter(({ selected }) => selected).map(({ value }) => value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterMultiSelectComponent, isStandalone: true, selector: "fdp-filter-multi-select", inputs: { options: "options", filterBy: "filterBy" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<ul fd-list [selection]=\"true\">\n    @for (option of _selectableOptions; track option) {\n        <li\n            fd-list-item\n            [selected]=\"option.selected\"\n            [attr.aria-label]=\"\n                ('platformTable.filterDialogFilterByLabel' | fdTranslate: { filterLabel: option.label })()\n            \"\n        >\n            <fd-checkbox [ngModel]=\"option.selected\" (ngModelChange)=\"_onSelectChange(option, $event)\"></fd-checkbox>\n            <span fd-list-title>{{ option.label }}</span>\n        </li>\n    }\n</ul>\n", dependencies: [{ kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterMultiSelectComponent, isStandalone: true, selector: "fdp-filter-multi-select", inputs: { options: "options", filterBy: "filterBy" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "listItems", predicate: ListItemComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ul fd-list [selection]=\"true\">\n    @for (option of _selectableOptions; track option) {\n        <li\n            fd-list-item\n            [selected]=\"option.selected\"\n            [attr.aria-label]=\"\n                ('platformTable.filterDialogFilterByLabel' | fdTranslate: { filterLabel: option.label })()\n            \"\n        >\n            <fd-checkbox [ngModel]=\"option.selected\" (ngModelChange)=\"_onSelectChange(option, $event)\"></fd-checkbox>\n            <span fd-list-title>{{ option.label }}</span>\n        </li>\n    }\n</ul>\n", dependencies: [{ kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterMultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-filter-multi-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [ListComponent$1, ListItemComponent, CheckboxComponent, FormsModule, ListTitleDirective, FdTranslatePipe], template: "<ul fd-list [selection]=\"true\">\n    @for (option of _selectableOptions; track option) {\n        <li\n            fd-list-item\n            [selected]=\"option.selected\"\n            [attr.aria-label]=\"\n                ('platformTable.filterDialogFilterByLabel' | fdTranslate: { filterLabel: option.label })()\n            \"\n        >\n            <fd-checkbox [ngModel]=\"option.selected\" (ngModelChange)=\"_onSelectChange(option, $event)\"></fd-checkbox>\n            <span fd-list-title>{{ option.label }}</span>\n        </li>\n    }\n</ul>\n" }]
-        }], propDecorators: { options: [{
+        }], ctorParameters: () => [], propDecorators: { options: [{
                 type: Input
             }], filterBy: [{
                 type: Input
             }], valueChange: [{
                 type: Output
-            }] } });
+            }], listItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => ListItemComponent), { isSignal: true }] }] } });
 
 /**
  * Single Select filter type.
  *
  */
 class FilterSingleSelectComponent {
+    /** The filter model */
+    set filterBy(filterBy) {
+        const value = filterBy?.value?.[0];
+        this._value = value === undefined ? NOT_FILTERED_OPTION_VALUE : value;
+    }
+    /** @hidden */
     constructor() {
         /** Selectable filter options */
         this.options = [];
         /** Filter model change event */
         this.valueChange = new EventEmitter();
         /** @hidden */
+        this.listItems = viewChildren(ListItemComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listItems" }] : /* istanbul ignore next */ []));
+        /** @hidden */
         this.NOT_FILTERED_OPTION_VALUE = NOT_FILTERED_OPTION_VALUE;
-    }
-    /** The filter model */
-    set filterBy(filterBy) {
-        const value = filterBy?.value?.[0];
-        this._value = value === undefined ? NOT_FILTERED_OPTION_VALUE : value;
+        effect(() => {
+            const items = this.listItems();
+            if (items.length > 0) {
+                items[0].focus();
+            }
+        });
     }
     /** @hidden */
     _onValueChange(value) {
@@ -2368,18 +2425,18 @@ class FilterSingleSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterSingleSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterSingleSelectComponent, isStandalone: true, selector: "fdp-filter-single-select", inputs: { options: "options", filterBy: "filterBy" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<ul fd-list [selection]=\"true\">\n    <li fd-list-item [selected]=\"_value === NOT_FILTERED_OPTION_VALUE\">\n        <fd-radio-button\n            name=\"sort-by\"\n            [value]=\"NOT_FILTERED_OPTION_VALUE\"\n            state=\"default\"\n            [ngModel]=\"_value\"\n            (ngModelChange)=\"_onValueChange($event)\"\n        ></fd-radio-button>\n        <span fd-list-title>{{ ('platformTable.filterDialogNotFilteredLabel' | fdTranslate)() }}</span>\n    </li>\n    @for (option of options; track option) {\n        <li\n            fd-list-item\n            [selected]=\"option.value === _value\"\n            [attr.aria-label]=\"\n                ('platformTable.filterDialogFilterByLabel' | fdTranslate: { filterLabel: option.label })()\n            \"\n        >\n            <fd-radio-button\n                [ngModel]=\"_value\"\n                (ngModelChange)=\"_onValueChange($event)\"\n                [value]=\"option.value\"\n                name=\"filtering-settings-single-select\"\n            ></fd-radio-button>\n            <span fd-list-title>{{ option.label }}</span>\n        </li>\n    }\n</ul>\n", dependencies: [{ kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "readOnly", "selectedValue", "name", "id", "value", "required", "standalone", "wrapLabel", "valignLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterSingleSelectComponent, isStandalone: true, selector: "fdp-filter-single-select", inputs: { options: "options", filterBy: "filterBy" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "listItems", predicate: ListItemComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ul fd-list [selection]=\"true\">\n    <li fd-list-item [selected]=\"_value === NOT_FILTERED_OPTION_VALUE\">\n        <fd-radio-button\n            name=\"sort-by\"\n            [value]=\"NOT_FILTERED_OPTION_VALUE\"\n            state=\"default\"\n            [ngModel]=\"_value\"\n            (ngModelChange)=\"_onValueChange($event)\"\n        ></fd-radio-button>\n        <span fd-list-title>{{ ('platformTable.filterDialogNotFilteredLabel' | fdTranslate)() }}</span>\n    </li>\n    @for (option of options; track option) {\n        <li\n            fd-list-item\n            [selected]=\"option.value === _value\"\n            [attr.aria-label]=\"\n                ('platformTable.filterDialogFilterByLabel' | fdTranslate: { filterLabel: option.label })()\n            \"\n        >\n            <fd-radio-button\n                [ngModel]=\"_value\"\n                (ngModelChange)=\"_onValueChange($event)\"\n                [value]=\"option.value\"\n                name=\"filtering-settings-single-select\"\n            ></fd-radio-button>\n            <span fd-list-title>{{ option.label }}</span>\n        </li>\n    }\n</ul>\n", dependencies: [{ kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "readOnly", "selectedValue", "name", "id", "value", "required", "standalone", "wrapLabel", "valignLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterSingleSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-filter-single-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [ListComponent$1, ListItemComponent, RadioButtonComponent, FormsModule, ListTitleDirective, FdTranslatePipe], template: "<ul fd-list [selection]=\"true\">\n    <li fd-list-item [selected]=\"_value === NOT_FILTERED_OPTION_VALUE\">\n        <fd-radio-button\n            name=\"sort-by\"\n            [value]=\"NOT_FILTERED_OPTION_VALUE\"\n            state=\"default\"\n            [ngModel]=\"_value\"\n            (ngModelChange)=\"_onValueChange($event)\"\n        ></fd-radio-button>\n        <span fd-list-title>{{ ('platformTable.filterDialogNotFilteredLabel' | fdTranslate)() }}</span>\n    </li>\n    @for (option of options; track option) {\n        <li\n            fd-list-item\n            [selected]=\"option.value === _value\"\n            [attr.aria-label]=\"\n                ('platformTable.filterDialogFilterByLabel' | fdTranslate: { filterLabel: option.label })()\n            \"\n        >\n            <fd-radio-button\n                [ngModel]=\"_value\"\n                (ngModelChange)=\"_onValueChange($event)\"\n                [value]=\"option.value\"\n                name=\"filtering-settings-single-select\"\n            ></fd-radio-button>\n            <span fd-list-title>{{ option.label }}</span>\n        </li>\n    }\n</ul>\n" }]
-        }], propDecorators: { options: [{
+        }], ctorParameters: () => [], propDecorators: { options: [{
                 type: Input
             }], filterBy: [{
                 type: Input
             }], valueChange: [{
                 type: Output
-            }] } });
+            }], listItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => ListItemComponent), { isSignal: true }] }] } });
 
 const FILTERS_VIEW_STEP_TOKEN = new InjectionToken('FiltersViewStep');
 
@@ -2510,8 +2567,7 @@ class FiltersComponent {
         this._initializeFilterData(value);
     }
     /** hidden */
-    constructor(_cd) {
-        this._cd = _cd;
+    constructor() {
         /** @hidden Heading level */
         this.headingLevel = input(2, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
@@ -2547,6 +2603,27 @@ class FiltersComponent {
         ...(ngDevMode ? [{ debugName: "activeFilterStepView" }] : /* istanbul ignore next */ []));
         /** Reference to the available steps */
         this.ACTIVE_STEP = ACTIVE_STEP;
+        /** @hidden */
+        this._elementRef = inject(ElementRef);
+        /** @hidden */
+        this._injector = inject(Injector);
+        /** @hidden */
+        this._cd = inject(ChangeDetectorRef);
+        // Focus first focusable element when returning to the filters list
+        effect((onCleanup) => {
+            const step = this.activeStep();
+            if (step === ACTIVE_STEP.SELECT_FILTER) {
+                // Use microtask to defer focus until after the next render
+                const timeoutId = setTimeout(() => {
+                    // Query from the root element to find the list items rendered via template outlet
+                    const firstListItem = this._elementRef?.nativeElement.querySelector('li[fd-list-item]');
+                    if (firstListItem instanceof HTMLElement) {
+                        firstListItem.focus();
+                    }
+                });
+                onCleanup(() => clearTimeout(timeoutId));
+            }
+        }, { injector: this._injector });
     }
     /** hidden */
     ngOnInit() {
@@ -2627,13 +2704,13 @@ class FiltersComponent {
             this.resetAvailabilityChange.emit(false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FiltersComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FiltersComponent, isStandalone: true, selector: "fdp-filters", inputs: { filteringData: { classPropertyName: "filteringData", publicName: "filteringData", isSignal: false, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeFilterStepViewChange: "activeFilterStepViewChange", filterChange: "filterChange", resetAvailabilityChange: "resetAvailabilityChange" }, viewQueries: [{ propertyName: "setActiveFilterStepView", first: true, predicate: FILTERS_VIEW_STEP_TOKEN, descendants: true }], ngImport: i0, template: "@if (activeFilterStepView()?.bodyTemplateRef) {\n    <ng-container [ngTemplateOutlet]=\"activeFilterStepView()?.bodyTemplateRef ?? null\"></ng-container>\n}\n<!-- Keep active step component  -->\n@if (activeStep() === ACTIVE_STEP.SELECT_FILTER) {\n    <fdp-filters-list-step\n        [headingLevel]=\"headingLevel()\"\n        [filters]=\"viewSettingsFilters()\"\n        (selectFilter)=\"selectFilter($event)\"\n    ></fdp-filters-list-step>\n} @else if (activeStep() === ACTIVE_STEP.FILTER) {\n    <fdp-filter-step\n        [headingLevel]=\"headingLevel()\"\n        [columnKey]=\"activeFilterColumnKey()!\"\n        [columnName]=\"activeFilter()!.label\"\n        [filter]=\"activeFilter()!\"\n        [filterBy]=\"filterBy()\"\n        (back)=\"goToFilters()\"\n        (valueChange)=\"applyFilter($event, activeFilter())\"\n    ></fdp-filter-step>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FiltersListStepComponent, selector: "fdp-filters-list-step", inputs: ["filters", "headingLevel"], outputs: ["selectFilter"] }, { kind: "component", type: FilterStepComponent, selector: "fdp-filter-step", inputs: ["filter", "columnKey", "contentDensity", "filterBy", "columnName", "headingLevel"], outputs: ["back", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FiltersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-filters', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, FiltersListStepComponent, FilterStepComponent], template: "@if (activeFilterStepView()?.bodyTemplateRef) {\n    <ng-container [ngTemplateOutlet]=\"activeFilterStepView()?.bodyTemplateRef ?? null\"></ng-container>\n}\n<!-- Keep active step component  -->\n@if (activeStep() === ACTIVE_STEP.SELECT_FILTER) {\n    <fdp-filters-list-step\n        [headingLevel]=\"headingLevel()\"\n        [filters]=\"viewSettingsFilters()\"\n        (selectFilter)=\"selectFilter($event)\"\n    ></fdp-filters-list-step>\n} @else if (activeStep() === ACTIVE_STEP.FILTER) {\n    <fdp-filter-step\n        [headingLevel]=\"headingLevel()\"\n        [columnKey]=\"activeFilterColumnKey()!\"\n        [columnName]=\"activeFilter()!.label\"\n        [filter]=\"activeFilter()!\"\n        [filterBy]=\"filterBy()\"\n        (back)=\"goToFilters()\"\n        (valueChange)=\"applyFilter($event, activeFilter())\"\n    ></fdp-filter-step>\n}\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { filteringData: [{
+        }], ctorParameters: () => [], propDecorators: { filteringData: [{
                 type: Input
             }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], initialFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFilters", required: false }] }], activeFilterStepViewChange: [{ type: i0.Output, args: ["activeFilterStepViewChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], resetAvailabilityChange: [{ type: i0.Output, args: ["resetAvailabilityChange"] }], setActiveFilterStepView: [{
                 type: ViewChild,
@@ -4041,7 +4118,7 @@ class SettingsDialogComponent {
         this._liveAnnouncer.announce(message, 'polite');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SettingsDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: i1.Table }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SettingsDialogComponent, isStandalone: true, selector: "fdp-settings-dialog-settings", inputs: { resetAnnouncementMessage: { classPropertyName: "resetAnnouncementMessage", publicName: "resetAnnouncementMessage", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: RESETTABLE_TOKEN, useExisting: forwardRef(() => SettingsDialogComponent) }], ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                @if (activeTab() !== 'filter') {\n                    <fd-bar-element>\n                        <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n                            ('platformTable.settingsDialogHeader' | fdTranslate)()\n                        }}</span>\n                    </fd-bar-element>\n                } @else {\n                    <fd-bar-element>\n                        @if (activeFilterStepView()?.titleTemplateRef) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"activeFilterStepView()?.titleTemplateRef ?? null\"\n                            ></ng-container>\n                        }\n                    </fd-bar-element>\n                }\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body disablePaddings>\n        @if (showSubheader()) {\n            <fdp-icon-tab-bar layoutMode=\"row\" iconTabSize=\"sm\" (iconTabSelected)=\"onTabSelected($event)\">\n                @if (columnsData() && showColumns) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionColumnsButtonTitle' | fdTranslate)()\">\n                        <fdp-columns\n                            [columnsData]=\"columnsData()!\"\n                            [initialColumns]=\"_initialColumns()\"\n                            (columnsChange)=\"onColumnsChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.COLUMNS, $event)\"\n                        ></fdp-columns>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (sortingData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionSortButtonTitle' | fdTranslate)()\">\n                        <fdp-sorting\n                            [sortingData]=\"sortingData()!\"\n                            [initialSorting]=\"_initialSorting()\"\n                            (sortChange)=\"onSortChange($event)\"\n                            (validityChange)=\"onSortValidityChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.SORT, $event)\"\n                        ></fdp-sorting>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (filteringData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionFilterButtonTitle' | fdTranslate)()\">\n                        <fdp-filters\n                            [headingLevel]=\"headingLevel\"\n                            [filteringData]=\"filteringData()!\"\n                            [initialFilters]=\"_initialFilters()\"\n                            (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                            (filterChange)=\"onFilterChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                        ></fdp-filters>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (includeExcludeFiltersData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionFilterButtonTitle' | fdTranslate)()\">\n                        <fdp-table-include-exclude-filters\n                            [filterData]=\"includeExcludeFiltersComponentData\"\n                            (filterChange)=\"onIncludeExcludeFilterChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                        ></fdp-table-include-exclude-filters>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (groupingData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionGroupButtonTitle' | fdTranslate)()\">\n                        <fdp-grouping\n                            [groupingData]=\"groupingData()!\"\n                            [initialGrouping]=\"_initialGrouping()\"\n                            (groupChange)=\"onGroupChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.GROUP, $event)\"\n                        ></fdp-grouping>\n                    </fdp-icon-tab-bar-tab>\n                }\n            </fdp-icon-tab-bar>\n        } @else {\n            @if (columnsData() && showColumns) {\n                <fdp-columns\n                    [columnsData]=\"columnsData()!\"\n                    [initialColumns]=\"_initialColumns()\"\n                    (columnsChange)=\"onColumnsChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.COLUMNS, $event)\"\n                ></fdp-columns>\n            }\n            @if (sortingData()) {\n                <fdp-sorting\n                    [sortingData]=\"sortingData()!\"\n                    [initialSorting]=\"_initialSorting()\"\n                    (sortChange)=\"onSortChange($event)\"\n                    (validityChange)=\"onSortValidityChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.SORT, $event)\"\n                ></fdp-sorting>\n            }\n            @if (filteringData()) {\n                <fdp-filters\n                    [headingLevel]=\"headingLevel\"\n                    [filteringData]=\"filteringData()!\"\n                    [initialFilters]=\"_initialFilters()\"\n                    (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                ></fdp-filters>\n            }\n            @if (includeExcludeFiltersData()) {\n                <fdp-table-include-exclude-filters\n                    [filterData]=\"includeExcludeFiltersComponentData\"\n                    (filterChange)=\"onIncludeExcludeFilterChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                ></fdp-table-include-exclude-filters>\n            }\n            @if (groupingData()) {\n                <fdp-grouping\n                    [groupingData]=\"groupingData()!\"\n                    [initialGrouping]=\"_initialGrouping()\"\n                    (groupChange)=\"onGroupChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.GROUP, $event)\"\n                ></fdp-grouping>\n            }\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"('platformTable.confirmBtnLabel' | fdTranslate)()\"\n            [disabled]=\"!isDialogValid()\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            [label]=\"('platformTable.cancelBtnLabel' | fdTranslate)()\"\n            fdkInitialFocus\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header", inputs: ["inShellbar"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]", inputs: ["stackContentsVertically"] }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: SortingComponent, selector: "fdp-sorting", inputs: ["sortingData", "initialSorting"], outputs: ["sortChange", "resetAvailabilityChange", "validityChange"] }, { kind: "component", type: FiltersComponent, selector: "fdp-filters", inputs: ["filteringData", "headingLevel", "initialFilters"], outputs: ["activeFilterStepViewChange", "filterChange", "resetAvailabilityChange"] }, { kind: "component", type: GroupingComponent, selector: "fdp-grouping", inputs: ["groupingData", "initialGrouping"], outputs: ["groupChange", "resetAvailabilityChange"] }, { kind: "component", type: ColumnsComponent, selector: "fdp-columns", inputs: ["columnsData", "initialColumns"], outputs: ["columnsChange", "resetAvailabilityChange"] }, { kind: "component", type: IncludeExcludeFiltersComponent, selector: "fdp-table-include-exclude-filters", inputs: ["filterData", "validator"], outputs: ["filterChange", "resetAvailabilityChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { 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: "component", type: IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SettingsDialogComponent, isStandalone: true, selector: "fdp-settings-dialog-settings", inputs: { resetAnnouncementMessage: { classPropertyName: "resetAnnouncementMessage", publicName: "resetAnnouncementMessage", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: RESETTABLE_TOKEN, useExisting: forwardRef(() => SettingsDialogComponent) }], ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                @if (activeTab() !== 'filter') {\n                    <fd-bar-element>\n                        <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n                            ('platformTable.settingsDialogHeader' | fdTranslate)()\n                        }}</span>\n                    </fd-bar-element>\n                } @else {\n                    <fd-bar-element>\n                        @if (activeFilterStepView()?.titleTemplateRef) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"activeFilterStepView()?.titleTemplateRef ?? null\"\n                            ></ng-container>\n                        }\n                    </fd-bar-element>\n                }\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body disablePaddings>\n        @if (showSubheader()) {\n            <fdp-icon-tab-bar layoutMode=\"row\" iconTabSize=\"sm\" (iconTabSelected)=\"onTabSelected($event)\">\n                @if (columnsData() && showColumns) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionColumnsButtonTitle' | fdTranslate)()\">\n                        <fdp-columns\n                            [columnsData]=\"columnsData()!\"\n                            [initialColumns]=\"_initialColumns()\"\n                            (columnsChange)=\"onColumnsChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.COLUMNS, $event)\"\n                        ></fdp-columns>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (sortingData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionSortButtonTitle' | fdTranslate)()\">\n                        <fdp-sorting\n                            [sortingData]=\"sortingData()!\"\n                            [initialSorting]=\"_initialSorting()\"\n                            (sortChange)=\"onSortChange($event)\"\n                            (validityChange)=\"onSortValidityChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.SORT, $event)\"\n                        ></fdp-sorting>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (filteringData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionFilterButtonTitle' | fdTranslate)()\">\n                        <fdp-filters\n                            [headingLevel]=\"headingLevel\"\n                            [filteringData]=\"filteringData()!\"\n                            [initialFilters]=\"_initialFilters()\"\n                            (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                            (filterChange)=\"onFilterChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                        ></fdp-filters>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (includeExcludeFiltersData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionFilterButtonTitle' | fdTranslate)()\">\n                        <fdp-table-include-exclude-filters\n                            [filterData]=\"includeExcludeFiltersComponentData\"\n                            (filterChange)=\"onIncludeExcludeFilterChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                        ></fdp-table-include-exclude-filters>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (groupingData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionGroupButtonTitle' | fdTranslate)()\">\n                        <fdp-grouping\n                            [groupingData]=\"groupingData()!\"\n                            [initialGrouping]=\"_initialGrouping()\"\n                            (groupChange)=\"onGroupChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.GROUP, $event)\"\n                        ></fdp-grouping>\n                    </fdp-icon-tab-bar-tab>\n                }\n            </fdp-icon-tab-bar>\n        } @else {\n            @if (columnsData() && showColumns) {\n                <fdp-columns\n                    [columnsData]=\"columnsData()!\"\n                    [initialColumns]=\"_initialColumns()\"\n                    (columnsChange)=\"onColumnsChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.COLUMNS, $event)\"\n                ></fdp-columns>\n            }\n            @if (sortingData()) {\n                <fdp-sorting\n                    [sortingData]=\"sortingData()!\"\n                    [initialSorting]=\"_initialSorting()\"\n                    (sortChange)=\"onSortChange($event)\"\n                    (validityChange)=\"onSortValidityChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.SORT, $event)\"\n                ></fdp-sorting>\n            }\n            @if (filteringData()) {\n                <fdp-filters\n                    [headingLevel]=\"headingLevel\"\n                    [filteringData]=\"filteringData()!\"\n                    [initialFilters]=\"_initialFilters()\"\n                    (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                ></fdp-filters>\n            }\n            @if (includeExcludeFiltersData()) {\n                <fdp-table-include-exclude-filters\n                    [filterData]=\"includeExcludeFiltersComponentData\"\n                    (filterChange)=\"onIncludeExcludeFilterChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                ></fdp-table-include-exclude-filters>\n            }\n            @if (groupingData()) {\n                <fdp-grouping\n                    [groupingData]=\"groupingData()!\"\n                    [initialGrouping]=\"_initialGrouping()\"\n                    (groupChange)=\"onGroupChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.GROUP, $event)\"\n                ></fdp-grouping>\n            }\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"('platformTable.confirmBtnLabel' | fdTranslate)()\"\n            [disabled]=\"!isDialogValid()\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar [label]=\"('platformTable.cancelBtnLabel' | fdTranslate)()\" (click)=\"cancel()\"></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header", inputs: ["inShellbar"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]", inputs: ["stackContentsVertically"] }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: SortingComponent, selector: "fdp-sorting", inputs: ["sortingData", "initialSorting"], outputs: ["sortChange", "resetAvailabilityChange", "validityChange"] }, { kind: "component", type: FiltersComponent, selector: "fdp-filters", inputs: ["filteringData", "headingLevel", "initialFilters"], outputs: ["activeFilterStepViewChange", "filterChange", "resetAvailabilityChange"] }, { kind: "component", type: GroupingComponent, selector: "fdp-grouping", inputs: ["groupingData", "initialGrouping"], outputs: ["groupChange", "resetAvailabilityChange"] }, { kind: "component", type: ColumnsComponent, selector: "fdp-columns", inputs: ["columnsData", "initialColumns"], outputs: ["columnsChange", "resetAvailabilityChange"] }, { kind: "component", type: IncludeExcludeFiltersComponent, selector: "fdp-table-include-exclude-filters", inputs: ["filterData", "validator"], outputs: ["filterChange", "resetAvailabilityChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { 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: "component", type: IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SettingsDialogComponent, decorators: [{
             type: Component,
@@ -4065,10 +4142,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         TemplateDirective,
                         TitleComponent,
                         ButtonBarComponent,
-                        InitialFocusDirective,
                         IconTabBarComponent,
                         IconTabBarTabComponent
-                    ], template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                @if (activeTab() !== 'filter') {\n                    <fd-bar-element>\n                        <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n                            ('platformTable.settingsDialogHeader' | fdTranslate)()\n                        }}</span>\n                    </fd-bar-element>\n                } @else {\n                    <fd-bar-element>\n                        @if (activeFilterStepView()?.titleTemplateRef) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"activeFilterStepView()?.titleTemplateRef ?? null\"\n                            ></ng-container>\n                        }\n                    </fd-bar-element>\n                }\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body disablePaddings>\n        @if (showSubheader()) {\n            <fdp-icon-tab-bar layoutMode=\"row\" iconTabSize=\"sm\" (iconTabSelected)=\"onTabSelected($event)\">\n                @if (columnsData() && showColumns) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionColumnsButtonTitle' | fdTranslate)()\">\n                        <fdp-columns\n                            [columnsData]=\"columnsData()!\"\n                            [initialColumns]=\"_initialColumns()\"\n                            (columnsChange)=\"onColumnsChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.COLUMNS, $event)\"\n                        ></fdp-columns>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (sortingData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionSortButtonTitle' | fdTranslate)()\">\n                        <fdp-sorting\n                            [sortingData]=\"sortingData()!\"\n                            [initialSorting]=\"_initialSorting()\"\n                            (sortChange)=\"onSortChange($event)\"\n                            (validityChange)=\"onSortValidityChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.SORT, $event)\"\n                        ></fdp-sorting>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (filteringData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionFilterButtonTitle' | fdTranslate)()\">\n                        <fdp-filters\n                            [headingLevel]=\"headingLevel\"\n                            [filteringData]=\"filteringData()!\"\n                            [initialFilters]=\"_initialFilters()\"\n                            (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                            (filterChange)=\"onFilterChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                        ></fdp-filters>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (includeExcludeFiltersData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionFilterButtonTitle' | fdTranslate)()\">\n                        <fdp-table-include-exclude-filters\n                            [filterData]=\"includeExcludeFiltersComponentData\"\n                            (filterChange)=\"onIncludeExcludeFilterChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                        ></fdp-table-include-exclude-filters>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (groupingData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionGroupButtonTitle' | fdTranslate)()\">\n                        <fdp-grouping\n                            [groupingData]=\"groupingData()!\"\n                            [initialGrouping]=\"_initialGrouping()\"\n                            (groupChange)=\"onGroupChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.GROUP, $event)\"\n                        ></fdp-grouping>\n                    </fdp-icon-tab-bar-tab>\n                }\n            </fdp-icon-tab-bar>\n        } @else {\n            @if (columnsData() && showColumns) {\n                <fdp-columns\n                    [columnsData]=\"columnsData()!\"\n                    [initialColumns]=\"_initialColumns()\"\n                    (columnsChange)=\"onColumnsChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.COLUMNS, $event)\"\n                ></fdp-columns>\n            }\n            @if (sortingData()) {\n                <fdp-sorting\n                    [sortingData]=\"sortingData()!\"\n                    [initialSorting]=\"_initialSorting()\"\n                    (sortChange)=\"onSortChange($event)\"\n                    (validityChange)=\"onSortValidityChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.SORT, $event)\"\n                ></fdp-sorting>\n            }\n            @if (filteringData()) {\n                <fdp-filters\n                    [headingLevel]=\"headingLevel\"\n                    [filteringData]=\"filteringData()!\"\n                    [initialFilters]=\"_initialFilters()\"\n                    (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                ></fdp-filters>\n            }\n            @if (includeExcludeFiltersData()) {\n                <fdp-table-include-exclude-filters\n                    [filterData]=\"includeExcludeFiltersComponentData\"\n                    (filterChange)=\"onIncludeExcludeFilterChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                ></fdp-table-include-exclude-filters>\n            }\n            @if (groupingData()) {\n                <fdp-grouping\n                    [groupingData]=\"groupingData()!\"\n                    [initialGrouping]=\"_initialGrouping()\"\n                    (groupChange)=\"onGroupChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.GROUP, $event)\"\n                ></fdp-grouping>\n            }\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"('platformTable.confirmBtnLabel' | fdTranslate)()\"\n            [disabled]=\"!isDialogValid()\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            [label]=\"('platformTable.cancelBtnLabel' | fdTranslate)()\"\n            fdkInitialFocus\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n" }]
+                    ], template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                @if (activeTab() !== 'filter') {\n                    <fd-bar-element>\n                        <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n                            ('platformTable.settingsDialogHeader' | fdTranslate)()\n                        }}</span>\n                    </fd-bar-element>\n                } @else {\n                    <fd-bar-element>\n                        @if (activeFilterStepView()?.titleTemplateRef) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"activeFilterStepView()?.titleTemplateRef ?? null\"\n                            ></ng-container>\n                        }\n                    </fd-bar-element>\n                }\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body disablePaddings>\n        @if (showSubheader()) {\n            <fdp-icon-tab-bar layoutMode=\"row\" iconTabSize=\"sm\" (iconTabSelected)=\"onTabSelected($event)\">\n                @if (columnsData() && showColumns) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionColumnsButtonTitle' | fdTranslate)()\">\n                        <fdp-columns\n                            [columnsData]=\"columnsData()!\"\n                            [initialColumns]=\"_initialColumns()\"\n                            (columnsChange)=\"onColumnsChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.COLUMNS, $event)\"\n                        ></fdp-columns>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (sortingData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionSortButtonTitle' | fdTranslate)()\">\n                        <fdp-sorting\n                            [sortingData]=\"sortingData()!\"\n                            [initialSorting]=\"_initialSorting()\"\n                            (sortChange)=\"onSortChange($event)\"\n                            (validityChange)=\"onSortValidityChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.SORT, $event)\"\n                        ></fdp-sorting>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (filteringData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionFilterButtonTitle' | fdTranslate)()\">\n                        <fdp-filters\n                            [headingLevel]=\"headingLevel\"\n                            [filteringData]=\"filteringData()!\"\n                            [initialFilters]=\"_initialFilters()\"\n                            (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                            (filterChange)=\"onFilterChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                        ></fdp-filters>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (includeExcludeFiltersData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionFilterButtonTitle' | fdTranslate)()\">\n                        <fdp-table-include-exclude-filters\n                            [filterData]=\"includeExcludeFiltersComponentData\"\n                            (filterChange)=\"onIncludeExcludeFilterChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                        ></fdp-table-include-exclude-filters>\n                    </fdp-icon-tab-bar-tab>\n                }\n                @if (groupingData()) {\n                    <fdp-icon-tab-bar-tab [label]=\"('platformTable.toolbarActionGroupButtonTitle' | fdTranslate)()\">\n                        <fdp-grouping\n                            [groupingData]=\"groupingData()!\"\n                            [initialGrouping]=\"_initialGrouping()\"\n                            (groupChange)=\"onGroupChange($event)\"\n                            (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.GROUP, $event)\"\n                        ></fdp-grouping>\n                    </fdp-icon-tab-bar-tab>\n                }\n            </fdp-icon-tab-bar>\n        } @else {\n            @if (columnsData() && showColumns) {\n                <fdp-columns\n                    [columnsData]=\"columnsData()!\"\n                    [initialColumns]=\"_initialColumns()\"\n                    (columnsChange)=\"onColumnsChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.COLUMNS, $event)\"\n                ></fdp-columns>\n            }\n            @if (sortingData()) {\n                <fdp-sorting\n                    [sortingData]=\"sortingData()!\"\n                    [initialSorting]=\"_initialSorting()\"\n                    (sortChange)=\"onSortChange($event)\"\n                    (validityChange)=\"onSortValidityChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.SORT, $event)\"\n                ></fdp-sorting>\n            }\n            @if (filteringData()) {\n                <fdp-filters\n                    [headingLevel]=\"headingLevel\"\n                    [filteringData]=\"filteringData()!\"\n                    [initialFilters]=\"_initialFilters()\"\n                    (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                ></fdp-filters>\n            }\n            @if (includeExcludeFiltersData()) {\n                <fdp-table-include-exclude-filters\n                    [filterData]=\"includeExcludeFiltersComponentData\"\n                    (filterChange)=\"onIncludeExcludeFilterChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.FILTER, $event)\"\n                ></fdp-table-include-exclude-filters>\n            }\n            @if (groupingData()) {\n                <fdp-grouping\n                    [groupingData]=\"groupingData()!\"\n                    [initialGrouping]=\"_initialGrouping()\"\n                    (groupChange)=\"onGroupChange($event)\"\n                    (resetAvailabilityChange)=\"updateResetAvailability(ActiveTab.GROUP, $event)\"\n                ></fdp-grouping>\n            }\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"('platformTable.confirmBtnLabel' | fdTranslate)()\"\n            [disabled]=\"!isDialogValid()\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar [label]=\"('platformTable.cancelBtnLabel' | fdTranslate)()\" (click)=\"cancel()\"></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n" }]
         }], ctorParameters: () => [{ type: i1$1.DialogRef }, { type: i1.Table }], propDecorators: { resetAnnouncementMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetAnnouncementMessage", required: false }] }] } });
 
 const dialogConfig = {