@fundamental-ngx/platform 0.48.0-rc.2 → 0.48.0-rc.21

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

@@ -1,16 +1,29 @@
+import { DOWN_ARROW, UP_ARROW, SPACE } from '@angular/cdk/keycodes';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, Inject, Optional, Host, Input, ContentChild, DestroyRef, inject, EventEmitter, Output, ViewChild, forwardRef, Pipe, TemplateRef, ContentChildren, ViewChildren, HostBinding, ChangeDetectorRef, NgZone, ElementRef, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, Inject, DestroyRef, inject, Input, ViewChild, ViewChildren, Optional, Host, ContentChild, EventEmitter, Output, forwardRef, Pipe, TemplateRef, ContentChildren, HostBinding, ChangeDetectorRef, NgZone, ElementRef, NgModule } from '@angular/core';
+import { AsyncPipe, NgTemplateOutlet, DOCUMENT, NgClass, NgStyle } from '@angular/common';
+import * as i2 from '@fundamental-ngx/cdk/utils';
+import { TemplateDirective, DisabledBehaviorDirective, FDK_FOCUSABLE_LIST_DIRECTIVE, FDK_FOCUSABLE_ITEM_DIRECTIVE, RtlService, ValueByPathPipe, uuidv4, destroyObservable, KeyUtil, RangeSelector, resizeObservable, FDK_FOCUSABLE_GRID_DIRECTIVE, DndListDirective, DragAndDropModule, RepeatDirective, IntersectionSpyDirective, 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 { contentDensityObserverProviders, ContentDensityObserver, ContentDensityMode } from '@fundamental-ngx/core/content-density';
+import { SkeletonComponent } from '@fundamental-ngx/core/skeleton';
+import { TablePopoverDirective, TableIconDirective, TableRowDirective, TableCellDirective, TableStatusIndicatorDirective, TableTextDirective, TableService as TableService$1, TableComponent as TableComponent$1, TableHeaderDirective, TableBodyDirective } from '@fundamental-ngx/core/table';
+import { FdTranslatePipe } from '@fundamental-ngx/i18n';
+import { isJsObject, FDP_PRESET_MANAGED_COMPONENT } from '@fundamental-ngx/platform/shared';
 import * as i1 from '@fundamental-ngx/platform/table-helpers';
-import { TableColumn, FilterableColumnDataType, FdpCellDef, FdpEditableCellDef, FdpHeaderCellDef, TableCellHeaderPopoverDirective, getFilterStrategiesBasedOnDataType, FILTER_STRATEGY, FILTER_STRATEGY_LABEL, SortDirection, getUniqueListValuesByKey, FdpViewSettingsFilterCustomDef, FilterType, TableService, Table, FILTER_STRING_STRATEGY, SelectionMode, TableColumnResizeService, TableRowService, PlatformTableCellResizableDirective, SelectionCellStylesPipe, TableCellStylesPipe, ColumnResizableSidePipe, TableColumnSortingDirectionPipe, isTreeRow, isTreeRowFirstCell, EditableTableCell, TableDraggableDirective, FdpCellSelectableDirective, DEFAULT_HIGHLIGHTING_KEY, SEMANTIC_HIGHLIGHTING_COLUMN_WIDTH, ROW_HEIGHT, TableDataSourceDirective, FDP_TABLE_STATE_DIRECTIVE, FDP_TABLE_VIRTUAL_SCROLL_DIRECTIVE, FDP_TABLE_DRAGGABLE_DIRECTIVE, TableHeaderResizerDirective, isRowNavigatable, TableRowType, buildNewRowSkeleton, EDITABLE_ROW_SEMANTIC_STATE, SaveRowsEvent, getSelectableRows, TableRowActivateEvent, TableRowToggleOpenStateEvent, getRowParents, findRowChildren, TableSortChangeEvent, TablePageChangeEvent, TableGroupChangeEvent, TableColumnFreezeEvent, TableFilterChangeEvent, TableColumnsChangeEvent, convertObjectsToTableRows, isTableRow, convertTreeTableRowToFlatList, convertTreeObjectsToTableRows, getFreezableColumns, getFreezableEndColumns, applySelectionToChildren, SELECTION_COLUMN_WIDTH, TableScrollDispatcherService, TableResponsiveService, TableScrollableDirective, RowClassesPipe, TableHelpersModule } from '@fundamental-ngx/platform/table-helpers';
+import { SortDirection, TableService, Table, FilterableColumnDataType, FILTER_STRING_STRATEGY, TableColumn, FdpCellDef, FdpEditableCellDef, FdpHeaderCellDef, TableCellHeaderPopoverDirective, getFilterStrategiesBasedOnDataType, FILTER_STRATEGY, FILTER_STRATEGY_LABEL, getUniqueListValuesByKey, FdpViewSettingsFilterCustomDef, FilterType, SelectionMode, TableColumnResizeService, TableRowService, PlatformTableCellResizableDirective, SelectionCellStylesPipe, TableCellStylesPipe, ColumnResizableSidePipe, TableColumnSortingDirectionPipe, isTreeRow, isTreeRowFirstCell, EditableTableCell, TableDraggableDirective, FdpCellSelectableDirective, DEFAULT_HIGHLIGHTING_KEY, SEMANTIC_HIGHLIGHTING_COLUMN_WIDTH, ROW_HEIGHT, TableDataSourceDirective, FDP_TABLE_STATE_DIRECTIVE, FDP_TABLE_VIRTUAL_SCROLL_DIRECTIVE, FDP_TABLE_DRAGGABLE_DIRECTIVE, TableHeaderResizerDirective, isRowNavigatable, TableRowType, buildNewRowSkeleton, EDITABLE_ROW_SEMANTIC_STATE, SaveRowsEvent, getSelectableRows, TableRowActivateEvent, TableRowToggleOpenStateEvent, getRowParents, findRowChildren, TableSortChangeEvent, TablePageChangeEvent, TableGroupChangeEvent, TableColumnFreezeEvent, TableFilterChangeEvent, TableColumnsChangeEvent, convertObjectsToTableRows, isTableRow, convertTreeTableRowToFlatList, convertTreeObjectsToTableRows, getFreezableColumns, getFreezableEndColumns, applySelectionToChildren, SELECTION_COLUMN_WIDTH, TableScrollDispatcherService, TableResponsiveService, TableScrollableDirective, RowClassesPipe, TableHelpersModule } from '@fundamental-ngx/platform/table-helpers';
 export * from '@fundamental-ngx/platform/table-helpers';
-import { AsyncPipe, DOCUMENT, NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
+import equal$1 from 'fast-deep-equal';
+import { BehaviorSubject, fromEvent, Subscription, combineLatest, Subject, merge, of } from 'rxjs';
+import { startWith, take, debounceTime, skip, filter, takeUntil, switchMap, map, distinctUntilChanged, tap } from 'rxjs/operators';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
-import { FdTranslatePipe } from '@fundamental-ngx/i18n';
-import { fromEvent, BehaviorSubject, Subscription, combineLatest, Subject, merge, of } from 'rxjs';
-import { take, debounceTime, skip, filter, takeUntil, startWith, switchMap, map, distinctUntilChanged, tap } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i2 from '@fundamental-ngx/cdk/utils';
-import { TemplateDirective, DisabledBehaviorDirective, FDK_FOCUSABLE_LIST_DIRECTIVE, FDK_FOCUSABLE_ITEM_DIRECTIVE, RtlService, ValueByPathPipe, uuidv4, destroyObservable, KeyUtil, RangeSelector, resizeObservable, FDK_FOCUSABLE_GRID_DIRECTIVE, DndListDirective, DragAndDropModule, RepeatDirective, IntersectionSpyDirective, FocusableGridDirective } from '@fundamental-ngx/cdk/utils';
+import { FormItemComponent, FormLabelComponent, FormControlComponent } from '@fundamental-ngx/core/form';
+import { ListLinkDirective, ListIconDirective, ListTitleDirective, ListComponent as ListComponent$1, ListItemComponent, ListGroupHeaderDirective } from '@fundamental-ngx/core/list';
+import { PopoverComponent, PopoverTriggerDirective } from '@fundamental-ngx/core/popover';
+import { ListComponent, FreeContentListItemComponent } from '@fundamental-ngx/platform/list';
+import { IconComponent } from '@fundamental-ngx/core/icon';
 import * as i1$1 from '@fundamental-ngx/core/dialog';
 import { DialogComponent, DialogHeaderComponent, DialogBodyComponent, DialogFooterComponent } from '@fundamental-ngx/core/dialog';
 import { CdkScrollable } from '@angular/cdk/overlay';
@@ -18,30 +31,17 @@ import * as i1$2 from '@angular/forms';
 import { FormsModule, NgForm } from '@angular/forms';
 import { BarLeftDirective, BarElementDirective, BarRightDirective, ButtonBarComponent } from '@fundamental-ngx/core/bar';
 import { CheckboxComponent } from '@fundamental-ngx/core/checkbox';
-import { ListComponent, ListItemComponent, ListTitleDirective, ListGroupHeaderDirective, ListLinkDirective, ListIconDirective } from '@fundamental-ngx/core/list';
 import { ScrollbarDirective } from '@fundamental-ngx/core/scrollbar';
 import { TitleComponent } from '@fundamental-ngx/core/title';
 import { ToolbarComponent, ToolbarSpacerDirective, ToolbarItemDirective, ToolbarSeparatorComponent } from '@fundamental-ngx/core/toolbar';
 import { SearchFieldComponent } from '@fundamental-ngx/platform/search-field';
-import { LayoutGridRowDirective, LayoutGridColDirective, LayoutGridComponent } from '@fundamental-ngx/core/layout-grid';
-import { PanelComponent, PanelTitleDirective, PanelContentDirective } from '@fundamental-ngx/core/panel';
 import { DatePickerComponent } from '@fundamental-ngx/core/date-picker';
-import { FormControlComponent, FormItemComponent, FormLabelComponent } from '@fundamental-ngx/core/form';
+import { LayoutGridRowDirective, LayoutGridColDirective, LayoutGridComponent } from '@fundamental-ngx/core/layout-grid';
 import { SelectComponent, OptionComponent } from '@fundamental-ngx/core/select';
+import { PanelComponent, PanelTitleDirective, PanelContentDirective } from '@fundamental-ngx/core/panel';
 import { ButtonComponent as ButtonComponent$1 } from '@fundamental-ngx/platform/button';
-import equal from 'fast-deep-equal/es6';
-import * as i1$3 from '@fundamental-ngx/core/content-density';
-import { contentDensityObserverProviders, ContentDensityObserver, ContentDensityMode } from '@fundamental-ngx/core/content-density';
 import { RadioButtonComponent } from '@fundamental-ngx/core/radio';
-import { PopoverComponent, PopoverTriggerDirective } from '@fundamental-ngx/core/popover';
-import { TablePopoverDirective, TableIconDirective, TableRowDirective, TableCellDirective, TableStatusIndicatorDirective, TableTextDirective, TableService as TableService$1, TableComponent as TableComponent$1, TableHeaderDirective, TableBodyDirective } from '@fundamental-ngx/core/table';
-import { ListComponent as ListComponent$1, FreeContentListItemComponent } from '@fundamental-ngx/platform/list';
-import { IconComponent } from '@fundamental-ngx/core/icon';
-import { DOWN_ARROW, UP_ARROW, SPACE } from '@angular/cdk/keycodes';
-import { BusyIndicatorComponent } from '@fundamental-ngx/core/busy-indicator';
-import { SkeletonComponent } from '@fundamental-ngx/core/skeleton';
-import { isJsObject, FDP_PRESET_MANAGED_COMPONENT } from '@fundamental-ngx/platform/shared';
-import equal$1 from 'fast-deep-equal';
+import equal from 'fast-deep-equal/es6';
 import { InputComponent, PlatformDatePickerComponent, SwitchComponent } from '@fundamental-ngx/platform/form';
 import { set } from 'lodash-es';
 
@@ -96,6 +96,212 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                     args: [RESETTABLE_TOKEN]
                 }] }] });
 
