@fundamental-ngx/platform 0.63.0-rc.7 → 0.63.0-rc.9

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

@@ -3,7 +3,7 @@ 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, ContentChildren, HostBinding, NgZone, ElementRef, effect, 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, FocusableItemDirective, 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';
+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';
 import { BusyIndicatorComponent } from '@fundamental-ngx/core/busy-indicator';
 import * as i1$3 from '@fundamental-ngx/core/content-density';
 import { ContentDensityDirective, contentDensityObserverProviders, ContentDensityObserver, ContentDensityMode } from '@fundamental-ngx/core/content-density';
@@ -41,7 +41,7 @@ import { LayoutGridRowDirective, LayoutGridColDirective, LayoutGridComponent } f
 import { SelectComponent, OptionComponent } from '@fundamental-ngx/core/select';
 import { PanelComponent, PanelTitleDirective, PanelContentDirective } from '@fundamental-ngx/core/panel';
 import { RadioButtonComponent } from '@fundamental-ngx/core/radio';
-import { SegmentedButtonComponent } from '@fundamental-ngx/core/segmented-button';
+import { IconTabBarComponent, IconTabBarTabComponent } from '@fundamental-ngx/platform/icon-tab-bar';
 import { InputComponent, PlatformDatePickerComponent, SwitchComponent } from '@fundamental-ngx/platform/form';
 
 class NoDataWrapperComponent {
@@ -3001,8 +3001,12 @@ class SettingsDialogComponent {
         this._initialColumns = signal(null, ...(ngDevMode ? [{ debugName: "_initialColumns" }] : []));
         /** @hidden */
         this.showColumns = false;
+        /** @hidden Expose ActiveTab enum to template */
+        this.ActiveTab = ActiveTab;
         /** @hidden Pending columns changes (not applied to signal to avoid triggering child effects) */
         this._pendingColumnsChanges = null;
+        /** @hidden Tracks reset availability per tab */
+        this._resetAvailabilityByTab = signal({}, ...(ngDevMode ? [{ debugName: "_resetAvailabilityByTab" }] : []));
         const data = this.dialogRef.data;
         this.sortingData.set(data.sortingData);
         this.filteringData.set(data.filteringData);
@@ -3074,7 +3078,7 @@ class SettingsDialogComponent {
             }
             this._pendingColumnsChanges = initialColumns;
         }
-        this.isResetAvailable$.set(false);
+        this.updateResetAvailability(this.activeTab(), false);
     }
     /**
      * Handle sort change event and update sorting data.
@@ -3124,11 +3128,54 @@ class SettingsDialogComponent {
         this.activeFilterStepView.set(event);
     }
     /**
-     * Handle changes to the reset availability.
-     * @param event Boolean indicating if reset is available.
+     * Handle tab selection changes from the icon tab bar.
+     * @param event The selected tab item.
+     */
+    onTabSelected(event) {
+        // Map tab index to ActiveTab enum based on which tabs are rendered
+        // The order is: columns (if showColumns), sort, filter, group
+        const tabOrder = [];
+        if (this.columnsData() && this.showColumns) {
+            tabOrder.push(ActiveTab.COLUMNS);
+        }
+        if (this.sortingData()) {
+            tabOrder.push(ActiveTab.SORT);
+        }
+        if (this.filteringData()) {
+            tabOrder.push(ActiveTab.FILTER);
+        }
+        if (this.groupingData()) {
+            tabOrder.push(ActiveTab.GROUP);
+        }
+        const selectedTab = tabOrder[event.index];
+        if (selectedTab) {
+            this.activeTab.set(selectedTab);
+            this.updateResetAvailability();
+        }
+    }
+    /**
+     * Update reset availability for a specific tab or the currently active tab.
+     * @param tab Optional tab to update. If provided, updates that specific tab and the global state if it's active.
+     *            If not provided, updates the global state based on the currently active tab.
+     * @param available Whether reset is available (only used when tab is provided).
      */
