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

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, Inject, Optional, Host, Input, ContentChild, inject, DestroyRef, EventEmitter, Output, ViewChild, forwardRef, Pipe, TemplateRef, ContentChildren, ViewChildren, HostBinding, ChangeDetectorRef, NgZone, ElementRef, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@fundamental-ngx/platform/table-helpers';
-import { TableColumn, FilterableColumnDataType, FdpCellDef, FdpEditableCellDef, FdpHeaderCellDef, TableCellHeaderPopoverDirective, getFilterStrategiesBasedOnDataType, FILTER_STRATEGY, SortDirection, getUniqueListValuesByKey, FdpViewSettingsFilterCustomDef, FilterType, TableService, Table, FILTER_STRING_STRATEGY, SelectionMode, TableColumnResizeService, TableRowService, PlatformTableCellResizableDirective, SelectionCellStylesPipe, TableCellStylesPipe, ColumnResizableSidePipe, isTreeRow, isTreeRowFirstCell, EditableTableCell, TableDraggableDirective, FdpCellSelectableDirective, DEFAULT_HIGHLIGHTING_KEY, SEMANTIC_HIGHLIGHTING_COLUMN_WIDTH, ROW_HEIGHT, TableDataSourceDirective, FDP_TABLE_STATE_DIRECTIVE, FDP_TABLE_VIRTUAL_SCROLL_DIRECTIVE, FDP_TABLE_DRAGGABLE_DIRECTIVE, TableHeaderResizerDirective, isRowNavigatable, TableRowType, buildNewRowSkeleton, EDITABLE_ROW_SEMANTIC_STATE, SaveRowsEvent, getSelectableRows, TableRowActivateEvent, TableRowToggleOpenStateEvent, findRowChildren, getRowParents, TableSortChangeEvent, TablePageChangeEvent, TableGroupChangeEvent, TableColumnFreezeEvent, TableFilterChangeEvent, TableColumnsChangeEvent, convertObjectsToTableRows, isTableRow, convertTreeTableRowToFlatList, convertTreeObjectsToTableRows, getFreezableColumns, getFreezableEndColumns, applySelectionToChildren, SELECTION_COLUMN_WIDTH, TableScrollDispatcherService, TableResponsiveService, TableScrollableDirective, RowClassesPipe, TableHelpersModule } from '@fundamental-ngx/platform/table-helpers';
+import { TableColumn, FilterableColumnDataType, FdpCellDef, FdpEditableCellDef, FdpHeaderCellDef, TableCellHeaderPopoverDirective, getFilterStrategiesBasedOnDataType, FILTER_STRATEGY, SortDirection, getUniqueListValuesByKey, FdpViewSettingsFilterCustomDef, FilterType, TableService, Table, FILTER_STRING_STRATEGY, SelectionMode, TableColumnResizeService, TableRowService, PlatformTableCellResizableDirective, SelectionCellStylesPipe, TableCellStylesPipe, ColumnResizableSidePipe, TableColumnSortingDirectionPipe, isTreeRow, isTreeRowFirstCell, EditableTableCell, TableDraggableDirective, FdpCellSelectableDirective, DEFAULT_HIGHLIGHTING_KEY, SEMANTIC_HIGHLIGHTING_COLUMN_WIDTH, ROW_HEIGHT, TableDataSourceDirective, FDP_TABLE_STATE_DIRECTIVE, FDP_TABLE_VIRTUAL_SCROLL_DIRECTIVE, FDP_TABLE_DRAGGABLE_DIRECTIVE, TableHeaderResizerDirective, isRowNavigatable, TableRowType, buildNewRowSkeleton, EDITABLE_ROW_SEMANTIC_STATE, SaveRowsEvent, getSelectableRows, TableRowActivateEvent, TableRowToggleOpenStateEvent, findRowChildren, getRowParents, TableSortChangeEvent, TablePageChangeEvent, TableGroupChangeEvent, TableColumnFreezeEvent, TableFilterChangeEvent, TableColumnsChangeEvent, convertObjectsToTableRows, isTableRow, convertTreeTableRowToFlatList, convertTreeObjectsToTableRows, getFreezableColumns, getFreezableEndColumns, applySelectionToChildren, SELECTION_COLUMN_WIDTH, TableScrollDispatcherService, TableResponsiveService, TableScrollableDirective, RowClassesPipe, TableHelpersModule } from '@fundamental-ngx/platform/table-helpers';
 export * from '@fundamental-ngx/platform/table-helpers';
 import { AsyncPipe, DOCUMENT, NgIf, NgFor, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
@@ -995,7 +995,7 @@ class P13FilteringDialogComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: P13FilteringDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", 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\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                <fd-layout-grid *ngFor=\"let rule of _includeRules; let i = index\">\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]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                [title]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                (click)=\"_removeRule(rule, _includeRules)\"\n                            ></button>\n\n                            <button\n                                *ngIf=\"_includeRules.length - 1 === i\"\n                                fd-button\n                                fdType=\"transparent\"\n                                glyph=\"add\"\n                                [attr.aria-label]=\"'platformTable.P13FilterDialoAddFilterBtnTitle' | fdTranslate\"\n                                [title]=\"'platformTable.P13FilterDialoAddFilterBtnTitle' | fdTranslate\"\n                                (click)=\"_addNewRule(_includeRules)\"\n                            ></button>\n                        </div>\n                    </div>\n                </fd-layout-grid>\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                <fd-layout-grid *ngFor=\"let rule of _excludeRules; let i = index\">\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]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                [title]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                (click)=\"_removeRule(rule, _excludeRules)\"\n                            ></button>\n\n                            <button\n                                *ngIf=\"_excludeRules.length - 1 === i\"\n                                fd-button\n                                fdType=\"transparent\"\n                                glyph=\"add\"\n                                [attr.aria-label]=\"'platformTable.P13FilterDialoAddFilterBtnTitle' | fdTranslate\"\n                                [title]=\"'platformTable.P13FilterDialoAddFilterBtnTitle' | fdTranslate\"\n                                (click)=\"_addNewRule(_excludeRules)\"\n                            ></button>\n                        </div>\n                    </div>\n                </fd-layout-grid>\n            </div>\n        </fd-panel>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.P13FilterDialogConfirmationBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n\n        <fd-button-bar\n            fdType=\"transparent\"\n            fdkInitialFocus\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: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], 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", "id"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", 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\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                <fd-layout-grid *ngFor=\"let rule of _includeRules; let i = index\">\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]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                [title]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                (click)=\"_removeRule(rule, _includeRules)\"\n                            ></button>\n\n                            <button\n                                *ngIf=\"_includeRules.length - 1 === i\"\n                                fd-button\n                                fdType=\"transparent\"\n                                glyph=\"add\"\n                                [attr.aria-label]=\"'platformTable.P13FilterDialogAddFilterBtnTitle' | fdTranslate\"\n                                [title]=\"'platformTable.P13FilterDialogAddFilterBtnTitle' | fdTranslate\"\n                                (click)=\"_addNewRule(_includeRules)\"\n                            ></button>\n                        </div>\n                    </div>\n                </fd-layout-grid>\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                <fd-layout-grid *ngFor=\"let rule of _excludeRules; let i = index\">\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]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                [title]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                (click)=\"_removeRule(rule, _excludeRules)\"\n                            ></button>\n\n                            <button\n                                *ngIf=\"_excludeRules.length - 1 === i\"\n                                fd-button\n                                fdType=\"transparent\"\n                                glyph=\"add\"\n                                [attr.aria-label]=\"'platformTable.P13FilterDialogAddFilterBtnTitle' | fdTranslate\"\n                                [title]=\"'platformTable.P13FilterDialogAddFilterBtnTitle' | fdTranslate\"\n                                (click)=\"_addNewRule(_excludeRules)\"\n                            ></button>\n                        </div>\n                    </div>\n                </fd-layout-grid>\n            </div>\n        </fd-panel>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.P13FilterDialogConfirmationBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n\n        <fd-button-bar\n            fdType=\"transparent\"\n            fdkInitialFocus\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: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: PanelComponent, selector: "fd-panel", inputs: ["class", "fixed", "id", "expandId", "expandAriaLabel", "expandAriaLabelledBy", "expanded"], 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", "id"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: P13FilteringDialogComponent, decorators: [{
             type: Component,
@@ -1024,7 +1024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                         DialogFooterComponent,
                         ButtonBarComponent,
                         FdTranslatePipe
-                    ], 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\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                <fd-layout-grid *ngFor=\"let rule of _includeRules; let i = index\">\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]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                [title]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                (click)=\"_removeRule(rule, _includeRules)\"\n                            ></button>\n\n                            <button\n                                *ngIf=\"_includeRules.length - 1 === i\"\n                                fd-button\n                                fdType=\"transparent\"\n                                glyph=\"add\"\n                                [attr.aria-label]=\"'platformTable.P13FilterDialoAddFilterBtnTitle' | fdTranslate\"\n                                [title]=\"'platformTable.P13FilterDialoAddFilterBtnTitle' | fdTranslate\"\n                                (click)=\"_addNewRule(_includeRules)\"\n                            ></button>\n                        </div>\n                    </div>\n                </fd-layout-grid>\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                <fd-layout-grid *ngFor=\"let rule of _excludeRules; let i = index\">\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]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                [title]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                (click)=\"_removeRule(rule, _excludeRules)\"\n                            ></button>\n\n                            <button\n                                *ngIf=\"_excludeRules.length - 1 === i\"\n                                fd-button\n                                fdType=\"transparent\"\n                                glyph=\"add\"\n                                [attr.aria-label]=\"'platformTable.P13FilterDialoAddFilterBtnTitle' | fdTranslate\"\n                                [title]=\"'platformTable.P13FilterDialoAddFilterBtnTitle' | fdTranslate\"\n                                (click)=\"_addNewRule(_excludeRules)\"\n                            ></button>\n                        </div>\n                    </div>\n                </fd-layout-grid>\n            </div>\n        </fd-panel>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.P13FilterDialogConfirmationBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n\n        <fd-button-bar\n            fdType=\"transparent\"\n            fdkInitialFocus\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"] }]
+                    ], 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\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                <fd-layout-grid *ngFor=\"let rule of _includeRules; let i = index\">\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]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                [title]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                (click)=\"_removeRule(rule, _includeRules)\"\n                            ></button>\n\n                            <button\n                                *ngIf=\"_includeRules.length - 1 === i\"\n                                fd-button\n                                fdType=\"transparent\"\n                                glyph=\"add\"\n                                [attr.aria-label]=\"'platformTable.P13FilterDialogAddFilterBtnTitle' | fdTranslate\"\n                                [title]=\"'platformTable.P13FilterDialogAddFilterBtnTitle' | fdTranslate\"\n                                (click)=\"_addNewRule(_includeRules)\"\n                            ></button>\n                        </div>\n                    </div>\n                </fd-layout-grid>\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                <fd-layout-grid *ngFor=\"let rule of _excludeRules; let i = index\">\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]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                [title]=\"'platformTable.P13FilterDialogRemoveFilterBtnTitle' | fdTranslate\"\n                                (click)=\"_removeRule(rule, _excludeRules)\"\n                            ></button>\n\n                            <button\n                                *ngIf=\"_excludeRules.length - 1 === i\"\n                                fd-button\n                                fdType=\"transparent\"\n                                glyph=\"add\"\n                                [attr.aria-label]=\"'platformTable.P13FilterDialogAddFilterBtnTitle' | fdTranslate\"\n                                [title]=\"'platformTable.P13FilterDialogAddFilterBtnTitle' | fdTranslate\"\n                                (click)=\"_addNewRule(_excludeRules)\"\n                            ></button>\n                        </div>\n                    </div>\n                </fd-layout-grid>\n            </div>\n        </fd-panel>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.P13FilterDialogConfirmationBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n\n        <fd-button-bar\n            fdType=\"transparent\"\n            fdkInitialFocus\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"] }]
         }], ctorParameters: function () { return [{ type: i1$1.DialogRef }]; } });
 
 const NOT_SELECTED_OPTION_VALUE$1 = null;