+class TableCellHeaderPopoverComponent {
+    constructor() {
+        /** Whether the popover is disabled. */
+        this.disabled = false;
+        /** Whether the column is frozen. */
+        this.columnFrozen = false;
+        /** Whether the filtering from header is disabled. */
+        this.filteringFromHeaderDisabled = false;
+        /** @hidden */
+        this._popoverItems$ = new BehaviorSubject([]);
+        /** @hidden */
+        this._headerPopoverTriggers = [
+            {
+                trigger: 'click',
+                openAction: true,
+                closeAction: true,
+                stopPropagation: true
+            },
+            {
+                trigger: 'keydown.enter',
+                openAction: true,
+                closeAction: true,
+                stopPropagation: true
+            },
+            {
+                trigger: 'keydown.space',
+                openAction: true,
+                closeAction: true,
+                stopPropagation: true
+            }
+        ];
+        /** @hidden */
+        this.SORT_DIRECTION = SortDirection;
+        /** @hidden */
+        this._destroyRef = inject(DestroyRef);
+        /** @hidden */
+        this._tableService = inject(TableService);
+        /** @hidden */
+        this._table = inject(Table);
+    }
+    /** @hidden */
+    ngAfterViewInit() {
+        this._popoverItems.changes.pipe(startWith(null), takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+            this._popoverItems$.next(this._popoverItems.map((t) => t.templateRef));
+        });
+    }
+    /** @hidden */
+    _setColumnHeaderSortBy(field, direction) {
+        this._tableService.setSort([{ field, direction }]);
+        this.popover?.close();
+    }
+    /** @hidden */
+    _setColumnHeaderGroupBy(field) {
+        const state = this._tableService.getTableState();
+        if (state.groupBy?.length === 1 && state.groupBy[0].field === field) {
+            // reset grouping, if already grouped by this field
+            this._tableService.setGroups([]);
+        }
+        else {
+            this._tableService.setGroups([{ field, direction: SortDirection.NONE, showAsColumn: true }]);
+        }
+    }
+    /** @hidden */
+    _setColumnHeaderFilterBy(field, value) {
+        if (!value) {
+            this._tableService.removeFilters([field]);
+            return;
+        }
+        const collectionFilter = {
+            field,
+            value,
+            type: FilterableColumnDataType.STRING,
+            strategy: FILTER_STRING_STRATEGY.CONTAINS,
+            exclude: false
+        };
+        this._tableService.addFilters([collectionFilter]);
+        this.popover?.close();
+    }
+    /** @hidden */
+    _freeze() {
+        this._table.freezeToColumn(this.column.name, this.column.endFreezable);
+        this.popover?.close();
+    }
+    /** @hidden */
+    _unFreeze() {
+        this._table.unfreeze(this.column.name, this.column.endFreezable);
+        this.popover?.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableCellHeaderPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: TableCellHeaderPopoverComponent, isStandalone: true, selector: "fdp-table-cell-header-popover", inputs: { column: "column", popoverTemplate: "popoverTemplate", disabled: "disabled", columnFrozen: "columnFrozen", filteringFromHeaderDisabled: "filteringFromHeaderDisabled" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "_popoverItems", predicate: TemplateDirective, descendants: true }], ngImport: i0, template: "@if (!popoverTemplate) {\n    <fd-popover\n        [disabled]=\"disabled\"\n        [noArrow]=\"true\"\n        fd-table-popover\n        [focusAutoCapture]=\"true\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"_headerPopoverTriggers\"\n    >\n        <fdp-list [noBorder]=\"true\" [navigated]=\"true\">\n            @for (item of _popoverItems$.asObservable() | async; track item) {\n                <fdp-free-content-list-item>\n                    <ng-template\n                        [ngTemplateOutlet]=\"item\"\n                        [ngTemplateOutletContext]=\"{ popover: popover }\"\n                    ></ng-template>\n                </fdp-free-content-list-item>\n            }\n        </fdp-list>\n    </fd-popover>\n} @else {\n    <ng-template\n        [ngTemplateOutlet]=\"popoverTemplate!\"\n        [ngTemplateOutletContext]=\"{ $implicit: _popoverItems$.asObservable() }\"\n    ></ng-template>\n}\n@if (column?.sortable) {\n    <ng-template fdkTemplate=\"sortingAscPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n        >\n            <span fd-list-icon glyph=\"sort-ascending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortAsc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n    <ng-template fdkTemplate=\"sortingDescPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n        >\n            <span fd-list-icon glyph=\"sort-descending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortDesc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n}\n@if (column?.groupable) {\n    <ng-template fdkTemplate=\"groupPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderGroupBy(column.key)\"\n            (keydown.enter)=\"_setColumnHeaderGroupBy(column.key)\"\n        >\n            <span fd-list-icon></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuGroup' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n}\n@if (column?.freezable || column?.endFreezable) {\n    <ng-template fdkTemplate=\"freezePopoverItem\" let-popover=\"popover\">\n        @if (!columnFrozen) {\n            <a fd-list-link [focusable]=\"true\" (click)=\"_freeze()\" (keyup.enter)=\"_freeze()\">\n                <span></span>\n                <span fd-list-title>{{\n                    (!column.endFreezable ? 'platformTable.headerMenuFreeze' : 'platformTable.headerMenuEndFreeze')\n                        | fdTranslate\n                }}</span>\n            </a>\n        } @else {\n            <a fd-list-link [focusable]=\"true\" (click)=\"_unFreeze()\" (keyup.enter)=\"_unFreeze()\">\n                <span></span>\n                <span fd-list-title>{{ 'platformTable.headerMenuUnfreeze' | fdTranslate }}</span>\n            </a>\n        }\n    </ng-template>\n}\n@if (column?.filterable && !filteringFromHeaderDisabled) {\n    <ng-template fdkTemplate=\"filteringPopoverItem\" let-popover=\"popover\">\n        <div fd-list-link [style.cursor]=\"'auto'\">\n            <i fd-list-icon glyph=\"filter\"></i>\n            <div fd-form-item [horizontal]=\"true\" (click)=\"$event.stopPropagation()\">\n                <label fd-form-label [for]=\"'fdp-table-column-filtering-' + column.name\">{{\n                    'platformTable.headerMenuFilter' | fdTranslate\n                }}</label>\n                <input\n                    fd-form-control\n                    [id]=\"'fdp-table-column-filtering-' + column.name\"\n                    (keydown.enter)=\"_setColumnHeaderFilterBy(column.key, $any($event.target)?.value)\"\n                />\n            </div>\n        </div>\n    </ng-template>\n}\n", dependencies: [{ kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: TablePopoverDirective, selector: "[fdTablePopover], [fd-table-popover]" }, { kind: "component", type: ListComponent, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "component", type: FreeContentListItemComponent, selector: "fdp-free-content-list-item" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableCellHeaderPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fdp-table-cell-header-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        PopoverComponent,
+                        TablePopoverDirective,
+                        ListComponent,
+                        FreeContentListItemComponent,
+                        NgTemplateOutlet,
+                        TemplateDirective,
+                        ListLinkDirective,
+                        ListIconDirective,
+                        ListTitleDirective,
+                        FormItemComponent,
+                        FormLabelComponent,
+                        FormControlComponent,
+                        AsyncPipe,
+                        FdTranslatePipe
+                    ], template: "@if (!popoverTemplate) {\n    <fd-popover\n        [disabled]=\"disabled\"\n        [noArrow]=\"true\"\n        fd-table-popover\n        [focusAutoCapture]=\"true\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"_headerPopoverTriggers\"\n    >\n        <fdp-list [noBorder]=\"true\" [navigated]=\"true\">\n            @for (item of _popoverItems$.asObservable() | async; track item) {\n                <fdp-free-content-list-item>\n                    <ng-template\n                        [ngTemplateOutlet]=\"item\"\n                        [ngTemplateOutletContext]=\"{ popover: popover }\"\n                    ></ng-template>\n                </fdp-free-content-list-item>\n            }\n        </fdp-list>\n    </fd-popover>\n} @else {\n    <ng-template\n        [ngTemplateOutlet]=\"popoverTemplate!\"\n        [ngTemplateOutletContext]=\"{ $implicit: _popoverItems$.asObservable() }\"\n    ></ng-template>\n}\n@if (column?.sortable) {\n    <ng-template fdkTemplate=\"sortingAscPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n        >\n            <span fd-list-icon glyph=\"sort-ascending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortAsc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n    <ng-template fdkTemplate=\"sortingDescPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n        >\n            <span fd-list-icon glyph=\"sort-descending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortDesc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n}\n@if (column?.groupable) {\n    <ng-template fdkTemplate=\"groupPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderGroupBy(column.key)\"\n            (keydown.enter)=\"_setColumnHeaderGroupBy(column.key)\"\n        >\n            <span fd-list-icon></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuGroup' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n}\n@if (column?.freezable || column?.endFreezable) {\n    <ng-template fdkTemplate=\"freezePopoverItem\" let-popover=\"popover\">\n        @if (!columnFrozen) {\n            <a fd-list-link [focusable]=\"true\" (click)=\"_freeze()\" (keyup.enter)=\"_freeze()\">\n                <span></span>\n                <span fd-list-title>{{\n                    (!column.endFreezable ? 'platformTable.headerMenuFreeze' : 'platformTable.headerMenuEndFreeze')\n                        | fdTranslate\n                }}</span>\n            </a>\n        } @else {\n            <a fd-list-link [focusable]=\"true\" (click)=\"_unFreeze()\" (keyup.enter)=\"_unFreeze()\">\n                <span></span>\n                <span fd-list-title>{{ 'platformTable.headerMenuUnfreeze' | fdTranslate }}</span>\n            </a>\n        }\n    </ng-template>\n}\n@if (column?.filterable && !filteringFromHeaderDisabled) {\n    <ng-template fdkTemplate=\"filteringPopoverItem\" let-popover=\"popover\">\n        <div fd-list-link [style.cursor]=\"'auto'\">\n            <i fd-list-icon glyph=\"filter\"></i>\n            <div fd-form-item [horizontal]=\"true\" (click)=\"$event.stopPropagation()\">\n                <label fd-form-label [for]=\"'fdp-table-column-filtering-' + column.name\">{{\n                    'platformTable.headerMenuFilter' | fdTranslate\n                }}</label>\n                <input\n                    fd-form-control\n                    [id]=\"'fdp-table-column-filtering-' + column.name\"\n                    (keydown.enter)=\"_setColumnHeaderFilterBy(column.key, $any($event.target)?.value)\"\n                />\n            </div>\n        </div>\n    </ng-template>\n}\n" }]
+        }], propDecorators: { column: [{
+                type: Input
+            }], popoverTemplate: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], columnFrozen: [{
+                type: Input
+            }], filteringFromHeaderDisabled: [{
+                type: Input
+            }], popover: [{
+                type: ViewChild,
+                args: [PopoverComponent, { static: false }]
+            }], _popoverItems: [{
+                type: ViewChildren,
+                args: [TemplateDirective]
+            }] } });
+
+/** @dynamic */
+class PlatformTableColumnResizerComponent {
+    /** @hidden */
+    get _rtl() {
+        return this._rtlService?.rtl.getValue();
+    }
+    /** @hidden */
+    constructor(_cd, _ngZone, _tableColumnResizeService, _renderer, _elmRef, _document, _rtlService) {
+        this._cd = _cd;
+        this._ngZone = _ngZone;
+        this._tableColumnResizeService = _tableColumnResizeService;
+        this._renderer = _renderer;
+        this._elmRef = _elmRef;
+        this._document = _document;
+        this._rtlService = _rtlService;
+        /** @hidden */
+        this._destroyRef = inject(DestroyRef);
+    }
+    /** @hidden */
+    ngOnInit() {
+        this._ngZone.runOutsideAngular(() => {
+            fromEvent(this._elmRef.nativeElement, 'mousedown')
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe((evt) => {
+                this._tableColumnResizeService.startResize(evt);
+                this._listenForMouseUp();
+            });
+            this._tableColumnResizeService.resizerPosition$
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe((position) => {
+                this._renderer.setStyle(this._elmRef.nativeElement, 'display', position > 0 ? 'block' : 'none');
+                if (!position) {
+                    return;
+                }
+                this._renderer.setStyle(this._elmRef.nativeElement, 'left', this._rtl ? 'auto' : `${position}px`);
+                this._renderer.setStyle(this._elmRef.nativeElement, 'right', !this._rtl ? 'auto' : `${position}px`);
+            });
+            this._tableColumnResizeService.resizeInProgress$
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe((resizeInProgress) => {
+                if (resizeInProgress) {
+                    this._renderer.addClass(this._elmRef.nativeElement, 'fdp-table-column-resizer--active');
+                }
+                else {
+                    this._renderer.removeClass(this._elmRef.nativeElement, 'fdp-table-column-resizer--active');
+                }
+            });
+        });
+    }
+    /** @hidden */
+    _listenForMouseUp() {
+        this._ngZone.runOutsideAngular(() => {
+            this._pointerMoveListener?.unsubscribe();
+            if (!this._document) {
+                return;
+            }
+            this._pointerMoveListener = fromEvent(this._document, 'mouseup')
+                .pipe(take(1), takeUntilDestroyed(this._destroyRef))
+                .subscribe((event) => {
+                this._tableColumnResizeService.finishResize(event);
+                // this._cd.markForCheck();
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: PlatformTableColumnResizerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.TableColumnResizeService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DOCUMENT }, { token: i2.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: PlatformTableColumnResizerComponent, isStandalone: true, selector: "fdp-table-column-resizer", host: { classAttribute: "fdp-table-column-resizer" }, ngImport: i0, template: ` <div class="fdp-table__resizer-inner"></div>`, isInline: true, styles: [".fdp-table-column-resizer{cursor:col-resize;position:absolute;width:0;top:0;left:-10000px;opacity:.5;z-index:999;border-left-style:solid;border-right-style:solid;border-left:3px solid var(--sapContent_DragAndDropActiveColor, #0854a0);border-right:3px solid var(--sapContent_DragAndDropActiveColor, #0854a0);-webkit-user-select:none;user-select:none}.fdp-table-column-resizer--active{opacity:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: PlatformTableColumnResizerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `fdp-table-column-resizer`, template: ` <div class="fdp-table__resizer-inner"></div>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fdp-table-column-resizer'
+                    }, standalone: true, styles: [".fdp-table-column-resizer{cursor:col-resize;position:absolute;width:0;top:0;left:-10000px;opacity:.5;z-index:999;border-left-style:solid;border-right-style:solid;border-left:3px solid var(--sapContent_DragAndDropActiveColor, #0854a0);border-right:3px solid var(--sapContent_DragAndDropActiveColor, #0854a0);-webkit-user-select:none;user-select:none}.fdp-table-column-resizer--active{opacity:1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.TableColumnResizeService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i2.RtlService, decorators: [{
+                    type: Optional
+                }] }] });
+
 /**
  * The component that represents a table column.
  * ```html
@@ -258,160 +464,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                 args: [TableCellHeaderPopoverDirective]
             }] } });
 
-/** @dynamic */
-class PlatformTableColumnResizerComponent {
-    /** @hidden */
-    get _rtl() {
-        return this._rtlService?.rtl.getValue();
-    }
-    /** @hidden */
-    constructor(_cd, _ngZone, _tableColumnResizeService, _renderer, _elmRef, _document, _rtlService) {
-        this._cd = _cd;
-        this._ngZone = _ngZone;
-        this._tableColumnResizeService = _tableColumnResizeService;
-        this._renderer = _renderer;
-        this._elmRef = _elmRef;
-        this._document = _document;
-        this._rtlService = _rtlService;
+class TableHeaderCellContentComponent {
+    constructor() {
+        /** Whether column has applied sorting. */
+        this.hasSorting = false;
+        /** Whether column has applied filtering. */
+        this.hasFilter = false;
         /** @hidden */
-        this._destroyRef = inject(DestroyRef);
-    }
-    /** @hidden */
-    ngOnInit() {
-        this._ngZone.runOutsideAngular(() => {
-            fromEvent(this._elmRef.nativeElement, 'mousedown')
-                .pipe(takeUntilDestroyed(this._destroyRef))
-                .subscribe((evt) => {
-                this._tableColumnResizeService.startResize(evt);
-                this._listenForMouseUp();
-            });
-            this._tableColumnResizeService.resizerPosition$
-                .pipe(takeUntilDestroyed(this._destroyRef))
-                .subscribe((position) => {
-                this._renderer.setStyle(this._elmRef.nativeElement, 'display', position > 0 ? 'block' : 'none');
-                if (!position) {
-                    return;
-                }
-                this._renderer.setStyle(this._elmRef.nativeElement, 'left', this._rtl ? 'auto' : `${position}px`);
-                this._renderer.setStyle(this._elmRef.nativeElement, 'right', !this._rtl ? 'auto' : `${position}px`);
-            });
-            this._tableColumnResizeService.resizeInProgress$
-                .pipe(takeUntilDestroyed(this._destroyRef))
-                .subscribe((resizeInProgress) => {
-                if (resizeInProgress) {
-                    this._renderer.addClass(this._elmRef.nativeElement, 'fdp-table-column-resizer--active');
-                }
-                else {
-                    this._renderer.removeClass(this._elmRef.nativeElement, 'fdp-table-column-resizer--active');
-                }
-            });
-        });
-    }
-    /** @hidden */
-    _listenForMouseUp() {
-        this._ngZone.runOutsideAngular(() => {
-            this._pointerMoveListener?.unsubscribe();
-            if (!this._document) {
-                return;
-            }
-            this._pointerMoveListener = fromEvent(this._document, 'mouseup')
-                .pipe(take(1), takeUntilDestroyed(this._destroyRef))
-                .subscribe((event) => {
-                this._tableColumnResizeService.finishResize(event);
-                // this._cd.markForCheck();
-            });
-        });
+        this.SORT_DIRECTION = SortDirection;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: PlatformTableColumnResizerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.TableColumnResizeService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DOCUMENT }, { token: i2.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: PlatformTableColumnResizerComponent, isStandalone: true, selector: "fdp-table-column-resizer", host: { classAttribute: "fdp-table-column-resizer" }, ngImport: i0, template: ` <div class="fdp-table__resizer-inner"></div>`, isInline: true, styles: [".fdp-table-column-resizer{cursor:col-resize;position:absolute;width:0;top:0;left:-10000px;opacity:.5;z-index:999;border-left-style:solid;border-right-style:solid;border-left:3px solid var(--sapContent_DragAndDropActiveColor, #0854a0);border-right:3px solid var(--sapContent_DragAndDropActiveColor, #0854a0);-webkit-user-select:none;user-select:none}.fdp-table-column-resizer--active{opacity:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: PlatformTableColumnResizerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: `fdp-table-column-resizer`, template: ` <div class="fdp-table__resizer-inner"></div>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'fdp-table-column-resizer'
-                    }, standalone: true, styles: [".fdp-table-column-resizer{cursor:col-resize;position:absolute;width:0;top:0;left:-10000px;opacity:.5;z-index:999;border-left-style:solid;border-right-style:solid;border-left:3px solid var(--sapContent_DragAndDropActiveColor, #0854a0);border-right:3px solid var(--sapContent_DragAndDropActiveColor, #0854a0);-webkit-user-select:none;user-select:none}.fdp-table-column-resizer--active{opacity:1}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.TableColumnResizeService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i2.RtlService, decorators: [{
-                    type: Optional
-                }] }] });
-
-/**
- * Personalization Dialog Columns Settings.
- *
- */
-class TableP13ColumnsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableP13ColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: TableP13ColumnsComponent, isStandalone: true, selector: "fdp-table-p13-columns", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableP13ColumnsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fdp-table-p13-columns',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    standalone: true
-                }]
-        }] });
-
-/**
- * Personalization Dialog Filter Settings.
- *
- */
-class TableP13FilterComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableP13FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: TableP13FilterComponent, isStandalone: true, selector: "fdp-table-p13-filter", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableP13FilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fdp-table-p13-filter',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    standalone: true
-                }]
-        }] });
-
-/**
- * Personalization Dialog Group Settings.
- *
- */
-class TableP13GroupComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableP13GroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: TableP13GroupComponent, isStandalone: true, selector: "fdp-table-p13-group", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableP13GroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fdp-table-p13-group',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    standalone: true
-                }]
-        }] });
-
-/**
- * Personalization Dialog Sort Settings.
- *
- */
-class TableP13SortComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableP13SortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: TableP13SortComponent, isStandalone: true, selector: "fdp-table-p13-sort", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableHeaderCellContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: TableHeaderCellContentComponent, isStandalone: true, selector: "fdp-table-header-cell-content", inputs: { id: "id", column: "column", hasSorting: "hasSorting", hasFilter: "hasFilter", sorting: "sorting" }, ngImport: i0, template: "<div class=\"fd-table__text--no-wrap\" [class.fd-table__inner]=\"hasSorting || hasFilter\">\n    <ng-template\n        [ngTemplateOutlet]=\"tableHeaderCellContentTemplate\"\n        [ngTemplateOutletContext]=\"{ column: column }\"\n    ></ng-template>\n    @if (hasSorting || hasFilter) {\n        <div class=\"fd-table__column-header-icons\">\n            @if (hasFilter) {\n                <fd-icon fd-table-icon glyph=\"filter\"></fd-icon>\n            }\n            @if (hasSorting) {\n                <fd-icon\n                    fd-table-icon\n                    [ariaHidden]=\"true\"\n                    [glyph]=\"sorting?.direction === SORT_DIRECTION.ASC ? 'sort-ascending' : 'sort-descending'\"\n                ></fd-icon>\n            }\n        </div>\n    }\n</div>\n<ng-content></ng-content>\n<ng-template #tableHeaderCellContentTemplate let-column=\"column\">\n    @if (column?.headerCellTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"column.headerCellTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: column }\"\n        ></ng-template>\n    } @else {\n        <span [id]=\"id + '-header-cell-' + column?.name\" class=\"fd-table__cell--truncate-txt\">\n            {{ column?.label }}\n        </span>\n    }\n</ng-template>\n", styles: ["fdp-table-header-cell-content{display:flex;align-items:center;justify-content:space-between;flex-grow:0}fdp-table-header-cell-content .fd-table__text--no-wrap{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "glyphFont", "navigation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableP13SortComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableHeaderCellContentComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fdp-table-p13-sort',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    standalone: true
-                }]
-        }] });
+            args: [{ selector: 'fdp-table-header-cell-content', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet, IconComponent, TableIconDirective], template: "<div class=\"fd-table__text--no-wrap\" [class.fd-table__inner]=\"hasSorting || hasFilter\">\n    <ng-template\n        [ngTemplateOutlet]=\"tableHeaderCellContentTemplate\"\n        [ngTemplateOutletContext]=\"{ column: column }\"\n    ></ng-template>\n    @if (hasSorting || hasFilter) {\n        <div class=\"fd-table__column-header-icons\">\n            @if (hasFilter) {\n                <fd-icon fd-table-icon glyph=\"filter\"></fd-icon>\n            }\n            @if (hasSorting) {\n                <fd-icon\n                    fd-table-icon\n                    [ariaHidden]=\"true\"\n                    [glyph]=\"sorting?.direction === SORT_DIRECTION.ASC ? 'sort-ascending' : 'sort-descending'\"\n                ></fd-icon>\n            }\n        </div>\n    }\n</div>\n<ng-content></ng-content>\n<ng-template #tableHeaderCellContentTemplate let-column=\"column\">\n    @if (column?.headerCellTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"column.headerCellTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: column }\"\n        ></ng-template>\n    } @else {\n        <span [id]=\"id + '-header-cell-' + column?.name\" class=\"fd-table__cell--truncate-txt\">\n            {{ column?.label }}\n        </span>\n    }\n</ng-template>\n", styles: ["fdp-table-header-cell-content{display:flex;align-items:center;justify-content:space-between;flex-grow:0}fdp-table-header-cell-content .fd-table__text--no-wrap{width:100%}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], column: [{
+                type: Input
+            }], hasSorting: [{
+                type: Input
+            }], hasFilter: [{
+                type: Input
+            }], sorting: [{
+                type: Input
+            }] } });
 
 class SelectableColumn {
     constructor(
@@ -655,7 +733,7 @@ class P13ColumnsDialogComponent {
         this._moveDownDisabled = activeIndex < 0 || activeIndex >= this._filteredColumns.length - 1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: P13ColumnsDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: P13ColumnsDialogComponent, isStandalone: true, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13ColumnsDialogComponent }], ngImport: i0, template: "<fd-dialog class=\"fdp-table-p13-columns-dialog\">\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">\n                        {{ 'platformTable.P13ColumnsDialogHeader' | fdTranslate }}\n                    </h4>\n                </fd-bar-element>\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    <fd-dialog-body>\n        <fd-toolbar>\n            <fdp-search-field\n                [placeholder]=\"'platformTable.P13ColumnsDialogSearchPlaceholder' | fdTranslate\"\n                [inputText]=\"(_searchQuerySubject | async) || ''\"\n                [suggestions]=\"[]\"\n                (inputChange)=\"_searchInputChange($event)\"\n                fdkInitialFocus\n            ></fdp-search-field>\n            <fd-toolbar-spacer></fd-toolbar-spacer>\n            <!-- Show Selected/All -->\n            <button fd-toolbar-item fd-button fdType=\"transparent\" (click)=\"_toggleShowAll()\">\n                @if ((_showAllItemsSubject | async) === true) {\n                    {{ 'platformTable.P13ColumnsDialogsShowSelected' | fdTranslate }}\n                } @else {\n                    {{ 'platformTable.P13ColumnsDialogShowAll' | fdTranslate }}\n                }\n            </button>\n            <!-- Active Button Movement -->\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"collapse-group\"\n                [disabled]=\"_moveUpDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n                (click)=\"_moveActiveToTop()\"\n            ></button>\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"slim-arrow-up\"\n                [disabled]=\"_moveUpDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n                (click)=\"_moveActiveUp()\"\n            ></button>\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"slim-arrow-down\"\n                [disabled]=\"_moveDownDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n                (click)=\"_moveActiveDown()\"\n            ></button>\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"expand-group\"\n                [disabled]=\"_moveDownDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n                (click)=\"_moveActiveToBottom()\"\n            ></button>\n        </fd-toolbar>\n        <ul fd-list>\n            <li fd-list-item>\n                <fd-checkbox\n                    [ngModel]=\"_selectedColumnsCount === _selectableColumns.length\"\n                    (ngModelChange)=\"_toggleSelectAll($event)\"\n                    [disabled]=\"_selectAllDisabled\"\n                ></fd-checkbox>\n                <span fd-list-title>\n                    {{\n                        'platformTable.P13ColumnsDialogSelectAll'\n                            | fdTranslate\n                                : {\n                                      selectedColumnsCount: _selectedColumnsCount,\n                                      selectableColumnsCount: _selectableColumns.length\n                                  }\n                    }}\n                </span>\n            </li>\n            @for (item of _filteredColumns; track _filterByColumnKy($index, item)) {\n                <li\n                    fd-list-item\n                    [class.fd-select-item--selected]=\"item.selected\"\n                    [class.fd-select-item--active]=\"item.active\"\n                    (click)=\"_setActiveColumn(item)\"\n                >\n                    <fd-checkbox [(ngModel)]=\"item.selected\" (ngModelChange)=\"_onToggleColumn()\"></fd-checkbox>\n                    <span fd-list-title>\n                        {{ item.column.label }}\n                    </span>\n                </li>\n            }\n        </ul>\n    </fd-dialog-body>\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.P13ColumnsDialogConfirmationBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            fdType=\"transparent\"\n            [label]=\"'platformTable.P13ColumnsDialogCancelBtnLabel' | fdTranslate\"\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-columns-dialog fd-toolbar{position:sticky;top:0;z-index:1}.fdp-table-p13-columns-dialog .fd-select-item--active{background:#e5f0fa;background:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.fdp-table-p13-columns-dialog .group-row{display:flex;align-items:center;margin-bottom:.5rem}.fdp-table-p13-columns-dialog .group-row .fd-popover-custom{display:block}.fdp-table-p13-columns-dialog .group-row__checkbox,.fdp-table-p13-columns-dialog .group-row__actions,.fdp-table-p13-columns-dialog .group-row__select{margin-right:1rem}.fdp-table-p13-columns-dialog .group-row__select{flex:1 1 0}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "directive", type: ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "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"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: P13ColumnsDialogComponent, isStandalone: true, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13ColumnsDialogComponent }], ngImport: i0, template: "<fd-dialog class=\"fdp-table-p13-columns-dialog\">\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">\n                        {{ 'platformTable.P13ColumnsDialogHeader' | fdTranslate }}\n                    </h4>\n                </fd-bar-element>\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    <fd-dialog-body>\n        <fd-toolbar>\n            <fdp-search-field\n                [placeholder]=\"'platformTable.P13ColumnsDialogSearchPlaceholder' | fdTranslate\"\n                [inputText]=\"(_searchQuerySubject | async) || ''\"\n                [suggestions]=\"[]\"\n                (inputChange)=\"_searchInputChange($event)\"\n                fdkInitialFocus\n            ></fdp-search-field>\n            <fd-toolbar-spacer></fd-toolbar-spacer>\n            <!-- Show Selected/All -->\n            <button fd-toolbar-item fd-button fdType=\"transparent\" (click)=\"_toggleShowAll()\">\n                @if ((_showAllItemsSubject | async) === true) {\n                    {{ 'platformTable.P13ColumnsDialogsShowSelected' | fdTranslate }}\n                } @else {\n                    {{ 'platformTable.P13ColumnsDialogShowAll' | fdTranslate }}\n                }\n            </button>\n            <!-- Active Button Movement -->\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"collapse-group\"\n                [disabled]=\"_moveUpDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n                (click)=\"_moveActiveToTop()\"\n            ></button>\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"slim-arrow-up\"\n                [disabled]=\"_moveUpDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n                (click)=\"_moveActiveUp()\"\n            ></button>\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"slim-arrow-down\"\n                [disabled]=\"_moveDownDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n                (click)=\"_moveActiveDown()\"\n            ></button>\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"expand-group\"\n                [disabled]=\"_moveDownDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n                (click)=\"_moveActiveToBottom()\"\n            ></button>\n        </fd-toolbar>\n        <ul fd-list>\n            <li fd-list-item>\n                <fd-checkbox\n                    [ngModel]=\"_selectedColumnsCount === _selectableColumns.length\"\n                    (ngModelChange)=\"_toggleSelectAll($event)\"\n                    [disabled]=\"_selectAllDisabled\"\n                ></fd-checkbox>\n                <span fd-list-title>\n                    {{\n                        'platformTable.P13ColumnsDialogSelectAll'\n                            | fdTranslate\n                                : {\n                                      selectedColumnsCount: _selectedColumnsCount,\n                                      selectableColumnsCount: _selectableColumns.length\n                                  }\n                    }}\n                </span>\n            </li>\n            @for (item of _filteredColumns; track _filterByColumnKy($index, item)) {\n                <li\n                    fd-list-item\n                    [class.fd-select-item--selected]=\"item.selected\"\n                    [class.fd-select-item--active]=\"item.active\"\n                    (click)=\"_setActiveColumn(item)\"\n                >\n                    <fd-checkbox [(ngModel)]=\"item.selected\" (ngModelChange)=\"_onToggleColumn()\"></fd-checkbox>\n                    <span fd-list-title>\n                        {{ item.column.label }}\n                    </span>\n                </li>\n            }\n        </ul>\n    </fd-dialog-body>\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.P13ColumnsDialogConfirmationBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            fdType=\"transparent\"\n            [label]=\"'platformTable.P13ColumnsDialogCancelBtnLabel' | fdTranslate\"\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-columns-dialog fd-toolbar{position:sticky;top:0;z-index:1}.fdp-table-p13-columns-dialog .fd-select-item--active{background:#e5f0fa;background:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.fdp-table-p13-columns-dialog .group-row{display:flex;align-items:center;margin-bottom:.5rem}.fdp-table-p13-columns-dialog .group-row .fd-popover-custom{display:block}.fdp-table-p13-columns-dialog .group-row__checkbox,.fdp-table-p13-columns-dialog .group-row__actions,.fdp-table-p13-columns-dialog .group-row__select{margin-right:1rem}.fdp-table-p13-columns-dialog .group-row__select{flex:1 1 0}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "component", type: SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "directive", type: ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "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"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: P13ColumnsDialogComponent, decorators: [{
             type: Component,
@@ -676,7 +754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                         ToolbarSpacerDirective,
                         ButtonComponent,
                         ToolbarItemDirective,
-                        ListComponent,
+                        ListComponent$1,
                         ListItemComponent,
                         CheckboxComponent,
                         FormsModule,
@@ -825,7 +903,7 @@ class FilterRuleComponent {
         this.ruleChange.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FilterRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: FilterRuleComponent, isStandalone: true, selector: "fdp-table-filter-rule", inputs: { rule: "rule" }, outputs: { ruleChange: "ruleChange", ruleStateChange: "ruleStateChange" }, viewQueries: [{ propertyName: "ngForm", first: true, predicate: NgForm, descendants: true }], ngImport: i0, template: "<div fdLayoutGridRow>\n    <div fdLayoutGridCol colGrow>\n        <div fdLayoutGridRow>\n            <div fdLayoutGridCol colGrow>\n                <!-- Column -->\n                <fd-select\n                    class=\"filter-row__select\"\n                    [ngModel]=\"rule.columnKey\"\n                    (ngModelChange)=\"rule.setColumnKey($event); _onModelChange()\"\n                >\n                    @for (column of rule.columns; track column) {\n                        <li fd-option [value]=\"column.key\">{{ column.label }}</li>\n                    }\n                </fd-select>\n            </div>\n            <div fdLayoutGridCol colGrow>\n                <!-- Strategy -->\n                <fd-select\n                    class=\"filter-row__select\"\n                    [ngModel]=\"rule.strategy\"\n                    (ngModelChange)=\"rule.setStrategy($event); _onModelChange()\"\n                >\n                    @for (strategy of rule.strategies; track strategy) {\n                        <li fd-option [value]=\"strategy\">\n                            {{\n                                strategyLabels[strategy] || 'platformTable.P13FilterStrategyLabelNotDefined'\n                                    | fdTranslate\n                            }}\n                        </li>\n                    }\n                </fd-select>\n            </div>\n        </div>\n    </div>\n    <div fdLayoutGridCol colGrow>\n        <div fdLayoutGridRow ngForm>\n            @if (rule.strategy === FILTER_STRATEGY.BETWEEN) {\n                <div fdLayoutGridCol colGrow>\n                    <ng-template\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value' }\"\n                    ></ng-template>\n                </div>\n                <div fdLayoutGridCol colGrow>\n                    <ng-template\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value2' }\"\n                    ></ng-template>\n                </div>\n            } @else {\n                <div fdLayoutGridCol colGrow>\n                    <ng-template\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value' }\"\n                    ></ng-template>\n                </div>\n            }\n\n            <!-- Rule Control Based on Data Type -->\n            <ng-template #ruleInputTemplate let-valueKey=\"valueKey\">\n                @if (rule.dataType === DATA_TYPE.DATE) {\n                    <fd-date-picker\n                        class=\"filter-row__input\"\n                        type=\"single\"\n                        [required]=\"true\"\n                        [name]=\"valueKey\"\n                        [(ngModel)]=\"rule[valueKey]\"\n                        (ngModelChange)=\"_onModelChange()\"\n                    ></fd-date-picker>\n                } @else if (rule.dataType === DATA_TYPE.BOOLEAN) {\n                    <fd-select\n                        class=\"filter-row__select\"\n                        [name]=\"valueKey\"\n                        [(ngModel)]=\"rule[valueKey]\"\n                        (ngModelChange)=\"_onModelChange()\"\n                        [required]=\"true\"\n                    >\n                        <li fd-option [value]=\"undefined\">\n                            {{ 'platformTable.P13FilterBooleanOptionNotDefined' | fdTranslate }}\n                        </li>\n                        <li fd-option [value]=\"true\">\n                            {{ 'platformTable.P13FilterBooleanOptionTrue' | fdTranslate }}\n                        </li>\n                        <li fd-option [value]=\"false\">\n                            {{ 'platformTable.P13FilterBooleanOptionFalse' | fdTranslate }}\n                        </li>\n                    </fd-select>\n                } @else {\n                    <input\n                        type=\"text\"\n                        class=\"filter-row__input\"\n                        fd-form-control\n                        required\n                        [name]=\"valueKey\"\n                        [(ngModel)]=\"rule[valueKey]\"\n                        (ngModelChange)=\"_onModelChange()\"\n                    />\n                }\n            </ng-template>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "directive", type: LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "component", type: SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DatePickerComponent, selector: "fd-date-picker", inputs: ["type", "placeholder", "inputId", "required", "message", "messageTriggers", "selectedDate", "selectedRangeDate", "startingDayOfWeek", "rangeHoverEffect", "useValidation", "allowNull", "activeView", "placement", "appendTo", "disabled", "closeOnDateChoose", "showTodayButton", "todayButtonLabel", "previousButtonDisableFunction", "nextButtonDisableFunction", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "showWeekNumbers", "isOpen", "inline", "ariaLabelledBy", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["isOpenChange", "selectedDateChange", "selectedRangeDateChange", "activeViewChange"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: FilterRuleComponent, isStandalone: true, selector: "fdp-table-filter-rule", inputs: { rule: "rule" }, outputs: { ruleChange: "ruleChange", ruleStateChange: "ruleStateChange" }, viewQueries: [{ propertyName: "ngForm", first: true, predicate: NgForm, descendants: true }], ngImport: i0, template: "<div fdLayoutGridRow>\n    <div fdLayoutGridCol colGrow>\n        <div fdLayoutGridRow>\n            <div fdLayoutGridCol colGrow>\n                <!-- Column -->\n                <fd-select\n                    class=\"filter-row__select\"\n                    [ngModel]=\"rule.columnKey\"\n                    (ngModelChange)=\"rule.setColumnKey($event); _onModelChange()\"\n                >\n                    @for (column of rule.columns; track column) {\n                        <li fd-option [value]=\"column.key\">{{ column.label }}</li>\n                    }\n                </fd-select>\n            </div>\n            <div fdLayoutGridCol colGrow>\n                <!-- Strategy -->\n                <fd-select\n                    class=\"filter-row__select\"\n                    [ngModel]=\"rule.strategy\"\n                    (ngModelChange)=\"rule.setStrategy($event); _onModelChange()\"\n                >\n                    @for (strategy of rule.strategies; track strategy) {\n                        <li fd-option [value]=\"strategy\">\n                            {{\n                                strategyLabels[strategy] || 'platformTable.P13FilterStrategyLabelNotDefined'\n                                    | fdTranslate\n                            }}\n                        </li>\n                    }\n                </fd-select>\n            </div>\n        </div>\n    </div>\n    <div fdLayoutGridCol colGrow>\n        <div fdLayoutGridRow ngForm>\n            @if (rule.strategy === FILTER_STRATEGY.BETWEEN) {\n                <div fdLayoutGridCol colGrow>\n                    <ng-template\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value' }\"\n                    ></ng-template>\n                </div>\n                <div fdLayoutGridCol colGrow>\n                    <ng-template\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value2' }\"\n                    ></ng-template>\n                </div>\n            } @else {\n                <div fdLayoutGridCol colGrow>\n                    <ng-template\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value' }\"\n                    ></ng-template>\n                </div>\n            }\n\n            <!-- Rule Control Based on Data Type -->\n            <ng-template #ruleInputTemplate let-valueKey=\"valueKey\">\n                @if (rule.dataType === DATA_TYPE.DATE) {\n                    <fd-date-picker\n                        class=\"filter-row__input\"\n                        type=\"single\"\n                        [required]=\"true\"\n                        [name]=\"valueKey\"\n                        [(ngModel)]=\"rule[valueKey]\"\n                        (ngModelChange)=\"_onModelChange()\"\n                    ></fd-date-picker>\n                } @else if (rule.dataType === DATA_TYPE.BOOLEAN) {\n                    <fd-select\n                        class=\"filter-row__select\"\n                        [name]=\"valueKey\"\n                        [(ngModel)]=\"rule[valueKey]\"\n                        (ngModelChange)=\"_onModelChange()\"\n                        [required]=\"true\"\n                    >\n                        <li fd-option [value]=\"undefined\">\n                            {{ 'platformTable.P13FilterBooleanOptionNotDefined' | fdTranslate }}\n                        </li>\n                        <li fd-option [value]=\"true\">\n                            {{ 'platformTable.P13FilterBooleanOptionTrue' | fdTranslate }}\n                        </li>\n                        <li fd-option [value]=\"false\">\n                            {{ 'platformTable.P13FilterBooleanOptionFalse' | fdTranslate }}\n                        </li>\n                    </fd-select>\n                } @else {\n                    <input\n                        type=\"text\"\n                        class=\"filter-row__input\"\n                        fd-form-control\n                        required\n                        [name]=\"valueKey\"\n                        [(ngModel)]=\"rule[valueKey]\"\n                        (ngModelChange)=\"_onModelChange()\"\n                    />\n                }\n            </ng-template>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "directive", type: LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "component", type: SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DatePickerComponent, selector: "fd-date-picker", inputs: ["type", "placeholder", "inputId", "required", "message", "messageTriggers", "selectedDate", "selectedRangeDate", "startingDayOfWeek", "rangeHoverEffect", "useValidation", "allowNull", "activeView", "placement", "appendTo", "disabled", "closeOnDateChoose", "showTodayButton", "todayButtonLabel", "previousButtonDisableFunction", "nextButtonDisableFunction", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "showWeekNumbers", "isOpen", "inline", "ariaLabelledBy", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["isOpenChange", "selectedDateChange", "selectedRangeDateChange", "activeViewChange"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FilterRuleComponent, decorators: [{
             type: Component,
@@ -1122,7 +1200,7 @@ class P13GroupingDialogComponent {
         return getUniqueListValuesByKey(rules, 'columnKey');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: P13GroupingDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: P13GroupingDialogComponent, isStandalone: true, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13GroupingDialogComponent }], ngImport: i0, template: "<fd-dialog class=\"fdp-table-p13-grouping-dialog\">\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">{{ 'platformTable.P13GroupDialogHeader' | fdTranslate }}</h4>\n                </fd-bar-element>\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>\n        @for (rule of rules; track rule) {\n            <div class=\"group-row\">\n                <fd-select\n                    class=\"group-row__select\"\n                    [value]=\"rule.columnKey\"\n                    (valueChange)=\"_onRuleColumnKeyChange(rule, $event)\"\n                    [placeholder]=\"'platformTable.P13GroupDialogNoneSelectedColumnSelectPlaceholder' | fdTranslate\"\n                >\n                    @for (column of columns; track column) {\n                        <li fd-option [value]=\"column.key\">\n                            {{ column.label }}\n                        </li>\n                    }\n                </fd-select>\n\n                <fd-checkbox\n                    class=\"group-row__checkbox\"\n                    [ngModel]=\"rule.showAsColumn\"\n                    (ngModelChange)=\"_onRuleShowAsColumnChange(rule, $event)\"\n                    [label]=\"'platformTable.P13GroupDialogShowFieldAsColumnCheckboxLabel' | fdTranslate\"\n                ></fd-checkbox>\n\n                <div class=\"group-row__actions\">\n                    <button\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"sys-cancel\"\n                        [attr.aria-label]=\"'platformTable.P13GroupDialogRemoveGroupBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13GroupDialogRemoveGroupBtnTitle' | fdTranslate\"\n                        (click)=\"_removeRule(rule)\"\n                    ></button>\n\n                    <button\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"add\"\n                        [attr.aria-label]=\"'platformTable.P13GroupDialogAddNewGroupBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13GroupDialogAddNewGroupBtnTitle' | fdTranslate\"\n                        (click)=\"_addNew($index)\"\n                    ></button>\n                </div>\n            </div>\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.P13GroupDialogConfirmationBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n\n        <fd-button-bar\n            fdType=\"transparent\"\n            fdkInitialFocus\n            [label]=\"'platformTable.P13GroupDialogCancelBtnLabel' | fdTranslate\"\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-grouping-dialog .group-row{display:flex;align-items:center;margin-bottom:.5rem}.fdp-table-p13-grouping-dialog .group-row .fd-popover-custom{display:block}.fdp-table-p13-grouping-dialog .group-row__checkbox,.fdp-table-p13-grouping-dialog .group-row__actions,.fdp-table-p13-grouping-dialog .group-row__select{margin-right:1rem}.fdp-table-p13-grouping-dialog .group-row__select{flex:1 1 0}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "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: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: P13GroupingDialogComponent, isStandalone: true, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13GroupingDialogComponent }], ngImport: i0, template: "<fd-dialog class=\"fdp-table-p13-grouping-dialog\">\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">{{ 'platformTable.P13GroupDialogHeader' | fdTranslate }}</h4>\n                </fd-bar-element>\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>\n        @for (rule of rules; track rule) {\n            <div class=\"group-row\">\n                <fd-select\n                    class=\"group-row__select\"\n                    [value]=\"rule.columnKey\"\n                    (valueChange)=\"_onRuleColumnKeyChange(rule, $event)\"\n                    [placeholder]=\"'platformTable.P13GroupDialogNoneSelectedColumnSelectPlaceholder' | fdTranslate\"\n                >\n                    @for (column of columns; track column) {\n                        <li fd-option [value]=\"column.key\">\n                            {{ column.label }}\n                        </li>\n                    }\n                </fd-select>\n\n                <fd-checkbox\n                    class=\"group-row__checkbox\"\n                    [ngModel]=\"rule.showAsColumn\"\n                    (ngModelChange)=\"_onRuleShowAsColumnChange(rule, $event)\"\n                    [label]=\"'platformTable.P13GroupDialogShowFieldAsColumnCheckboxLabel' | fdTranslate\"\n                ></fd-checkbox>\n\n                <div class=\"group-row__actions\">\n                    <button\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"sys-cancel\"\n                        [attr.aria-label]=\"'platformTable.P13GroupDialogRemoveGroupBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13GroupDialogRemoveGroupBtnTitle' | fdTranslate\"\n                        (click)=\"_removeRule(rule)\"\n                    ></button>\n\n                    <button\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"add\"\n                        [attr.aria-label]=\"'platformTable.P13GroupDialogAddNewGroupBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13GroupDialogAddNewGroupBtnTitle' | fdTranslate\"\n                        (click)=\"_addNew($index)\"\n                    ></button>\n                </div>\n            </div>\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.P13GroupDialogConfirmationBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n\n        <fd-button-bar\n            fdType=\"transparent\"\n            fdkInitialFocus\n            [label]=\"'platformTable.P13GroupDialogCancelBtnLabel' | fdTranslate\"\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-grouping-dialog .group-row{display:flex;align-items:center;margin-bottom:.5rem}.fdp-table-p13-grouping-dialog .group-row .fd-popover-custom{display:block}.fdp-table-p13-grouping-dialog .group-row__checkbox,.fdp-table-p13-grouping-dialog .group-row__actions,.fdp-table-p13-grouping-dialog .group-row__select{margin-right:1rem}.fdp-table-p13-grouping-dialog .group-row__select{flex:1 1 0}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "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: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: P13GroupingDialogComponent, decorators: [{
             type: Component,
@@ -1149,6 +1227,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                     ], template: "<fd-dialog class=\"fdp-table-p13-grouping-dialog\">\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">{{ 'platformTable.P13GroupDialogHeader' | fdTranslate }}</h4>\n                </fd-bar-element>\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>\n        @for (rule of rules; track rule) {\n            <div class=\"group-row\">\n                <fd-select\n                    class=\"group-row__select\"\n                    [value]=\"rule.columnKey\"\n                    (valueChange)=\"_onRuleColumnKeyChange(rule, $event)\"\n                    [placeholder]=\"'platformTable.P13GroupDialogNoneSelectedColumnSelectPlaceholder' | fdTranslate\"\n                >\n                    @for (column of columns; track column) {\n                        <li fd-option [value]=\"column.key\">\n                            {{ column.label }}\n                        </li>\n                    }\n                </fd-select>\n\n                <fd-checkbox\n                    class=\"group-row__checkbox\"\n                    [ngModel]=\"rule.showAsColumn\"\n                    (ngModelChange)=\"_onRuleShowAsColumnChange(rule, $event)\"\n                    [label]=\"'platformTable.P13GroupDialogShowFieldAsColumnCheckboxLabel' | fdTranslate\"\n                ></fd-checkbox>\n\n                <div class=\"group-row__actions\">\n                    <button\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"sys-cancel\"\n                        [attr.aria-label]=\"'platformTable.P13GroupDialogRemoveGroupBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13GroupDialogRemoveGroupBtnTitle' | fdTranslate\"\n                        (click)=\"_removeRule(rule)\"\n                    ></button>\n\n                    <button\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"add\"\n                        [attr.aria-label]=\"'platformTable.P13GroupDialogAddNewGroupBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13GroupDialogAddNewGroupBtnTitle' | fdTranslate\"\n                        (click)=\"_addNew($index)\"\n                    ></button>\n                </div>\n            </div>\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.P13GroupDialogConfirmationBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n\n        <fd-button-bar\n            fdType=\"transparent\"\n            fdkInitialFocus\n            [label]=\"'platformTable.P13GroupDialogCancelBtnLabel' | fdTranslate\"\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-grouping-dialog .group-row{display:flex;align-items:center;margin-bottom:.5rem}.fdp-table-p13-grouping-dialog .group-row .fd-popover-custom{display:block}.fdp-table-p13-grouping-dialog .group-row__checkbox,.fdp-table-p13-grouping-dialog .group-row__actions,.fdp-table-p13-grouping-dialog .group-row__select{margin-right:1rem}.fdp-table-p13-grouping-dialog .group-row__select{flex:1 1 0}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DialogRef }] });
 
+/**
+ * Personalization Dialog Columns Settings.
+ *
+ */
+class TableP13ColumnsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableP13ColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: TableP13ColumnsComponent, isStandalone: true, selector: "fdp-table-p13-columns", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableP13ColumnsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fdp-table-p13-columns',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * Personalization Dialog Filter Settings.
+ *
+ */
+class TableP13FilterComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableP13FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: TableP13FilterComponent, isStandalone: true, selector: "fdp-table-p13-filter", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableP13FilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fdp-table-p13-filter',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * Personalization Dialog Group Settings.
+ *
+ */
+class TableP13GroupComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableP13GroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: TableP13GroupComponent, isStandalone: true, selector: "fdp-table-p13-group", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableP13GroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fdp-table-p13-group',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * Personalization Dialog Sort Settings.
+ *
+ */
+class TableP13SortComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableP13SortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: TableP13SortComponent, isStandalone: true, selector: "fdp-table-p13-sort", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableP13SortComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fdp-table-p13-sort',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    standalone: true
+                }]
+        }] });
+
 const NOT_SELECTED_OPTION_VALUE = null;
 class ValidatedSortRule {
     get isValid() {
@@ -1257,7 +1411,7 @@ class P13SortingDialogComponent {
         return getUniqueListValuesByKey(rules, 'columnKey');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: P13SortingDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: P13SortingDialogComponent, isStandalone: true, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13SortingDialogComponent }], ngImport: i0, template: "<fd-dialog class=\"fdp-table-p13-sorting-dialog\">\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">\n                        {{ 'platformTable.P13SortDialogHeader' | fdTranslate }}\n                    </h4>\n                </fd-bar-element>\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    <fd-dialog-body>\n        @for (rule of rules; track _trackByColumnKey(i, rule); let i = $index) {\n            <div class=\"sort-row\">\n                <fd-select\n                    class=\"sort-row__select\"\n                    [value]=\"rule.columnKey\"\n                    (valueChange)=\"_onRuleColumnKeyChange(rule, $event)\"\n                    [placeholder]=\"'platformTable.P13SortDialogNoneSelectedColumn' | fdTranslate\"\n                >\n                    @for (column of columns | getAvailableSortColumns: rules : rule.columnKey; track column) {\n                        <li fd-option [value]=\"column.key\">\n                            {{ column.label }}\n                        </li>\n                    }\n                </fd-select>\n                <fd-select\n                    class=\"sort-row__select\"\n                    [value]=\"rule.direction\"\n                    (valueChange)=\"_onRuleDirectionChange(rule, $event)\"\n                    [placeholder]=\"'platformTable.P13SortDialogNoneSelectedSorting' | fdTranslate\"\n                >\n                    <li fd-option [value]=\"SORT_DIRECTION.ASC\">\n                        {{ 'platformTable.P13SortDialogSortOrderSelectOptionAsc' | fdTranslate }}\n                    </li>\n                    <li fd-option [value]=\"SORT_DIRECTION.DESC\">\n                        {{ 'platformTable.P13SortDialogSortOrderSelectOptionDesc' | fdTranslate }}\n                    </li>\n                </fd-select>\n                <div class=\"sort-row__actions\">\n                    <button\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"sys-cancel\"\n                        [attr.aria-label]=\"'platformTable.P13SortDialogRemoveSortBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13SortDialogRemoveSortBtnTitle' | fdTranslate\"\n                        (click)=\"_removeRule(rule)\"\n                    ></button>\n                    <button\n                        fd-button\n                        [fdkDisabled]=\"rules.length === columns.length\"\n                        fdType=\"transparent\"\n                        glyph=\"add\"\n                        [attr.aria-label]=\"'platformTable.P13SortDialogAddNewSortBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13SortDialogAddNewSortBtnTitle' | fdTranslate\"\n                        (click)=\"_addNew(i)\"\n                    ></button>\n                </div>\n            </div>\n        }\n    </fd-dialog-body>\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.P13SortDialogConfirmationBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            fdType=\"transparent\"\n            fdkInitialFocus\n            [label]=\"'platformTable.P13SortDialogCancelBtnLabel' | fdTranslate\"\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-sorting-dialog .sort-row{display:flex;margin-bottom:.5rem}.fdp-table-p13-sorting-dialog .sort-row .fd-popover-custom{display:block}.fdp-table-p13-sorting-dialog .sort-row__select{flex:1 1 0;margin-right:1rem}.fdp-table-p13-sorting-dialog .sort-row__actions{margin-left:1rem}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DialogComponent), selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i0.forwardRef(() => DialogHeaderComponent), selector: "fd-dialog-header" }, { kind: "directive", type: i0.forwardRef(() => TemplateDirective), selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i0.forwardRef(() => BarLeftDirective), selector: "[fd-bar-left]" }, { kind: "directive", type: i0.forwardRef(() => BarElementDirective), selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i0.forwardRef(() => TitleComponent), selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i0.forwardRef(() => BarRightDirective), selector: "[fd-bar-right]" }, { kind: "component", type: i0.forwardRef(() => ResetButtonComponent), selector: "fdp-table-reset-button" }, { kind: "component", type: i0.forwardRef(() => DialogBodyComponent), selector: "fd-dialog-body" }, { kind: "component", type: i0.forwardRef(() => SelectComponent), selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i0.forwardRef(() => OptionComponent), selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: i0.forwardRef(() => ButtonComponent), selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i0.forwardRef(() => DisabledBehaviorDirective), selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "component", type: i0.forwardRef(() => DialogFooterComponent), selector: "fd-dialog-footer" }, { kind: "component", type: i0.forwardRef(() => ButtonBarComponent), selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: i0.forwardRef(() => FdTranslatePipe), name: "fdTranslate" }, { kind: "pipe", type: i0.forwardRef(() => GetAvailableSortColumnsPipe), name: "getAvailableSortColumns" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: P13SortingDialogComponent, isStandalone: true, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13SortingDialogComponent }], ngImport: i0, template: "<fd-dialog class=\"fdp-table-p13-sorting-dialog\">\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">\n                        {{ 'platformTable.P13SortDialogHeader' | fdTranslate }}\n                    </h4>\n                </fd-bar-element>\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    <fd-dialog-body>\n        @for (rule of rules; track _trackByColumnKey(i, rule); let i = $index) {\n            <div class=\"sort-row\">\n                <fd-select\n                    class=\"sort-row__select\"\n                    [value]=\"rule.columnKey\"\n                    (valueChange)=\"_onRuleColumnKeyChange(rule, $event)\"\n                    [placeholder]=\"'platformTable.P13SortDialogNoneSelectedColumn' | fdTranslate\"\n                >\n                    @for (column of columns | getAvailableSortColumns: rules : rule.columnKey; track column) {\n                        <li fd-option [value]=\"column.key\">\n                            {{ column.label }}\n                        </li>\n                    }\n                </fd-select>\n                <fd-select\n                    class=\"sort-row__select\"\n                    [value]=\"rule.direction\"\n                    (valueChange)=\"_onRuleDirectionChange(rule, $event)\"\n                    [placeholder]=\"'platformTable.P13SortDialogNoneSelectedSorting' | fdTranslate\"\n                >\n                    <li fd-option [value]=\"SORT_DIRECTION.ASC\">\n                        {{ 'platformTable.P13SortDialogSortOrderSelectOptionAsc' | fdTranslate }}\n                    </li>\n                    <li fd-option [value]=\"SORT_DIRECTION.DESC\">\n                        {{ 'platformTable.P13SortDialogSortOrderSelectOptionDesc' | fdTranslate }}\n                    </li>\n                </fd-select>\n                <div class=\"sort-row__actions\">\n                    <button\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"sys-cancel\"\n                        [attr.aria-label]=\"'platformTable.P13SortDialogRemoveSortBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13SortDialogRemoveSortBtnTitle' | fdTranslate\"\n                        (click)=\"_removeRule(rule)\"\n                    ></button>\n                    <button\n                        fd-button\n                        [fdkDisabled]=\"rules.length === columns.length\"\n                        fdType=\"transparent\"\n                        glyph=\"add\"\n                        [attr.aria-label]=\"'platformTable.P13SortDialogAddNewSortBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13SortDialogAddNewSortBtnTitle' | fdTranslate\"\n                        (click)=\"_addNew(i)\"\n                    ></button>\n                </div>\n            </div>\n        }\n    </fd-dialog-body>\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.P13SortDialogConfirmationBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            fdType=\"transparent\"\n            fdkInitialFocus\n            [label]=\"'platformTable.P13SortDialogCancelBtnLabel' | fdTranslate\"\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-sorting-dialog .sort-row{display:flex;margin-bottom:.5rem}.fdp-table-p13-sorting-dialog .sort-row .fd-popover-custom{display:block}.fdp-table-p13-sorting-dialog .sort-row__select{flex:1 1 0;margin-right:1rem}.fdp-table-p13-sorting-dialog .sort-row__actions{margin-left:1rem}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DialogComponent), selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i0.forwardRef(() => DialogHeaderComponent), selector: "fd-dialog-header" }, { kind: "directive", type: i0.forwardRef(() => TemplateDirective), selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i0.forwardRef(() => BarLeftDirective), selector: "[fd-bar-left]" }, { kind: "directive", type: i0.forwardRef(() => BarElementDirective), selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i0.forwardRef(() => TitleComponent), selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i0.forwardRef(() => BarRightDirective), selector: "[fd-bar-right]" }, { kind: "component", type: i0.forwardRef(() => ResetButtonComponent), selector: "fdp-table-reset-button" }, { kind: "component", type: i0.forwardRef(() => DialogBodyComponent), selector: "fd-dialog-body" }, { kind: "component", type: i0.forwardRef(() => SelectComponent), selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i0.forwardRef(() => OptionComponent), selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: i0.forwardRef(() => ButtonComponent), selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i0.forwardRef(() => DisabledBehaviorDirective), selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "component", type: i0.forwardRef(() => DialogFooterComponent), selector: "fd-dialog-footer" }, { kind: "component", type: i0.forwardRef(() => ButtonBarComponent), selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: i0.forwardRef(() => FdTranslatePipe), name: "fdTranslate" }, { kind: "pipe", type: i0.forwardRef(() => GetAvailableSortColumnsPipe), name: "getAvailableSortColumns" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: P13SortingDialogComponent, decorators: [{
             type: Component,
@@ -1686,7 +1840,7 @@ class TableToolbarComponent {
         this._table.collapseAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Table }, { token: i1.TableService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: TableToolbarComponent, isStandalone: true, selector: "fdp-table-toolbar", inputs: { shouldOverflow: "shouldOverflow", title: "title", hideItemCount: "hideItemCount", hideSearchInput: "hideSearchInput", showExpandCollapseButtons: "showExpandCollapseButtons", searchSuggestions: "searchSuggestions", editMode: "editMode" }, providers: [{ provide: TABLE_TOOLBAR, useExisting: TableToolbarComponent }], queries: [{ propertyName: "tableToolbarActionsComponent", first: true, predicate: TableToolbarActionsComponent, descendants: true }, { propertyName: "_tableToolbarLeftActionsComponent", first: true, predicate: TableToolbarLeftActionsComponent, descendants: true }], viewQueries: [{ propertyName: "contentTemplateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template\n    let-counter=\"counter\"\n    let-sortable=\"sortable\"\n    let-filterable=\"filterable\"\n    let-groupable=\"groupable\"\n    let-columns=\"columns\"\n>\n    <fd-toolbar\n        fdType=\"transparent\"\n        [clearBorder]=\"true\"\n        [titleId]=\"tableToolbarTitleId\"\n        [title]=\"title && !hideItemCount ? title + ' (' + (counter | async) + ')' : title\"\n        [shouldOverflow]=\"shouldOverflow\"\n    >\n        @if (_tableToolbarLeftActionsComponent) {\n            <span fd-toolbar-item fdOverflowPriority=\"never\">\n                @if (!!title || !hideItemCount) {\n                    <fd-toolbar-separator></fd-toolbar-separator>\n                }\n                <ng-template [ngTemplateOutlet]=\"_tableToolbarLeftActionsComponent._contentTemplateRef\"></ng-template>\n            </span>\n        }\n        <fd-toolbar-spacer></fd-toolbar-spacer>\n        @if (!hideSearchInput) {\n            <fdp-search-field\n                fd-toolbar-item\n                [style.min-width.rem]=\"15.5\"\n                [placeholder]=\"'platformTable.toolbarSearchPlaceholder' | fdTranslate\"\n                [inputText]=\"_searchInputText\"\n                [disabled]=\"!!(tableLoading$ | async)\"\n                [suggestions]=\"searchSuggestions\"\n                [ariaLabelledBy]=\"tableToolbarTitleId\"\n                (searchSubmit)=\"submitSearch($event)\"\n                (cancelSearch)=\"submitSearch($event)\"\n                [disableSuggestionsFoundAnnouncer]=\"true\"\n            ></fdp-search-field>\n        }\n        @if (editMode !== 'none') {\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                [label]=\"'platformTable.toolbarActionCreateButtonLabel' | fdTranslate\"\n                (click)=\"_addRow()\"\n            ></fdp-button>\n            @if (_showSaveButton) {\n                @if (_showSaveButton) {\n                    <fdp-button\n                        fd-toolbar-item\n                        fdOverflowPriority=\"never\"\n                        [label]=\"'platformTable.toolbarActionSaveButtonLabel' | fdTranslate\"\n                        (click)=\"_saveRows()\"\n                    ></fdp-button>\n                }\n                <fd-toolbar-separator></fd-toolbar-separator>\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    [label]=\"'platformTable.toolbarActionCancelButtonLabel' | fdTranslate\"\n                    (click)=\"_cancelEditing()\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            }\n            @if (\n                tableToolbarActionsComponent ||\n                (sortable | async) ||\n                (filterable | async) ||\n                (groupable | async) ||\n                (columns | async)\n            ) {\n                <fd-toolbar-separator fd-toolbar-item fdOverflowPriority=\"never\"></fd-toolbar-separator>\n            }\n        }\n        @if (tableToolbarActionsComponent) {\n            <span fd-toolbar-item class=\"fdp-table-toolbar-actions\">\n                <ng-template [ngTemplateOutlet]=\"tableToolbarActionsComponent.contentTemplateRef\"></ng-template>\n            </span>\n        }\n        @if (\n            showExpandCollapseButtons ||\n            (sortable | async) ||\n            (filterable | async) ||\n            (groupable | async) ||\n            (columns | async)\n        ) {\n            @if (tableToolbarActionsComponent) {\n                <fd-toolbar-separator fd-toolbar-item fdOverflowPriority=\"never\"></fd-toolbar-separator>\n            }\n            @if (showExpandCollapseButtons) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"expand-all\"\n                    (click)=\"_expandAll()\"\n                    [title]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"collapse-all\"\n                    (click)=\"_collapseAll()\"\n                    [title]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            }\n            @if (sortable | async) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"sort\"\n                    [title]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                    aria-haspopup=\"modal\"\n                    (click)=\"openSorting()\"\n                ></fdp-button>\n            }\n            @if (filterable | async) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"filter\"\n                    [title]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                    aria-haspopup=\"modal\"\n                    (click)=\"openFiltering()\"\n                ></fdp-button>\n            }\n            @if (groupable | async) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"group-2\"\n                    [title]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                    aria-haspopup=\"modal\"\n                    (click)=\"openGrouping()\"\n                ></fdp-button>\n            }\n            @if (columns | async) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"action-settings\"\n                    [title]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                    aria-haspopup=\"modal\"\n                    (click)=\"openColumns()\"\n                ></fdp-button>\n            }\n        }\n    </fd-toolbar>\n</ng-template>\n", dependencies: [{ kind: "component", type: ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "component", type: ButtonComponent$1, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "toggled", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: TableToolbarComponent, isStandalone: true, selector: "fdp-table-toolbar", inputs: { shouldOverflow: "shouldOverflow", title: "title", hideItemCount: "hideItemCount", hideSearchInput: "hideSearchInput", showExpandCollapseButtons: "showExpandCollapseButtons", searchSuggestions: "searchSuggestions", editMode: "editMode" }, providers: [{ provide: TABLE_TOOLBAR, useExisting: TableToolbarComponent }], queries: [{ propertyName: "tableToolbarActionsComponent", first: true, predicate: TableToolbarActionsComponent, descendants: true }, { propertyName: "_tableToolbarLeftActionsComponent", first: true, predicate: TableToolbarLeftActionsComponent, descendants: true }], viewQueries: [{ propertyName: "contentTemplateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template\n    let-counter=\"counter\"\n    let-sortable=\"sortable\"\n    let-filterable=\"filterable\"\n    let-groupable=\"groupable\"\n    let-columns=\"columns\"\n>\n    <fd-toolbar\n        fdType=\"transparent\"\n        [clearBorder]=\"true\"\n        [titleId]=\"tableToolbarTitleId\"\n        [title]=\"title && !hideItemCount ? title + ' (' + (counter | async) + ')' : title\"\n        [shouldOverflow]=\"shouldOverflow\"\n    >\n        @if (_tableToolbarLeftActionsComponent) {\n            <span fd-toolbar-item fdOverflowPriority=\"never\">\n                @if (!!title || !hideItemCount) {\n                    <fd-toolbar-separator></fd-toolbar-separator>\n                }\n                <ng-template [ngTemplateOutlet]=\"_tableToolbarLeftActionsComponent._contentTemplateRef\"></ng-template>\n            </span>\n        }\n        <fd-toolbar-spacer></fd-toolbar-spacer>\n        @if (!hideSearchInput) {\n            <fdp-search-field\n                fd-toolbar-item\n                [style.min-width.rem]=\"15.5\"\n                [placeholder]=\"'platformTable.toolbarSearchPlaceholder' | fdTranslate\"\n                [inputText]=\"_searchInputText\"\n                [disabled]=\"!!(tableLoading$ | async)\"\n                [suggestions]=\"searchSuggestions\"\n                [ariaLabelledBy]=\"tableToolbarTitleId\"\n                (searchSubmit)=\"submitSearch($event)\"\n                (cancelSearch)=\"submitSearch($event)\"\n                [disableSuggestionsFoundAnnouncer]=\"true\"\n            ></fdp-search-field>\n        }\n        @if (editMode !== 'none') {\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                [label]=\"'platformTable.toolbarActionCreateButtonLabel' | fdTranslate\"\n                (click)=\"_addRow()\"\n            ></fdp-button>\n            @if (_showSaveButton) {\n                @if (_showSaveButton) {\n                    <fdp-button\n                        fd-toolbar-item\n                        fdOverflowPriority=\"never\"\n                        [label]=\"'platformTable.toolbarActionSaveButtonLabel' | fdTranslate\"\n                        (click)=\"_saveRows()\"\n                    ></fdp-button>\n                }\n                <fd-toolbar-separator></fd-toolbar-separator>\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    [label]=\"'platformTable.toolbarActionCancelButtonLabel' | fdTranslate\"\n                    (click)=\"_cancelEditing()\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            }\n            @if (\n                tableToolbarActionsComponent ||\n                (sortable | async) ||\n                (filterable | async) ||\n                (groupable | async) ||\n                (columns | async)\n            ) {\n                <fd-toolbar-separator fd-toolbar-item fdOverflowPriority=\"never\"></fd-toolbar-separator>\n            }\n        }\n        @if (tableToolbarActionsComponent) {\n            <span fd-toolbar-item class=\"fdp-table-toolbar-actions\">\n                <ng-template [ngTemplateOutlet]=\"tableToolbarActionsComponent.contentTemplateRef\"></ng-template>\n            </span>\n        }\n        @if (\n            showExpandCollapseButtons ||\n            (sortable | async) ||\n            (filterable | async) ||\n            (groupable | async) ||\n            (columns | async)\n        ) {\n            @if (tableToolbarActionsComponent) {\n                <fd-toolbar-separator fd-toolbar-item fdOverflowPriority=\"never\"></fd-toolbar-separator>\n            }\n            @if (showExpandCollapseButtons) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"expand-all\"\n                    (click)=\"_expandAll()\"\n                    [title]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"collapse-all\"\n                    (click)=\"_collapseAll()\"\n                    [title]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            }\n            @if (sortable | async) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"sort\"\n                    [title]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                    aria-haspopup=\"modal\"\n                    (click)=\"openSorting()\"\n                ></fdp-button>\n            }\n            @if (filterable | async) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"filter\"\n                    [title]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                    aria-haspopup=\"modal\"\n                    (click)=\"openFiltering()\"\n                ></fdp-button>\n            }\n            @if (groupable | async) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"group-2\"\n                    [title]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                    aria-haspopup=\"modal\"\n                    (click)=\"openGrouping()\"\n                ></fdp-button>\n            }\n            @if (columns | async) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"action-settings\"\n                    [title]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                    aria-haspopup=\"modal\"\n                    (click)=\"openColumns()\"\n                ></fdp-button>\n            }\n        }\n    </fd-toolbar>\n</ng-template>\n", dependencies: [{ kind: "component", type: ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "component", type: ButtonComponent$1, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "glyphFont", "buttonType", "toggled", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableToolbarComponent, decorators: [{
             type: Component,
@@ -1726,6 +1880,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                 args: [TemplateRef]
             }] } });
 
+const NOT_FILTERED_OPTION_VALUE = `table-filters-not-filtered-option-value-${Math.random()
+    .toString()
+    .slice(2, 5)}`;
+
 /**
  * View settings dialog filter component.
  *
@@ -1862,11 +2020,11 @@ class FilterMultiSelectComponent {
         this._value = this._selectableOptions.filter(({ selected }) => selected).map(({ value }) => value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FilterMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", 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 fd-list-item [selected]=\"option.selected\">\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, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", 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 fd-list-item [selected]=\"option.selected\">\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", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FilterMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-filter-multi-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [ListComponent, ListItemComponent, CheckboxComponent, FormsModule, ListTitleDirective], template: "<ul fd-list [selection]=\"true\">\n    @for (option of _selectableOptions; track option) {\n        <li fd-list-item [selected]=\"option.selected\">\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" }]
+            args: [{ selector: 'fdp-filter-multi-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [ListComponent$1, ListItemComponent, CheckboxComponent, FormsModule, ListTitleDirective], template: "<ul fd-list [selection]=\"true\">\n    @for (option of _selectableOptions; track option) {\n        <li fd-list-item [selected]=\"option.selected\">\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: [{
                 type: Input
             }], filterBy: [{
@@ -1875,10 +2033,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                 type: Output
             }] } });
 
-const NOT_FILTERED_OPTION_VALUE = `table-filters-not-filtered-option-value-${Math.random()
-    .toString()
-    .slice(2, 5)}`;
-
 /**
  * Single Select filter type.
  *
@@ -1911,11 +2065,11 @@ class FilterSingleSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FilterSingleSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", 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 fd-list-item [selected]=\"option.value === _value\">\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, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "selectedValue", "name", "id", "value", "required", "standalone"] }, { 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"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", 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 fd-list-item [selected]=\"option.value === _value\">\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", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "selectedValue", "name", "id", "value", "required", "standalone"] }, { 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"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FilterSingleSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-filter-single-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [ListComponent, 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 fd-list-item [selected]=\"option.value === _value\">\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" }]
+            args: [{ selector: 'fdp-filter-single-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, 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 fd-list-item [selected]=\"option.value === _value\">\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: [{
                 type: Input
             }], filterBy: [{
@@ -1997,13 +2151,13 @@ class FiltersListStepComponent {
         this.selectFilter = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FiltersListStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: FiltersListStepComponent, isStandalone: true, selector: "fdp-filters-list-step", inputs: { filters: "filters" }, outputs: { selectFilter: "selectFilter" }, providers: [{ provide: FILTERS_VIEW_STEP_TOKEN, useExisting: forwardRef(() => FiltersListStepComponent) }], viewQueries: [{ propertyName: "titleTemplateRef", first: true, predicate: ["titleTemplate"], descendants: true }, { propertyName: "bodyTemplateRef", first: true, predicate: ["bodyTemplate"], descendants: true }], ngImport: i0, template: "<ng-template #titleTemplate>\n    <h4 fd-title [headerSize]=\"4\">{{ 'platformTable.filterDialogFilterTitle' | fdTranslate }}</h4>\n</ng-template>\n\n<ng-template #bodyTemplate>\n    <ul fd-list [navigationIndicator]=\"true\">\n        <li fd-list-group-header>{{ 'platformTable.filterDialogFilterBy' | fdTranslate }}</li>\n\n        @for (filter of filters; track filter) {\n            <li fd-list-item>\n                <a fd-list-link (click)=\"selectFilter.emit(filter)\">\n                    <span fd-list-title>{{ filter.label }}</span>\n                </a>\n            </li>\n        }\n    </ul>\n</ng-template>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "directive", type: ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: FiltersListStepComponent, isStandalone: true, selector: "fdp-filters-list-step", inputs: { filters: "filters" }, outputs: { selectFilter: "selectFilter" }, providers: [{ provide: FILTERS_VIEW_STEP_TOKEN, useExisting: forwardRef(() => FiltersListStepComponent) }], viewQueries: [{ propertyName: "titleTemplateRef", first: true, predicate: ["titleTemplate"], descendants: true }, { propertyName: "bodyTemplateRef", first: true, predicate: ["bodyTemplate"], descendants: true }], ngImport: i0, template: "<ng-template #titleTemplate>\n    <h4 fd-title [headerSize]=\"4\">{{ 'platformTable.filterDialogFilterTitle' | fdTranslate }}</h4>\n</ng-template>\n\n<ng-template #bodyTemplate>\n    <ul fd-list [navigationIndicator]=\"true\">\n        <li fd-list-group-header>{{ 'platformTable.filterDialogFilterBy' | fdTranslate }}</li>\n\n        @for (filter of filters; track filter) {\n            <li fd-list-item>\n                <a fd-list-link (click)=\"selectFilter.emit(filter)\">\n                    <span fd-list-title>{{ filter.label }}</span>\n                </a>\n            </li>\n        }\n    </ul>\n</ng-template>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "directive", type: ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FiltersListStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-filters-list-step', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: FILTERS_VIEW_STEP_TOKEN, useExisting: forwardRef(() => FiltersListStepComponent) }], standalone: true, imports: [
                         TitleComponent,
-                        ListComponent,
+                        ListComponent$1,
                         ListGroupHeaderDirective,
                         ListItemComponent,
                         ListLinkDirective,
@@ -2232,7 +2386,7 @@ class GroupingComponent {
         this._isResetAvailableSubject$.next(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: GroupingComponent, deps: [{ token: i1$1.DialogRef }, { token: i1.Table }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: GroupingComponent, isStandalone: true, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: forwardRef(() => GroupingComponent) }], ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">{{ 'platformTable.groupDialogHeader' | fdTranslate }}</h4>\n                </fd-bar-element>\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>\n        <ul fd-list [selection]=\"true\">\n            <li fd-list-group-header>\n                <span fd-list-title>{{ 'platformTable.groupDialogGroupOrderHeader' | fdTranslate }}</span>\n            </li>\n            <li fd-list-item [selected]=\"direction === SORT_DIRECTION.ASC\">\n                <fd-radio-button\n                    name=\"sort-order\"\n                    value=\"asc\"\n                    state=\"default\"\n                    [ngModel]=\"direction\"\n                    (ngModelChange)=\"_groupOrderChange($event)\"\n                ></fd-radio-button>\n                <span fd-list-title>{{ 'platformTable.groupDialogGroupOrderAsc' | fdTranslate }}</span>\n            </li>\n            <li fd-list-item [selected]=\"direction === SORT_DIRECTION.DESC\">\n                <fd-radio-button\n                    name=\"sort-order\"\n                    value=\"desc\"\n                    state=\"default\"\n                    [ngModel]=\"direction\"\n                    (ngModelChange)=\"_groupOrderChange($event)\"\n                ></fd-radio-button>\n                <span fd-list-title>{{ 'platformTable.groupDialogGroupOrderDesc' | fdTranslate }}</span>\n            </li>\n        </ul>\n\n        <ul fd-list [selection]=\"true\">\n            <li fd-list-group-header>\n                <span fd-list-title>{{ 'platformTable.groupDialogGroupByHeader' | fdTranslate }}</span>\n            </li>\n            <li fd-list-item [selected]=\"NOT_GROUPED_OPTION_VALUE === field\">\n                <fd-radio-button\n                    name=\"sort-by\"\n                    [value]=\"NOT_GROUPED_OPTION_VALUE\"\n                    state=\"default\"\n                    [ngModel]=\"field\"\n                    (ngModelChange)=\"_groupFieldChange($event)\"\n                ></fd-radio-button>\n                <span fd-list-title>{{ 'platformTable.groupDialogNotGroupedLabel' | fdTranslate }}</span>\n            </li>\n            @for (column of columns; track column) {\n                <li fd-list-item [selected]=\"column.key === field\">\n                    <fd-radio-button\n                        name=\"sort-by\"\n                        [value]=\"column.key\"\n                        state=\"default\"\n                        [ngModel]=\"field\"\n                        (ngModelChange)=\"_groupFieldChange($event)\"\n                    ></fd-radio-button>\n                    <span fd-list-title>{{ column.label }}</span>\n                </li>\n            }\n        </ul>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.groupDialogConfirmBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        >\n        </fd-button-bar>\n        <fd-button-bar\n            [label]=\"'platformTable.groupDialogCancelBtnLabel' | fdTranslate\"\n            fdkInitialFocus\n            (click)=\"cancel()\"\n        >\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" }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "directive", type: ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "selectedValue", "name", "id", "value", "required", "standalone"] }, { 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: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: GroupingComponent, isStandalone: true, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: forwardRef(() => GroupingComponent) }], ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">{{ 'platformTable.groupDialogHeader' | fdTranslate }}</h4>\n                </fd-bar-element>\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>\n        <ul fd-list [selection]=\"true\">\n            <li fd-list-group-header>\n                <span fd-list-title>{{ 'platformTable.groupDialogGroupOrderHeader' | fdTranslate }}</span>\n            </li>\n            <li fd-list-item [selected]=\"direction === SORT_DIRECTION.ASC\">\n                <fd-radio-button\n                    name=\"sort-order\"\n                    value=\"asc\"\n                    state=\"default\"\n                    [ngModel]=\"direction\"\n                    (ngModelChange)=\"_groupOrderChange($event)\"\n                ></fd-radio-button>\n                <span fd-list-title>{{ 'platformTable.groupDialogGroupOrderAsc' | fdTranslate }}</span>\n            </li>\n            <li fd-list-item [selected]=\"direction === SORT_DIRECTION.DESC\">\n                <fd-radio-button\n                    name=\"sort-order\"\n                    value=\"desc\"\n                    state=\"default\"\n                    [ngModel]=\"direction\"\n                    (ngModelChange)=\"_groupOrderChange($event)\"\n                ></fd-radio-button>\n                <span fd-list-title>{{ 'platformTable.groupDialogGroupOrderDesc' | fdTranslate }}</span>\n            </li>\n        </ul>\n\n        <ul fd-list [selection]=\"true\">\n            <li fd-list-group-header>\n                <span fd-list-title>{{ 'platformTable.groupDialogGroupByHeader' | fdTranslate }}</span>\n            </li>\n            <li fd-list-item [selected]=\"NOT_GROUPED_OPTION_VALUE === field\">\n                <fd-radio-button\n                    name=\"sort-by\"\n                    [value]=\"NOT_GROUPED_OPTION_VALUE\"\n                    state=\"default\"\n                    [ngModel]=\"field\"\n                    (ngModelChange)=\"_groupFieldChange($event)\"\n                ></fd-radio-button>\n                <span fd-list-title>{{ 'platformTable.groupDialogNotGroupedLabel' | fdTranslate }}</span>\n            </li>\n            @for (column of columns; track column) {\n                <li fd-list-item [selected]=\"column.key === field\">\n                    <fd-radio-button\n                        name=\"sort-by\"\n                        [value]=\"column.key\"\n                        state=\"default\"\n                        [ngModel]=\"field\"\n                        (ngModelChange)=\"_groupFieldChange($event)\"\n                    ></fd-radio-button>\n                    <span fd-list-title>{{ column.label }}</span>\n                </li>\n            }\n        </ul>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.groupDialogConfirmBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        >\n        </fd-button-bar>\n        <fd-button-bar\n            [label]=\"'platformTable.groupDialogCancelBtnLabel' | fdTranslate\"\n            fdkInitialFocus\n            (click)=\"cancel()\"\n        >\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" }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "directive", type: ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "selectedValue", "name", "id", "value", "required", "standalone"] }, { 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: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: GroupingComponent, decorators: [{
             type: Component,
@@ -2248,7 +2402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                         CdkScrollable,
                         ScrollbarDirective,
                         DialogBodyComponent,
-                        ListComponent,
+                        ListComponent$1,
                         ListGroupHeaderDirective,
                         ListTitleDirective,
                         ListItemComponent,
@@ -2342,7 +2496,7 @@ class SortingComponent {
         this._isResetAvailableSubject$.next(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SortingComponent, deps: [{ token: i1$1.DialogRef }, { token: i1.Table }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: SortingComponent, isStandalone: true, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: forwardRef(() => SortingComponent) }], ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">{{ 'platformTable.sortDialogHeader' | fdTranslate }}</h4>\n                </fd-bar-element>\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    <fd-dialog-body>\n        <ul fd-list [selection]=\"true\">\n            <li fd-list-group-header>\n                <span fd-list-title>{{ 'platformTable.sortDialogSortOrderHeader' | fdTranslate }}</span>\n            </li>\n            <li fd-list-item [selected]=\"direction === SORT_DIRECTION.ASC\">\n                <fd-radio-button\n                    name=\"sort-order\"\n                    value=\"asc\"\n                    state=\"default\"\n                    [ngModel]=\"direction\"\n                    (ngModelChange)=\"_sortDirectionChange($event)\"\n                ></fd-radio-button>\n                <span fd-list-title>{{ 'platformTable.sortDialogSortOrderAsc' | fdTranslate }}</span>\n            </li>\n            <li fd-list-item [selected]=\"direction === SORT_DIRECTION.DESC\">\n                <fd-radio-button\n                    name=\"sort-order\"\n                    value=\"desc\"\n                    state=\"default\"\n                    [ngModel]=\"direction\"\n                    (ngModelChange)=\"_sortDirectionChange($event)\"\n                ></fd-radio-button>\n                <span fd-list-title>{{ 'platformTable.sortDialogSortOrderDesc' | fdTranslate }}</span>\n            </li>\n        </ul>\n        <ul fd-list [selection]=\"true\">\n            <li fd-list-group-header>\n                <span fd-list-title>{{ 'platformTable.sortDialogSortByHeader' | fdTranslate }}</span>\n            </li>\n            @if (allowDisablingSorting) {\n                <li fd-list-item [selected]=\"field === NOT_SORTED_OPTION_VALUE\">\n                    <fd-radio-button\n                        name=\"sort-by\"\n                        [value]=\"NOT_SORTED_OPTION_VALUE\"\n                        state=\"default\"\n                        [ngModel]=\"field\"\n                        (ngModelChange)=\"_sortFieldChange($event)\"\n                    ></fd-radio-button>\n                    <span fd-list-title>{{ 'platformTable.sortDialogNotSortedLabel' | fdTranslate }}</span>\n                </li>\n            }\n            @for (column of columns; track column) {\n                <li fd-list-item [selected]=\"column.key === field\">\n                    <fd-radio-button\n                        name=\"sort-by\"\n                        [value]=\"column.key\"\n                        state=\"default\"\n                        [ngModel]=\"field\"\n                        (ngModelChange)=\"_sortFieldChange($event)\"\n                    ></fd-radio-button>\n                    <span fd-list-title>{{ column.label }}</span>\n                </li>\n            }\n        </ul>\n    </fd-dialog-body>\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.sortDialogConfirmBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        >\n        </fd-button-bar>\n        <fd-button-bar\n            [label]=\"'platformTable.sortDialogCancelBtnLabel' | fdTranslate\"\n            fdkInitialFocus\n            (click)=\"cancel()\"\n        >\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" }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "directive", type: ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "selectedValue", "name", "id", "value", "required", "standalone"] }, { 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: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: SortingComponent, isStandalone: true, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: forwardRef(() => SortingComponent) }], ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">{{ 'platformTable.sortDialogHeader' | fdTranslate }}</h4>\n                </fd-bar-element>\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    <fd-dialog-body>\n        <ul fd-list [selection]=\"true\">\n            <li fd-list-group-header>\n                <span fd-list-title>{{ 'platformTable.sortDialogSortOrderHeader' | fdTranslate }}</span>\n            </li>\n            <li fd-list-item [selected]=\"direction === SORT_DIRECTION.ASC\">\n                <fd-radio-button\n                    name=\"sort-order\"\n                    value=\"asc\"\n                    state=\"default\"\n                    [ngModel]=\"direction\"\n                    (ngModelChange)=\"_sortDirectionChange($event)\"\n                ></fd-radio-button>\n                <span fd-list-title>{{ 'platformTable.sortDialogSortOrderAsc' | fdTranslate }}</span>\n            </li>\n            <li fd-list-item [selected]=\"direction === SORT_DIRECTION.DESC\">\n                <fd-radio-button\n                    name=\"sort-order\"\n                    value=\"desc\"\n                    state=\"default\"\n                    [ngModel]=\"direction\"\n                    (ngModelChange)=\"_sortDirectionChange($event)\"\n                ></fd-radio-button>\n                <span fd-list-title>{{ 'platformTable.sortDialogSortOrderDesc' | fdTranslate }}</span>\n            </li>\n        </ul>\n        <ul fd-list [selection]=\"true\">\n            <li fd-list-group-header>\n                <span fd-list-title>{{ 'platformTable.sortDialogSortByHeader' | fdTranslate }}</span>\n            </li>\n            @if (allowDisablingSorting) {\n                <li fd-list-item [selected]=\"field === NOT_SORTED_OPTION_VALUE\">\n                    <fd-radio-button\n                        name=\"sort-by\"\n                        [value]=\"NOT_SORTED_OPTION_VALUE\"\n                        state=\"default\"\n                        [ngModel]=\"field\"\n                        (ngModelChange)=\"_sortFieldChange($event)\"\n                    ></fd-radio-button>\n                    <span fd-list-title>{{ 'platformTable.sortDialogNotSortedLabel' | fdTranslate }}</span>\n                </li>\n            }\n            @for (column of columns; track column) {\n                <li fd-list-item [selected]=\"column.key === field\">\n                    <fd-radio-button\n                        name=\"sort-by\"\n                        [value]=\"column.key\"\n                        state=\"default\"\n                        [ngModel]=\"field\"\n                        (ngModelChange)=\"_sortFieldChange($event)\"\n                    ></fd-radio-button>\n                    <span fd-list-title>{{ column.label }}</span>\n                </li>\n            }\n        </ul>\n    </fd-dialog-body>\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.sortDialogConfirmBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        >\n        </fd-button-bar>\n        <fd-button-bar\n            [label]=\"'platformTable.sortDialogCancelBtnLabel' | fdTranslate\"\n            fdkInitialFocus\n            (click)=\"cancel()\"\n        >\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" }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "directive", type: ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "selectedValue", "name", "id", "value", "required", "standalone"] }, { 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: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SortingComponent, decorators: [{
             type: Component,
@@ -2358,7 +2512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                         CdkScrollable,
                         ScrollbarDirective,
                         DialogBodyComponent,
-                        ListComponent,
+                        ListComponent$1,
                         ListGroupHeaderDirective,
                         ListTitleDirective,
                         ListItemComponent,
@@ -2558,160 +2712,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                 args: [forwardRef(() => TableViewSettingsFilterComponent)]
             }] } });
 
-class TableCellHeaderPopoverComponent {
-    constructor() {
-        /** Whether the popover is disabled. */
-        this.disabled = false;
-        /** Whether the column is frozen. */
-        this.columnFrozen = false;
-        /** Whether the filtering from header is disabled. */
-        this.filteringFromHeaderDisabled = false;
-        /** @hidden */
-        this._popoverItems$ = new BehaviorSubject([]);
-        /** @hidden */
-        this._headerPopoverTriggers = [
-            {
-                trigger: 'click',
-                openAction: true,
-                closeAction: true,
-                stopPropagation: true
-            },
-            {
-                trigger: 'keydown.enter',
-                openAction: true,
-                closeAction: true,
-                stopPropagation: true
-            },
-            {
-                trigger: 'keydown.space',
-                openAction: true,
-                closeAction: true,
-                stopPropagation: true
-            }
-        ];
-        /** @hidden */
-        this.SORT_DIRECTION = SortDirection;
-        /** @hidden */
-        this._destroyRef = inject(DestroyRef);
-        /** @hidden */
-        this._tableService = inject(TableService);
-        /** @hidden */
-        this._table = inject(Table);
-    }
-    /** @hidden */
-    ngAfterViewInit() {
-        this._popoverItems.changes.pipe(startWith(null), takeUntilDestroyed(this._destroyRef)).subscribe(() => {
-            this._popoverItems$.next(this._popoverItems.map((t) => t.templateRef));
-        });
-    }
-    /** @hidden */
-    _setColumnHeaderSortBy(field, direction) {
-        this._tableService.setSort([{ field, direction }]);
-        this.popover?.close();
-    }
-    /** @hidden */
-    _setColumnHeaderGroupBy(field) {
-        const state = this._tableService.getTableState();
-        if (state.groupBy?.length === 1 && state.groupBy[0].field === field) {
-            // reset grouping, if already grouped by this field
-            this._tableService.setGroups([]);
-        }
-        else {
-            this._tableService.setGroups([{ field, direction: SortDirection.NONE, showAsColumn: true }]);
-        }
-    }
-    /** @hidden */
-    _setColumnHeaderFilterBy(field, value) {
-        if (!value) {
-            this._tableService.removeFilters([field]);
-            return;
-        }
-        const collectionFilter = {
-            field,
-            value,
-            type: FilterableColumnDataType.STRING,
-            strategy: FILTER_STRING_STRATEGY.CONTAINS,
-            exclude: false
-        };
-        this._tableService.addFilters([collectionFilter]);
-        this.popover?.close();
-    }
-    /** @hidden */
-    _freeze() {
-        this._table.freezeToColumn(this.column.name, this.column.endFreezable);
-        this.popover?.close();
-    }
-    /** @hidden */
-    _unFreeze() {
-        this._table.unfreeze(this.column.name, this.column.endFreezable);
-        this.popover?.close();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableCellHeaderPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: TableCellHeaderPopoverComponent, isStandalone: true, selector: "fdp-table-cell-header-popover", inputs: { column: "column", popoverTemplate: "popoverTemplate", disabled: "disabled", columnFrozen: "columnFrozen", filteringFromHeaderDisabled: "filteringFromHeaderDisabled" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "_popoverItems", predicate: TemplateDirective, descendants: true }], ngImport: i0, template: "@if (!popoverTemplate) {\n    <fd-popover\n        [disabled]=\"disabled\"\n        [noArrow]=\"true\"\n        fd-table-popover\n        [focusAutoCapture]=\"true\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"_headerPopoverTriggers\"\n    >\n        <fdp-list [noBorder]=\"true\" [navigated]=\"true\">\n            @for (item of _popoverItems$.asObservable() | async; track item) {\n                <fdp-free-content-list-item>\n                    <ng-template\n                        [ngTemplateOutlet]=\"item\"\n                        [ngTemplateOutletContext]=\"{ popover: popover }\"\n                    ></ng-template>\n                </fdp-free-content-list-item>\n            }\n        </fdp-list>\n    </fd-popover>\n} @else {\n    <ng-template\n        [ngTemplateOutlet]=\"popoverTemplate!\"\n        [ngTemplateOutletContext]=\"{ $implicit: _popoverItems$.asObservable() }\"\n    ></ng-template>\n}\n@if (column?.sortable) {\n    <ng-template fdkTemplate=\"sortingAscPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n        >\n            <span fd-list-icon glyph=\"sort-ascending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortAsc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n    <ng-template fdkTemplate=\"sortingDescPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n        >\n            <span fd-list-icon glyph=\"sort-descending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortDesc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n}\n@if (column?.groupable) {\n    <ng-template fdkTemplate=\"groupPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderGroupBy(column.key)\"\n            (keydown.enter)=\"_setColumnHeaderGroupBy(column.key)\"\n        >\n            <span fd-list-icon></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuGroup' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n}\n@if (column?.freezable || column?.endFreezable) {\n    <ng-template fdkTemplate=\"freezePopoverItem\" let-popover=\"popover\">\n        @if (!columnFrozen) {\n            <a fd-list-link [focusable]=\"true\" (click)=\"_freeze()\" (keyup.enter)=\"_freeze()\">\n                <span></span>\n                <span fd-list-title>{{\n                    (!column.endFreezable ? 'platformTable.headerMenuFreeze' : 'platformTable.headerMenuEndFreeze')\n                        | fdTranslate\n                }}</span>\n            </a>\n        } @else {\n            <a fd-list-link [focusable]=\"true\" (click)=\"_unFreeze()\" (keyup.enter)=\"_unFreeze()\">\n                <span></span>\n                <span fd-list-title>{{ 'platformTable.headerMenuUnfreeze' | fdTranslate }}</span>\n            </a>\n        }\n    </ng-template>\n}\n@if (column?.filterable && !filteringFromHeaderDisabled) {\n    <ng-template fdkTemplate=\"filteringPopoverItem\" let-popover=\"popover\">\n        <div fd-list-link [style.cursor]=\"'auto'\">\n            <i fd-list-icon glyph=\"filter\"></i>\n            <div fd-form-item [horizontal]=\"true\" (click)=\"$event.stopPropagation()\">\n                <label fd-form-label [for]=\"'fdp-table-column-filtering-' + column.name\">{{\n                    'platformTable.headerMenuFilter' | fdTranslate\n                }}</label>\n                <input\n                    fd-form-control\n                    [id]=\"'fdp-table-column-filtering-' + column.name\"\n                    (keydown.enter)=\"_setColumnHeaderFilterBy(column.key, $any($event.target)?.value)\"\n                />\n            </div>\n        </div>\n    </ng-template>\n}\n", dependencies: [{ kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: TablePopoverDirective, selector: "[fdTablePopover], [fd-table-popover]" }, { kind: "component", type: ListComponent$1, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "component", type: FreeContentListItemComponent, selector: "fdp-free-content-list-item" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableCellHeaderPopoverComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fdp-table-cell-header-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        PopoverComponent,
-                        TablePopoverDirective,
-                        ListComponent$1,
-                        FreeContentListItemComponent,
-                        NgTemplateOutlet,
-                        TemplateDirective,
-                        ListLinkDirective,
-                        ListIconDirective,
-                        ListTitleDirective,
-                        FormItemComponent,
-                        FormLabelComponent,
-                        FormControlComponent,
-                        AsyncPipe,
-                        FdTranslatePipe
-                    ], template: "@if (!popoverTemplate) {\n    <fd-popover\n        [disabled]=\"disabled\"\n        [noArrow]=\"true\"\n        fd-table-popover\n        [focusAutoCapture]=\"true\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"_headerPopoverTriggers\"\n    >\n        <fdp-list [noBorder]=\"true\" [navigated]=\"true\">\n            @for (item of _popoverItems$.asObservable() | async; track item) {\n                <fdp-free-content-list-item>\n                    <ng-template\n                        [ngTemplateOutlet]=\"item\"\n                        [ngTemplateOutletContext]=\"{ popover: popover }\"\n                    ></ng-template>\n                </fdp-free-content-list-item>\n            }\n        </fdp-list>\n    </fd-popover>\n} @else {\n    <ng-template\n        [ngTemplateOutlet]=\"popoverTemplate!\"\n        [ngTemplateOutletContext]=\"{ $implicit: _popoverItems$.asObservable() }\"\n    ></ng-template>\n}\n@if (column?.sortable) {\n    <ng-template fdkTemplate=\"sortingAscPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n        >\n            <span fd-list-icon glyph=\"sort-ascending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortAsc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n    <ng-template fdkTemplate=\"sortingDescPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n        >\n            <span fd-list-icon glyph=\"sort-descending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortDesc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n}\n@if (column?.groupable) {\n    <ng-template fdkTemplate=\"groupPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderGroupBy(column.key)\"\n            (keydown.enter)=\"_setColumnHeaderGroupBy(column.key)\"\n        >\n            <span fd-list-icon></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuGroup' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n}\n@if (column?.freezable || column?.endFreezable) {\n    <ng-template fdkTemplate=\"freezePopoverItem\" let-popover=\"popover\">\n        @if (!columnFrozen) {\n            <a fd-list-link [focusable]=\"true\" (click)=\"_freeze()\" (keyup.enter)=\"_freeze()\">\n                <span></span>\n                <span fd-list-title>{{\n                    (!column.endFreezable ? 'platformTable.headerMenuFreeze' : 'platformTable.headerMenuEndFreeze')\n                        | fdTranslate\n                }}</span>\n            </a>\n        } @else {\n            <a fd-list-link [focusable]=\"true\" (click)=\"_unFreeze()\" (keyup.enter)=\"_unFreeze()\">\n                <span></span>\n                <span fd-list-title>{{ 'platformTable.headerMenuUnfreeze' | fdTranslate }}</span>\n            </a>\n        }\n    </ng-template>\n}\n@if (column?.filterable && !filteringFromHeaderDisabled) {\n    <ng-template fdkTemplate=\"filteringPopoverItem\" let-popover=\"popover\">\n        <div fd-list-link [style.cursor]=\"'auto'\">\n            <i fd-list-icon glyph=\"filter\"></i>\n            <div fd-form-item [horizontal]=\"true\" (click)=\"$event.stopPropagation()\">\n                <label fd-form-label [for]=\"'fdp-table-column-filtering-' + column.name\">{{\n                    'platformTable.headerMenuFilter' | fdTranslate\n                }}</label>\n                <input\n                    fd-form-control\n                    [id]=\"'fdp-table-column-filtering-' + column.name\"\n                    (keydown.enter)=\"_setColumnHeaderFilterBy(column.key, $any($event.target)?.value)\"\n                />\n            </div>\n        </div>\n    </ng-template>\n}\n" }]
-        }], propDecorators: { column: [{
-                type: Input
-            }], popoverTemplate: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], columnFrozen: [{
-                type: Input
-            }], filteringFromHeaderDisabled: [{
-                type: Input
-            }], popover: [{
-                type: ViewChild,
-                args: [PopoverComponent, { static: false }]
-            }], _popoverItems: [{
-                type: ViewChildren,
-                args: [TemplateDirective]
-            }] } });
-
-class TableHeaderCellContentComponent {
-    constructor() {
-        /** Whether column has applied sorting. */
-        this.hasSorting = false;
-        /** Whether column has applied filtering. */
-        this.hasFilter = false;
-        /** @hidden */
-        this.SORT_DIRECTION = SortDirection;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableHeaderCellContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: TableHeaderCellContentComponent, isStandalone: true, selector: "fdp-table-header-cell-content", inputs: { id: "id", column: "column", hasSorting: "hasSorting", hasFilter: "hasFilter", sorting: "sorting" }, ngImport: i0, template: "<div class=\"fd-table__text--no-wrap\" [class.fd-table__inner]=\"hasSorting || hasFilter\">\n    <ng-template\n        [ngTemplateOutlet]=\"tableHeaderCellContentTemplate\"\n        [ngTemplateOutletContext]=\"{ column: column }\"\n    ></ng-template>\n    @if (hasSorting || hasFilter) {\n        <div class=\"fd-table__column-header-icons\">\n            @if (hasFilter) {\n                <fd-icon fd-table-icon glyph=\"filter\"></fd-icon>\n            }\n            @if (hasSorting) {\n                <fd-icon\n                    fd-table-icon\n                    [ariaHidden]=\"true\"\n                    [glyph]=\"sorting?.direction === SORT_DIRECTION.ASC ? 'sort-ascending' : 'sort-descending'\"\n                ></fd-icon>\n            }\n        </div>\n    }\n</div>\n<ng-content></ng-content>\n<ng-template #tableHeaderCellContentTemplate let-column=\"column\">\n    @if (column?.headerCellTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"column.headerCellTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: column }\"\n        ></ng-template>\n    } @else {\n        <span [id]=\"id + '-header-cell-' + column?.name\" class=\"fd-table__cell--truncate-txt\">\n            {{ column?.label }}\n        </span>\n    }\n</ng-template>\n", styles: ["fdp-table-header-cell-content{display:flex;align-items:center;justify-content:space-between;flex-grow:0}fdp-table-header-cell-content .fd-table__text--no-wrap{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "navigation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableHeaderCellContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fdp-table-header-cell-content', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet, IconComponent, TableIconDirective], template: "<div class=\"fd-table__text--no-wrap\" [class.fd-table__inner]=\"hasSorting || hasFilter\">\n    <ng-template\n        [ngTemplateOutlet]=\"tableHeaderCellContentTemplate\"\n        [ngTemplateOutletContext]=\"{ column: column }\"\n    ></ng-template>\n    @if (hasSorting || hasFilter) {\n        <div class=\"fd-table__column-header-icons\">\n            @if (hasFilter) {\n                <fd-icon fd-table-icon glyph=\"filter\"></fd-icon>\n            }\n            @if (hasSorting) {\n                <fd-icon\n                    fd-table-icon\n                    [ariaHidden]=\"true\"\n                    [glyph]=\"sorting?.direction === SORT_DIRECTION.ASC ? 'sort-ascending' : 'sort-descending'\"\n                ></fd-icon>\n            }\n        </div>\n    }\n</div>\n<ng-content></ng-content>\n<ng-template #tableHeaderCellContentTemplate let-column=\"column\">\n    @if (column?.headerCellTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"column.headerCellTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: column }\"\n        ></ng-template>\n    } @else {\n        <span [id]=\"id + '-header-cell-' + column?.name\" class=\"fd-table__cell--truncate-txt\">\n            {{ column?.label }}\n        </span>\n    }\n</ng-template>\n", styles: ["fdp-table-header-cell-content{display:flex;align-items:center;justify-content:space-between;flex-grow:0}fdp-table-header-cell-content .fd-table__text--no-wrap{width:100%}\n"] }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], column: [{
-                type: Input
-            }], hasSorting: [{
-                type: Input
-            }], hasFilter: [{
-                type: Input
-            }], sorting: [{
-                type: Input
-            }] } });
-
 class TableGroupRowComponent extends TableRowDirective {
     constructor() {
         super(...arguments);
@@ -3159,7 +3159,7 @@ class TableRowComponent extends TableRowDirective {
                 provide: FDK_FOCUSABLE_LIST_DIRECTIVE,
                 useExisting: TableRowComponent
             }
-        ], viewQueries: [{ propertyName: "_focusableViewCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }, { propertyName: "_editableCells", predicate: EditableTableCell, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (_fdpTableService._semanticHighlighting$ | async; as semanticHighlighting) {\n    <td\n        fd-table-cell\n        fd-table-status-indicator\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [status]=\"row.value[semanticHighlighting]\"\n    ></td>\n}\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            fd-table-cell-selectable\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles: _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow()\"\n            (keydown.space)=\"_toggleSingleSelectableRow()\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n        ></td>\n    }\n} @else if (selectionMode === SELECTION_MODE.MULTIPLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.aria-selected]=\"row.checked\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles: _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n        ></td>\n    }\n}\n@for (column of _fdpTableService.visibleColumns$ | async; track column.name) {\n    <td\n        #tableCellElement\n        [fdpTableCellResizable]=\"\n            $index\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength\n                    : (_fdpTableService._isShownNavigationColumn$ | async) === true\n        \"\n        [columnName]=\"column.name\"\n        [focusable]=\"true\"\n        [attr.role]=\"column.role\"\n        [headers]=\"rowId + '__' + column.name\"\n        [ngClass]=\"[\n            'fdp-table__col--' + column.name,\n            column._freezed ? 'fd-table__cell--fixed' : '',\n            column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n            column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n            column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n            row.isTree && $index === 0 ? 'fd-table__cell--expand' : '',\n            $last && (_fdpTableService._isShownNavigationColumn$ | async) === false ? 'is-last-child' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl\n                    : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                    : selectionColumnWidth\n                    : column._freezed\n                    : column._endFreezed\n                    : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                    : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                    : _tableColumnResizeService.getNextColumnsWidth(column.name)\n        \"\n        [attr.aria-expanded]=\"_isTreeRowFirstCell($index, row) ? row.expanded : null\"\n        [attr.data-nesting-level]=\"$index === 0 ? row.level + 1 : null\"\n        (cellFocused)=\"_tableRowService.cellFocused($event)\"\n        (click)=\"_tableRowService.cellClicked({ index: $index, row })\"\n        (keydown.enter)=\"_isTreeRowFirstCell($index, row, $event) && _toggleGroupRow()\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.space)=\"_handleCellSpaceKey($index, tableCellElement, $event)\"\n    >\n        <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n            @if (_isTreeRowFirstCell($index, row)) {\n                <span\n                    class=\"fd-table__expand\"\n                    [class.fd-table__expand--open]=\"row.expanded$ | async\"\n                    aria-hidden=\"true\"\n                ></span>\n            }\n            @if (row.state === 'readonly') {\n                @if ((row.value | valueByPath: column.key) === '' || (row.value | valueByPath: column.key) === null) {\n                    <span\n                        [ngStyle]=\"{\n                            position: 'absolute !important',\n                            height: '1px',\n                            width: '1px',\n                            overflow: 'hidden',\n                            clip: 'rect(1px, 1px, 1px, 1px)',\n                            color: 'transparent',\n                            display: 'block'\n                        }\"\n                    >\n                        {{ 'platformTable.emptyCell' | fdTranslate }}\n                    </span>\n                }\n                @if (column?.columnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.columnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    {{ row.value | valueByPath: column.key }}\n                }\n            } @else {\n                @if (column?.editableColumnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.editableColumnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    <fdp-table-editable-cell\n                        [row]=\"row\"\n                        [column]=\"column\"\n                        [columnValue]=\"row.value | valueByPath: column.key\"\n                    ></fdp-table-editable-cell>\n                }\n            }\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n@if (_fdpTableService._isShownNavigationColumn$ | async) {\n    <td fd-table-cell class=\"fdp-table__cell--navigation is-last-child\" fdkDisabled [addDisabledClass]=\"false\">\n        @if (row.navigatable) {\n            <i\n                fd-table-icon\n                [navigation]=\"true\"\n                [class]=\"_rtl ? 'sap-icon--slim-arrow-left' : 'sap-icon--slim-arrow-right'\"\n                class=\"fdp-table__navigation-indicator\"\n            ></i>\n        }\n    </td>\n}\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n", dependencies: [{ kind: "directive", type: TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: FdpCellSelectableDirective, selector: "[fdTableCellSelectable], [fd-table-cell-selectable]", inputs: ["enabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "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: PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TableEditableCellComponent, selector: "fdp-table-editable-cell", inputs: ["row", "column", "columnValue"] }, { kind: "directive", type: TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "navigation"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ValueByPathPipe, name: "valueByPath" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: ColumnResizableSidePipe, name: "columnResizableSide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_focusableViewCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }, { propertyName: "_editableCells", predicate: EditableTableCell, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (_fdpTableService._semanticHighlighting$ | async; as semanticHighlighting) {\n    <td\n        fd-table-cell\n        fd-table-status-indicator\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [status]=\"row.value[semanticHighlighting]\"\n    ></td>\n}\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            fd-table-cell-selectable\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles: _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow()\"\n            (keydown.space)=\"_toggleSingleSelectableRow()\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n        ></td>\n    }\n} @else if (selectionMode === SELECTION_MODE.MULTIPLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.aria-selected]=\"row.checked\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles: _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n        ></td>\n    }\n}\n@for (column of _fdpTableService.visibleColumns$ | async; track column.name) {\n    <td\n        #tableCellElement\n        [fdpTableCellResizable]=\"\n            $index\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength\n                    : (_fdpTableService._isShownNavigationColumn$ | async) === true\n        \"\n        [columnName]=\"column.name\"\n        [focusable]=\"true\"\n        [attr.role]=\"column.role\"\n        [headers]=\"rowId + '__' + column.name\"\n        [ngClass]=\"[\n            'fdp-table__col--' + column.name,\n            column._freezed ? 'fd-table__cell--fixed' : '',\n            column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n            column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n            column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n            row.isTree && $index === 0 ? 'fd-table__cell--expand' : '',\n            $last && (_fdpTableService._isShownNavigationColumn$ | async) === false ? 'is-last-child' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl\n                    : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                    : selectionColumnWidth\n                    : column._freezed\n                    : column._endFreezed\n                    : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                    : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                    : _tableColumnResizeService.getNextColumnsWidth(column.name)\n        \"\n        [attr.aria-expanded]=\"_isTreeRowFirstCell($index, row) ? row.expanded : null\"\n        [attr.data-nesting-level]=\"$index === 0 ? row.level + 1 : null\"\n        (cellFocused)=\"_tableRowService.cellFocused($event)\"\n        (click)=\"_tableRowService.cellClicked({ index: $index, row })\"\n        (keydown.enter)=\"_isTreeRowFirstCell($index, row, $event) && _toggleGroupRow()\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.space)=\"_handleCellSpaceKey($index, tableCellElement, $event)\"\n    >\n        <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n            @if (_isTreeRowFirstCell($index, row)) {\n                <span\n                    class=\"fd-table__expand\"\n                    [class.fd-table__expand--open]=\"row.expanded$ | async\"\n                    aria-hidden=\"true\"\n                ></span>\n            }\n            @if (row.state === 'readonly') {\n                @if ((row.value | valueByPath: column.key) === '' || (row.value | valueByPath: column.key) === null) {\n                    <span\n                        [ngStyle]=\"{\n                            position: 'absolute !important',\n                            height: '1px',\n                            width: '1px',\n                            overflow: 'hidden',\n                            clip: 'rect(1px, 1px, 1px, 1px)',\n                            color: 'transparent',\n                            display: 'block'\n                        }\"\n                    >\n                        {{ 'platformTable.emptyCell' | fdTranslate }}\n                    </span>\n                }\n                @if (column?.columnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.columnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    {{ row.value | valueByPath: column.key }}\n                }\n            } @else {\n                @if (column?.editableColumnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.editableColumnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    <fdp-table-editable-cell\n                        [row]=\"row\"\n                        [column]=\"column\"\n                        [columnValue]=\"row.value | valueByPath: column.key\"\n                    ></fdp-table-editable-cell>\n                }\n            }\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n@if (_fdpTableService._isShownNavigationColumn$ | async) {\n    <td fd-table-cell class=\"fdp-table__cell--navigation is-last-child\" fdkDisabled [addDisabledClass]=\"false\">\n        @if (row.navigatable) {\n            <fd-icon\n                fd-table-icon\n                [navigation]=\"true\"\n                [glyph]=\"_rtl ? 'slim-arrow-left' : 'slim-arrow-right'\"\n                class=\"fdp-table__navigation-indicator\"\n            ></fd-icon>\n        }\n    </td>\n}\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n", dependencies: [{ kind: "directive", type: TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: FdpCellSelectableDirective, selector: "[fdTableCellSelectable], [fd-table-cell-selectable]", inputs: ["enabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "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: PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TableEditableCellComponent, selector: "fdp-table-editable-cell", inputs: ["row", "column", "columnValue"] }, { kind: "directive", type: TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "glyphFont", "navigation"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ValueByPathPipe, name: "valueByPath" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: ColumnResizableSidePipe, name: "columnResizableSide" }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableRowComponent, decorators: [{
             type: Component,
@@ -3189,8 +3189,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                         FdTranslatePipe,
                         SelectionCellStylesPipe,
                         TableCellStylesPipe,
-                        ColumnResizableSidePipe
-                    ], template: "@if (_fdpTableService._semanticHighlighting$ | async; as semanticHighlighting) {\n    <td\n        fd-table-cell\n        fd-table-status-indicator\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [status]=\"row.value[semanticHighlighting]\"\n    ></td>\n}\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            fd-table-cell-selectable\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles: _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow()\"\n            (keydown.space)=\"_toggleSingleSelectableRow()\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n        ></td>\n    }\n} @else if (selectionMode === SELECTION_MODE.MULTIPLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.aria-selected]=\"row.checked\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles: _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n        ></td>\n    }\n}\n@for (column of _fdpTableService.visibleColumns$ | async; track column.name) {\n    <td\n        #tableCellElement\n        [fdpTableCellResizable]=\"\n            $index\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength\n                    : (_fdpTableService._isShownNavigationColumn$ | async) === true\n        \"\n        [columnName]=\"column.name\"\n        [focusable]=\"true\"\n        [attr.role]=\"column.role\"\n        [headers]=\"rowId + '__' + column.name\"\n        [ngClass]=\"[\n            'fdp-table__col--' + column.name,\n            column._freezed ? 'fd-table__cell--fixed' : '',\n            column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n            column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n            column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n            row.isTree && $index === 0 ? 'fd-table__cell--expand' : '',\n            $last && (_fdpTableService._isShownNavigationColumn$ | async) === false ? 'is-last-child' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl\n                    : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                    : selectionColumnWidth\n                    : column._freezed\n                    : column._endFreezed\n                    : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                    : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                    : _tableColumnResizeService.getNextColumnsWidth(column.name)\n        \"\n        [attr.aria-expanded]=\"_isTreeRowFirstCell($index, row) ? row.expanded : null\"\n        [attr.data-nesting-level]=\"$index === 0 ? row.level + 1 : null\"\n        (cellFocused)=\"_tableRowService.cellFocused($event)\"\n        (click)=\"_tableRowService.cellClicked({ index: $index, row })\"\n        (keydown.enter)=\"_isTreeRowFirstCell($index, row, $event) && _toggleGroupRow()\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.space)=\"_handleCellSpaceKey($index, tableCellElement, $event)\"\n    >\n        <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n            @if (_isTreeRowFirstCell($index, row)) {\n                <span\n                    class=\"fd-table__expand\"\n                    [class.fd-table__expand--open]=\"row.expanded$ | async\"\n                    aria-hidden=\"true\"\n                ></span>\n            }\n            @if (row.state === 'readonly') {\n                @if ((row.value | valueByPath: column.key) === '' || (row.value | valueByPath: column.key) === null) {\n                    <span\n                        [ngStyle]=\"{\n                            position: 'absolute !important',\n                            height: '1px',\n                            width: '1px',\n                            overflow: 'hidden',\n                            clip: 'rect(1px, 1px, 1px, 1px)',\n                            color: 'transparent',\n                            display: 'block'\n                        }\"\n                    >\n                        {{ 'platformTable.emptyCell' | fdTranslate }}\n                    </span>\n                }\n                @if (column?.columnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.columnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    {{ row.value | valueByPath: column.key }}\n                }\n            } @else {\n                @if (column?.editableColumnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.editableColumnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    <fdp-table-editable-cell\n                        [row]=\"row\"\n                        [column]=\"column\"\n                        [columnValue]=\"row.value | valueByPath: column.key\"\n                    ></fdp-table-editable-cell>\n                }\n            }\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n@if (_fdpTableService._isShownNavigationColumn$ | async) {\n    <td fd-table-cell class=\"fdp-table__cell--navigation is-last-child\" fdkDisabled [addDisabledClass]=\"false\">\n        @if (row.navigatable) {\n            <i\n                fd-table-icon\n                [navigation]=\"true\"\n                [class]=\"_rtl ? 'sap-icon--slim-arrow-left' : 'sap-icon--slim-arrow-right'\"\n                class=\"fdp-table__navigation-indicator\"\n            ></i>\n        }\n    </td>\n}\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n" }]
+                        ColumnResizableSidePipe,
+                        IconComponent
+                    ], template: "@if (_fdpTableService._semanticHighlighting$ | async; as semanticHighlighting) {\n    <td\n        fd-table-cell\n        fd-table-status-indicator\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [status]=\"row.value[semanticHighlighting]\"\n    ></td>\n}\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            fd-table-cell-selectable\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles: _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow()\"\n            (keydown.space)=\"_toggleSingleSelectableRow()\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n        ></td>\n    }\n} @else if (selectionMode === SELECTION_MODE.MULTIPLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.aria-selected]=\"row.checked\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles: _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n        ></td>\n    }\n}\n@for (column of _fdpTableService.visibleColumns$ | async; track column.name) {\n    <td\n        #tableCellElement\n        [fdpTableCellResizable]=\"\n            $index\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength\n                    : (_fdpTableService._isShownNavigationColumn$ | async) === true\n        \"\n        [columnName]=\"column.name\"\n        [focusable]=\"true\"\n        [attr.role]=\"column.role\"\n        [headers]=\"rowId + '__' + column.name\"\n        [ngClass]=\"[\n            'fdp-table__col--' + column.name,\n            column._freezed ? 'fd-table__cell--fixed' : '',\n            column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n            column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n            column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n            row.isTree && $index === 0 ? 'fd-table__cell--expand' : '',\n            $last && (_fdpTableService._isShownNavigationColumn$ | async) === false ? 'is-last-child' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl\n                    : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                    : selectionColumnWidth\n                    : column._freezed\n                    : column._endFreezed\n                    : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                    : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                    : _tableColumnResizeService.getNextColumnsWidth(column.name)\n        \"\n        [attr.aria-expanded]=\"_isTreeRowFirstCell($index, row) ? row.expanded : null\"\n        [attr.data-nesting-level]=\"$index === 0 ? row.level + 1 : null\"\n        (cellFocused)=\"_tableRowService.cellFocused($event)\"\n        (click)=\"_tableRowService.cellClicked({ index: $index, row })\"\n        (keydown.enter)=\"_isTreeRowFirstCell($index, row, $event) && _toggleGroupRow()\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.space)=\"_handleCellSpaceKey($index, tableCellElement, $event)\"\n    >\n        <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n            @if (_isTreeRowFirstCell($index, row)) {\n                <span\n                    class=\"fd-table__expand\"\n                    [class.fd-table__expand--open]=\"row.expanded$ | async\"\n                    aria-hidden=\"true\"\n                ></span>\n            }\n            @if (row.state === 'readonly') {\n                @if ((row.value | valueByPath: column.key) === '' || (row.value | valueByPath: column.key) === null) {\n                    <span\n                        [ngStyle]=\"{\n                            position: 'absolute !important',\n                            height: '1px',\n                            width: '1px',\n                            overflow: 'hidden',\n                            clip: 'rect(1px, 1px, 1px, 1px)',\n                            color: 'transparent',\n                            display: 'block'\n                        }\"\n                    >\n                        {{ 'platformTable.emptyCell' | fdTranslate }}\n                    </span>\n                }\n                @if (column?.columnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.columnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    {{ row.value | valueByPath: column.key }}\n                }\n            } @else {\n                @if (column?.editableColumnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.editableColumnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    <fdp-table-editable-cell\n                        [row]=\"row\"\n                        [column]=\"column\"\n                        [columnValue]=\"row.value | valueByPath: column.key\"\n                    ></fdp-table-editable-cell>\n                }\n            }\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n@if (_fdpTableService._isShownNavigationColumn$ | async) {\n    <td fd-table-cell class=\"fdp-table__cell--navigation is-last-child\" fdkDisabled [addDisabledClass]=\"false\">\n        @if (row.navigatable) {\n            <fd-icon\n                fd-table-icon\n                [navigation]=\"true\"\n                [glyph]=\"_rtl ? 'slim-arrow-left' : 'slim-arrow-right'\"\n                class=\"fdp-table__navigation-indicator\"\n            ></fd-icon>\n        }\n    </td>\n}\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n" }]
         }], ctorParameters: () => [], propDecorators: { rowId: [{
                 type: Input
             }], row: [{
@@ -4045,6 +4046,18 @@ class TableComponent extends Table {
         const tableEl = this.table.nativeElement;
         tableEl.rows[position.rowIndex].cells[position.colIndex].focus();
     }
+    /**
+     * Clears the array of table rows. Triggered when new data source is applied.
+     */
+    clearTableRows() {
+        this._tableRows = [];
+        this._tableRowsVisible = [];
+        this._tableRowsInViewPortPlaceholder = [];
+        this._newTableRows = [];
+        this._dataSourceTableRows = [];
+        this._setTableRows([]);
+        this._tableService.setCurrentPage(1);
+    }
     // Private API
     /** @hidden */
     _scrollToOverlappedCell() {
@@ -4247,14 +4260,6 @@ class TableComponent extends Table {
     }
     /** @hidden */
     _listenToTableRowsPipe() {
-        this._subscriptions.add(
-        /*
-         * Reset table when the data source is changed,
-         * because new data source can have different set of data
-         */
-        this._dataSourceDirective.dataSourceChanged.subscribe(() => {
-            this._setTableRows([]);
-        }));
         this._subscriptions.add(this._dataSourceDirective.items$
             .pipe(
         // map source items to table rows
@@ -4404,7 +4409,7 @@ class TableComponent extends Table {
             return convertTreeTableRowToFlatList(source, this.rowNavigatable);
         }
         if (isJsObject(item)) {
-            return convertTreeObjectsToTableRows(source, this.selectionMode, this._tableRows, this.rowComparator, this.relationKey, this.hasChildrenKey, this.selectedKey, this.expandedStateKey, this.rowNavigatable);
+            return convertTreeObjectsToTableRows(source, this.selectionMode, this._tableRows, this.rowComparator, this.relationKey, this.hasChildrenKey, this.selectedKey, this.expandedStateKey, this.rowNavigatable, this.enableTristateMode);
         }
         return [];
     }