-    onResetAvailabilityChange(event) {
-        this.isResetAvailable$.set(event);
+    updateResetAvailability(tab, available) {
+        if (tab !== undefined && available !== undefined) {
+            // Update tracking for the specific tab
+            this._resetAvailabilityByTab.update((state) => ({ ...state, [tab]: available }));
+            // If this is the active tab, update the global reset availability
+            if (this.activeTab() === tab) {
+                this.isResetAvailable$.set(available);
+            }
+        }
+        else {
+            // Update global reset availability based on the currently active tab
+            const currentTab = this.activeTab();
+            if (currentTab) {
+                const tabAvailable = this._resetAvailabilityByTab()[currentTab] ?? false;
+                this.isResetAvailable$.set(tabAvailable);
+            }
+        }
     }
     /**
      * Determine the initial active tab based on available data.
@@ -3208,7 +3255,7 @@ class SettingsDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", 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: "21.1.0", type: SettingsDialogComponent, isStandalone: true, selector: "fdp-settings-dialog-settings", 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\n        @if (showSubheader()) {\n            <ng-template fdkTemplate=\"subheader\">\n                <fd-segmented-button [(ngModel)]=\"activeTab\" [style.height]=\"'fit-content'\">\n                    @if (columnsData() && showColumns) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"columns\"\n                            glyph=\"column-chart-dual-axis\"\n                            [title]=\"('platformTable.toolbarActionColumnsButtonTitle' | fdTranslate)()\"\n                            [ariaLabel]=\"('platformTable.toolbarActionColumnsButtonTitle' | fdTranslate)()\"\n                        ></button>\n                    }\n                    @if (sortingData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"sort\"\n                            glyph=\"sort\"\n                            [title]=\"('platformTable.toolbarActionSortButtonTitle' | fdTranslate)()\"\n                            [ariaLabel]=\"('platformTable.toolbarActionSortButtonTitle' | fdTranslate)()\"\n                        ></button>\n                    }\n                    @if (filteringData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"filter\"\n                            glyph=\"filter\"\n                            [title]=\"('platformTable.toolbarActionFilterButtonTitle' | fdTranslate)()\"\n                            [ariaLabel]=\"('platformTable.toolbarActionFilterButtonTitle' | fdTranslate)()\"\n                        ></button>\n                    }\n                    @if (groupingData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"group\"\n                            glyph=\"group-2\"\n                            [title]=\"('platformTable.toolbarActionGroupButtonTitle' | fdTranslate)()\"\n                            [ariaLabel]=\"('platformTable.toolbarActionGroupButtonTitle' | fdTranslate)()\"\n                        ></button>\n                    }\n                </fd-segmented-button>\n            </ng-template>\n        }\n    </fd-dialog-header>\n\n    <fd-dialog-body disablePaddings>\n        @switch (activeTab()) {\n            @case ('sort') {\n                <fdp-sorting\n                    [sortingData]=\"sortingData()!\"\n                    [initialSorting]=\"_initialSorting()\"\n                    (sortChange)=\"onSortChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-sorting>\n            }\n            @case ('filter') {\n                <fdp-filters\n                    [headingLevel]=\"headingLevel\"\n                    [filteringData]=\"filteringData()!\"\n                    [initialFilters]=\"_initialFilters()\"\n                    (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-filters>\n            }\n            @case ('group') {\n                <fdp-grouping\n                    [groupingData]=\"groupingData()!\"\n                    [initialGrouping]=\"_initialGrouping()\"\n                    (groupChange)=\"onGroupChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-grouping>\n            }\n            @case ('columns') {\n                <fdp-columns\n                    [columnsData]=\"columnsData()!\"\n                    [initialColumns]=\"_initialColumns()\"\n                    (columnsChange)=\"onColumnsChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-columns>\n            }\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"('platformTable.confirmBtnLabel' | fdTranslate)()\"\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: "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: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: SortingComponent, selector: "fdp-sorting", inputs: ["sortingData", "initialSorting"], outputs: ["sortChange", "resetAvailabilityChange"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle", "vertical"] }, { 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: "directive", type: FocusableItemDirective, selector: "[fdkFocusableItem]", inputs: ["fdkFocusableItem", "cellFocusedEventAnnouncer"], outputs: ["cellFocused", "focusableChildElementFocused", "_parentFocusableItemFocused"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: SettingsDialogComponent, isStandalone: true, selector: "fdp-settings-dialog-settings", 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                            (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 (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                    (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 (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            (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"] }, { 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: "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SettingsDialogComponent, decorators: [{
             type: Component,
@@ -3223,20 +3270,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         DialogBodyComponent,
                         DialogFooterComponent,
                         FdTranslatePipe,
-                        FormsModule,
-                        ButtonComponent,
                         SortingComponent,
                         FiltersComponent,
                         GroupingComponent,
                         ColumnsComponent,
                         NgTemplateOutlet,
-                        SegmentedButtonComponent,
                         TemplateDirective,
                         TitleComponent,
                         ButtonBarComponent,
                         InitialFocusDirective,
-                        FocusableItemDirective
-                    ], 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\n        @if (showSubheader()) {\n            <ng-template fdkTemplate=\"subheader\">\n                <fd-segmented-button [(ngModel)]=\"activeTab\" [style.height]=\"'fit-content'\">\n                    @if (columnsData() && showColumns) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"columns\"\n                            glyph=\"column-chart-dual-axis\"\n                            [title]=\"('platformTable.toolbarActionColumnsButtonTitle' | fdTranslate)()\"\n                            [ariaLabel]=\"('platformTable.toolbarActionColumnsButtonTitle' | fdTranslate)()\"\n                        ></button>\n                    }\n                    @if (sortingData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"sort\"\n                            glyph=\"sort\"\n                            [title]=\"('platformTable.toolbarActionSortButtonTitle' | fdTranslate)()\"\n                            [ariaLabel]=\"('platformTable.toolbarActionSortButtonTitle' | fdTranslate)()\"\n                        ></button>\n                    }\n                    @if (filteringData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"filter\"\n                            glyph=\"filter\"\n                            [title]=\"('platformTable.toolbarActionFilterButtonTitle' | fdTranslate)()\"\n                            [ariaLabel]=\"('platformTable.toolbarActionFilterButtonTitle' | fdTranslate)()\"\n                        ></button>\n                    }\n                    @if (groupingData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"group\"\n                            glyph=\"group-2\"\n                            [title]=\"('platformTable.toolbarActionGroupButtonTitle' | fdTranslate)()\"\n                            [ariaLabel]=\"('platformTable.toolbarActionGroupButtonTitle' | fdTranslate)()\"\n                        ></button>\n                    }\n                </fd-segmented-button>\n            </ng-template>\n        }\n    </fd-dialog-header>\n\n    <fd-dialog-body disablePaddings>\n        @switch (activeTab()) {\n            @case ('sort') {\n                <fdp-sorting\n                    [sortingData]=\"sortingData()!\"\n                    [initialSorting]=\"_initialSorting()\"\n                    (sortChange)=\"onSortChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-sorting>\n            }\n            @case ('filter') {\n                <fdp-filters\n                    [headingLevel]=\"headingLevel\"\n                    [filteringData]=\"filteringData()!\"\n                    [initialFilters]=\"_initialFilters()\"\n                    (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-filters>\n            }\n            @case ('group') {\n                <fdp-grouping\n                    [groupingData]=\"groupingData()!\"\n                    [initialGrouping]=\"_initialGrouping()\"\n                    (groupChange)=\"onGroupChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-grouping>\n            }\n            @case ('columns') {\n                <fdp-columns\n                    [columnsData]=\"columnsData()!\"\n                    [initialColumns]=\"_initialColumns()\"\n                    (columnsChange)=\"onColumnsChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-columns>\n            }\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"('platformTable.confirmBtnLabel' | fdTranslate)()\"\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" }]
+                        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                            (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 (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                    (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 (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            (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" }]
         }], ctorParameters: () => [{ type: i1$1.DialogRef }, { type: i1.Table }] });
 
 const dialogConfig = {