@@ -2723,11 +2723,11 @@ class TableHeaderCellContentComponent {
         this.SORT_DIRECTION = SortDirection;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TableHeaderCellContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: TableHeaderCellContentComponent, isStandalone: true, selector: "fdp-table-header-cell-content", inputs: { id: "id", column: "column", hasSorting: "hasSorting", hasFilter: "hasFilter", sorting: "sorting" }, ngImport: i0, template: "<div class=\"fd-table__text--no-wrap\" [class.fd-table__inner]=\"hasSorting || hasFilter\">\n    <ng-container *ngTemplateOutlet=\"tableHeaderCellContentTemplate; context: { column: column }\"></ng-container>\n\n    <div class=\"fd-table__column-header-icons\" *ngIf=\"hasSorting || hasFilter\">\n        <fd-icon *ngIf=\"hasFilter\" fd-table-icon glyph=\"filter\"></fd-icon>\n\n        <fd-icon\n            *ngIf=\"hasSorting\"\n            fd-table-icon\n            [glyph]=\"sorting?.direction === SORT_DIRECTION.ASC ? 'sort-ascending' : 'sort-descending'\"\n        ></fd-icon>\n    </div>\n</div>\n\n<ng-content></ng-content>\n\n<ng-template #tableHeaderCellContentTemplate let-column=\"column\">\n    <ng-container *ngIf=\"column?.headerCellTemplate; else defaultHeaderCellTemplate\">\n        <ng-template\n            [ngTemplateOutlet]=\"column.headerCellTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: column }\"\n        ></ng-template>\n    </ng-container>\n\n    <ng-template #defaultHeaderCellTemplate>\n        <span [id]=\"id + '-header-cell-' + column?.name\" class=\"fd-table__cell--truncate-txt\">\n            {{ column?.label }}\n        </span>\n    </ng-template>\n</ng-template>\n", styles: ["fdp-table-header-cell-content{display:flex;align-items:center;justify-content:space-between;flex-grow:0}fdp-table-header-cell-content .fd-table__text--no-wrap{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "navigation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: TableHeaderCellContentComponent, isStandalone: true, selector: "fdp-table-header-cell-content", inputs: { id: "id", column: "column", hasSorting: "hasSorting", hasFilter: "hasFilter", sorting: "sorting" }, ngImport: i0, template: "<div class=\"fd-table__text--no-wrap\" [class.fd-table__inner]=\"hasSorting || hasFilter\">\n    <ng-container *ngTemplateOutlet=\"tableHeaderCellContentTemplate; context: { column: column }\"></ng-container>\n\n    <div class=\"fd-table__column-header-icons\" *ngIf=\"hasSorting || hasFilter\">\n        <fd-icon *ngIf=\"hasFilter\" fd-table-icon glyph=\"filter\"></fd-icon>\n\n        <fd-icon\n            *ngIf=\"hasSorting\"\n            fd-table-icon\n            [ariaHidden]=\"true\"\n            [glyph]=\"sorting?.direction === SORT_DIRECTION.ASC ? 'sort-ascending' : 'sort-descending'\"\n        ></fd-icon>\n    </div>\n</div>\n\n<ng-content></ng-content>\n\n<ng-template #tableHeaderCellContentTemplate let-column=\"column\">\n    <ng-container *ngIf=\"column?.headerCellTemplate; else defaultHeaderCellTemplate\">\n        <ng-template\n            [ngTemplateOutlet]=\"column.headerCellTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: column }\"\n        ></ng-template>\n    </ng-container>\n\n    <ng-template #defaultHeaderCellTemplate>\n        <span [id]=\"id + '-header-cell-' + column?.name\" class=\"fd-table__cell--truncate-txt\">\n            {{ column?.label }}\n        </span>\n    </ng-template>\n</ng-template>\n", styles: ["fdp-table-header-cell-content{display:flex;align-items:center;justify-content:space-between;flex-grow:0}fdp-table-header-cell-content .fd-table__text--no-wrap{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "navigation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TableHeaderCellContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-table-header-cell-content', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet, NgIf, IconComponent, TableIconDirective], template: "<div class=\"fd-table__text--no-wrap\" [class.fd-table__inner]=\"hasSorting || hasFilter\">\n    <ng-container *ngTemplateOutlet=\"tableHeaderCellContentTemplate; context: { column: column }\"></ng-container>\n\n    <div class=\"fd-table__column-header-icons\" *ngIf=\"hasSorting || hasFilter\">\n        <fd-icon *ngIf=\"hasFilter\" fd-table-icon glyph=\"filter\"></fd-icon>\n\n        <fd-icon\n            *ngIf=\"hasSorting\"\n            fd-table-icon\n            [glyph]=\"sorting?.direction === SORT_DIRECTION.ASC ? 'sort-ascending' : 'sort-descending'\"\n        ></fd-icon>\n    </div>\n</div>\n\n<ng-content></ng-content>\n\n<ng-template #tableHeaderCellContentTemplate let-column=\"column\">\n    <ng-container *ngIf=\"column?.headerCellTemplate; else defaultHeaderCellTemplate\">\n        <ng-template\n            [ngTemplateOutlet]=\"column.headerCellTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: column }\"\n        ></ng-template>\n    </ng-container>\n\n    <ng-template #defaultHeaderCellTemplate>\n        <span [id]=\"id + '-header-cell-' + column?.name\" class=\"fd-table__cell--truncate-txt\">\n            {{ column?.label }}\n        </span>\n    </ng-template>\n</ng-template>\n", styles: ["fdp-table-header-cell-content{display:flex;align-items:center;justify-content:space-between;flex-grow:0}fdp-table-header-cell-content .fd-table__text--no-wrap{width:100%}\n"] }]
+            args: [{ selector: 'fdp-table-header-cell-content', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet, NgIf, IconComponent, TableIconDirective], template: "<div class=\"fd-table__text--no-wrap\" [class.fd-table__inner]=\"hasSorting || hasFilter\">\n    <ng-container *ngTemplateOutlet=\"tableHeaderCellContentTemplate; context: { column: column }\"></ng-container>\n\n    <div class=\"fd-table__column-header-icons\" *ngIf=\"hasSorting || hasFilter\">\n        <fd-icon *ngIf=\"hasFilter\" fd-table-icon glyph=\"filter\"></fd-icon>\n\n        <fd-icon\n            *ngIf=\"hasSorting\"\n            fd-table-icon\n            [ariaHidden]=\"true\"\n            [glyph]=\"sorting?.direction === SORT_DIRECTION.ASC ? 'sort-ascending' : 'sort-descending'\"\n        ></fd-icon>\n    </div>\n</div>\n\n<ng-content></ng-content>\n\n<ng-template #tableHeaderCellContentTemplate let-column=\"column\">\n    <ng-container *ngIf=\"column?.headerCellTemplate; else defaultHeaderCellTemplate\">\n        <ng-template\n            [ngTemplateOutlet]=\"column.headerCellTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: column }\"\n        ></ng-template>\n    </ng-container>\n\n    <ng-template #defaultHeaderCellTemplate>\n        <span [id]=\"id + '-header-cell-' + column?.name\" class=\"fd-table__cell--truncate-txt\">\n            {{ column?.label }}\n        </span>\n    </ng-template>\n</ng-template>\n", styles: ["fdp-table-header-cell-content{display:flex;align-items:center;justify-content:space-between;flex-grow:0}fdp-table-header-cell-content .fd-table__text--no-wrap{width:100%}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], column: [{
@@ -2829,6 +2829,8 @@ class TableHeaderRowComponent extends TableRowDirective {
         /** @hidden */
         this.SELECTION_MODE = SelectionMode;
         /** @hidden */
+        this.SORT_DIRECTION = SortDirection;
+        /** @hidden */
         this._tableColumnResizeService = inject(TableColumnResizeService);
         /** @hidden */
         this._fdpTableService = inject(TableService);
@@ -2863,7 +2865,7 @@ class TableHeaderRowComponent extends TableRowDirective {
                 provide: FDK_FOCUSABLE_LIST_DIRECTIVE,
                 useExisting: TableHeaderRowComponent
             }
-        ], viewQueries: [{ propertyName: "_focusableCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }], usesInheritance: true, ngImport: i0, template: "<th\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async\"\n    [class.fd-table__cell--fixed]=\"fixed\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [style.min-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n    [style.max-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n></th>\n\n<th\n    *ngIf=\"isShownSelectionColumn\"\n    fd-table-cell\n    [focusable]=\"true\"\n    [class.fd-table__cell--fixed]=\"fixed\"\n    class=\"fd-table__cell--checkbox\"\n    [style]=\"\n        _contentDensityObserver\n            | async\n            | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n    \"\n    (keydown.enter)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n    (keydown.space)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    [attr.aria-description]=\"\n        !checkedState\n            ? ('platformTable.selectAllCheckboxLabel' | fdTranslate)\n            : ('platformTable.deselectAllCheckboxLabel' | fdTranslate)\n    \"\n>\n    <fd-checkbox\n        tabIndexValue=\"-1\"\n        *ngIf=\"selectionMode === SELECTION_MODE.MULTIPLE\"\n        labelClass=\"fd-table__checkbox-label\"\n        [fdkDisabled]=\"_fdpTableService.visibleColumnsLength === 0 || disableSelectionCheckbox\"\n        [tristate]=\"true\"\n        [tristateSelectable]=\"false\"\n        [ngModel]=\"checkedState\"\n        (ngModelChange)=\"_tableRowService.toggleAllSelectableRows($event)\"\n    ></fd-checkbox>\n</th>\n\n<ng-container\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        trackBy: _columnTrackBy;\n        last as isLast\n    \"\n>\n    <th\n        [focusable]=\"true\"\n        role=\"columnheader\"\n        [fdpTableCellResizable]=\"\n            colIdx\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength\n                    : (_fdpTableService._isShownNavigationColumn$ | async)\n        \"\n        [columnName]=\"column.name\"\n        [id]=\"rowId + '__' + column.name\"\n        [attr.aria-colindex]=\"colIdx\"\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            isLast && (_fdpTableService._isShownNavigationColumn$ | async) !== true ? 'is-last-child' : '',\n            (column | isColumnHasHeaderMenu) ? 'fd-table__item--clickable' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl\n                    : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                    : selectionColumnWidth\n                    : column._freezed\n                    : column._endFreezed\n                    : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                    : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                    : _tableColumnResizeService.getNextColumnsWidth(column.name)\n        \"\n        [fdPopoverTrigger]=\"(column | isColumnHasHeaderMenu) ? tablePopover.popover : null\"\n        (cellFocused)=\"_tableRowService.cellFocused($event)\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n    >\n        <fdp-table-header-cell-content\n            [id]=\"rowId\"\n            [column]=\"column\"\n            [hasFilter]=\"(_fdpTableService.filterRules$ | async)?.has(column.key) === true\"\n            [hasSorting]=\"(_fdpTableService.sortRules$ | async)?.has(column.key) === true\"\n            [sorting]=\"(_fdpTableService.sortRules$ | async)?.get(column.key)\"\n            [attr.title]=\"column.label\"\n        >\n            <!-- Header menu -->\n            <fdp-table-cell-header-popover\n                #tablePopover\n                [disabled]=\"!(column | isColumnHasHeaderMenu)\"\n                [columnFrozen]=\"column._freezed || column._endFreezed\"\n                [column]=\"column\"\n                [popoverTemplate]=\"(column | isColumnHasHeaderMenu) ? column.headerCellPopoverTemplate : null\"\n                [filteringFromHeaderDisabled]=\"_fdpTableService._isFilteringFromHeaderDisabled$ | async\"\n            ></fdp-table-cell-header-popover>\n        </fdp-table-header-cell-content>\n    </th>\n</ng-container>\n\n<th\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    role=\"columnheader\"\n></th>\n\n<th\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n></th>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return TableCellDirective; }), selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i0.forwardRef(function () { return TableStatusIndicatorDirective; }), selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: i0.forwardRef(function () { return DisabledBehaviorDirective; }), selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "component", type: i0.forwardRef(function () { return CheckboxComponent; }), selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return FormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i1$2.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i1$2.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(function () { return NgFor; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return PlatformTableCellResizableDirective; }), selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: i0.forwardRef(function () { return NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return PopoverTriggerDirective; }), selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: i0.forwardRef(function () { return TableHeaderCellContentComponent; }), selector: "fdp-table-header-cell-content", inputs: ["id", "column", "hasSorting", "hasFilter", "sorting"] }, { kind: "component", type: i0.forwardRef(function () { return TableCellHeaderPopoverComponent; }), selector: "fdp-table-cell-header-popover", inputs: ["column", "popoverTemplate", "disabled", "columnFrozen", "filteringFromHeaderDisabled"] }, { kind: "pipe", type: i0.forwardRef(function () { return AsyncPipe; }), name: "async" }, { kind: "pipe", type: i0.forwardRef(function () { return FdTranslatePipe; }), name: "fdTranslate" }, { kind: "pipe", type: i0.forwardRef(function () { return SelectionCellStylesPipe; }), name: "selectionCellStyles" }, { kind: "pipe", type: i0.forwardRef(function () { return TableCellStylesPipe; }), name: "tableCellStyles" }, { kind: "pipe", type: i0.forwardRef(function () { return ColumnResizableSidePipe; }), name: "columnResizableSide" }, { kind: "pipe", type: i0.forwardRef(function () { return IsColumnHasHeaderMenuPipe; }), name: "isColumnHasHeaderMenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_focusableCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }], usesInheritance: true, ngImport: i0, template: "<th\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async\"\n    [class.fd-table__cell--fixed]=\"fixed\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [style.min-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n    [style.max-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n></th>\n\n<th\n    *ngIf=\"isShownSelectionColumn\"\n    fd-table-cell\n    [focusable]=\"true\"\n    [class.fd-table__cell--fixed]=\"fixed\"\n    class=\"fd-table__cell--checkbox\"\n    [style]=\"\n        _contentDensityObserver\n            | async\n            | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n    \"\n    (keydown.enter)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n    (keydown.space)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    [attr.aria-description]=\"\n        !checkedState\n            ? ('platformTable.selectAllCheckboxLabel' | fdTranslate)\n            : ('platformTable.deselectAllCheckboxLabel' | fdTranslate)\n    \"\n>\n    <fd-checkbox\n        tabIndexValue=\"-1\"\n        *ngIf=\"selectionMode === SELECTION_MODE.MULTIPLE\"\n        labelClass=\"fd-table__checkbox-label\"\n        [fdkDisabled]=\"_fdpTableService.visibleColumnsLength === 0 || disableSelectionCheckbox\"\n        [tristate]=\"true\"\n        [tristateSelectable]=\"false\"\n        [ngModel]=\"checkedState\"\n        (ngModelChange)=\"_tableRowService.toggleAllSelectableRows($event)\"\n    ></fd-checkbox>\n</th>\n\n<ng-container\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        trackBy: _columnTrackBy;\n        last as isLast\n    \"\n>\n    <th\n        [focusable]=\"true\"\n        role=\"columnheader\"\n        [fdpTableCellResizable]=\"\n            colIdx\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength\n                    : (_fdpTableService._isShownNavigationColumn$ | async)\n        \"\n        [columnName]=\"column.name\"\n        [id]=\"rowId + '__' + column.name\"\n        [attr.aria-colindex]=\"colIdx\"\n        [attr.aria-sort]=\"(_fdpTableService.sortRules$ | async)?.get(column.key) | fdpTableColumnSortingDirection\"\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            isLast && (_fdpTableService._isShownNavigationColumn$ | async) !== true ? 'is-last-child' : '',\n            (column | isColumnHasHeaderMenu) ? 'fd-table__item--clickable' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl\n                    : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                    : selectionColumnWidth\n                    : column._freezed\n                    : column._endFreezed\n                    : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                    : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                    : _tableColumnResizeService.getNextColumnsWidth(column.name)\n        \"\n        [fdPopoverTrigger]=\"(column | isColumnHasHeaderMenu) ? tablePopover.popover : null\"\n        (cellFocused)=\"_tableRowService.cellFocused($event)\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n    >\n        <fdp-table-header-cell-content\n            [id]=\"rowId\"\n            [column]=\"column\"\n            [hasFilter]=\"(_fdpTableService.filterRules$ | async)?.has(column.key) === true\"\n            [hasSorting]=\"(_fdpTableService.sortRules$ | async)?.has(column.key) === true\"\n            [sorting]=\"(_fdpTableService.sortRules$ | async)?.get(column.key)\"\n            [attr.title]=\"column.label\"\n        >\n            <!-- Header menu -->\n            <fdp-table-cell-header-popover\n                #tablePopover\n                [disabled]=\"!(column | isColumnHasHeaderMenu)\"\n                [columnFrozen]=\"column._freezed || column._endFreezed\"\n                [column]=\"column\"\n                [popoverTemplate]=\"(column | isColumnHasHeaderMenu) ? column.headerCellPopoverTemplate : null\"\n                [filteringFromHeaderDisabled]=\"_fdpTableService._isFilteringFromHeaderDisabled$ | async\"\n            ></fdp-table-cell-header-popover>\n        </fdp-table-header-cell-content>\n    </th>\n</ng-container>\n\n<th\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    role=\"columnheader\"\n></th>\n\n<th\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n></th>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return TableCellDirective; }), selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i0.forwardRef(function () { return TableStatusIndicatorDirective; }), selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: i0.forwardRef(function () { return DisabledBehaviorDirective; }), selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "component", type: i0.forwardRef(function () { return CheckboxComponent; }), selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return FormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i1$2.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i1$2.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(function () { return NgFor; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return PlatformTableCellResizableDirective; }), selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: i0.forwardRef(function () { return NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return PopoverTriggerDirective; }), selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: i0.forwardRef(function () { return TableHeaderCellContentComponent; }), selector: "fdp-table-header-cell-content", inputs: ["id", "column", "hasSorting", "hasFilter", "sorting"] }, { kind: "component", type: i0.forwardRef(function () { return TableCellHeaderPopoverComponent; }), selector: "fdp-table-cell-header-popover", inputs: ["column", "popoverTemplate", "disabled", "columnFrozen", "filteringFromHeaderDisabled"] }, { kind: "pipe", type: i0.forwardRef(function () { return AsyncPipe; }), name: "async" }, { kind: "pipe", type: i0.forwardRef(function () { return FdTranslatePipe; }), name: "fdTranslate" }, { kind: "pipe", type: i0.forwardRef(function () { return SelectionCellStylesPipe; }), name: "selectionCellStyles" }, { kind: "pipe", type: i0.forwardRef(function () { return TableCellStylesPipe; }), name: "tableCellStyles" }, { kind: "pipe", type: i0.forwardRef(function () { return ColumnResizableSidePipe; }), name: "columnResizableSide" }, { kind: "pipe", type: i0.forwardRef(function () { return TableColumnSortingDirectionPipe; }), name: "fdpTableColumnSortingDirection" }, { kind: "pipe", type: i0.forwardRef(function () { return IsColumnHasHeaderMenuPipe; }), name: "isColumnHasHeaderMenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TableHeaderRowComponent, decorators: [{
             type: Component,
@@ -2893,8 +2895,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                         SelectionCellStylesPipe,
                         TableCellStylesPipe,
                         ColumnResizableSidePipe,
+                        TableColumnSortingDirectionPipe,
                         forwardRef(() => IsColumnHasHeaderMenuPipe)
-                    ], template: "<th\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async\"\n    [class.fd-table__cell--fixed]=\"fixed\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [style.min-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n    [style.max-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n></th>\n\n<th\n    *ngIf=\"isShownSelectionColumn\"\n    fd-table-cell\n    [focusable]=\"true\"\n    [class.fd-table__cell--fixed]=\"fixed\"\n    class=\"fd-table__cell--checkbox\"\n    [style]=\"\n        _contentDensityObserver\n            | async\n            | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n    \"\n    (keydown.enter)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n    (keydown.space)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    [attr.aria-description]=\"\n        !checkedState\n            ? ('platformTable.selectAllCheckboxLabel' | fdTranslate)\n            : ('platformTable.deselectAllCheckboxLabel' | fdTranslate)\n    \"\n>\n    <fd-checkbox\n        tabIndexValue=\"-1\"\n        *ngIf=\"selectionMode === SELECTION_MODE.MULTIPLE\"\n        labelClass=\"fd-table__checkbox-label\"\n        [fdkDisabled]=\"_fdpTableService.visibleColumnsLength === 0 || disableSelectionCheckbox\"\n        [tristate]=\"true\"\n        [tristateSelectable]=\"false\"\n        [ngModel]=\"checkedState\"\n        (ngModelChange)=\"_tableRowService.toggleAllSelectableRows($event)\"\n    ></fd-checkbox>\n</th>\n\n<ng-container\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        trackBy: _columnTrackBy;\n        last as isLast\n    \"\n>\n    <th\n        [focusable]=\"true\"\n        role=\"columnheader\"\n        [fdpTableCellResizable]=\"\n            colIdx\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength\n                    : (_fdpTableService._isShownNavigationColumn$ | async)\n        \"\n        [columnName]=\"column.name\"\n        [id]=\"rowId + '__' + column.name\"\n        [attr.aria-colindex]=\"colIdx\"\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            isLast && (_fdpTableService._isShownNavigationColumn$ | async) !== true ? 'is-last-child' : '',\n            (column | isColumnHasHeaderMenu) ? 'fd-table__item--clickable' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl\n                    : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                    : selectionColumnWidth\n                    : column._freezed\n                    : column._endFreezed\n                    : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                    : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                    : _tableColumnResizeService.getNextColumnsWidth(column.name)\n        \"\n        [fdPopoverTrigger]=\"(column | isColumnHasHeaderMenu) ? tablePopover.popover : null\"\n        (cellFocused)=\"_tableRowService.cellFocused($event)\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n    >\n        <fdp-table-header-cell-content\n            [id]=\"rowId\"\n            [column]=\"column\"\n            [hasFilter]=\"(_fdpTableService.filterRules$ | async)?.has(column.key) === true\"\n            [hasSorting]=\"(_fdpTableService.sortRules$ | async)?.has(column.key) === true\"\n            [sorting]=\"(_fdpTableService.sortRules$ | async)?.get(column.key)\"\n            [attr.title]=\"column.label\"\n        >\n            <!-- Header menu -->\n            <fdp-table-cell-header-popover\n                #tablePopover\n                [disabled]=\"!(column | isColumnHasHeaderMenu)\"\n                [columnFrozen]=\"column._freezed || column._endFreezed\"\n                [column]=\"column\"\n                [popoverTemplate]=\"(column | isColumnHasHeaderMenu) ? column.headerCellPopoverTemplate : null\"\n                [filteringFromHeaderDisabled]=\"_fdpTableService._isFilteringFromHeaderDisabled$ | async\"\n            ></fdp-table-cell-header-popover>\n        </fdp-table-header-cell-content>\n    </th>\n</ng-container>\n\n<th\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    role=\"columnheader\"\n></th>\n\n<th\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n></th>\n" }]
+                    ], template: "<th\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async\"\n    [class.fd-table__cell--fixed]=\"fixed\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [style.min-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n    [style.max-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n></th>\n\n<th\n    *ngIf=\"isShownSelectionColumn\"\n    fd-table-cell\n    [focusable]=\"true\"\n    [class.fd-table__cell--fixed]=\"fixed\"\n    class=\"fd-table__cell--checkbox\"\n    [style]=\"\n        _contentDensityObserver\n            | async\n            | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n    \"\n    (keydown.enter)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n    (keydown.space)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    [attr.aria-description]=\"\n        !checkedState\n            ? ('platformTable.selectAllCheckboxLabel' | fdTranslate)\n            : ('platformTable.deselectAllCheckboxLabel' | fdTranslate)\n    \"\n>\n    <fd-checkbox\n        tabIndexValue=\"-1\"\n        *ngIf=\"selectionMode === SELECTION_MODE.MULTIPLE\"\n        labelClass=\"fd-table__checkbox-label\"\n        [fdkDisabled]=\"_fdpTableService.visibleColumnsLength === 0 || disableSelectionCheckbox\"\n        [tristate]=\"true\"\n        [tristateSelectable]=\"false\"\n        [ngModel]=\"checkedState\"\n        (ngModelChange)=\"_tableRowService.toggleAllSelectableRows($event)\"\n    ></fd-checkbox>\n</th>\n\n<ng-container\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        trackBy: _columnTrackBy;\n        last as isLast\n    \"\n>\n    <th\n        [focusable]=\"true\"\n        role=\"columnheader\"\n        [fdpTableCellResizable]=\"\n            colIdx\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength\n                    : (_fdpTableService._isShownNavigationColumn$ | async)\n        \"\n        [columnName]=\"column.name\"\n        [id]=\"rowId + '__' + column.name\"\n        [attr.aria-colindex]=\"colIdx\"\n        [attr.aria-sort]=\"(_fdpTableService.sortRules$ | async)?.get(column.key) | fdpTableColumnSortingDirection\"\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            isLast && (_fdpTableService._isShownNavigationColumn$ | async) !== true ? 'is-last-child' : '',\n            (column | isColumnHasHeaderMenu) ? 'fd-table__item--clickable' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl\n                    : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                    : selectionColumnWidth\n                    : column._freezed\n                    : column._endFreezed\n                    : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                    : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                    : _tableColumnResizeService.getNextColumnsWidth(column.name)\n        \"\n        [fdPopoverTrigger]=\"(column | isColumnHasHeaderMenu) ? tablePopover.popover : null\"\n        (cellFocused)=\"_tableRowService.cellFocused($event)\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n    >\n        <fdp-table-header-cell-content\n            [id]=\"rowId\"\n            [column]=\"column\"\n            [hasFilter]=\"(_fdpTableService.filterRules$ | async)?.has(column.key) === true\"\n            [hasSorting]=\"(_fdpTableService.sortRules$ | async)?.has(column.key) === true\"\n            [sorting]=\"(_fdpTableService.sortRules$ | async)?.get(column.key)\"\n            [attr.title]=\"column.label\"\n        >\n            <!-- Header menu -->\n            <fdp-table-cell-header-popover\n                #tablePopover\n                [disabled]=\"!(column | isColumnHasHeaderMenu)\"\n                [columnFrozen]=\"column._freezed || column._endFreezed\"\n                [column]=\"column\"\n                [popoverTemplate]=\"(column | isColumnHasHeaderMenu) ? column.headerCellPopoverTemplate : null\"\n                [filteringFromHeaderDisabled]=\"_fdpTableService._isFilteringFromHeaderDisabled$ | async\"\n            ></fdp-table-cell-header-popover>\n        </fdp-table-header-cell-content>\n    </th>\n</ng-container>\n\n<th\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    role=\"columnheader\"\n></th>\n\n<th\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n></th>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { rowId: [{
                 type: Input
             }], fixed: [{
@@ -3199,7 +3202,7 @@ class TableRowComponent extends TableRowDirective {
                 provide: FDK_FOCUSABLE_LIST_DIRECTIVE,
                 useExisting: TableRowComponent
             }
-        ], viewQueries: [{ propertyName: "_focusableViewCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }, { propertyName: "_editableCells", predicate: EditableTableCell, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<td\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async as semanticHighlighting\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n    [status]=\"row.value[semanticHighlighting]\"\n></td>\n\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n\n<!-- Row Selection Cell -->\n<ng-container [ngSwitch]=\"selectionMode\">\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.SINGLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            fd-table-cell-selectable\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.title]=\"\n                (row.checked ? 'platformTable.deselectSingleRowTitle' : 'platformTable.selectSingleRowTitle')\n                    | fdTranslate\n            \"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow()\"\n            (keydown.space)=\"_toggleSingleSelectableRow()\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.MULTIPLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.title]=\"\n                (row.checked ? 'platformTable.deselectSingleRowTitle' : 'platformTable.selectSingleRowTitle')\n                    | fdTranslate\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    </ng-container>\n</ng-container>\n\n<ng-template #selectionMock>\n    <td\n        class=\"fd-table__cell--checkbox\"\n        role=\"gridcell\"\n        fd-table-cell\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [class.fd-table__cell--fixed]=\"fixed\"\n    ></td>\n</ng-template>\n\n<td\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        last as isLast;\n        trackBy: _columnTrackBy\n    \"\n    [fdpTableCellResizable]=\"\n        colIdx\n            | columnResizableSide\n                : _fdpTableService.visibleColumnsLength\n                : (_fdpTableService._isShownNavigationColumn$ | async) === true\n    \"\n    [columnName]=\"column.name\"\n    [focusable]=\"true\"\n    [attr.role]=\"column.role\"\n    [headers]=\"rowId + '__' + column.name\"\n    [ngClass]=\"[\n        'fdp-table__col--' + column.name,\n        column._freezed ? 'fd-table__cell--fixed' : '',\n        column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n        column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n        column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n        row.isTree && colIdx === 0 ? 'fd-table__cell--expand' : '',\n        isLast && (_fdpTableService._isShownNavigationColumn$ | async) === false ? 'is-last-child' : ''\n    ]\"\n    [ngStyle]=\"\n        column\n            | tableCellStyles\n                : _rtl\n                : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                : selectionColumnWidth\n                : column._freezed\n                : column._endFreezed\n                : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                : _tableColumnResizeService.getNextColumnsWidth(column.name)\n    \"\n    [attr.aria-expanded]=\"_isTreeRowFirstCell(colIdx, row) ? row.expanded : null\"\n    [attr.data-nesting-level]=\"colIdx === 0 ? row.level + 1 : null\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    (click)=\"_tableRowService.cellClicked({ index: colIdx, row })\"\n    (keydown.enter)=\"_isTreeRowFirstCell(colIdx, row, $event) && _toggleGroupRow()\"\n    (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n    (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n>\n    <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n        <span\n            *ngIf=\"_isTreeRowFirstCell(colIdx, row)\"\n            class=\"fd-table__expand\"\n            [class.fd-table__expand--open]=\"row.expanded$ | async\"\n            aria-hidden=\"true\"\n        ></span>\n\n        <ng-container *ngIf=\"row.state === 'readonly'; else editModeCell\">\n            <span\n                *ngIf=\"(row.value | valueByPath : column.key) === '' || (row.value | valueByPath : column.key) === null\"\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                >{{ 'platformTable.emptyCell' | fdTranslate }}</span\n            >\n            <ng-container *ngIf=\"column?.columnCellTemplate; else defaultTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.columnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-template #defaultTableCellTemplate>{{ row.value | valueByPath : column.key }}</ng-template>\n\n        <ng-template #editModeCell>\n            <ng-container *ngIf=\"column?.editableColumnCellTemplate; else defaultEditableTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.editableColumnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n\n            <ng-template #defaultEditableTableCellTemplate>\n                <fdp-table-editable-cell\n                    [row]=\"row\"\n                    [column]=\"column\"\n                    [columnValue]=\"row.value | valueByPath : column.key\"\n                ></fdp-table-editable-cell>\n            </ng-template>\n        </ng-template>\n    </div>\n</td>\n\n<ng-content></ng-content>\n\n<td\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n>\n    <i\n        *ngIf=\"row.navigatable\"\n        fd-table-icon\n        [navigation]=\"true\"\n        [class]=\"_rtl ? 'sap-icon--slim-arrow-left' : 'sap-icon--slim-arrow-right'\"\n        class=\"fdp-table__navigation-indicator\"\n    ></i>\n</td>\n\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FdpCellSelectableDirective, selector: "[fdTableCellSelectable], [fd-table-cell-selectable]", inputs: ["enabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TableEditableCellComponent, selector: "fdp-table-editable-cell", inputs: ["row", "column", "columnValue"] }, { kind: "directive", type: TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "navigation"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ValueByPathPipe, name: "valueByPath" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: ColumnResizableSidePipe, name: "columnResizableSide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_focusableViewCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }, { propertyName: "_editableCells", predicate: EditableTableCell, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<td\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async as semanticHighlighting\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n    [status]=\"row.value[semanticHighlighting]\"\n></td>\n\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n\n<!-- Row Selection Cell -->\n<ng-container [ngSwitch]=\"selectionMode\">\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.SINGLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            fd-table-cell-selectable\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow()\"\n            (keydown.space)=\"_toggleSingleSelectableRow()\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.MULTIPLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.aria-selected]=\"row.checked\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    </ng-container>\n</ng-container>\n\n<ng-template #selectionMock>\n    <td\n        class=\"fd-table__cell--checkbox\"\n        role=\"gridcell\"\n        fd-table-cell\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [class.fd-table__cell--fixed]=\"fixed\"\n    ></td>\n</ng-template>\n\n<td\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        last as isLast;\n        trackBy: _columnTrackBy\n    \"\n    [fdpTableCellResizable]=\"\n        colIdx\n            | columnResizableSide\n                : _fdpTableService.visibleColumnsLength\n                : (_fdpTableService._isShownNavigationColumn$ | async) === true\n    \"\n    [columnName]=\"column.name\"\n    [focusable]=\"true\"\n    [attr.role]=\"column.role\"\n    [headers]=\"rowId + '__' + column.name\"\n    [ngClass]=\"[\n        'fdp-table__col--' + column.name,\n        column._freezed ? 'fd-table__cell--fixed' : '',\n        column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n        column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n        column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n        row.isTree && colIdx === 0 ? 'fd-table__cell--expand' : '',\n        isLast && (_fdpTableService._isShownNavigationColumn$ | async) === false ? 'is-last-child' : ''\n    ]\"\n    [ngStyle]=\"\n        column\n            | tableCellStyles\n                : _rtl\n                : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                : selectionColumnWidth\n                : column._freezed\n                : column._endFreezed\n                : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                : _tableColumnResizeService.getNextColumnsWidth(column.name)\n    \"\n    [attr.aria-expanded]=\"_isTreeRowFirstCell(colIdx, row) ? row.expanded : null\"\n    [attr.data-nesting-level]=\"colIdx === 0 ? row.level + 1 : null\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    (click)=\"_tableRowService.cellClicked({ index: colIdx, row })\"\n    (keydown.enter)=\"_isTreeRowFirstCell(colIdx, row, $event) && _toggleGroupRow()\"\n    (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n    (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n>\n    <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n        <span\n            *ngIf=\"_isTreeRowFirstCell(colIdx, row)\"\n            class=\"fd-table__expand\"\n            [class.fd-table__expand--open]=\"row.expanded$ | async\"\n            aria-hidden=\"true\"\n        ></span>\n\n        <ng-container *ngIf=\"row.state === 'readonly'; else editModeCell\">\n            <span\n                *ngIf=\"(row.value | valueByPath : column.key) === '' || (row.value | valueByPath : column.key) === null\"\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                >{{ 'platformTable.emptyCell' | fdTranslate }}</span\n            >\n            <ng-container *ngIf=\"column?.columnCellTemplate; else defaultTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.columnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-template #defaultTableCellTemplate>{{ row.value | valueByPath : column.key }}</ng-template>\n\n        <ng-template #editModeCell>\n            <ng-container *ngIf=\"column?.editableColumnCellTemplate; else defaultEditableTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.editableColumnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n\n            <ng-template #defaultEditableTableCellTemplate>\n                <fdp-table-editable-cell\n                    [row]=\"row\"\n                    [column]=\"column\"\n                    [columnValue]=\"row.value | valueByPath : column.key\"\n                ></fdp-table-editable-cell>\n            </ng-template>\n        </ng-template>\n    </div>\n</td>\n\n<ng-content></ng-content>\n\n<td\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n>\n    <i\n        *ngIf=\"row.navigatable\"\n        fd-table-icon\n        [navigation]=\"true\"\n        [class]=\"_rtl ? 'sap-icon--slim-arrow-left' : 'sap-icon--slim-arrow-right'\"\n        class=\"fdp-table__navigation-indicator\"\n    ></i>\n</td>\n\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FdpCellSelectableDirective, selector: "[fdTableCellSelectable], [fd-table-cell-selectable]", inputs: ["enabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TableEditableCellComponent, selector: "fdp-table-editable-cell", inputs: ["row", "column", "columnValue"] }, { kind: "directive", type: TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "navigation"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ValueByPathPipe, name: "valueByPath" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: ColumnResizableSidePipe, name: "columnResizableSide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TableRowComponent, decorators: [{
             type: Component,
@@ -3234,7 +3237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                         SelectionCellStylesPipe,
                         TableCellStylesPipe,
                         ColumnResizableSidePipe
-                    ], template: "<td\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async as semanticHighlighting\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n    [status]=\"row.value[semanticHighlighting]\"\n></td>\n\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n\n<!-- Row Selection Cell -->\n<ng-container [ngSwitch]=\"selectionMode\">\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.SINGLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            fd-table-cell-selectable\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.title]=\"\n                (row.checked ? 'platformTable.deselectSingleRowTitle' : 'platformTable.selectSingleRowTitle')\n                    | fdTranslate\n            \"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow()\"\n            (keydown.space)=\"_toggleSingleSelectableRow()\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.MULTIPLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.title]=\"\n                (row.checked ? 'platformTable.deselectSingleRowTitle' : 'platformTable.selectSingleRowTitle')\n                    | fdTranslate\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    </ng-container>\n</ng-container>\n\n<ng-template #selectionMock>\n    <td\n        class=\"fd-table__cell--checkbox\"\n        role=\"gridcell\"\n        fd-table-cell\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [class.fd-table__cell--fixed]=\"fixed\"\n    ></td>\n</ng-template>\n\n<td\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        last as isLast;\n        trackBy: _columnTrackBy\n    \"\n    [fdpTableCellResizable]=\"\n        colIdx\n            | columnResizableSide\n                : _fdpTableService.visibleColumnsLength\n                : (_fdpTableService._isShownNavigationColumn$ | async) === true\n    \"\n    [columnName]=\"column.name\"\n    [focusable]=\"true\"\n    [attr.role]=\"column.role\"\n    [headers]=\"rowId + '__' + column.name\"\n    [ngClass]=\"[\n        'fdp-table__col--' + column.name,\n        column._freezed ? 'fd-table__cell--fixed' : '',\n        column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n        column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n        column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n        row.isTree && colIdx === 0 ? 'fd-table__cell--expand' : '',\n        isLast && (_fdpTableService._isShownNavigationColumn$ | async) === false ? 'is-last-child' : ''\n    ]\"\n    [ngStyle]=\"\n        column\n            | tableCellStyles\n                : _rtl\n                : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                : selectionColumnWidth\n                : column._freezed\n                : column._endFreezed\n                : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                : _tableColumnResizeService.getNextColumnsWidth(column.name)\n    \"\n    [attr.aria-expanded]=\"_isTreeRowFirstCell(colIdx, row) ? row.expanded : null\"\n    [attr.data-nesting-level]=\"colIdx === 0 ? row.level + 1 : null\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    (click)=\"_tableRowService.cellClicked({ index: colIdx, row })\"\n    (keydown.enter)=\"_isTreeRowFirstCell(colIdx, row, $event) && _toggleGroupRow()\"\n    (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n    (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n>\n    <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n        <span\n            *ngIf=\"_isTreeRowFirstCell(colIdx, row)\"\n            class=\"fd-table__expand\"\n            [class.fd-table__expand--open]=\"row.expanded$ | async\"\n            aria-hidden=\"true\"\n        ></span>\n\n        <ng-container *ngIf=\"row.state === 'readonly'; else editModeCell\">\n            <span\n                *ngIf=\"(row.value | valueByPath : column.key) === '' || (row.value | valueByPath : column.key) === null\"\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                >{{ 'platformTable.emptyCell' | fdTranslate }}</span\n            >\n            <ng-container *ngIf=\"column?.columnCellTemplate; else defaultTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.columnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-template #defaultTableCellTemplate>{{ row.value | valueByPath : column.key }}</ng-template>\n\n        <ng-template #editModeCell>\n            <ng-container *ngIf=\"column?.editableColumnCellTemplate; else defaultEditableTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.editableColumnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n\n            <ng-template #defaultEditableTableCellTemplate>\n                <fdp-table-editable-cell\n                    [row]=\"row\"\n                    [column]=\"column\"\n                    [columnValue]=\"row.value | valueByPath : column.key\"\n                ></fdp-table-editable-cell>\n            </ng-template>\n        </ng-template>\n    </div>\n</td>\n\n<ng-content></ng-content>\n\n<td\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n>\n    <i\n        *ngIf=\"row.navigatable\"\n        fd-table-icon\n        [navigation]=\"true\"\n        [class]=\"_rtl ? 'sap-icon--slim-arrow-left' : 'sap-icon--slim-arrow-right'\"\n        class=\"fdp-table__navigation-indicator\"\n    ></i>\n</td>\n\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n" }]
+                    ], template: "<td\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async as semanticHighlighting\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n    [status]=\"row.value[semanticHighlighting]\"\n></td>\n\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n\n<!-- Row Selection Cell -->\n<ng-container [ngSwitch]=\"selectionMode\">\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.SINGLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            fd-table-cell-selectable\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow()\"\n            (keydown.space)=\"_toggleSingleSelectableRow()\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.MULTIPLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.aria-selected]=\"row.checked\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    </ng-container>\n</ng-container>\n\n<ng-template #selectionMock>\n    <td\n        class=\"fd-table__cell--checkbox\"\n        role=\"gridcell\"\n        fd-table-cell\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [class.fd-table__cell--fixed]=\"fixed\"\n    ></td>\n</ng-template>\n\n<td\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        last as isLast;\n        trackBy: _columnTrackBy\n    \"\n    [fdpTableCellResizable]=\"\n        colIdx\n            | columnResizableSide\n                : _fdpTableService.visibleColumnsLength\n                : (_fdpTableService._isShownNavigationColumn$ | async) === true\n    \"\n    [columnName]=\"column.name\"\n    [focusable]=\"true\"\n    [attr.role]=\"column.role\"\n    [headers]=\"rowId + '__' + column.name\"\n    [ngClass]=\"[\n        'fdp-table__col--' + column.name,\n        column._freezed ? 'fd-table__cell--fixed' : '',\n        column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n        column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n        column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n        row.isTree && colIdx === 0 ? 'fd-table__cell--expand' : '',\n        isLast && (_fdpTableService._isShownNavigationColumn$ | async) === false ? 'is-last-child' : ''\n    ]\"\n    [ngStyle]=\"\n        column\n            | tableCellStyles\n                : _rtl\n                : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                : selectionColumnWidth\n                : column._freezed\n                : column._endFreezed\n                : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                : _tableColumnResizeService.getNextColumnsWidth(column.name)\n    \"\n    [attr.aria-expanded]=\"_isTreeRowFirstCell(colIdx, row) ? row.expanded : null\"\n    [attr.data-nesting-level]=\"colIdx === 0 ? row.level + 1 : null\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    (click)=\"_tableRowService.cellClicked({ index: colIdx, row })\"\n    (keydown.enter)=\"_isTreeRowFirstCell(colIdx, row, $event) && _toggleGroupRow()\"\n    (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n    (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n>\n    <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n        <span\n            *ngIf=\"_isTreeRowFirstCell(colIdx, row)\"\n            class=\"fd-table__expand\"\n            [class.fd-table__expand--open]=\"row.expanded$ | async\"\n            aria-hidden=\"true\"\n        ></span>\n\n        <ng-container *ngIf=\"row.state === 'readonly'; else editModeCell\">\n            <span\n                *ngIf=\"(row.value | valueByPath : column.key) === '' || (row.value | valueByPath : column.key) === null\"\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                >{{ 'platformTable.emptyCell' | fdTranslate }}</span\n            >\n            <ng-container *ngIf=\"column?.columnCellTemplate; else defaultTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.columnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-template #defaultTableCellTemplate>{{ row.value | valueByPath : column.key }}</ng-template>\n\n        <ng-template #editModeCell>\n            <ng-container *ngIf=\"column?.editableColumnCellTemplate; else defaultEditableTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.editableColumnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n\n            <ng-template #defaultEditableTableCellTemplate>\n                <fdp-table-editable-cell\n                    [row]=\"row\"\n                    [column]=\"column\"\n                    [columnValue]=\"row.value | valueByPath : column.key\"\n                ></fdp-table-editable-cell>\n            </ng-template>\n        </ng-template>\n    </div>\n</td>\n\n<ng-content></ng-content>\n\n<td\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n>\n    <i\n        *ngIf=\"row.navigatable\"\n        fd-table-icon\n        [navigation]=\"true\"\n        [class]=\"_rtl ? 'sap-icon--slim-arrow-left' : 'sap-icon--slim-arrow-right'\"\n        class=\"fdp-table__navigation-indicator\"\n    ></i>\n</td>\n\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { rowId: [{
                 type: Input
             }], row: [{