@fundamental-ngx/platform 0.57.4-rc.8 → 0.57.4

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

@@ -1,6 +1,6 @@
 import { DOWN_ARROW, UP_ARROW, SPACE } from '@angular/cdk/keycodes';
 import * as i0 from '@angular/core';
-import { ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, Inject, signal, inject, DestroyRef, ViewChild, ViewChildren, Input, computed, DOCUMENT, Optional, ContentChild, Host, EventEmitter, Output, forwardRef, Pipe, TemplateRef, Directive, input, output, ContentChildren, HostBinding, ChangeDetectorRef, NgZone, ElementRef, booleanAttribute, NgModule } from '@angular/core';
+import { ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, Inject, signal, inject, DestroyRef, ViewChild, ViewChildren, Input, computed, DOCUMENT, Optional, input, ContentChild, Host, EventEmitter, Output, forwardRef, Pipe, TemplateRef, Directive, output, ContentChildren, HostBinding, ChangeDetectorRef, NgZone, ElementRef, booleanAttribute, NgModule } from '@angular/core';
 import { NgTemplateOutlet, NgStyle, AsyncPipe, NgClass } from '@angular/common';
 import * as i2 from '@fundamental-ngx/cdk/utils';
 import { TemplateDirective, InitialFocusDirective, DisabledBehaviorDirective, FocusableItemDirective, FDK_FOCUSABLE_ITEM_DIRECTIVE, FDK_FOCUSABLE_LIST_DIRECTIVE, RtlService, ValueByPathPipe, uuidv4, destroyObservable, KeyUtil, RangeSelector, resizeObservable, DragAndDropModule, RepeatDirective, IntersectionSpyDirective, FDK_FOCUSABLE_GRID_DIRECTIVE, DndListDirective, FocusableGridDirective } from '@fundamental-ngx/cdk/utils';
@@ -15,7 +15,7 @@ import * as i1 from '@fundamental-ngx/platform/table-helpers';
 import { SortDirection, TableService, Table, ColumnAlign, FILTER_STRING_STRATEGY, FilterableColumnDataType, TableColumn, FdpCellDef, FdpEditableCellDef, FdpHeaderCellDef, TableCellHeaderPopoverDirective, getFilterStrategiesBasedOnDataType, FILTER_STRATEGY, FILTER_STRATEGY_LABEL, getUniqueListValuesByKey, FdpViewSettingsFilterCustomDef, FilterType, TableDataSourceDirective, SelectionMode, TableColumnResizeService, TableRowService, PlatformTableCellResizableDirective, SelectionCellStylesPipe, TableCellStylesPipe, ColumnResizableSidePipe, TableColumnSortingDirectionPipe, isTreeRow, isTreeRowFirstCell, EditableTableCell, TableDraggableDirective, DEFAULT_HIGHLIGHTING_KEY, SEMANTIC_HIGHLIGHTING_COLUMN_WIDTH, ROW_HEIGHT, TABLE_COLUMN_MIN_WIDTH, FDP_TABLE_STATE_DIRECTIVE, FDP_TABLE_VIRTUAL_SCROLL_DIRECTIVE, FDP_TABLE_DRAGGABLE_DIRECTIVE, TableHeaderResizerDirective, isRowNavigatable, TableRowType, buildNewRowSkeleton, EDITABLE_ROW_SEMANTIC_STATE, SaveRowsEvent, getSelectableRows, TableCellActivateEvent, TableRowActivateEvent, TableRowToggleOpenStateEvent, findRowChildren, getRowParents, TableSortChangeEvent, TablePageChangeEvent, TableGroupChangeEvent, TableColumnFreezeEvent, TableFilterChangeEvent, TableColumnsChangeEvent, convertObjectsToTableRows, isTableRow, convertTreeTableRowToFlatList, convertTreeObjectsToTableRows, getFreezableColumns, getFreezableEndColumns, applySelectionToChildren, SELECTION_COLUMN_WIDTH, TableScrollableDirective, RowClassesPipe, TableScrollDispatcherService, TableResponsiveService, TableHelpersModule } from '@fundamental-ngx/platform/table-helpers';
 export * from '@fundamental-ngx/platform/table-helpers';
 import equal$1 from 'fast-deep-equal';
-import { set, uniq } from 'lodash-es';
+import { set, get, uniq } from 'lodash-es';
 import { fromEvent, BehaviorSubject, Subscription, combineLatest, Subject, merge, of } from 'rxjs';
 import { startWith, take, debounceTime, skip, filter, switchMap, takeUntil, map, distinctUntilChanged, tap } from 'rxjs/operators';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
@@ -68,7 +68,7 @@ class ResetButtonComponent {
         [label]="'platformTable.resetChangesButtonLabel' | fdTranslate"
         (click)="resettable.reset()"
         [disabled]="!resettable.isResetAvailable$()"
-    ></button>`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    ></button>`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ResetButtonComponent, decorators: [{
             type: Component,
@@ -207,7 +207,7 @@ class TableCellHeaderPopoverComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableCellHeaderPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TableCellHeaderPopoverComponent, isStandalone: true, selector: "fdp-table-cell-header-popover", inputs: { column: "column", popoverTemplate: "popoverTemplate", disabled: "disabled", columnFrozen: "columnFrozen", filteringFromHeaderDisabled: "filteringFromHeaderDisabled", columnIndex: "columnIndex" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "_listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "_popoverItems", predicate: TemplateDirective, descendants: true }], ngImport: i0, template: "@if (!popoverTemplate) {\n    <fd-popover\n        [placement]=\"mapColumnAlignToPlacement(column?.align)\"\n        [disabled]=\"disabled\"\n        [noArrow]=\"true\"\n        fd-table-popover\n        [focusAutoCapture]=\"true\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"_headerPopoverTriggers\"\n        (isOpenChange)=\"_popoverOpened($event)\"\n    >\n        <fdp-list [noBorder]=\"true\" [navigated]=\"true\" role=\"menu\">\n            @for (item of _popoverItems$(); track item) {\n                <li fdp-free-content-list-item role=\"menuitem\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"item\"\n                        [ngTemplateOutletContext]=\"{ popover: popover }\"\n                    ></ng-template>\n                </li>\n            }\n        </fdp-list>\n    </fd-popover>\n} @else {\n    <ng-template\n        [ngTemplateOutlet]=\"popoverTemplate!\"\n        [ngTemplateOutletContext]=\"{ $implicit: _popoverItems$.asReadonly() }\"\n    ></ng-template>\n}\n@if (column?.sortable) {\n    <ng-template fdkTemplate=\"sortingAscPopoverItem\" let-popover=\"popover\">\n        <div\n            fd-list-link\n            role=\"button\"\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        </div>\n    </ng-template>\n    <ng-template fdkTemplate=\"sortingDescPopoverItem\" let-popover=\"popover\">\n        <div\n            fd-list-link\n            role=\"button\"\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        </div>\n    </ng-template>\n}\n@if (column?.groupable) {\n    <ng-template fdkTemplate=\"groupPopoverItem\" let-popover=\"popover\">\n        <div\n            fd-list-link\n            role=\"button\"\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderGroupBy(column.key)\"\n            (keydown.enter)=\"_setColumnHeaderGroupBy(column.key)\"\n        >\n            <span fd-list-title>{{ 'platformTable.headerMenuGroup' | fdTranslate }}</span>\n        </div>\n    </ng-template>\n}\n@if (column?.freezable || column?.endFreezable) {\n    <ng-template fdkTemplate=\"freezePopoverItem\" let-popover=\"popover\">\n        @if (!columnFrozen) {\n            <div fd-list-link role=\"button\" [focusable]=\"true\" (click)=\"_freeze()\" (keydown.enter)=\"_freeze()\">\n                <span fd-list-title>{{\n                    (!column.endFreezable\n                        ? columnIndex > 0\n                            ? 'platformTable.headerMenuFreezePlural'\n                            : 'platformTable.headerMenuFreeze'\n                        : 'platformTable.headerMenuEndFreeze'\n                    ) | fdTranslate\n                }}</span>\n            </div>\n        } @else {\n            <div fd-list-link role=\"button\" [focusable]=\"true\" (click)=\"_unFreeze()\" (keydown.enter)=\"_unFreeze()\">\n                <span fd-list-title>{{\n                    (columnIndex > 0 ? 'platformTable.headerMenuUnfreezePlural' : 'platformTable.headerMenuUnfreeze')\n                        | fdTranslate\n                }}</span>\n            </div>\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'\" [focusable]=\"true\">\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                    (keydown)=\"$event.stopPropagation()\"\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", "preventSpaceKeyScroll"] }, { 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, li[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", "ariaHidden"] }, { 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", "allowWrap", "inlineHelpLabel", "id"] }, { 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: "20.1.4", type: TableCellHeaderPopoverComponent, isStandalone: true, selector: "fdp-table-cell-header-popover", inputs: { column: "column", popoverTemplate: "popoverTemplate", disabled: "disabled", columnFrozen: "columnFrozen", filteringFromHeaderDisabled: "filteringFromHeaderDisabled", columnIndex: "columnIndex" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "_listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "_popoverItems", predicate: TemplateDirective, descendants: true }], ngImport: i0, template: "@if (!popoverTemplate) {\n    <fd-popover\n        [placement]=\"mapColumnAlignToPlacement(column?.align)\"\n        [disabled]=\"disabled\"\n        [noArrow]=\"true\"\n        fd-table-popover\n        [focusAutoCapture]=\"true\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"_headerPopoverTriggers\"\n        (isOpenChange)=\"_popoverOpened($event)\"\n    >\n        <fdp-list [noBorder]=\"true\" [navigated]=\"true\" role=\"menu\">\n            @for (item of _popoverItems$(); track item) {\n                <li fdp-free-content-list-item role=\"menuitem\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"item\"\n                        [ngTemplateOutletContext]=\"{ popover: popover }\"\n                    ></ng-template>\n                </li>\n            }\n        </fdp-list>\n    </fd-popover>\n} @else {\n    <ng-template\n        [ngTemplateOutlet]=\"popoverTemplate!\"\n        [ngTemplateOutletContext]=\"{ $implicit: _popoverItems$.asReadonly() }\"\n    ></ng-template>\n}\n@if (column?.sortable) {\n    <ng-template fdkTemplate=\"sortingAscPopoverItem\" let-popover=\"popover\">\n        <div\n            fd-list-link\n            role=\"button\"\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        </div>\n    </ng-template>\n    <ng-template fdkTemplate=\"sortingDescPopoverItem\" let-popover=\"popover\">\n        <div\n            fd-list-link\n            role=\"button\"\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        </div>\n    </ng-template>\n}\n@if (column?.groupable) {\n    <ng-template fdkTemplate=\"groupPopoverItem\" let-popover=\"popover\">\n        <div\n            fd-list-link\n            role=\"button\"\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderGroupBy(column.key)\"\n            (keydown.enter)=\"_setColumnHeaderGroupBy(column.key)\"\n        >\n            <span fd-list-title>{{ 'platformTable.headerMenuGroup' | fdTranslate }}</span>\n        </div>\n    </ng-template>\n}\n@if (column?.freezable || column?.endFreezable) {\n    <ng-template fdkTemplate=\"freezePopoverItem\" let-popover=\"popover\">\n        @if (!columnFrozen) {\n            <div fd-list-link role=\"button\" [focusable]=\"true\" (click)=\"_freeze()\" (keydown.enter)=\"_freeze()\">\n                <span fd-list-title>{{\n                    (!column.endFreezable\n                        ? columnIndex > 0\n                            ? 'platformTable.headerMenuFreezePlural'\n                            : 'platformTable.headerMenuFreeze'\n                        : 'platformTable.headerMenuEndFreeze'\n                    ) | fdTranslate\n                }}</span>\n            </div>\n        } @else {\n            <div fd-list-link role=\"button\" [focusable]=\"true\" (click)=\"_unFreeze()\" (keydown.enter)=\"_unFreeze()\">\n                <span fd-list-title>{{\n                    (columnIndex > 0 ? 'platformTable.headerMenuUnfreezePlural' : 'platformTable.headerMenuUnfreeze')\n                        | fdTranslate\n                }}</span>\n            </div>\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'\" [focusable]=\"true\">\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                    (keydown)=\"$event.stopPropagation()\"\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", "preventSpaceKeyScroll"] }, { 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, li[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", "ariaHidden"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { 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", "allowWrap", "inlineHelpLabel", "id"] }, { 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: "20.1.4", ngImport: i0, type: TableCellHeaderPopoverComponent, decorators: [{
             type: Component,
@@ -416,6 +416,8 @@ class TableColumnComponent extends TableColumn {
         this.applyText = true;
         /** Column role attribute. */
         this.role = 'gridcell';
+        /** Whether to announce empty cells to screen readers. Default is true. */
+        this.announceEmptyCell = input(true, ...(ngDevMode ? [{ debugName: "announceEmptyCell" }] : []));
         /** Label change event */
         this.labelValueChanges$ = new BehaviorSubject('');
         /** Stores information for the header cell if the ellipsis are visible after the column resize */
@@ -445,7 +447,7 @@ class TableColumnComponent extends TableColumn {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableColumnComponent, deps: [{ token: i1.TableColumnResizeService }, { token: i1.TableService, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: TableColumnComponent, isStandalone: true, selector: "fdp-column", inputs: { name: "name", key: "key", label: "label", footerLabel: "footerLabel", footerCellTemplate: "footerCellTemplate", align: "align", sortable: "sortable", filterable: "filterable", visible: "visible", dataType: "dataType", filterSelectOptions: "filterSelectOptions", groupable: "groupable", freezable: "freezable", endFreezable: "endFreezable", nonInteractive: "nonInteractive", width: "width", noWrap: "noWrap", applyText: "applyText", role: "role" }, providers: [{ provide: TableColumn, useExisting: TableColumnComponent }], queries: [{ propertyName: "fdpCellDef", first: true, predicate: FdpCellDef, descendants: true }, { propertyName: "fdpEditableCellDef", first: true, predicate: FdpEditableCellDef, descendants: true }, { propertyName: "fdpHeaderCellDef", first: true, predicate: FdpHeaderCellDef, descendants: true }, { propertyName: "fdpHeaderCellPopover", first: true, predicate: TableCellHeaderPopoverDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: TableColumnComponent, isStandalone: true, selector: "fdp-column", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, footerLabel: { classPropertyName: "footerLabel", publicName: "footerLabel", isSignal: false, isRequired: false, transformFunction: null }, footerCellTemplate: { classPropertyName: "footerCellTemplate", publicName: "footerCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: false, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: false, isRequired: false, transformFunction: null }, filterSelectOptions: { classPropertyName: "filterSelectOptions", publicName: "filterSelectOptions", isSignal: false, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: false, isRequired: false, transformFunction: null }, freezable: { classPropertyName: "freezable", publicName: "freezable", isSignal: false, isRequired: false, transformFunction: null }, endFreezable: { classPropertyName: "endFreezable", publicName: "endFreezable", isSignal: false, isRequired: false, transformFunction: null }, nonInteractive: { classPropertyName: "nonInteractive", publicName: "nonInteractive", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, noWrap: { classPropertyName: "noWrap", publicName: "noWrap", isSignal: false, isRequired: false, transformFunction: null }, applyText: { classPropertyName: "applyText", publicName: "applyText", isSignal: false, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: false, isRequired: false, transformFunction: null }, announceEmptyCell: { classPropertyName: "announceEmptyCell", publicName: "announceEmptyCell", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: TableColumn, useExisting: TableColumnComponent }], queries: [{ propertyName: "fdpCellDef", first: true, predicate: FdpCellDef, descendants: true }, { propertyName: "fdpEditableCellDef", first: true, predicate: FdpEditableCellDef, descendants: true }, { propertyName: "fdpHeaderCellDef", first: true, predicate: FdpHeaderCellDef, descendants: true }, { propertyName: "fdpHeaderCellPopover", first: true, predicate: TableCellHeaderPopoverDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableColumnComponent, decorators: [{
             type: Component,
@@ -810,7 +812,7 @@ class P13ColumnsDialogComponent {
         this._moveDownDisabled = activeIndex < 0 || activeIndex >= this._filteredColumns.length - 1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.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: "20.1.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        </fd-toolbar>\n        <ul fd-list [selection]=\"true\" aria-multiselectable=\"true\">\n            <li\n                fd-list-item\n                (focus)=\"_setActiveColumn(null)\"\n                [selected]=\"_selectedColumnsCount === _selectableColumns.length\"\n            >\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                    [preventClick]=\"true\"\n                    [class.fd-select-item--selected]=\"item.selected\"\n                    [selected]=\"item.selected\"\n                    [class.fd-select-item--active]=\"item.active\"\n                    (focus)=\"_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\n                    <!-- Active Button Movement -->\n                    @if (_isReorderColumnButtonShowable(item)) {\n                        <button\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($event)\"\n                            (keydown.enter)=\"_moveActiveToTop($event)\"\n                        ></button>\n                    }\n                    @if (_isReorderColumnButtonShowable(item)) {\n                        <button\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($event)\"\n                            (keydown.enter)=\"_moveActiveUp($event)\"\n                        ></button>\n                    }\n                    @if (_isReorderColumnButtonShowable(item)) {\n                        <button\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($event)\"\n                            (keydown.enter)=\"_moveActiveDown($event)\"\n                        ></button>\n                    }\n                    @if (_isReorderColumnButtonShowable(item)) {\n                        <button\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($event)\"\n                            (keydown.enter)=\"_moveActiveToBottom($event)\"\n                        ></button>\n                    }\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:10}.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: "[fd-title], [fdTitle]", 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", inputs: ["disablePaddings"] }, { kind: "component", type: ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "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", "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], span[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", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "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: "20.1.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        </fd-toolbar>\n        <ul fd-list [selection]=\"true\" aria-multiselectable=\"true\">\n            <li\n                fd-list-item\n                (focus)=\"_setActiveColumn(null)\"\n                [selected]=\"_selectedColumnsCount === _selectableColumns.length\"\n            >\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                    [preventClick]=\"true\"\n                    [class.fd-select-item--selected]=\"item.selected\"\n                    [selected]=\"item.selected\"\n                    [class.fd-select-item--active]=\"item.active\"\n                    (focus)=\"_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\n                    <!-- Active Button Movement -->\n                    @if (_isReorderColumnButtonShowable(item)) {\n                        <button\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($event)\"\n                            (keydown.enter)=\"_moveActiveToTop($event)\"\n                        ></button>\n                    }\n                    @if (_isReorderColumnButtonShowable(item)) {\n                        <button\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($event)\"\n                            (keydown.enter)=\"_moveActiveUp($event)\"\n                        ></button>\n                    }\n                    @if (_isReorderColumnButtonShowable(item)) {\n                        <button\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($event)\"\n                            (keydown.enter)=\"_moveActiveDown($event)\"\n                        ></button>\n                    }\n                    @if (_isReorderColumnButtonShowable(item)) {\n                        <button\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($event)\"\n                            (keydown.enter)=\"_moveActiveToBottom($event)\"\n                        ></button>\n                    }\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:10}.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: "[fd-title], [fdTitle]", 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", inputs: ["disablePaddings"] }, { kind: "component", type: ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "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", "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], span[fd-button]", inputs: ["class", "id"], 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", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "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: "20.1.4", ngImport: i0, type: P13ColumnsDialogComponent, decorators: [{
             type: Component,
@@ -1163,7 +1165,7 @@ class P13FilteringDialogComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: P13FilteringDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: P13FilteringDialogComponent, isStandalone: true, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13FilteringDialogComponent }], ngImport: i0, template: "<fd-dialog class=\"fdp-table-p13-filtering-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.P13FilterDialogHeader' | 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        <!-- Include Rules -->\n        <fd-panel [expanded]=\"_includePanelExpanded\">\n            <div fd-panel-title>\n                {{\n                    (_validIncludeRulesCount > 0\n                        ? 'platformTable.P13FilterDialogIncludePanelTitleWithCount'\n                        : 'platformTable.P13FilterDialogIncludePanelTitleWithoutCount'\n                    ) | fdTranslate: { count: _validIncludeRulesCount }\n                }}\n            </div>\n            <div fd-panel-content>\n                @for (rule of _includeRules; track rule) {\n                    <fd-layout-grid>\n                        <div fdLayoutGridRow>\n                            <fdp-table-filter-rule\n                                [fdLayoutGridCol]=\"10\"\n                                [rule]=\"rule\"\n                                (ruleChange)=\"_recalculateResetAvailability()\"\n                                (ruleStateChange)=\"_onRuleStateChange()\"\n                            ></fdp-table-filter-rule>\n                            <!-- Actions buttons -->\n                            <div [fdLayoutGridCol]=\"2\">\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    glyph=\"sys-cancel\"\n                                    [attr.aria-label]=\"\n                                        'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\n                                    \"\n                                    [title]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                    (click)=\"_removeRule(rule, _includeRules)\"\n                                ></button>\n                                @if (_includeRules.length - 1 === $index) {\n                                    <button\n                                        fd-button\n                                        fdType=\"transparent\"\n                                        glyph=\"add\"\n                                        [attr.aria-label]=\"\n                                            'platformTable.P13FilterDialogAddFilterBtnTitle' | fdTranslate\n                                        \"\n                                        [title]=\"'platformTable.P13FilterDialogAddFilterBtnTitle' | fdTranslate\"\n                                        (click)=\"_addNewRule(_includeRules)\"\n                                    ></button>\n                                }\n                            </div>\n                        </div>\n                    </fd-layout-grid>\n                }\n            </div>\n        </fd-panel>\n        <!-- Exclude Rules -->\n        <fd-panel [expanded]=\"_excludePanelExpanded\">\n            <div fd-panel-title>\n                {{\n                    (_validExcludeRulesCount > 0\n                        ? 'platformTable.P13FilterDialogExcludePanelTitleWithCount'\n                        : 'platformTable.P13FilterDialogExcludePanelTitleWithoutCount'\n                    ) | fdTranslate: { count: _validExcludeRulesCount }\n                }}\n            </div>\n            <div fd-panel-content>\n                @for (rule of _excludeRules; track rule) {\n                    <fd-layout-grid>\n                        <div fdLayoutGridRow>\n                            <fdp-table-filter-rule\n                                [fdLayoutGridCol]=\"10\"\n                                [rule]=\"rule\"\n                                (ruleChange)=\"_recalculateResetAvailability()\"\n                                (ruleStateChange)=\"_onRuleStateChange()\"\n                            ></fdp-table-filter-rule>\n                            <!-- Actions buttons -->\n                            <div [fdLayoutGridCol]=\"2\">\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    glyph=\"sys-cancel\"\n                                    [attr.aria-label]=\"\n                                        'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\n                                    \"\n                                    [title]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                    (click)=\"_removeRule(rule, _excludeRules)\"\n                                ></button>\n                                @if (_excludeRules.length - 1 === $index) {\n                                    <button\n                                        fd-button\n                                        fdType=\"transparent\"\n                                        glyph=\"add\"\n                                        [attr.aria-label]=\"\n                                            'platformTable.P13FilterDialogAddFilterBtnTitle' | fdTranslate\n                                        \"\n                                        [title]=\"'platformTable.P13FilterDialogAddFilterBtnTitle' | fdTranslate\"\n                                        (click)=\"_addNewRule(_excludeRules)\"\n                                    ></button>\n                                }\n                            </div>\n                        </div>\n                    </fd-layout-grid>\n                }\n            </div>\n        </fd-panel>\n    </fd-dialog-body>\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.P13FilterDialogConfirmationBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            fdType=\"transparent\"\n            [label]=\"'platformTable.P13FilterDialogCancelBtnLabel' | fdTranslate\"\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-filtering-dialog .filter-row__input,.fdp-table-p13-filtering-dialog .filter-row__select{display:block;max-width:100%}.fdp-table-p13-filtering-dialog .fd-popover-custom{display:block}\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: "[fd-title], [fdTitle]", 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", inputs: ["disablePaddings"] }, { kind: "component", type: PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded", "transparent", "noRadius"], outputs: ["expandedChange"] }, { kind: "directive", type: PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "directive", type: PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "noPadding", "transparent", "id"] }, { kind: "component", type: LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: FilterRuleComponent, selector: "fdp-table-filter-rule", inputs: ["rule"], outputs: ["ruleChange", "ruleStateChange"] }, { kind: "directive", type: LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[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", "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: "20.1.4", type: P13FilteringDialogComponent, isStandalone: true, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13FilteringDialogComponent }], ngImport: i0, template: "<fd-dialog class=\"fdp-table-p13-filtering-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.P13FilterDialogHeader' | 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        <!-- Include Rules -->\n        <fd-panel [expanded]=\"_includePanelExpanded\">\n            <div fd-panel-title>\n                {{\n                    (_validIncludeRulesCount > 0\n                        ? 'platformTable.P13FilterDialogIncludePanelTitleWithCount'\n                        : 'platformTable.P13FilterDialogIncludePanelTitleWithoutCount'\n                    ) | fdTranslate: { count: _validIncludeRulesCount }\n                }}\n            </div>\n            <div fd-panel-content>\n                @for (rule of _includeRules; track rule) {\n                    <fd-layout-grid>\n                        <div fdLayoutGridRow>\n                            <fdp-table-filter-rule\n                                [fdLayoutGridCol]=\"10\"\n                                [rule]=\"rule\"\n                                (ruleChange)=\"_recalculateResetAvailability()\"\n                                (ruleStateChange)=\"_onRuleStateChange()\"\n                            ></fdp-table-filter-rule>\n                            <!-- Actions buttons -->\n                            <div [fdLayoutGridCol]=\"2\">\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    glyph=\"sys-cancel\"\n                                    [attr.aria-label]=\"\n                                        'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\n                                    \"\n                                    [title]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                    (click)=\"_removeRule(rule, _includeRules)\"\n                                ></button>\n                                @if (_includeRules.length - 1 === $index) {\n                                    <button\n                                        fd-button\n                                        fdType=\"transparent\"\n                                        glyph=\"add\"\n                                        [attr.aria-label]=\"\n                                            'platformTable.P13FilterDialogAddFilterBtnTitle' | fdTranslate\n                                        \"\n                                        [title]=\"'platformTable.P13FilterDialogAddFilterBtnTitle' | fdTranslate\"\n                                        (click)=\"_addNewRule(_includeRules)\"\n                                    ></button>\n                                }\n                            </div>\n                        </div>\n                    </fd-layout-grid>\n                }\n            </div>\n        </fd-panel>\n        <!-- Exclude Rules -->\n        <fd-panel [expanded]=\"_excludePanelExpanded\">\n            <div fd-panel-title>\n                {{\n                    (_validExcludeRulesCount > 0\n                        ? 'platformTable.P13FilterDialogExcludePanelTitleWithCount'\n                        : 'platformTable.P13FilterDialogExcludePanelTitleWithoutCount'\n                    ) | fdTranslate: { count: _validExcludeRulesCount }\n                }}\n            </div>\n            <div fd-panel-content>\n                @for (rule of _excludeRules; track rule) {\n                    <fd-layout-grid>\n                        <div fdLayoutGridRow>\n                            <fdp-table-filter-rule\n                                [fdLayoutGridCol]=\"10\"\n                                [rule]=\"rule\"\n                                (ruleChange)=\"_recalculateResetAvailability()\"\n                                (ruleStateChange)=\"_onRuleStateChange()\"\n                            ></fdp-table-filter-rule>\n                            <!-- Actions buttons -->\n                            <div [fdLayoutGridCol]=\"2\">\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    glyph=\"sys-cancel\"\n                                    [attr.aria-label]=\"\n                                        'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\n                                    \"\n                                    [title]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                    (click)=\"_removeRule(rule, _excludeRules)\"\n                                ></button>\n                                @if (_excludeRules.length - 1 === $index) {\n                                    <button\n                                        fd-button\n                                        fdType=\"transparent\"\n                                        glyph=\"add\"\n                                        [attr.aria-label]=\"\n                                            'platformTable.P13FilterDialogAddFilterBtnTitle' | fdTranslate\n                                        \"\n                                        [title]=\"'platformTable.P13FilterDialogAddFilterBtnTitle' | fdTranslate\"\n                                        (click)=\"_addNewRule(_excludeRules)\"\n                                    ></button>\n                                }\n                            </div>\n                        </div>\n                    </fd-layout-grid>\n                }\n            </div>\n        </fd-panel>\n    </fd-dialog-body>\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.P13FilterDialogConfirmationBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            fdType=\"transparent\"\n            [label]=\"'platformTable.P13FilterDialogCancelBtnLabel' | fdTranslate\"\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-filtering-dialog .filter-row__input,.fdp-table-p13-filtering-dialog .filter-row__select{display:block;max-width:100%}.fdp-table-p13-filtering-dialog .fd-popover-custom{display:block}\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: "[fd-title], [fdTitle]", 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", inputs: ["disablePaddings"] }, { kind: "component", type: PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded", "transparent", "noRadius"], outputs: ["expandedChange"] }, { kind: "directive", type: PanelTitleDirective, selector: "[fd-panel-title]", inputs: ["id"] }, { kind: "directive", type: PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "noPadding", "transparent", "id"] }, { kind: "component", type: LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: FilterRuleComponent, selector: "fdp-table-filter-rule", inputs: ["rule"], outputs: ["ruleChange", "ruleStateChange"] }, { kind: "directive", type: LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: P13FilteringDialogComponent, decorators: [{
             type: Component,
@@ -1297,7 +1299,7 @@ class P13GroupingDialogComponent {
         return getUniqueListValuesByKey(rules, 'columnKey');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: P13GroupingDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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; let i = $index) {\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 getAvailableColumns(rule); 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                        [disabled]=\"!rule.columnKey\"\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(i)\"\n                        [disabled]=\"rules.length >= columns.length || !rule.columnKey\"\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            [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: "[fd-title], [fdTitle]", 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", inputs: ["disablePaddings"] }, { kind: "component", type: SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "textOverflow", "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", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[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", "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: "20.1.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; let i = $index) {\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 getAvailableColumns(rule); 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                        [disabled]=\"!rule.columnKey\"\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(i)\"\n                        [disabled]=\"rules.length >= columns.length || !rule.columnKey\"\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            [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: "[fd-title], [fdTitle]", 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", inputs: ["disablePaddings"] }, { kind: "component", type: SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "textOverflow", "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", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: P13GroupingDialogComponent, decorators: [{
             type: Component,
@@ -1507,7 +1509,7 @@ class P13SortingDialogComponent {
         return getUniqueListValuesByKey(rules, 'columnKey');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.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: "20.1.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            [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: "[fd-title], [fdTitle]", 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", inputs: ["disablePaddings"] }, { kind: "component", type: i0.forwardRef(() => SelectComponent), selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "textOverflow", "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], span[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", "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: "20.1.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            [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: "[fd-title], [fdTitle]", 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", inputs: ["disablePaddings"] }, { kind: "component", type: i0.forwardRef(() => SelectComponent), selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "textOverflow", "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], span[fd-button]", inputs: ["class", "id"], 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", "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: "20.1.4", ngImport: i0, type: P13SortingDialogComponent, decorators: [{
             type: Component,
@@ -2023,7 +2025,7 @@ class TableToolbarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableToolbarComponent, deps: [{ token: i1.TableService }, { token: i1.Table }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TableToolbarComponent, isStandalone: true, selector: "fdp-table-toolbar", inputs: { shouldOverflow: "shouldOverflow", title: "title", searchFieldAriaLabel: "searchFieldAriaLabel", hideItemCount: "hideItemCount", hideSearchInput: "hideSearchInput", searchFieldPlaceholder: "searchFieldPlaceholder", showExpandCollapseButtons: "showExpandCollapseButtons", searchSuggestions: "searchSuggestions", editMode: "editMode", disableRefresh: "disableRefresh", disableSearch: "disableSearch", headingLevel: "headingLevel", searchFieldInputText: "searchFieldInputText" }, outputs: { searchFieldInputChange: "searchFieldInputChange" }, 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    fdpTableToolbarTemplate\n    let-counter=\"counter\"\n    let-sortable=\"sortable\"\n    let-filterable=\"filterable\"\n    let-groupable=\"groupable\"\n    let-columns=\"columns\"\n    let-settings=\"settings\"\n    let-hasAnyActions=\"hasAnyActions\"\n    let-appliedFilters=\"appliedFilters\"\n>\n    <fd-toolbar\n        fdType=\"transparent\"\n        [titleId]=\"tableToolbarTitleId\"\n        [title]=\"title && !hideItemCount ? title + ' (' + counter() + ')' : title\"\n        [shouldOverflow]=\"shouldOverflow\"\n        [headingLevel]=\"headingLevel\"\n    >\n        @if (_tableToolbarLeftActionsComponent) {\n            <div fd-toolbar-item class=\"fd-toolbar__group\">\n                @if (!!title || !hideItemCount) {\n                    <fd-toolbar-separator></fd-toolbar-separator>\n                }\n                <ng-template [ngTemplateOutlet]=\"_tableToolbarLeftActionsComponent._contentTemplateRef\"></ng-template>\n            </div>\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]=\"\n                    searchFieldPlaceholder\n                        ? searchFieldPlaceholder\n                        : ('platformTable.toolbarSearchPlaceholder' | fdTranslate)\n                \"\n                [inputText]=\"_searchInputText\"\n                [disabled]=\"!!(tableLoading$ | async)\"\n                [suggestions]=\"searchSuggestions\"\n                [disableRefresh]=\"disableRefresh\"\n                [disableSearch]=\"disableSearch\"\n                [ariaLabel]=\"searchFieldAriaLabel\"\n                [ariaLabelledBy]=\"searchFieldAriaLabel ? null : tableToolbarTitleId\"\n                (searchSubmit)=\"submitSearch($event)\"\n                (cancelSearch)=\"submitSearch($event)\"\n                [disableSuggestionsFoundAnnouncer]=\"true\"\n                (inputChange)=\"searchInputChanged($event)\"\n            ></fdp-search-field>\n        }\n        @if (editMode !== 'none') {\n            <button\n                fd-button\n                fd-toolbar-item\n                [label]=\"'platformTable.toolbarActionCreateButtonLabel' | fdTranslate\"\n                (click)=\"_addRow()\"\n            ></button>\n            @if (_showSaveButton) {\n                @if (_showSaveButton) {\n                    <button\n                        fd-button\n                        fd-toolbar-item\n                        [label]=\"'platformTable.toolbarActionSaveButtonLabel' | fdTranslate\"\n                        (click)=\"_saveRows()\"\n                    ></button>\n                }\n                <fd-toolbar-separator></fd-toolbar-separator>\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    [label]=\"'platformTable.toolbarActionCancelButtonLabel' | fdTranslate\"\n                    (click)=\"_cancelEditing()\"\n                    fdType=\"transparent\"\n                ></button>\n            }\n            @if (tableToolbarActionsComponent || hasAnyActions()) {\n                <fd-toolbar-separator fd-toolbar-item></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 (showExpandCollapseButtons || hasAnyActions()) {\n            @if (tableToolbarActionsComponent) {\n                <fd-toolbar-separator fd-toolbar-item></fd-toolbar-separator>\n            }\n            @if (showExpandCollapseButtons) {\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    glyph=\"expand-all\"\n                    (click)=\"_expandAll()\"\n                    [title]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    fdType=\"transparent\"\n                ></button>\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    glyph=\"collapse-all\"\n                    (click)=\"_collapseAll()\"\n                    [title]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    fdType=\"transparent\"\n                ></button>\n            }\n            @if (settings()) {\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"action-settings\"\n                    [title]=\"'platformTable.toolbarActionButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionButtonTitle' | fdTranslate\"\n                    fdType=\"transparent\"\n                    aria-haspopup=\"dialog\"\n                    (click)=\"openSorting()\"\n                ></button>\n            }\n            @if (sortable()) {\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    glyph=\"sort\"\n                    [title]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                    fdType=\"transparent\"\n                    aria-haspopup=\"dialog\"\n                    (click)=\"openSorting()\"\n                ></button>\n            }\n            @if (filterable()) {\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    glyph=\"filter\"\n                    [title]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                    fdType=\"transparent\"\n                    aria-haspopup=\"dialog\"\n                    (click)=\"openFiltering()\"\n                ></button>\n            }\n            @if (groupable()) {\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    glyph=\"group-2\"\n                    [title]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                    fdType=\"transparent\"\n                    aria-haspopup=\"dialog\"\n                    (click)=\"openGrouping()\"\n                ></button>\n            }\n            @if (columns()) {\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"action-settings\"\n                    [title]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                    fdType=\"transparent\"\n                    aria-haspopup=\"dialog\"\n                    (click)=\"openColumns()\"\n                ></button>\n            }\n        }\n    </fd-toolbar>\n    @if (appliedFilters().length) {\n        <fd-toolbar\n            fdType=\"info\"\n            class=\"fdp-table__applied-filters-toolbar\"\n            [active]=\"true\"\n            [titleId]=\"tableToolbarTitleId\"\n            [shouldOverflow]=\"shouldOverflow\"\n            [headingLevel]=\"headingLevel\"\n        >\n            <label fd-toolbar-label>\n                {{ 'platformTable.filteredBy' | fdTranslate }}:\n                {{ _formatAppliedFilters(appliedFilters()) }}\n            </label>\n            <fd-toolbar-spacer></fd-toolbar-spacer>\n            <button\n                fdCompact\n                (click)=\"_closeFilterToolbar()\"\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"decline\"\n                [title]=\"'platformTable.clearFilters' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.clearFilters' | fdTranslate\"\n            ></button>\n        </fd-toolbar>\n    }\n</ng-template>\n", dependencies: [{ kind: "component", type: ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "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", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: TableToolbarTemplateDirective, selector: "[fdpTableToolbarTemplate]" }, { kind: "directive", type: ToolbarLabelDirective, selector: "[fd-toolbar-label]" }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { 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: "20.1.4", type: TableToolbarComponent, isStandalone: true, selector: "fdp-table-toolbar", inputs: { shouldOverflow: "shouldOverflow", title: "title", searchFieldAriaLabel: "searchFieldAriaLabel", hideItemCount: "hideItemCount", hideSearchInput: "hideSearchInput", searchFieldPlaceholder: "searchFieldPlaceholder", showExpandCollapseButtons: "showExpandCollapseButtons", searchSuggestions: "searchSuggestions", editMode: "editMode", disableRefresh: "disableRefresh", disableSearch: "disableSearch", headingLevel: "headingLevel", searchFieldInputText: "searchFieldInputText" }, outputs: { searchFieldInputChange: "searchFieldInputChange" }, 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    fdpTableToolbarTemplate\n    let-counter=\"counter\"\n    let-sortable=\"sortable\"\n    let-filterable=\"filterable\"\n    let-groupable=\"groupable\"\n    let-columns=\"columns\"\n    let-settings=\"settings\"\n    let-hasAnyActions=\"hasAnyActions\"\n    let-appliedFilters=\"appliedFilters\"\n>\n    <fd-toolbar\n        fdType=\"transparent\"\n        [titleId]=\"tableToolbarTitleId\"\n        [title]=\"title && !hideItemCount ? title + ' (' + counter() + ')' : title\"\n        [shouldOverflow]=\"shouldOverflow\"\n        [headingLevel]=\"headingLevel\"\n    >\n        @if (_tableToolbarLeftActionsComponent) {\n            <div fd-toolbar-item class=\"fd-toolbar__group\">\n                @if (!!title || !hideItemCount) {\n                    <fd-toolbar-separator></fd-toolbar-separator>\n                }\n                <ng-template [ngTemplateOutlet]=\"_tableToolbarLeftActionsComponent._contentTemplateRef\"></ng-template>\n            </div>\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]=\"\n                    searchFieldPlaceholder\n                        ? searchFieldPlaceholder\n                        : ('platformTable.toolbarSearchPlaceholder' | fdTranslate)\n                \"\n                [inputText]=\"_searchInputText\"\n                [disabled]=\"!!(tableLoading$ | async)\"\n                [suggestions]=\"searchSuggestions\"\n                [disableRefresh]=\"disableRefresh\"\n                [disableSearch]=\"disableSearch\"\n                [ariaLabel]=\"searchFieldAriaLabel\"\n                [ariaLabelledBy]=\"searchFieldAriaLabel ? null : tableToolbarTitleId\"\n                (searchSubmit)=\"submitSearch($event)\"\n                (cancelSearch)=\"submitSearch($event)\"\n                [disableSuggestionsFoundAnnouncer]=\"true\"\n                (inputChange)=\"searchInputChanged($event)\"\n            ></fdp-search-field>\n        }\n        @if (editMode !== 'none') {\n            <button\n                fd-button\n                fd-toolbar-item\n                [label]=\"'platformTable.toolbarActionCreateButtonLabel' | fdTranslate\"\n                (click)=\"_addRow()\"\n            ></button>\n            @if (_showSaveButton) {\n                @if (_showSaveButton) {\n                    <button\n                        fd-button\n                        fd-toolbar-item\n                        [label]=\"'platformTable.toolbarActionSaveButtonLabel' | fdTranslate\"\n                        (click)=\"_saveRows()\"\n                    ></button>\n                }\n                <fd-toolbar-separator></fd-toolbar-separator>\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    [label]=\"'platformTable.toolbarActionCancelButtonLabel' | fdTranslate\"\n                    (click)=\"_cancelEditing()\"\n                    fdType=\"transparent\"\n                ></button>\n            }\n            @if (tableToolbarActionsComponent || hasAnyActions()) {\n                <fd-toolbar-separator fd-toolbar-item></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 (showExpandCollapseButtons || hasAnyActions()) {\n            @if (tableToolbarActionsComponent) {\n                <fd-toolbar-separator fd-toolbar-item></fd-toolbar-separator>\n            }\n            @if (showExpandCollapseButtons) {\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    glyph=\"expand-all\"\n                    (click)=\"_expandAll()\"\n                    [title]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    fdType=\"transparent\"\n                ></button>\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    glyph=\"collapse-all\"\n                    (click)=\"_collapseAll()\"\n                    [title]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    fdType=\"transparent\"\n                ></button>\n            }\n            @if (settings()) {\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"action-settings\"\n                    [title]=\"'platformTable.toolbarActionButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionButtonTitle' | fdTranslate\"\n                    fdType=\"transparent\"\n                    aria-haspopup=\"dialog\"\n                    (click)=\"openSorting()\"\n                ></button>\n            }\n            @if (sortable()) {\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    glyph=\"sort\"\n                    [title]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                    fdType=\"transparent\"\n                    aria-haspopup=\"dialog\"\n                    (click)=\"openSorting()\"\n                ></button>\n            }\n            @if (filterable()) {\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    glyph=\"filter\"\n                    [title]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                    fdType=\"transparent\"\n                    aria-haspopup=\"dialog\"\n                    (click)=\"openFiltering()\"\n                ></button>\n            }\n            @if (groupable()) {\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    glyph=\"group-2\"\n                    [title]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                    fdType=\"transparent\"\n                    aria-haspopup=\"dialog\"\n                    (click)=\"openGrouping()\"\n                ></button>\n            }\n            @if (columns()) {\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"action-settings\"\n                    [title]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                    fdType=\"transparent\"\n                    aria-haspopup=\"dialog\"\n                    (click)=\"openColumns()\"\n                ></button>\n            }\n        }\n    </fd-toolbar>\n    @if (appliedFilters().length) {\n        <fd-toolbar\n            fdType=\"info\"\n            class=\"fdp-table__applied-filters-toolbar\"\n            [active]=\"true\"\n            [titleId]=\"tableToolbarTitleId\"\n            [shouldOverflow]=\"shouldOverflow\"\n            [headingLevel]=\"headingLevel\"\n        >\n            <label fd-toolbar-label>\n                {{ 'platformTable.filteredBy' | fdTranslate }}:\n                {{ _formatAppliedFilters(appliedFilters()) }}\n            </label>\n            <fd-toolbar-spacer></fd-toolbar-spacer>\n            <button\n                fdCompact\n                (click)=\"_closeFilterToolbar()\"\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"decline\"\n                [title]=\"'platformTable.clearFilters' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.clearFilters' | fdTranslate\"\n            ></button>\n        </fd-toolbar>\n    }\n</ng-template>\n", dependencies: [{ kind: "component", type: ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "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", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "directive", type: TableToolbarTemplateDirective, selector: "[fdpTableToolbarTemplate]" }, { kind: "directive", type: ToolbarLabelDirective, selector: "[fd-toolbar-label]" }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { 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: "20.1.4", ngImport: i0, type: TableToolbarComponent, decorators: [{
             type: Component,
@@ -2220,7 +2222,7 @@ class FilterMultiSelectComponent {
         this._value = this._selectableOptions.filter(({ selected }) => selected).map(({ value }) => value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FilterMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FilterMultiSelectComponent, decorators: [{
             type: Component,
@@ -2265,7 +2267,7 @@ class FilterSingleSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FilterSingleSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "readOnly", "selectedValue", "name", "id", "value", "required", "standalone", "wrapLabel", "valignLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "readOnly", "selectedValue", "name", "id", "value", "required", "standalone", "wrapLabel", "valignLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FilterSingleSelectComponent, decorators: [{
             type: Component,
@@ -2314,7 +2316,7 @@ class FilterStepComponent {
         this.valueChange.emit(newFilterBy);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FilterStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FilterStepComponent, isStandalone: true, selector: "fdp-filter-step", inputs: { filter: "filter", columnKey: "columnKey", contentDensity: "contentDensity", filterBy: "filterBy", columnName: "columnName", headingLevel: "headingLevel" }, outputs: { back: "back", valueChange: "valueChange" }, providers: [{ provide: FILTERS_VIEW_STEP_TOKEN, useExisting: forwardRef(() => FilterStepComponent) }], viewQueries: [{ propertyName: "titleTemplateRef", first: true, predicate: ["titleTemplate"], descendants: true }, { propertyName: "bodyTemplateRef", first: true, predicate: ["bodyTemplate"], descendants: true }], ngImport: i0, template: "<ng-template #titleTemplate>\n    <button\n        fd-button\n        fdType=\"transparent\"\n        glyph=\"navigation-left-arrow\"\n        [title]=\"'platformTable.filterDialogBackToColumns' | fdTranslate\"\n        [ariaLabel]=\"'platformTable.filterDialogBackToColumns' | fdTranslate\"\n        (click)=\"back.emit()\"\n    ></button>\n    <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">\n        {{ 'platformTable.filterDialogFilterByLabel' | fdTranslate: { filterLabel: filter.label } }}\n    </span>\n</ng-template>\n\n<ng-template #bodyTemplate>\n    @switch (filter.type) {\n        @case (FILTER_TYPE.SINGLE) {\n            <fdp-filter-single-select\n                [options]=\"filter.values\"\n                [filterBy]=\"_filterBy\"\n                (valueChange)=\"_onFilterValueChange($event)\"\n            ></fdp-filter-single-select>\n        }\n        @case (FILTER_TYPE.MULTI) {\n            <fdp-filter-multi-select\n                [options]=\"filter.values\"\n                [filterBy]=\"_filterBy\"\n                (valueChange)=\"_onFilterValueChange($event)\"\n            ></fdp-filter-multi-select>\n        }\n        @case (FILTER_TYPE.CUSTOM) {\n            <fdp-filter-custom\n                [filter]=\"filter\"\n                [filterBy]=\"_filterBy\"\n                (valueChange)=\"_onFilterValueChange($event)\"\n            ></fdp-filter-custom>\n        }\n        @case (FILTER_TYPE.CATEGORY) {\n            Categories list is not implemented\n        }\n    }\n</ng-template>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: FilterSingleSelectComponent, selector: "fdp-filter-single-select", inputs: ["options", "filterBy"], outputs: ["valueChange"] }, { kind: "component", type: FilterMultiSelectComponent, selector: "fdp-filter-multi-select", inputs: ["options", "filterBy"], outputs: ["valueChange"] }, { kind: "component", type: FilterCustomComponent, selector: "fdp-filter-custom", inputs: ["filter", "filterBy"], outputs: ["valueChange"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FilterStepComponent, isStandalone: true, selector: "fdp-filter-step", inputs: { filter: "filter", columnKey: "columnKey", contentDensity: "contentDensity", filterBy: "filterBy", columnName: "columnName", headingLevel: "headingLevel" }, outputs: { back: "back", valueChange: "valueChange" }, providers: [{ provide: FILTERS_VIEW_STEP_TOKEN, useExisting: forwardRef(() => FilterStepComponent) }], viewQueries: [{ propertyName: "titleTemplateRef", first: true, predicate: ["titleTemplate"], descendants: true }, { propertyName: "bodyTemplateRef", first: true, predicate: ["bodyTemplate"], descendants: true }], ngImport: i0, template: "<ng-template #titleTemplate>\n    <button\n        fd-button\n        fdType=\"transparent\"\n        glyph=\"navigation-left-arrow\"\n        [title]=\"'platformTable.filterDialogBackToColumns' | fdTranslate\"\n        [ariaLabel]=\"'platformTable.filterDialogBackToColumns' | fdTranslate\"\n        (click)=\"back.emit()\"\n    ></button>\n    <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">\n        {{ 'platformTable.filterDialogFilterByLabel' | fdTranslate: { filterLabel: filter.label } }}\n    </span>\n</ng-template>\n\n<ng-template #bodyTemplate>\n    @switch (filter.type) {\n        @case (FILTER_TYPE.SINGLE) {\n            <fdp-filter-single-select\n                [options]=\"filter.values\"\n                [filterBy]=\"_filterBy\"\n                (valueChange)=\"_onFilterValueChange($event)\"\n            ></fdp-filter-single-select>\n        }\n        @case (FILTER_TYPE.MULTI) {\n            <fdp-filter-multi-select\n                [options]=\"filter.values\"\n                [filterBy]=\"_filterBy\"\n                (valueChange)=\"_onFilterValueChange($event)\"\n            ></fdp-filter-multi-select>\n        }\n        @case (FILTER_TYPE.CUSTOM) {\n            <fdp-filter-custom\n                [filter]=\"filter\"\n                [filterBy]=\"_filterBy\"\n                (valueChange)=\"_onFilterValueChange($event)\"\n            ></fdp-filter-custom>\n        }\n        @case (FILTER_TYPE.CATEGORY) {\n            Categories list is not implemented\n        }\n    }\n</ng-template>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: FilterSingleSelectComponent, selector: "fdp-filter-single-select", inputs: ["options", "filterBy"], outputs: ["valueChange"] }, { kind: "component", type: FilterMultiSelectComponent, selector: "fdp-filter-multi-select", inputs: ["options", "filterBy"], outputs: ["valueChange"] }, { kind: "component", type: FilterCustomComponent, selector: "fdp-filter-custom", inputs: ["filter", "filterBy"], outputs: ["valueChange"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FilterStepComponent, decorators: [{
             type: Component,
@@ -2358,7 +2360,7 @@ class FiltersListStepComponent {
         this.selectFilter = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FiltersListStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FiltersListStepComponent, isStandalone: true, selector: "fdp-filters-list-step", inputs: { filters: "filters", headingLevel: "headingLevel" }, 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    <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n        'platformTable.filterDialogFilterTitle' | fdTranslate\n    }}</span>\n</ng-template>\n\n<ng-template #bodyTemplate>\n    <span\n        role=\"heading\"\n        [attr.aria-level]=\"headingLevel + 1\"\n        fd-list-group-header\n        id=\"platformTableInternalFilterListGroupHeader\"\n    >\n        {{ 'platformTable.filterDialogFilterBy' | fdTranslate }}\n    </span>\n    <ul fd-list aria-labelledby=\"platformTableInternalFilterListGroupHeader\">\n        @for (filter of filters; track filter) {\n            <li\n                fd-list-item\n                [interactive]=\"true\"\n                (click)=\"selectFilter.emit(filter)\"\n                (keydown.space)=\"selectFilter.emit(filter)\"\n                (keydown.enter)=\"selectFilter.emit(filter)\"\n            >\n                <span fd-list-title>{{ filter.label }}</span>\n            </li>\n        }\n    </ul>\n</ng-template>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", 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", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], 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", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"] }, { 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: "20.1.4", type: FiltersListStepComponent, isStandalone: true, selector: "fdp-filters-list-step", inputs: { filters: "filters", headingLevel: "headingLevel" }, 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    <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n        'platformTable.filterDialogFilterTitle' | fdTranslate\n    }}</span>\n</ng-template>\n\n<ng-template #bodyTemplate>\n    <span\n        role=\"heading\"\n        [attr.aria-level]=\"headingLevel + 1\"\n        fd-list-group-header\n        id=\"platformTableInternalFilterListGroupHeader\"\n    >\n        {{ 'platformTable.filterDialogFilterBy' | fdTranslate }}\n    </span>\n    <ul fd-list aria-labelledby=\"platformTableInternalFilterListGroupHeader\">\n        @for (filter of filters; track filter) {\n            <li\n                fd-list-item\n                [interactive]=\"true\"\n                (click)=\"selectFilter.emit(filter)\"\n                (keydown.space)=\"selectFilter.emit(filter)\"\n                (keydown.enter)=\"selectFilter.emit(filter)\"\n            >\n                <span fd-list-title>{{ filter.label }}</span>\n            </li>\n        }\n    </ul>\n</ng-template>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", 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", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], 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", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FiltersListStepComponent, decorators: [{
             type: Component,
@@ -2616,7 +2618,7 @@ class GroupingComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GroupingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: GroupingComponent, isStandalone: true, selector: "fdp-grouping", inputs: { groupingData: { classPropertyName: "groupingData", publicName: "groupingData", isSignal: true, isRequired: false, transformFunction: null }, initialGrouping: { classPropertyName: "initialGrouping", publicName: "initialGrouping", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { groupChange: "groupChange", resetAvailabilityChange: "resetAvailabilityChange" }, ngImport: i0, template: "<span role=\"heading\" [attr.aria-level]=\"headingLevel() + 1\" fd-list-group-header>\n    <span fd-list-title [attr.id]=\"groupOrderHeaderId\">\n        {{ 'platformTable.groupDialogGroupOrderHeader' | fdTranslate }}\n    </span>\n</span>\n<ul fd-list [selection]=\"true\">\n    <li fd-list-item [selected]=\"direction() === SORT_DIRECTION.ASC\" [attr.aria-describedby]=\"groupOrderHeaderId\">\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\" [attr.aria-describedby]=\"groupOrderHeaderId\">\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<span role=\"heading\" [attr.aria-level]=\"headingLevel() + 1\" fd-list-group-header>\n    <span fd-list-title [attr.id]=\"groupByHeaderId\">\n        {{ 'platformTable.groupDialogGroupByHeader' | fdTranslate }}\n    </span>\n</span>\n<ul fd-list [selection]=\"true\">\n    <li fd-list-item [selected]=\"NOT_GROUPED_OPTION_VALUE === field()\" [attr.aria-describedby]=\"groupByHeaderId\">\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()\" [attr.aria-describedby]=\"groupByHeaderId\">\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", dependencies: [{ kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], 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", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "readOnly", "selectedValue", "name", "id", "value", "required", "standalone", "wrapLabel", "valignLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: GroupingComponent, isStandalone: true, selector: "fdp-grouping", inputs: { groupingData: { classPropertyName: "groupingData", publicName: "groupingData", isSignal: true, isRequired: false, transformFunction: null }, initialGrouping: { classPropertyName: "initialGrouping", publicName: "initialGrouping", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { groupChange: "groupChange", resetAvailabilityChange: "resetAvailabilityChange" }, ngImport: i0, template: "<span role=\"heading\" [attr.aria-level]=\"headingLevel() + 1\" fd-list-group-header>\n    <span fd-list-title [attr.id]=\"groupOrderHeaderId\">\n        {{ 'platformTable.groupDialogGroupOrderHeader' | fdTranslate }}\n    </span>\n</span>\n<ul fd-list [selection]=\"true\">\n    <li fd-list-item [selected]=\"direction() === SORT_DIRECTION.ASC\" [attr.aria-describedby]=\"groupOrderHeaderId\">\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\" [attr.aria-describedby]=\"groupOrderHeaderId\">\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<span role=\"heading\" [attr.aria-level]=\"headingLevel() + 1\" fd-list-group-header>\n    <span fd-list-title [attr.id]=\"groupByHeaderId\">\n        {{ 'platformTable.groupDialogGroupByHeader' | fdTranslate }}\n    </span>\n</span>\n<ul fd-list [selection]=\"true\">\n    <li fd-list-item [selected]=\"NOT_GROUPED_OPTION_VALUE === field()\" [attr.aria-describedby]=\"groupByHeaderId\">\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()\" [attr.aria-describedby]=\"groupByHeaderId\">\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", dependencies: [{ kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], 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", "truncate"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "readOnly", "selectedValue", "name", "id", "value", "required", "standalone", "wrapLabel", "valignLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GroupingComponent, decorators: [{
             type: Component,
@@ -2726,7 +2728,7 @@ class SortingComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SortingComponent, isStandalone: true, selector: "fdp-sorting", inputs: { sortingData: { classPropertyName: "sortingData", publicName: "sortingData", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, initialSorting: { classPropertyName: "initialSorting", publicName: "initialSorting", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", resetAvailabilityChange: "resetAvailabilityChange" }, ngImport: i0, template: "<span role=\"heading\" [attr.aria-level]=\"headingLevel() + 1\" fd-list-group-header>\n    <span fd-list-title [attr.id]=\"sortOrderHeaderId\">\n        {{ 'platformTable.sortDialogSortOrderHeader' | fdTranslate }}\n    </span>\n</span>\n<ul fd-list [selection]=\"true\">\n    <li fd-list-item [selected]=\"direction() === SORT_DIRECTION.ASC\" [attr.aria-describedby]=\"sortOrderHeaderId\">\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\" [attr.aria-describedby]=\"sortOrderHeaderId\">\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\n<span role=\"heading\" [attr.aria-level]=\"headingLevel() + 1\" fd-list-group-header>\n    <span fd-list-title [attr.id]=\"sortDialogSortByHeaderId\">\n        {{ 'platformTable.sortDialogSortByHeader' | fdTranslate }}\n    </span>\n</span>\n<ul fd-list [selection]=\"true\">\n    @if (allowDisablingSorting()) {\n        <li\n            fd-list-item\n            [selected]=\"field() === NOT_SORTED_OPTION_VALUE\"\n            [attr.aria-describedby]=\"sortDialogSortByHeaderId\"\n        >\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()\" [attr.aria-describedby]=\"sortDialogSortByHeaderId\">\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", dependencies: [{ kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], 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", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "readOnly", "selectedValue", "name", "id", "value", "required", "standalone", "wrapLabel", "valignLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SortingComponent, isStandalone: true, selector: "fdp-sorting", inputs: { sortingData: { classPropertyName: "sortingData", publicName: "sortingData", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, initialSorting: { classPropertyName: "initialSorting", publicName: "initialSorting", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", resetAvailabilityChange: "resetAvailabilityChange" }, ngImport: i0, template: "<span role=\"heading\" [attr.aria-level]=\"headingLevel() + 1\" fd-list-group-header>\n    <span fd-list-title [attr.id]=\"sortOrderHeaderId\">\n        {{ 'platformTable.sortDialogSortOrderHeader' | fdTranslate }}\n    </span>\n</span>\n<ul fd-list [selection]=\"true\">\n    <li fd-list-item [selected]=\"direction() === SORT_DIRECTION.ASC\" [attr.aria-describedby]=\"sortOrderHeaderId\">\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\" [attr.aria-describedby]=\"sortOrderHeaderId\">\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\n<span role=\"heading\" [attr.aria-level]=\"headingLevel() + 1\" fd-list-group-header>\n    <span fd-list-title [attr.id]=\"sortDialogSortByHeaderId\">\n        {{ 'platformTable.sortDialogSortByHeader' | fdTranslate }}\n    </span>\n</span>\n<ul fd-list [selection]=\"true\">\n    @if (allowDisablingSorting()) {\n        <li\n            fd-list-item\n            [selected]=\"field() === NOT_SORTED_OPTION_VALUE\"\n            [attr.aria-describedby]=\"sortDialogSortByHeaderId\"\n        >\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()\" [attr.aria-describedby]=\"sortDialogSortByHeaderId\">\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", dependencies: [{ kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], 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", "truncate"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "readOnly", "selectedValue", "name", "id", "value", "required", "standalone", "wrapLabel", "valignLabel"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SortingComponent, decorators: [{
             type: Component,
@@ -2917,7 +2919,7 @@ class SettingsDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: i1.Table }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SettingsDialogComponent, isStandalone: true, selector: "fdp-settings-dialog-settings", providers: [{ provide: RESETTABLE_TOKEN, useExisting: forwardRef(() => SettingsDialogComponent) }], ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                @if (activeTab() !== 'filter') {\n                    <fd-bar-element>\n                        <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n                            'platformTable.settingsDialogHeader' | fdTranslate\n                        }}</span>\n                    </fd-bar-element>\n                } @else {\n                    <fd-bar-element>\n                        @if (activeFilterStepView()?.titleTemplateRef) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"activeFilterStepView()?.titleTemplateRef ?? null\"\n                            ></ng-container>\n                        }\n                    </fd-bar-element>\n                }\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n\n        @if (showSubheader()) {\n            <ng-template fdkTemplate=\"subheader\">\n                <fd-segmented-button [(ngModel)]=\"activeTab\" [style.height]=\"'fit-content'\">\n                    @if (sortingData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"sort\"\n                            glyph=\"sort\"\n                            [title]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                            [ariaLabel]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                        ></button>\n                    }\n                    @if (filteringData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"filter\"\n                            glyph=\"filter\"\n                            [title]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                            [ariaLabel]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                        ></button>\n                    }\n                    @if (groupingData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"group\"\n                            glyph=\"group-2\"\n                            [title]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                            [ariaLabel]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                        ></button>\n                    }\n                </fd-segmented-button>\n            </ng-template>\n        }\n    </fd-dialog-header>\n\n    <fd-dialog-body disablePaddings>\n        @switch (activeTab()) {\n            @case ('sort') {\n                <fdp-sorting\n                    [headingLevel]=\"headingLevel\"\n                    [sortingData]=\"sortingData()!\"\n                    [initialSorting]=\"_initialSorting()\"\n                    (sortChange)=\"onSortChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-sorting>\n            }\n            @case ('filter') {\n                <fdp-filters\n                    [headingLevel]=\"headingLevel\"\n                    [filteringData]=\"filteringData()!\"\n                    [initialFilters]=\"_initialFilters()\"\n                    (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-filters>\n            }\n            @case ('group') {\n                <fdp-grouping\n                    [headingLevel]=\"headingLevel\"\n                    [groupingData]=\"groupingData()!\"\n                    [initialGrouping]=\"_initialGrouping()\"\n                    (groupChange)=\"onGroupChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-grouping>\n            }\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.confirmBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            [label]=\"'platformTable.cancelBtnLabel' | fdTranslate\"\n            fdkInitialFocus\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { 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", inputs: ["disablePaddings"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: SortingComponent, selector: "fdp-sorting", inputs: ["sortingData", "headingLevel", "initialSorting"], outputs: ["sortChange", "resetAvailabilityChange"] }, { kind: "component", type: FiltersComponent, selector: "fdp-filters", inputs: ["filteringData", "headingLevel", "initialFilters"], outputs: ["activeFilterStepViewChange", "filterChange", "resetAvailabilityChange"] }, { kind: "component", type: GroupingComponent, selector: "fdp-grouping", inputs: ["groupingData", "initialGrouping", "headingLevel"], outputs: ["groupChange", "resetAvailabilityChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle", "vertical"] }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "directive", type: FocusableItemDirective, selector: "[fdkFocusableItem]", inputs: ["fdkFocusableItem", "cellFocusedEventAnnouncer"], outputs: ["cellFocused"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SettingsDialogComponent, isStandalone: true, selector: "fdp-settings-dialog-settings", providers: [{ provide: RESETTABLE_TOKEN, useExisting: forwardRef(() => SettingsDialogComponent) }], ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                @if (activeTab() !== 'filter') {\n                    <fd-bar-element>\n                        <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n                            'platformTable.settingsDialogHeader' | fdTranslate\n                        }}</span>\n                    </fd-bar-element>\n                } @else {\n                    <fd-bar-element>\n                        @if (activeFilterStepView()?.titleTemplateRef) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"activeFilterStepView()?.titleTemplateRef ?? null\"\n                            ></ng-container>\n                        }\n                    </fd-bar-element>\n                }\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n\n        @if (showSubheader()) {\n            <ng-template fdkTemplate=\"subheader\">\n                <fd-segmented-button [(ngModel)]=\"activeTab\" [style.height]=\"'fit-content'\">\n                    @if (sortingData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"sort\"\n                            glyph=\"sort\"\n                            [title]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                            [ariaLabel]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                        ></button>\n                    }\n                    @if (filteringData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"filter\"\n                            glyph=\"filter\"\n                            [title]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                            [ariaLabel]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                        ></button>\n                    }\n                    @if (groupingData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"group\"\n                            glyph=\"group-2\"\n                            [title]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                            [ariaLabel]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                        ></button>\n                    }\n                </fd-segmented-button>\n            </ng-template>\n        }\n    </fd-dialog-header>\n\n    <fd-dialog-body disablePaddings>\n        @switch (activeTab()) {\n            @case ('sort') {\n                <fdp-sorting\n                    [headingLevel]=\"headingLevel\"\n                    [sortingData]=\"sortingData()!\"\n                    [initialSorting]=\"_initialSorting()\"\n                    (sortChange)=\"onSortChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-sorting>\n            }\n            @case ('filter') {\n                <fdp-filters\n                    [headingLevel]=\"headingLevel\"\n                    [filteringData]=\"filteringData()!\"\n                    [initialFilters]=\"_initialFilters()\"\n                    (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-filters>\n            }\n            @case ('group') {\n                <fdp-grouping\n                    [headingLevel]=\"headingLevel\"\n                    [groupingData]=\"groupingData()!\"\n                    [initialGrouping]=\"_initialGrouping()\"\n                    (groupChange)=\"onGroupChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-grouping>\n            }\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.confirmBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            [label]=\"'platformTable.cancelBtnLabel' | fdTranslate\"\n            fdkInitialFocus\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { 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", inputs: ["disablePaddings"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: SortingComponent, selector: "fdp-sorting", inputs: ["sortingData", "headingLevel", "initialSorting"], outputs: ["sortChange", "resetAvailabilityChange"] }, { kind: "component", type: FiltersComponent, selector: "fdp-filters", inputs: ["filteringData", "headingLevel", "initialFilters"], outputs: ["activeFilterStepViewChange", "filterChange", "resetAvailabilityChange"] }, { kind: "component", type: GroupingComponent, selector: "fdp-grouping", inputs: ["groupingData", "initialGrouping", "headingLevel"], outputs: ["groupChange", "resetAvailabilityChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle", "vertical"] }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "directive", type: FocusableItemDirective, selector: "[fdkFocusableItem]", inputs: ["fdkFocusableItem", "cellFocusedEventAnnouncer"], outputs: ["cellFocused", "focusableChildElementFocused", "_parentFocusableItemFocused"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsDialogComponent, decorators: [{
             type: Component,
@@ -3128,7 +3130,7 @@ class TableGrowingButtonComponent {
         this._table._onSpyIntersect(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableGrowingButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TableGrowingButtonComponent, isStandalone: true, selector: "fdp-table-growing-button", inputs: { showItemsCount: "showItemsCount" }, ngImport: i0, template: "<div fd-list role=\"none\">\n    @if (_table.loadedRows$() < _dataSourceDirective.totalItems$()) {\n        <div\n            fd-list-item\n            ariaRole=\"none\"\n            class=\"fdp-table__growing-button\"\n            [growing]=\"true\"\n            [style.height]=\"'auto'\"\n            [action]=\"true\"\n        >\n            <a fd-list-link (click)=\"_loadMore()\">\n                <div fd-list-title>\n                    <div\n                        class=\"fdp-table__growing-button-content\"\n                        [class.fdp-table__growing-button-content--byline]=\"showItemsCount\"\n                    >\n                        @if (!showItemsCount) {\n                            {{ 'platformTable.loadMore' | fdTranslate }}\n                        } @else {\n                            <div class=\"fdp-table__growing-button__title\">\n                                {{ 'platformTable.loadMore' | fdTranslate }}\n                            </div>\n                            <div class=\"fdp-table__growing-button__subtitle\">\n                                [ {{ _table.loadedRows$() }} / {{ _dataSourceDirective.totalItems$() }} ]\n                            </div>\n                        }\n                    </div>\n                </div>\n            </a>\n        </div>\n    } @else if (_table.loadedRows$() === _dataSourceDirective.totalItems$() && showItemsCount) {\n        <li\n            fd-list-item\n            [style.height]=\"'auto'\"\n            ariaRole=\"none\"\n            class=\"fdp-table__growing-button-content fdp-table__growing-button-total\"\n        >\n            <span fd-list-title>\n                {{\n                    'platformTable.showingBlankOfBlank' | fdTranslate: { totalGrowingItemsCount: _table.loadedRows$() }\n                }}\n            </span>\n        </li>\n    }\n</div>\n", dependencies: [{ kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TableGrowingButtonComponent, isStandalone: true, selector: "fdp-table-growing-button", inputs: { showItemsCount: "showItemsCount" }, ngImport: i0, template: "<div fd-list role=\"none\">\n    @if (_table.loadedRows$() < _dataSourceDirective.totalItems$()) {\n        <div\n            fd-list-item\n            ariaRole=\"none\"\n            class=\"fdp-table__growing-button\"\n            [growing]=\"true\"\n            [style.height]=\"'auto'\"\n            [action]=\"true\"\n        >\n            <a fd-list-link (click)=\"_loadMore()\">\n                <div fd-list-title>\n                    <div\n                        class=\"fdp-table__growing-button-content\"\n                        [class.fdp-table__growing-button-content--byline]=\"showItemsCount\"\n                    >\n                        @if (!showItemsCount) {\n                            {{ 'platformTable.loadMore' | fdTranslate }}\n                        } @else {\n                            <div class=\"fdp-table__growing-button__title\">\n                                {{ 'platformTable.loadMore' | fdTranslate }}\n                            </div>\n                            <div class=\"fdp-table__growing-button__subtitle\">\n                                [ {{ _table.loadedRows$() }} / {{ _dataSourceDirective.totalItems$() }} ]\n                            </div>\n                        }\n                    </div>\n                </div>\n            </a>\n        </div>\n    } @else if (_table.loadedRows$() === _dataSourceDirective.totalItems$() && showItemsCount) {\n        <li\n            fd-list-item\n            [style.height]=\"'auto'\"\n            ariaRole=\"none\"\n            class=\"fdp-table__growing-button-content fdp-table__growing-button-total\"\n        >\n            <span fd-list-title>\n                {{\n                    'platformTable.showingBlankOfBlank' | fdTranslate: { totalGrowingItemsCount: _table.loadedRows$() }\n                }}\n            </span>\n        </li>\n    }\n</div>\n", dependencies: [{ kind: "component", type: ListComponent$1, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableGrowingButtonComponent, decorators: [{
             type: Component,
@@ -3468,6 +3470,8 @@ class TableRowComponent extends TableRowDirective {
         /** @hidden */
         this._rowSelectionHelperTextId = `rowSelectionHelper-${uuidv4()}`;
         /** @hidden */
+        this._announceEmptyCell = signal(false, ...(ngDevMode ? [{ debugName: "_announceEmptyCell" }] : []));
+        /** @hidden */
         this._isTreeRowFirstCell = isTreeRowFirstCell;
         /** @hidden */
         this.SELECTION_MODE = SelectionMode;
@@ -3580,6 +3584,12 @@ class TableRowComponent extends TableRowDirective {
         return column.name;
     }
     /** @hidden */
+    _handleCellFocused(event, index, row, column, tableTextContainer) {
+        this._setAnnounceEmptyCell(row, column, tableTextContainer);
+        this._tableRowService.cellFocused(event);
+        this._tableRowService.cellActivate(index, row);
+    }
+    /** @hidden */
     _handleCellSpaceKey(colIdx, tableCellElement, $event) {
         if ($event.target === tableCellElement && isTreeRowFirstCell(colIdx, this.row, $event)) {
             $event.preventDefault();
@@ -3609,13 +3619,28 @@ class TableRowComponent extends TableRowDirective {
         }
         this._dndTableDirective?.dragRowFromKeyboard(isArrowDown ? 'down' : 'up', event, this.index, event.shiftKey ? 'group' : 'shift');
     }
+    /** @hidden */
+    _setAnnounceEmptyCell(row, column, tableTextContainer) {
+        if (row.state !== 'readonly') {
+            this._announceEmptyCell.set(false);
+            return;
+        }
+        let value;
+        // For non-column templates (data-driven), always check for empty content.
+        const isCellEmptyInNonColumnTemplate = !column.columnCellTemplate &&
+            (!(value = get(row.value, column.key)) || (typeof value === 'string' && value.trim() === ''));
+        // For column templates (consumer-provided), check text content by default.
+        // Otherwise, determined by consumer by disabling default checking.
+        const isCellEmptyInColumnTemplate = column.columnCellTemplate && column.announceEmptyCell() && tableTextContainer?.innerText?.trim() === '';
+        this._announceEmptyCell.set(isCellEmptyInColumnTemplate || isCellEmptyInNonColumnTemplate);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TableRowComponent, isStandalone: true, selector: "[fdp-table-row]", inputs: { rowId: "rowId", row: "row", index: "index", selectionMode: "selectionMode", selectableKey: "selectableKey", enableTristateMode: "enableTristateMode", fixed: "fixed", selectionColumnWidth: "selectionColumnWidth", freezeColumnsTo: "freezeColumnsTo", freezeEndColumnsTo: "freezeEndColumnsTo" }, outputs: { keyboardDrag: "keyboardDrag" }, host: { attributes: { "role": "row" }, properties: { "attr.aria-expanded": "_isTreeRow(row) ? row.expanded : null", "attr.aria-selected": "this._ariaSelected" } }, providers: [
             {
                 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$(); as semanticHighlighting) {\n    <td\n        fd-table-cell\n        fd-table-status-indicator\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [status]=\"row.value[semanticHighlighting]\"\n        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver.contentDensity$()\n                    | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow($event)\"\n            (keydown.space)=\"_toggleSingleSelectableRow($event)\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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.contentDensity$()\n                    | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\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            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        ></td>\n    }\n}\n@for (column of _fdpTableService.visibleColumns$(); track column.name) {\n    <td\n        #tableCellElement\n        [fdpTableCellResizable]=\"\n            $index\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength()\n                    : _fdpTableService._isShownNavigationColumn$()\n        \"\n        [columnName]=\"column.name\"\n        [focusable]=\"true\"\n        [attr.role]=\"column.role\"\n        [headers]=\"rowId + '__' + column.name\"\n        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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$() ? 'is-last-child' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl$()\n                    : _fdpTableService._semanticHighlightingColumnWidth$()\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); _tableRowService.cellActivate($index, row)\"\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        [attr.title]=\"\n            _isTreeRowFirstCell($index, row) && row.expanded\n                ? ('platformTable.collapseRowButtonTitle' | fdTranslate)\n                : _isTreeRowFirstCell($index, row) && !row.expanded\n                  ? ('platformTable.expandRowButtonTitle' | fdTranslate)\n                  : null\n        \"\n    >\n        <div\n            [class.fd-table__text]=\"column.applyText\"\n            [class.fd-table__text--no-wrap]=\"column.noWrap\"\n            #tableTextContainer\n        >\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 (tableTextContainer.innerText?.trim() === '') {\n                    <span\n                        [ngStyle]=\"{\n                            position: 'absolute',\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$()) {\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                [attr.title]=\"'platformTable.rowNavigateButtonTitle' | fdTranslate\"\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$()\"\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", "nonInteractive", "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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { 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$(); as semanticHighlighting) {\n    <td\n        fd-table-cell\n        fd-table-status-indicator\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [status]=\"row.value[semanticHighlighting]\"\n        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver.contentDensity$()\n                    | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow($event)\"\n            (keydown.space)=\"_toggleSingleSelectableRow($event)\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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.contentDensity$()\n                    | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\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            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        ></td>\n    }\n}\n@for (column of _fdpTableService.visibleColumns$(); track column.name) {\n    <td\n        #tableCellElement\n        fd-table-cell\n        [fdpTableCellResizable]=\"\n            $index\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength()\n                    : _fdpTableService._isShownNavigationColumn$()\n        \"\n        [columnName]=\"column.name\"\n        [focusable]=\"true\"\n        [attr.role]=\"column.role\"\n        [headers]=\"rowId + '__' + column.name\"\n        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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$() ? 'is-last-child' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl$()\n                    : _fdpTableService._semanticHighlightingColumnWidth$()\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)=\"_handleCellFocused($event, $index, row, column, tableTextContainer)\"\n        (focusout)=\"_announceEmptyCell.set(false)\"\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        [attr.title]=\"\n            _isTreeRowFirstCell($index, row) && row.expanded\n                ? ('platformTable.collapseRowButtonTitle' | fdTranslate)\n                : _isTreeRowFirstCell($index, row) && !row.expanded\n                  ? ('platformTable.expandRowButtonTitle' | fdTranslate)\n                  : null\n        \"\n    >\n        <div\n            [class.fd-table__text]=\"column.applyText\"\n            [class.fd-table__text--no-wrap]=\"column.noWrap\"\n            #tableTextContainer\n        >\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 (_announceEmptyCell()) {\n                    <span\n                        [ngStyle]=\"{\n                            position: 'absolute',\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$()) {\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                [attr.title]=\"'platformTable.rowNavigateButtonTitle' | fdTranslate\"\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$()\"\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", "nonInteractive", "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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableRowComponent, decorators: [{
             type: Component,
@@ -3646,7 +3671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         TableCellStylesPipe,
                         ColumnResizableSidePipe,
                         IconComponent
-                    ], template: "@if (_fdpTableService._semanticHighlighting$(); as semanticHighlighting) {\n    <td\n        fd-table-cell\n        fd-table-status-indicator\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [status]=\"row.value[semanticHighlighting]\"\n        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver.contentDensity$()\n                    | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow($event)\"\n            (keydown.space)=\"_toggleSingleSelectableRow($event)\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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.contentDensity$()\n                    | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\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            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        ></td>\n    }\n}\n@for (column of _fdpTableService.visibleColumns$(); track column.name) {\n    <td\n        #tableCellElement\n        [fdpTableCellResizable]=\"\n            $index\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength()\n                    : _fdpTableService._isShownNavigationColumn$()\n        \"\n        [columnName]=\"column.name\"\n        [focusable]=\"true\"\n        [attr.role]=\"column.role\"\n        [headers]=\"rowId + '__' + column.name\"\n        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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$() ? 'is-last-child' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl$()\n                    : _fdpTableService._semanticHighlightingColumnWidth$()\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); _tableRowService.cellActivate($index, row)\"\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        [attr.title]=\"\n            _isTreeRowFirstCell($index, row) && row.expanded\n                ? ('platformTable.collapseRowButtonTitle' | fdTranslate)\n                : _isTreeRowFirstCell($index, row) && !row.expanded\n                  ? ('platformTable.expandRowButtonTitle' | fdTranslate)\n                  : null\n        \"\n    >\n        <div\n            [class.fd-table__text]=\"column.applyText\"\n            [class.fd-table__text--no-wrap]=\"column.noWrap\"\n            #tableTextContainer\n        >\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 (tableTextContainer.innerText?.trim() === '') {\n                    <span\n                        [ngStyle]=\"{\n                            position: 'absolute',\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$()) {\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                [attr.title]=\"'platformTable.rowNavigateButtonTitle' | fdTranslate\"\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$()\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n" }]
+                    ], template: "@if (_fdpTableService._semanticHighlighting$(); as semanticHighlighting) {\n    <td\n        fd-table-cell\n        fd-table-status-indicator\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [status]=\"row.value[semanticHighlighting]\"\n        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver.contentDensity$()\n                    | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow($event)\"\n            (keydown.space)=\"_toggleSingleSelectableRow($event)\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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.contentDensity$()\n                    | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\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            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        ></td>\n    }\n}\n@for (column of _fdpTableService.visibleColumns$(); track column.name) {\n    <td\n        #tableCellElement\n        fd-table-cell\n        [fdpTableCellResizable]=\"\n            $index\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength()\n                    : _fdpTableService._isShownNavigationColumn$()\n        \"\n        [columnName]=\"column.name\"\n        [focusable]=\"true\"\n        [attr.role]=\"column.role\"\n        [headers]=\"rowId + '__' + column.name\"\n        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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$() ? 'is-last-child' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl$()\n                    : _fdpTableService._semanticHighlightingColumnWidth$()\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)=\"_handleCellFocused($event, $index, row, column, tableTextContainer)\"\n        (focusout)=\"_announceEmptyCell.set(false)\"\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        [attr.title]=\"\n            _isTreeRowFirstCell($index, row) && row.expanded\n                ? ('platformTable.collapseRowButtonTitle' | fdTranslate)\n                : _isTreeRowFirstCell($index, row) && !row.expanded\n                  ? ('platformTable.expandRowButtonTitle' | fdTranslate)\n                  : null\n        \"\n    >\n        <div\n            [class.fd-table__text]=\"column.applyText\"\n            [class.fd-table__text--no-wrap]=\"column.noWrap\"\n            #tableTextContainer\n        >\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 (_announceEmptyCell()) {\n                    <span\n                        [ngStyle]=\"{\n                            position: 'absolute',\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$()) {\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                [attr.title]=\"'platformTable.rowNavigateButtonTitle' | fdTranslate\"\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$()\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n" }]
         }], ctorParameters: () => [], propDecorators: { rowId: [{
                 type: Input
             }], row: [{