@fundamental-ngx/platform 0.43.33 → 0.43.34

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

@@ -43,7 +43,7 @@ import { contentDensityObserverProviders, ContentDensityObserver, ContentDensity
 import * as i3$4 from '@fundamental-ngx/platform/form';
 import { PlatformInputModule, PlatformDatePickerModule, PlatformSwitchModule } from '@fundamental-ngx/platform/form';
 import * as i7$2 from '@fundamental-ngx/platform/list';
-import { PlatformListModule } from '@fundamental-ngx/platform/list';
+import { ListComponent, PlatformListModule } from '@fundamental-ngx/platform/list';
 import * as i11$1 from '@fundamental-ngx/platform/search-field';
 import { PlatformSearchFieldModule } from '@fundamental-ngx/platform/search-field';
 import * as i4$2 from '@fundamental-ngx/platform/button';
@@ -54,7 +54,7 @@ import { isJsObject, FDP_PRESET_MANAGED_COMPONENT, PlatformContentDensityDepreca
 import * as i7$3 from '@fundamental-ngx/core/skeleton';
 import { SkeletonModule } from '@fundamental-ngx/core/skeleton';
 import * as i1 from '@fundamental-ngx/platform/table-helpers';
-import { TableColumn, FilterableColumnDataType, FdpCellDef, FdpEditableCellDef, FdpHeaderCellDef, TableCellHeaderPopoverDirective, SortDirection, getUniqueListValuesByKey, getFilterStrategiesBasedOnDataType, FILTER_STRATEGY, FdpViewSettingsFilterCustomDef, FilterType, TableService, Table, FILTER_STRING_STRATEGY, EditableTableCell, isTreeRowFirstCell, SelectionMode, TableColumnResizeService, TableRowService, isTreeRow, TableDraggableDirective, 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, TableHelpersModule } from '@fundamental-ngx/platform/table-helpers';
+import { TableColumn, FilterableColumnDataType, FdpCellDef, FdpEditableCellDef, FdpHeaderCellDef, TableCellHeaderPopoverDirective, SortDirection, getUniqueListValuesByKey, getFilterStrategiesBasedOnDataType, FILTER_STRATEGY, FdpViewSettingsFilterCustomDef, FilterType, TableService, Table, FILTER_STRING_STRATEGY, EditableTableCell, isTreeRowFirstCell, SelectionMode, TableColumnResizeService, TableRowService, isTreeRow, TableDraggableDirective, 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, TableCellActivateEvent, TableRowActivateEvent, TableRowToggleOpenStateEvent, findRowChildren, getRowParents, TableSortChangeEvent, TablePageChangeEvent, TableGroupChangeEvent, TableColumnFreezeEvent, TableFilterChangeEvent, TableColumnsChangeEvent, convertObjectsToTableRows, isTableRow, convertTreeTableRowToFlatList, convertTreeObjectsToTableRows, getFreezableColumns, getFreezableEndColumns, applySelectionToChildren, SELECTION_COLUMN_WIDTH, TableScrollDispatcherService, TableResponsiveService, TableHelpersModule } from '@fundamental-ngx/platform/table-helpers';
 export * from '@fundamental-ngx/platform/table-helpers';
 import { DOWN_ARROW, UP_ARROW, SPACE } from '@angular/cdk/keycodes';
 import equal$1 from 'fast-deep-equal';
@@ -1290,9 +1290,11 @@ class TableP13DialogComponent {
         const filterBy = state?.filterBy;
         const dialogData = {
             columns: columns.map(({ label, key, dataType, filterable }) => ({ label, key, dataType, filterable })),
-            collectionFilter: filterBy,
-            validator: this.filter.validator
+            collectionFilter: filterBy
         };
+        if (this.filter && this.filter.validator) {
+            dialogData.validator = this.filter.validator;
+        }
         const dialogRef = this._dialogService.open(P13FilteringDialogComponent, {
             ...dialogConfig$1,
             disablePaddings: true,
@@ -1600,10 +1602,10 @@ class TableToolbarComponent {
     }
 }
 TableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Table }, { token: i1.TableService }], target: i0.ɵɵFactoryTarget.Component });
-TableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableToolbarComponent, selector: "fdp-table-toolbar", inputs: { shouldOverflow: "shouldOverflow", title: "title", searchFieldAriaLabel: "searchFieldAriaLabel", hideItemCount: "hideItemCount", hideSearchInput: "hideSearchInput", showExpandCollapseButtons: "showExpandCollapseButtons", searchSuggestions: "searchSuggestions", editMode: "editMode" }, providers: [{ provide: TABLE_TOOLBAR, useExisting: TableToolbarComponent }], queries: [{ propertyName: "tableToolbarActionsComponent", first: true, predicate: TableToolbarActionsComponent, descendants: true }, { propertyName: "_tableToolbarLeftActionsComponent", first: true, predicate: TableToolbarLeftActionsComponent, descendants: true }], viewQueries: [{ propertyName: "contentTemplateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template\n    let-counter=\"counter\"\n    let-sortable=\"sortable\"\n    let-filterable=\"filterable\"\n    let-groupable=\"groupable\"\n    let-columns=\"columns\"\n>\n    <fd-toolbar\n        fdType=\"transparent\"\n        [clearBorder]=\"true\"\n        [titleId]=\"tableToolbarTitleId\"\n        [title]=\"title && !hideItemCount ? title + ' (' + (counter | async) + ')' : title\"\n        [shouldOverflow]=\"shouldOverflow\"\n    >\n        <ng-container *ngIf=\"_tableToolbarLeftActionsComponent\">\n            <span fd-toolbar-item fdOverflowPriority=\"never\">\n                <fd-toolbar-separator *ngIf=\"!!title || !hideItemCount\"></fd-toolbar-separator>\n                <ng-container *ngTemplateOutlet=\"_tableToolbarLeftActionsComponent._contentTemplateRef\"></ng-container>\n            </span>\n        </ng-container>\n        <fd-toolbar-spacer></fd-toolbar-spacer>\n\n        <fdp-search-field\n            fd-toolbar-item\n            *ngIf=\"!hideSearchInput\"\n            style=\"min-width: 15.5rem\"\n            [placeholder]=\"'platformTable.toolbarSearchPlaceholder' | fdTranslate\"\n            [inputText]=\"_searchInputText\"\n            [disabled]=\"!!(tableLoading$ | async)\"\n            [suggestions]=\"searchSuggestions\"\n            [ariaLabel]=\"searchFieldAriaLabel || null\"\n            [ariaLabelledBy]=\"searchFieldAriaLabel ? null : tableToolbarTitleId\"\n            (searchSubmit)=\"submitSearch($event)\"\n            (cancelSearch)=\"submitSearch($event)\"\n            [disableSuggestionsFoundAnnouncer]=\"true\"\n        ></fdp-search-field>\n\n        <ng-container *ngIf=\"editMode !== 'none'\">\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                [label]=\"'platformTable.toolbarActionCreateButtonLabel' | fdTranslate\"\n                (click)=\"_addRow()\"\n            ></fdp-button>\n            <ng-container *ngIf=\"_showSaveButton\">\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    [label]=\"'platformTable.toolbarActionSaveButtonLabel' | fdTranslate\"\n                    *ngIf=\"_showSaveButton\"\n                    (click)=\"_saveRows()\"\n                ></fdp-button>\n                <fd-toolbar-separator></fd-toolbar-separator>\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    [label]=\"'platformTable.toolbarActionCancelButtonLabel' | fdTranslate\"\n                    (click)=\"_cancelEditing()\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            </ng-container>\n            <fd-toolbar-separator\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"\n                    tableToolbarActionsComponent ||\n                    (sortable | async) ||\n                    (filterable | async) ||\n                    (groupable | async) ||\n                    (columns | async)\n                \"\n            ></fd-toolbar-separator>\n        </ng-container>\n\n        <span fd-toolbar-item *ngIf=\"tableToolbarActionsComponent\" class=\"fdp-table-toolbar-actions\">\n            <ng-container *ngTemplateOutlet=\"tableToolbarActionsComponent.contentTemplateRef\"></ng-container>\n        </span>\n\n        <ng-container\n            *ngIf=\"\n                showExpandCollapseButtons ||\n                (sortable | async) ||\n                (filterable | async) ||\n                (groupable | async) ||\n                (columns | async)\n            \"\n        >\n            <fd-toolbar-separator\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"tableToolbarActionsComponent\"\n            ></fd-toolbar-separator>\n\n            <ng-container *ngIf=\"showExpandCollapseButtons\">\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"expand-all\"\n                    (click)=\"_expandAll()\"\n                    [title]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"collapse-all\"\n                    (click)=\"_collapseAll()\"\n                    [title]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            </ng-container>\n\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"sortable | async\"\n                glyph=\"sort\"\n                [title]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openSorting()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"filterable | async\"\n                glyph=\"filter\"\n                [title]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openFiltering()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"groupable | async\"\n                glyph=\"group-2\"\n                [title]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openGrouping()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"columns | async\"\n                glyph=\"action-settings\"\n                [title]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openColumns()\"\n            ></fdp-button>\n        </ng-container>\n    </fd-toolbar>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i3$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i3$2.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: i3$2.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "component", type: i4$2.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "toggled", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: i11$1.SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "searchSuggestionMessage", "searchSuggestionNavigateMessage", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableToolbarComponent, selector: "fdp-table-toolbar", inputs: { shouldOverflow: "shouldOverflow", title: "title", searchFieldAriaLabel: "searchFieldAriaLabel", hideItemCount: "hideItemCount", hideSearchInput: "hideSearchInput", showExpandCollapseButtons: "showExpandCollapseButtons", searchSuggestions: "searchSuggestions", editMode: "editMode" }, providers: [{ provide: TABLE_TOOLBAR, useExisting: TableToolbarComponent }], queries: [{ propertyName: "tableToolbarActionsComponent", first: true, predicate: TableToolbarActionsComponent, descendants: true }, { propertyName: "_tableToolbarLeftActionsComponent", first: true, predicate: TableToolbarLeftActionsComponent, descendants: true }], viewQueries: [{ propertyName: "contentTemplateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template\n    let-counter=\"counter\"\n    let-sortable=\"sortable\"\n    let-filterable=\"filterable\"\n    let-groupable=\"groupable\"\n    let-columns=\"columns\"\n>\n    <fd-toolbar\n        fdType=\"transparent\"\n        [clearBorder]=\"true\"\n        [titleId]=\"tableToolbarTitleId\"\n        [title]=\"title && !hideItemCount ? title + ' (' + (counter | async) + ')' : title\"\n        [shouldOverflow]=\"shouldOverflow\"\n    >\n        <ng-container *ngIf=\"_tableToolbarLeftActionsComponent\">\n            <span fd-toolbar-item fdOverflowPriority=\"never\">\n                <fd-toolbar-separator *ngIf=\"!!title || !hideItemCount\"></fd-toolbar-separator>\n                <ng-container *ngTemplateOutlet=\"_tableToolbarLeftActionsComponent._contentTemplateRef\"></ng-container>\n            </span>\n        </ng-container>\n        <fd-toolbar-spacer></fd-toolbar-spacer>\n\n        <fdp-search-field\n            fd-toolbar-item\n            *ngIf=\"!hideSearchInput\"\n            style=\"min-width: 15.5rem\"\n            [placeholder]=\"'platformTable.toolbarSearchPlaceholder' | fdTranslate\"\n            [inputText]=\"_searchInputText\"\n            [disabled]=\"!!(tableLoading$ | async)\"\n            [suggestions]=\"searchSuggestions\"\n            [ariaLabel]=\"searchFieldAriaLabel\"\n            [ariaLabelledBy]=\"searchFieldAriaLabel ? null : tableToolbarTitleId\"\n            (searchSubmit)=\"submitSearch($event)\"\n            (cancelSearch)=\"submitSearch($event)\"\n            [disableSuggestionsFoundAnnouncer]=\"true\"\n        ></fdp-search-field>\n\n        <ng-container *ngIf=\"editMode !== 'none'\">\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                [label]=\"'platformTable.toolbarActionCreateButtonLabel' | fdTranslate\"\n                (click)=\"_addRow()\"\n            ></fdp-button>\n            <ng-container *ngIf=\"_showSaveButton\">\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    [label]=\"'platformTable.toolbarActionSaveButtonLabel' | fdTranslate\"\n                    *ngIf=\"_showSaveButton\"\n                    (click)=\"_saveRows()\"\n                ></fdp-button>\n                <fd-toolbar-separator></fd-toolbar-separator>\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    [label]=\"'platformTable.toolbarActionCancelButtonLabel' | fdTranslate\"\n                    (click)=\"_cancelEditing()\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            </ng-container>\n            <fd-toolbar-separator\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"\n                    tableToolbarActionsComponent ||\n                    (sortable | async) ||\n                    (filterable | async) ||\n                    (groupable | async) ||\n                    (columns | async)\n                \"\n            ></fd-toolbar-separator>\n        </ng-container>\n\n        <span fd-toolbar-item *ngIf=\"tableToolbarActionsComponent\" class=\"fdp-table-toolbar-actions\">\n            <ng-container *ngTemplateOutlet=\"tableToolbarActionsComponent.contentTemplateRef\"></ng-container>\n        </span>\n\n        <ng-container\n            *ngIf=\"\n                showExpandCollapseButtons ||\n                (sortable | async) ||\n                (filterable | async) ||\n                (groupable | async) ||\n                (columns | async)\n            \"\n        >\n            <fd-toolbar-separator\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"tableToolbarActionsComponent\"\n            ></fd-toolbar-separator>\n\n            <ng-container *ngIf=\"showExpandCollapseButtons\">\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"expand-all\"\n                    (click)=\"_expandAll()\"\n                    [title]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"collapse-all\"\n                    (click)=\"_collapseAll()\"\n                    [title]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            </ng-container>\n\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"sortable | async\"\n                glyph=\"sort\"\n                [title]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openSorting()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"filterable | async\"\n                glyph=\"filter\"\n                [title]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openFiltering()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"groupable | async\"\n                glyph=\"group-2\"\n                [title]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openGrouping()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"columns | async\"\n                glyph=\"action-settings\"\n                [title]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openColumns()\"\n            ></fdp-button>\n        </ng-container>\n    </fd-toolbar>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$2.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i3$2.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i3$2.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: i3$2.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "component", type: i4$2.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "toggled", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: i11$1.SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "searchSuggestionMessage", "searchSuggestionNavigateMessage", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-table-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: TABLE_TOOLBAR, useExisting: TableToolbarComponent }], template: "<ng-template\n    let-counter=\"counter\"\n    let-sortable=\"sortable\"\n    let-filterable=\"filterable\"\n    let-groupable=\"groupable\"\n    let-columns=\"columns\"\n>\n    <fd-toolbar\n        fdType=\"transparent\"\n        [clearBorder]=\"true\"\n        [titleId]=\"tableToolbarTitleId\"\n        [title]=\"title && !hideItemCount ? title + ' (' + (counter | async) + ')' : title\"\n        [shouldOverflow]=\"shouldOverflow\"\n    >\n        <ng-container *ngIf=\"_tableToolbarLeftActionsComponent\">\n            <span fd-toolbar-item fdOverflowPriority=\"never\">\n                <fd-toolbar-separator *ngIf=\"!!title || !hideItemCount\"></fd-toolbar-separator>\n                <ng-container *ngTemplateOutlet=\"_tableToolbarLeftActionsComponent._contentTemplateRef\"></ng-container>\n            </span>\n        </ng-container>\n        <fd-toolbar-spacer></fd-toolbar-spacer>\n\n        <fdp-search-field\n            fd-toolbar-item\n            *ngIf=\"!hideSearchInput\"\n            style=\"min-width: 15.5rem\"\n            [placeholder]=\"'platformTable.toolbarSearchPlaceholder' | fdTranslate\"\n            [inputText]=\"_searchInputText\"\n            [disabled]=\"!!(tableLoading$ | async)\"\n            [suggestions]=\"searchSuggestions\"\n            [ariaLabel]=\"searchFieldAriaLabel || null\"\n            [ariaLabelledBy]=\"searchFieldAriaLabel ? null : tableToolbarTitleId\"\n            (searchSubmit)=\"submitSearch($event)\"\n            (cancelSearch)=\"submitSearch($event)\"\n            [disableSuggestionsFoundAnnouncer]=\"true\"\n        ></fdp-search-field>\n\n        <ng-container *ngIf=\"editMode !== 'none'\">\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                [label]=\"'platformTable.toolbarActionCreateButtonLabel' | fdTranslate\"\n                (click)=\"_addRow()\"\n            ></fdp-button>\n            <ng-container *ngIf=\"_showSaveButton\">\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    [label]=\"'platformTable.toolbarActionSaveButtonLabel' | fdTranslate\"\n                    *ngIf=\"_showSaveButton\"\n                    (click)=\"_saveRows()\"\n                ></fdp-button>\n                <fd-toolbar-separator></fd-toolbar-separator>\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    [label]=\"'platformTable.toolbarActionCancelButtonLabel' | fdTranslate\"\n                    (click)=\"_cancelEditing()\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            </ng-container>\n            <fd-toolbar-separator\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"\n                    tableToolbarActionsComponent ||\n                    (sortable | async) ||\n                    (filterable | async) ||\n                    (groupable | async) ||\n                    (columns | async)\n                \"\n            ></fd-toolbar-separator>\n        </ng-container>\n\n        <span fd-toolbar-item *ngIf=\"tableToolbarActionsComponent\" class=\"fdp-table-toolbar-actions\">\n            <ng-container *ngTemplateOutlet=\"tableToolbarActionsComponent.contentTemplateRef\"></ng-container>\n        </span>\n\n        <ng-container\n            *ngIf=\"\n                showExpandCollapseButtons ||\n                (sortable | async) ||\n                (filterable | async) ||\n                (groupable | async) ||\n                (columns | async)\n            \"\n        >\n            <fd-toolbar-separator\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"tableToolbarActionsComponent\"\n            ></fd-toolbar-separator>\n\n            <ng-container *ngIf=\"showExpandCollapseButtons\">\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"expand-all\"\n                    (click)=\"_expandAll()\"\n                    [title]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"collapse-all\"\n                    (click)=\"_collapseAll()\"\n                    [title]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            </ng-container>\n\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"sortable | async\"\n                glyph=\"sort\"\n                [title]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openSorting()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"filterable | async\"\n                glyph=\"filter\"\n                [title]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openFiltering()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"groupable | async\"\n                glyph=\"group-2\"\n                [title]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openGrouping()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"columns | async\"\n                glyph=\"action-settings\"\n                [title]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openColumns()\"\n            ></fdp-button>\n        </ng-container>\n    </fd-toolbar>\n</ng-template>\n" }]
+            args: [{ selector: 'fdp-table-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: TABLE_TOOLBAR, useExisting: TableToolbarComponent }], template: "<ng-template\n    let-counter=\"counter\"\n    let-sortable=\"sortable\"\n    let-filterable=\"filterable\"\n    let-groupable=\"groupable\"\n    let-columns=\"columns\"\n>\n    <fd-toolbar\n        fdType=\"transparent\"\n        [clearBorder]=\"true\"\n        [titleId]=\"tableToolbarTitleId\"\n        [title]=\"title && !hideItemCount ? title + ' (' + (counter | async) + ')' : title\"\n        [shouldOverflow]=\"shouldOverflow\"\n    >\n        <ng-container *ngIf=\"_tableToolbarLeftActionsComponent\">\n            <span fd-toolbar-item fdOverflowPriority=\"never\">\n                <fd-toolbar-separator *ngIf=\"!!title || !hideItemCount\"></fd-toolbar-separator>\n                <ng-container *ngTemplateOutlet=\"_tableToolbarLeftActionsComponent._contentTemplateRef\"></ng-container>\n            </span>\n        </ng-container>\n        <fd-toolbar-spacer></fd-toolbar-spacer>\n\n        <fdp-search-field\n            fd-toolbar-item\n            *ngIf=\"!hideSearchInput\"\n            style=\"min-width: 15.5rem\"\n            [placeholder]=\"'platformTable.toolbarSearchPlaceholder' | fdTranslate\"\n            [inputText]=\"_searchInputText\"\n            [disabled]=\"!!(tableLoading$ | async)\"\n            [suggestions]=\"searchSuggestions\"\n            [ariaLabel]=\"searchFieldAriaLabel\"\n            [ariaLabelledBy]=\"searchFieldAriaLabel ? null : tableToolbarTitleId\"\n            (searchSubmit)=\"submitSearch($event)\"\n            (cancelSearch)=\"submitSearch($event)\"\n            [disableSuggestionsFoundAnnouncer]=\"true\"\n        ></fdp-search-field>\n\n        <ng-container *ngIf=\"editMode !== 'none'\">\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                [label]=\"'platformTable.toolbarActionCreateButtonLabel' | fdTranslate\"\n                (click)=\"_addRow()\"\n            ></fdp-button>\n            <ng-container *ngIf=\"_showSaveButton\">\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    [label]=\"'platformTable.toolbarActionSaveButtonLabel' | fdTranslate\"\n                    *ngIf=\"_showSaveButton\"\n                    (click)=\"_saveRows()\"\n                ></fdp-button>\n                <fd-toolbar-separator></fd-toolbar-separator>\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    [label]=\"'platformTable.toolbarActionCancelButtonLabel' | fdTranslate\"\n                    (click)=\"_cancelEditing()\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            </ng-container>\n            <fd-toolbar-separator\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"\n                    tableToolbarActionsComponent ||\n                    (sortable | async) ||\n                    (filterable | async) ||\n                    (groupable | async) ||\n                    (columns | async)\n                \"\n            ></fd-toolbar-separator>\n        </ng-container>\n\n        <span fd-toolbar-item *ngIf=\"tableToolbarActionsComponent\" class=\"fdp-table-toolbar-actions\">\n            <ng-container *ngTemplateOutlet=\"tableToolbarActionsComponent.contentTemplateRef\"></ng-container>\n        </span>\n\n        <ng-container\n            *ngIf=\"\n                showExpandCollapseButtons ||\n                (sortable | async) ||\n                (filterable | async) ||\n                (groupable | async) ||\n                (columns | async)\n            \"\n        >\n            <fd-toolbar-separator\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"tableToolbarActionsComponent\"\n            ></fd-toolbar-separator>\n\n            <ng-container *ngIf=\"showExpandCollapseButtons\">\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"expand-all\"\n                    (click)=\"_expandAll()\"\n                    [title]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"collapse-all\"\n                    (click)=\"_collapseAll()\"\n                    [title]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            </ng-container>\n\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"sortable | async\"\n                glyph=\"sort\"\n                [title]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openSorting()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"filterable | async\"\n                glyph=\"filter\"\n                [title]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openFiltering()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"groupable | async\"\n                glyph=\"group-2\"\n                [title]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openGrouping()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"columns | async\"\n                glyph=\"action-settings\"\n                [title]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openColumns()\"\n            ></fdp-button>\n        </ng-container>\n    </fd-toolbar>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.Table }, { type: i1.TableService }]; }, propDecorators: { shouldOverflow: [{
                 type: Input
             }], title: [{
@@ -2475,12 +2477,18 @@ class TableCellHeaderPopoverComponent {
         this._table.unfreeze(this.column.name, this.column.endFreezable);
         this.popover?.close();
     }
+    /** @hidden */
+    _popoverOpened(isOpen) {
+        if (isOpen) {
+            this._listComponent?._setCurrentActiveItemIndex(0);
+        }
+    }
 }
 TableCellHeaderPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableCellHeaderPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableCellHeaderPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableCellHeaderPopoverComponent, selector: "fdp-table-cell-header-popover", inputs: { column: "column", popoverTemplate: "popoverTemplate", disabled: "disabled", columnFrozen: "columnFrozen", filteringFromHeaderDisabled: "filteringFromHeaderDisabled", columnIndex: "columnIndex" }, providers: [DestroyedService], viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "_popoverItems", predicate: TemplateDirective, descendants: true }], ngImport: i0, template: "<fd-popover\n    [disabled]=\"disabled\"\n    [noArrow]=\"true\"\n    fd-table-popover\n    [focusAutoCapture]=\"true\"\n    [focusTrapped]=\"true\"\n    *ngIf=\"!popoverTemplate; else projectedPopover\"\n    [triggers]=\"_headerPopoverTriggers\"\n>\n    <fdp-list [noBorder]=\"true\" [navigated]=\"true\">\n        <fdp-free-content-list-item *ngFor=\"let item of _popoverItems$.asObservable() | async\">\n            <ng-template [ngTemplateOutlet]=\"item\" [ngTemplateOutletContext]=\"{ popover: popover }\"></ng-template>\n        </fdp-free-content-list-item>\n    </fdp-list>\n</fd-popover>\n<ng-template #projectedPopover>\n    <ng-template\n        [ngTemplateOutlet]=\"popoverTemplate!\"\n        [ngTemplateOutletContext]=\"{ $implicit: _popoverItems$.asObservable() }\"\n    ></ng-template>\n</ng-template>\n\n<ng-container *ngIf=\"column?.sortable\">\n    <ng-template fdkTemplate=\"sortingAscPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n        >\n            <span fd-list-icon glyph=\"sort-ascending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortAsc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n    <ng-template fdkTemplate=\"sortingDescPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n        >\n            <span fd-list-icon glyph=\"sort-descending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortDesc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.groupable\">\n    <ng-template fdkTemplate=\"groupPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderGroupBy(column.key)\"\n            (keydown.enter)=\"_setColumnHeaderGroupBy(column.key)\"\n        >\n            <span fd-list-title>{{ 'platformTable.headerMenuGroup' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.freezable || column?.endFreezable\">\n    <ng-template fdkTemplate=\"freezePopoverItem\" let-popover=\"popover\">\n        <ng-container *ngIf=\"!columnFrozen; else unfreezeTpl\">\n            <a fd-list-link [focusable]=\"true\" (click)=\"_freeze()\" (keyup.enter)=\"_freeze()\">\n                <span fd-list-title>\n                    {{\n                        (!column.endFreezable\n                            ? columnIndex > 0\n                                ? 'platformTable.headerMenuFreezePlural'\n                                : 'platformTable.headerMenuFreeze'\n                            : 'platformTable.headerMenuEndFreeze'\n                        ) | fdTranslate\n                    }}</span\n                >\n            </a>\n        </ng-container>\n        <ng-template #unfreezeTpl>\n            <a fd-list-link [focusable]=\"true\" (click)=\"_unFreeze()\" (keyup.enter)=\"_unFreeze()\">\n                <span fd-list-title>{{\n                    (columnIndex > 0 ? 'platformTable.headerMenuUnfreezePlural' : 'platformTable.headerMenuUnfreeze')\n                        | fdTranslate\n                }}</span>\n            </a>\n        </ng-template>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.filterable && !filteringFromHeaderDisabled\">\n    <ng-template fdkTemplate=\"filteringPopoverItem\" let-popover=\"popover\">\n        <div fd-list-link style=\"cursor: auto\">\n            <i fd-list-icon glyph=\"filter\"></i>\n            <div fd-form-item [horizontal]=\"true\" (click)=\"$event.stopPropagation()\">\n                <label fd-form-label [for]=\"'fdp-table-column-filtering-' + column.name\">{{\n                    'platformTable.headerMenuFilter' | fdTranslate\n                }}</label>\n                <input\n                    fd-form-control\n                    [id]=\"'fdp-table-column-filtering-' + column.name\"\n                    (keydown.enter)=\"_setColumnHeaderFilterBy(column.key, $any($event.target)?.value)\"\n                />\n            </div>\n        </div>\n    </ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.TablePopoverDirective, selector: "[fdTablePopover], [fd-table-popover]" }, { kind: "component", type: i3$1.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i3$1.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i3$1.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i3$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i4$3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i2.TemplateDirective, selector: "[fdkTemplate], [fdTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i7$2.ListComponent, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "component", type: i7$2.FreeContentListItemComponent, selector: "fdp-free-content-list-item" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TableCellHeaderPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableCellHeaderPopoverComponent, selector: "fdp-table-cell-header-popover", inputs: { column: "column", popoverTemplate: "popoverTemplate", disabled: "disabled", columnFrozen: "columnFrozen", filteringFromHeaderDisabled: "filteringFromHeaderDisabled", columnIndex: "columnIndex" }, providers: [DestroyedService], viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "_listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "_popoverItems", predicate: TemplateDirective, descendants: true }], ngImport: i0, template: "<fd-popover\n    [disabled]=\"disabled\"\n    [noArrow]=\"true\"\n    fd-table-popover\n    [focusAutoCapture]=\"true\"\n    [focusTrapped]=\"true\"\n    *ngIf=\"!popoverTemplate; else projectedPopover\"\n    [triggers]=\"_headerPopoverTriggers\"\n    (isOpenChange)=\"_popoverOpened($event)\"\n>\n    <fdp-list [noBorder]=\"true\" [navigated]=\"true\">\n        <li fdp-free-content-list-item *ngFor=\"let item of _popoverItems$.asObservable() | async\">\n            <ng-template [ngTemplateOutlet]=\"item\" [ngTemplateOutletContext]=\"{ popover: popover }\"></ng-template>\n        </li>\n    </fdp-list>\n</fd-popover>\n<ng-template #projectedPopover>\n    <ng-template\n        [ngTemplateOutlet]=\"popoverTemplate!\"\n        [ngTemplateOutletContext]=\"{ $implicit: _popoverItems$.asObservable() }\"\n    ></ng-template>\n</ng-template>\n\n<ng-container *ngIf=\"column?.sortable\">\n    <ng-template fdkTemplate=\"sortingAscPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            role=\"button\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n        >\n            <span fd-list-icon glyph=\"sort-ascending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortAsc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n    <ng-template fdkTemplate=\"sortingDescPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            role=\"button\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n        >\n            <span fd-list-icon glyph=\"sort-descending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortDesc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.groupable\">\n    <ng-template fdkTemplate=\"groupPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            role=\"button\"\n            (click)=\"_setColumnHeaderGroupBy(column.key)\"\n            (keydown.enter)=\"_setColumnHeaderGroupBy(column.key)\"\n        >\n            <span fd-list-title>{{ 'platformTable.headerMenuGroup' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.freezable || column?.endFreezable\">\n    <ng-template fdkTemplate=\"freezePopoverItem\" let-popover=\"popover\">\n        <ng-container *ngIf=\"!columnFrozen; else unfreezeTpl\">\n            <a fd-list-link [focusable]=\"true\" (click)=\"_freeze()\" role=\"button\" (keydown.enter)=\"_freeze()\">\n                <span fd-list-title>\n                    {{\n                        (!column.endFreezable\n                            ? columnIndex > 0\n                                ? 'platformTable.headerMenuFreezePlural'\n                                : 'platformTable.headerMenuFreeze'\n                            : 'platformTable.headerMenuEndFreeze'\n                        ) | fdTranslate\n                    }}</span\n                >\n            </a>\n        </ng-container>\n        <ng-template #unfreezeTpl>\n            <a fd-list-link [focusable]=\"true\" (click)=\"_unFreeze()\" role=\"button\" (keydown.enter)=\"_unFreeze()\">\n                <span fd-list-title>{{\n                    (columnIndex > 0 ? 'platformTable.headerMenuUnfreezePlural' : 'platformTable.headerMenuUnfreeze')\n                        | fdTranslate\n                }}</span>\n            </a>\n        </ng-template>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.filterable && !filteringFromHeaderDisabled\">\n    <ng-template fdkTemplate=\"filteringPopoverItem\" let-popover=\"popover\">\n        <a fd-list-link style=\"cursor: auto\" [focusable]=\"true\">\n            <i fd-list-icon glyph=\"filter\"></i>\n            <div fd-form-item [horizontal]=\"true\" (click)=\"$event.stopPropagation()\">\n                <label fd-form-label [for]=\"'fdp-table-column-filtering-' + column.name\">{{\n                    'platformTable.headerMenuFilter' | fdTranslate\n                }}</label>\n                <input\n                    fd-form-control\n                    [id]=\"'fdp-table-column-filtering-' + column.name\"\n                    (keydown.enter)=\"_setColumnHeaderFilterBy(column.key, $any($event.target)?.value)\"\n                />\n            </div>\n        </a>\n    </ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.TablePopoverDirective, selector: "[fdTablePopover], [fd-table-popover]" }, { kind: "component", type: i3$1.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i3$1.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i3$1.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i3$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i4$3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role", "ariaHidden"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i2.TemplateDirective, selector: "[fdkTemplate], [fdTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i7$2.ListComponent, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "component", type: i7$2.FreeContentListItemComponent, selector: "fdp-free-content-list-item, li[fdp-free-content-list-item]" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableCellHeaderPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-table-cell-header-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DestroyedService], template: "<fd-popover\n    [disabled]=\"disabled\"\n    [noArrow]=\"true\"\n    fd-table-popover\n    [focusAutoCapture]=\"true\"\n    [focusTrapped]=\"true\"\n    *ngIf=\"!popoverTemplate; else projectedPopover\"\n    [triggers]=\"_headerPopoverTriggers\"\n>\n    <fdp-list [noBorder]=\"true\" [navigated]=\"true\">\n        <fdp-free-content-list-item *ngFor=\"let item of _popoverItems$.asObservable() | async\">\n            <ng-template [ngTemplateOutlet]=\"item\" [ngTemplateOutletContext]=\"{ popover: popover }\"></ng-template>\n        </fdp-free-content-list-item>\n    </fdp-list>\n</fd-popover>\n<ng-template #projectedPopover>\n    <ng-template\n        [ngTemplateOutlet]=\"popoverTemplate!\"\n        [ngTemplateOutletContext]=\"{ $implicit: _popoverItems$.asObservable() }\"\n    ></ng-template>\n</ng-template>\n\n<ng-container *ngIf=\"column?.sortable\">\n    <ng-template fdkTemplate=\"sortingAscPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n        >\n            <span fd-list-icon glyph=\"sort-ascending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortAsc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n    <ng-template fdkTemplate=\"sortingDescPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n        >\n            <span fd-list-icon glyph=\"sort-descending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortDesc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.groupable\">\n    <ng-template fdkTemplate=\"groupPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderGroupBy(column.key)\"\n            (keydown.enter)=\"_setColumnHeaderGroupBy(column.key)\"\n        >\n            <span fd-list-title>{{ 'platformTable.headerMenuGroup' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.freezable || column?.endFreezable\">\n    <ng-template fdkTemplate=\"freezePopoverItem\" let-popover=\"popover\">\n        <ng-container *ngIf=\"!columnFrozen; else unfreezeTpl\">\n            <a fd-list-link [focusable]=\"true\" (click)=\"_freeze()\" (keyup.enter)=\"_freeze()\">\n                <span fd-list-title>\n                    {{\n                        (!column.endFreezable\n                            ? columnIndex > 0\n                                ? 'platformTable.headerMenuFreezePlural'\n                                : 'platformTable.headerMenuFreeze'\n                            : 'platformTable.headerMenuEndFreeze'\n                        ) | fdTranslate\n                    }}</span\n                >\n            </a>\n        </ng-container>\n        <ng-template #unfreezeTpl>\n            <a fd-list-link [focusable]=\"true\" (click)=\"_unFreeze()\" (keyup.enter)=\"_unFreeze()\">\n                <span fd-list-title>{{\n                    (columnIndex > 0 ? 'platformTable.headerMenuUnfreezePlural' : 'platformTable.headerMenuUnfreeze')\n                        | fdTranslate\n                }}</span>\n            </a>\n        </ng-template>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.filterable && !filteringFromHeaderDisabled\">\n    <ng-template fdkTemplate=\"filteringPopoverItem\" let-popover=\"popover\">\n        <div fd-list-link style=\"cursor: auto\">\n            <i fd-list-icon glyph=\"filter\"></i>\n            <div fd-form-item [horizontal]=\"true\" (click)=\"$event.stopPropagation()\">\n                <label fd-form-label [for]=\"'fdp-table-column-filtering-' + column.name\">{{\n                    'platformTable.headerMenuFilter' | fdTranslate\n                }}</label>\n                <input\n                    fd-form-control\n                    [id]=\"'fdp-table-column-filtering-' + column.name\"\n                    (keydown.enter)=\"_setColumnHeaderFilterBy(column.key, $any($event.target)?.value)\"\n                />\n            </div>\n        </div>\n    </ng-template>\n</ng-container>\n" }]
+            args: [{ selector: 'fdp-table-cell-header-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DestroyedService], template: "<fd-popover\n    [disabled]=\"disabled\"\n    [noArrow]=\"true\"\n    fd-table-popover\n    [focusAutoCapture]=\"true\"\n    [focusTrapped]=\"true\"\n    *ngIf=\"!popoverTemplate; else projectedPopover\"\n    [triggers]=\"_headerPopoverTriggers\"\n    (isOpenChange)=\"_popoverOpened($event)\"\n>\n    <fdp-list [noBorder]=\"true\" [navigated]=\"true\">\n        <li fdp-free-content-list-item *ngFor=\"let item of _popoverItems$.asObservable() | async\">\n            <ng-template [ngTemplateOutlet]=\"item\" [ngTemplateOutletContext]=\"{ popover: popover }\"></ng-template>\n        </li>\n    </fdp-list>\n</fd-popover>\n<ng-template #projectedPopover>\n    <ng-template\n        [ngTemplateOutlet]=\"popoverTemplate!\"\n        [ngTemplateOutletContext]=\"{ $implicit: _popoverItems$.asObservable() }\"\n    ></ng-template>\n</ng-template>\n\n<ng-container *ngIf=\"column?.sortable\">\n    <ng-template fdkTemplate=\"sortingAscPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            role=\"button\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n        >\n            <span fd-list-icon glyph=\"sort-ascending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortAsc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n    <ng-template fdkTemplate=\"sortingDescPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            role=\"button\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n        >\n            <span fd-list-icon glyph=\"sort-descending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortDesc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.groupable\">\n    <ng-template fdkTemplate=\"groupPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            role=\"button\"\n            (click)=\"_setColumnHeaderGroupBy(column.key)\"\n            (keydown.enter)=\"_setColumnHeaderGroupBy(column.key)\"\n        >\n            <span fd-list-title>{{ 'platformTable.headerMenuGroup' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.freezable || column?.endFreezable\">\n    <ng-template fdkTemplate=\"freezePopoverItem\" let-popover=\"popover\">\n        <ng-container *ngIf=\"!columnFrozen; else unfreezeTpl\">\n            <a fd-list-link [focusable]=\"true\" (click)=\"_freeze()\" role=\"button\" (keydown.enter)=\"_freeze()\">\n                <span fd-list-title>\n                    {{\n                        (!column.endFreezable\n                            ? columnIndex > 0\n                                ? 'platformTable.headerMenuFreezePlural'\n                                : 'platformTable.headerMenuFreeze'\n                            : 'platformTable.headerMenuEndFreeze'\n                        ) | fdTranslate\n                    }}</span\n                >\n            </a>\n        </ng-container>\n        <ng-template #unfreezeTpl>\n            <a fd-list-link [focusable]=\"true\" (click)=\"_unFreeze()\" role=\"button\" (keydown.enter)=\"_unFreeze()\">\n                <span fd-list-title>{{\n                    (columnIndex > 0 ? 'platformTable.headerMenuUnfreezePlural' : 'platformTable.headerMenuUnfreeze')\n                        | fdTranslate\n                }}</span>\n            </a>\n        </ng-template>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.filterable && !filteringFromHeaderDisabled\">\n    <ng-template fdkTemplate=\"filteringPopoverItem\" let-popover=\"popover\">\n        <a fd-list-link style=\"cursor: auto\" [focusable]=\"true\">\n            <i fd-list-icon glyph=\"filter\"></i>\n            <div fd-form-item [horizontal]=\"true\" (click)=\"$event.stopPropagation()\">\n                <label fd-form-label [for]=\"'fdp-table-column-filtering-' + column.name\">{{\n                    'platformTable.headerMenuFilter' | fdTranslate\n                }}</label>\n                <input\n                    fd-form-control\n                    [id]=\"'fdp-table-column-filtering-' + column.name\"\n                    (keydown.enter)=\"_setColumnHeaderFilterBy(column.key, $any($event.target)?.value)\"\n                />\n            </div>\n        </a>\n    </ng-template>\n</ng-container>\n" }]
         }], propDecorators: { column: [{
                 type: Input
             }], popoverTemplate: [{
@@ -2499,6 +2507,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }], _popoverItems: [{
                 type: ViewChildren,
                 args: [TemplateDirective]
+            }], _listComponent: [{
+                type: ViewChild,
+                args: [ListComponent]
             }] } });
 
 class TableHeaderCellContentComponent {
@@ -2739,7 +2750,7 @@ TableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             useExisting: TableRowComponent
         },
         DestroyedService
-    ], 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    [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n></td>\n\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n\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            [focusable]=\"true\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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($event)\"\n            (keydown.space)=\"_toggleSingleSelectableRow($event)\"\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            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\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        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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    #tableCellElement\n    [fdpTableCellResizable]=\"\n        colIdx\n            | columnResizableSide\n                : _fdpTableService.visibleColumnsLength\n                : (_fdpTableService._isShownNavigationColumn$ | async) === true\n    \"\n    [columnName]=\"column.name\"\n    [focusable]=\"true\"\n    [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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    (keydown.space)=\"_handleCellSpaceKey(colIdx, tableCellElement, $event)\"\n>\n    <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\" #tableTextContainer>\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=\"tableTextContainer?.innerText?.trim() === ''\"\n                style=\"\n                    position: absolute !important;\n                    height: 1px;\n                    width: 1px;\n                    overflow: hidden;\n                    opacity: 0;\n                    clip: rect(1px 1px 1px 1px);\n                    clip: rect(1px, 1px, 1px, 1px);\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    [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i2$2.TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: i2$2.TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "navigation"] }, { kind: "component", type: i4$1.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "directive", type: i2.DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: i1.PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "component", type: TableEditableCellComponent, selector: "fdp-table-editable-cell", inputs: ["row", "column", "columnValue"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.ValueByPathPipe, name: "valueByPath" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i1.SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: i1.TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: i1.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    [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n></td>\n\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n\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            [focusable]=\"true\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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($event)\"\n            (keydown.space)=\"_toggleSingleSelectableRow($event)\"\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            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\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        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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    #tableCellElement\n    [fdpTableCellResizable]=\"\n        colIdx\n            | columnResizableSide\n                : _fdpTableService.visibleColumnsLength\n                : (_fdpTableService._isShownNavigationColumn$ | async) === true\n    \"\n    [columnName]=\"column.name\"\n    [focusable]=\"true\"\n    [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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); _tableRowService.cellActivate(colIdx, row)\"\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    (keydown.space)=\"_handleCellSpaceKey(colIdx, tableCellElement, $event)\"\n>\n    <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\" #tableTextContainer>\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=\"tableTextContainer?.innerText?.trim() === ''\"\n                style=\"\n                    position: absolute !important;\n                    height: 1px;\n                    width: 1px;\n                    overflow: hidden;\n                    opacity: 0;\n                    clip: rect(1px 1px 1px 1px);\n                    clip: rect(1px, 1px, 1px, 1px);\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    [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i2$2.TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: i2$2.TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "navigation"] }, { kind: "component", type: i4$1.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "directive", type: i2.DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: i1.PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "component", type: TableEditableCellComponent, selector: "fdp-table-editable-cell", inputs: ["row", "column", "columnValue"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.ValueByPathPipe, name: "valueByPath" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i1.SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: i1.TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: i1.ColumnResizableSidePipe, name: "columnResizableSide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableRowComponent, decorators: [{
             type: Component,
             args: [{ selector: '[fdp-table-row]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -2751,7 +2762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     ], host: {
                         role: 'row',
                         '[attr.aria-expanded]': '_isTreeRow(row) ? row.expanded : null'
-                    }, 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    [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n></td>\n\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n\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            [focusable]=\"true\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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($event)\"\n            (keydown.space)=\"_toggleSingleSelectableRow($event)\"\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            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\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        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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    #tableCellElement\n    [fdpTableCellResizable]=\"\n        colIdx\n            | columnResizableSide\n                : _fdpTableService.visibleColumnsLength\n                : (_fdpTableService._isShownNavigationColumn$ | async) === true\n    \"\n    [columnName]=\"column.name\"\n    [focusable]=\"true\"\n    [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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    (keydown.space)=\"_handleCellSpaceKey(colIdx, tableCellElement, $event)\"\n>\n    <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\" #tableTextContainer>\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=\"tableTextContainer?.innerText?.trim() === ''\"\n                style=\"\n                    position: absolute !important;\n                    height: 1px;\n                    width: 1px;\n                    overflow: hidden;\n                    opacity: 0;\n                    clip: rect(1px 1px 1px 1px);\n                    clip: rect(1px, 1px, 1px, 1px);\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    [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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    [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n></td>\n\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n\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            [focusable]=\"true\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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($event)\"\n            (keydown.space)=\"_toggleSingleSelectableRow($event)\"\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            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\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        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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    #tableCellElement\n    [fdpTableCellResizable]=\"\n        colIdx\n            | columnResizableSide\n                : _fdpTableService.visibleColumnsLength\n                : (_fdpTableService._isShownNavigationColumn$ | async) === true\n    \"\n    [columnName]=\"column.name\"\n    [focusable]=\"true\"\n    [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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); _tableRowService.cellActivate(colIdx, row)\"\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    (keydown.space)=\"_handleCellSpaceKey(colIdx, tableCellElement, $event)\"\n>\n    <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\" #tableTextContainer>\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=\"tableTextContainer?.innerText?.trim() === ''\"\n                style=\"\n                    position: absolute !important;\n                    height: 1px;\n                    width: 1px;\n                    overflow: hidden;\n                    opacity: 0;\n                    clip: rect(1px 1px 1px 1px);\n                    clip: rect(1px, 1px, 1px, 1px);\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    [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\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: [{
@@ -2970,7 +2981,7 @@ TableHeaderRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             useExisting: TableHeaderRowComponent
         },
         DestroyedService
-    ], 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)=\"\n        selectionMode === SELECTION_MODE.MULTIPLE && _tableRowService.toggleAllSelectableRows(!checkedState)\n    \"\n    (keydown.space)=\"\n        selectionMode === SELECTION_MODE.MULTIPLE && _tableRowService.toggleAllSelectableRows(!checkedState)\n    \"\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                [columnIndex]=\"colIdx\"\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 i1$1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return i2$1.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i2$1.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(function () { return i2$2.TableCellDirective; }), selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i0.forwardRef(function () { return i2$2.TableStatusIndicatorDirective; }), selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "component", type: i0.forwardRef(function () { return i4$1.CheckboxComponent; }), selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$3.PopoverTriggerDirective; }), selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.DisabledBehaviorDirective; }), selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.PlatformTableCellResizableDirective; }), selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { 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", "columnIndex"] }, { kind: "pipe", type: i0.forwardRef(function () { return i1$1.AsyncPipe; }), name: "async" }, { kind: "pipe", type: i0.forwardRef(function () { return i11.FdTranslatePipe; }), name: "fdTranslate" }, { kind: "pipe", type: i0.forwardRef(function () { return i1.SelectionCellStylesPipe; }), name: "selectionCellStyles" }, { kind: "pipe", type: i0.forwardRef(function () { return i1.TableCellStylesPipe; }), name: "tableCellStyles" }, { kind: "pipe", type: i0.forwardRef(function () { return i1.ColumnResizableSidePipe; }), name: "columnResizableSide" }, { kind: "pipe", type: i0.forwardRef(function () { return i1.TableColumnSortingDirectionPipe; }), name: "fdpTableColumnSortingDirection" }, { 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)=\"\n        selectionMode === SELECTION_MODE.MULTIPLE && _tableRowService.toggleAllSelectableRows(!checkedState)\n    \"\n    (keydown.space)=\"\n        selectionMode === SELECTION_MODE.MULTIPLE && _tableRowService.toggleAllSelectableRows(!checkedState);\n        $event.preventDefault()\n    \"\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                [columnIndex]=\"colIdx\"\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 i1$1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return i2$1.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i2$1.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(function () { return i2$2.TableCellDirective; }), selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i0.forwardRef(function () { return i2$2.TableStatusIndicatorDirective; }), selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "component", type: i0.forwardRef(function () { return i4$1.CheckboxComponent; }), selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$3.PopoverTriggerDirective; }), selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.DisabledBehaviorDirective; }), selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.PlatformTableCellResizableDirective; }), selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { 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", "columnIndex"] }, { kind: "pipe", type: i0.forwardRef(function () { return i1$1.AsyncPipe; }), name: "async" }, { kind: "pipe", type: i0.forwardRef(function () { return i11.FdTranslatePipe; }), name: "fdTranslate" }, { kind: "pipe", type: i0.forwardRef(function () { return i1.SelectionCellStylesPipe; }), name: "selectionCellStyles" }, { kind: "pipe", type: i0.forwardRef(function () { return i1.TableCellStylesPipe; }), name: "tableCellStyles" }, { kind: "pipe", type: i0.forwardRef(function () { return i1.ColumnResizableSidePipe; }), name: "columnResizableSide" }, { kind: "pipe", type: i0.forwardRef(function () { return i1.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: "15.2.9", ngImport: i0, type: TableHeaderRowComponent, decorators: [{
             type: Component,
             args: [{ selector: '[fdp-table-header-row]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -2981,7 +2992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         DestroyedService
                     ], host: {
                         role: 'row'
-                    }, 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)=\"\n        selectionMode === SELECTION_MODE.MULTIPLE && _tableRowService.toggleAllSelectableRows(!checkedState)\n    \"\n    (keydown.space)=\"\n        selectionMode === SELECTION_MODE.MULTIPLE && _tableRowService.toggleAllSelectableRows(!checkedState)\n    \"\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                [columnIndex]=\"colIdx\"\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)=\"\n        selectionMode === SELECTION_MODE.MULTIPLE && _tableRowService.toggleAllSelectableRows(!checkedState)\n    \"\n    (keydown.space)=\"\n        selectionMode === SELECTION_MODE.MULTIPLE && _tableRowService.toggleAllSelectableRows(!checkedState);\n        $event.preventDefault()\n    \"\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                [columnIndex]=\"colIdx\"\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: [{
@@ -3259,7 +3270,9 @@ class TableComponent extends Table {
         this.columnFreeze = new EventEmitter();
         /** Event fired when group/tree row collapsed/expanded. */
         this.rowToggleOpenState = new EventEmitter();
-        /** Event fired when row clicked. */
+        /** Event fired when a cell is clicked or focused. */
+        this.cellActivate = new EventEmitter();
+        /** Event fired when row navigated. */
         this.rowActivate = new EventEmitter();
         /** Event fired when row navigated. */
         this.rowNavigate = new EventEmitter();
@@ -3424,6 +3437,9 @@ class TableComponent extends Table {
         this._subscriptions.add(this._tableRowService.cellFocused$.subscribe((event) => {
             this.cellFocused.emit(event);
         }));
+        this._subscriptions.add(this._tableRowService.cellActivate$.subscribe((event) => {
+            this.cellActivate.emit(event);
+        }));
     }
     /**
      *  Whether the selection column should be shown,
@@ -4002,6 +4018,10 @@ class TableComponent extends Table {
         }
     }
     /** @hidden */
+    _emitCellActivate(columnIndex, row) {
+        this.cellActivate.emit(new TableCellActivateEvent(columnIndex, row.value));
+    }
+    /** @hidden */
     _emitRowActivate(row) {
         if (!this.rowsActivable) {
             return;
@@ -4543,7 +4563,7 @@ class TableComponent extends Table {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.TableService }, { token: i1.TableScrollDispatcherService }, { token: i1.TableColumnResizeService }, { token: i0.ElementRef }, { token: i2.RtlService, optional: true }, { token: i1$3.ContentDensityObserver }, { token: i0.Injector }, { token: i2.TabbableElementService }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableComponent, selector: "fdp-table", inputs: { name: "name", id: "id", enableDragResize: "enableDragResize", fixed: "fixed", freezeColumnsTo: "freezeColumnsTo", freezeEndColumnsTo: "freezeEndColumnsTo", pageScrolling: "pageScrolling", pageSize: "pageSize", pageScrollingThreshold: "pageScrollingThreshold", bodyHeight: "bodyHeight", emptyTableMessage: "emptyTableMessage", noVisibleColumnsMessage: "noVisibleColumnsMessage", noHorizontalBorders: "noHorizontalBorders", noVerticalBorders: "noVerticalBorders", noBorders: "noBorders", noBodyBorders: "noBodyBorders", noOuterBorders: "noOuterBorders", noBorderX: "noBorderX", noBorderY: "noBorderY", relationKey: "relationKey", expandedStateKey: "expandedStateKey", hasChildrenKey: "hasChildrenKey", rowNavigatable: "rowNavigatable", highlightNavigatedRow: "highlightNavigatedRow", rowsActivable: "rowsActivable", selectedKey: "selectedKey", selectableKey: "selectableKey", trackBy: "trackBy", rowComparator: "rowComparator", rowsClass: "rowsClass", editableRowSkeleton: "editableRowSkeleton", expandOnInit: "expandOnInit", rowHeight: "rowHeight", loadPagesBefore: "loadPagesBefore", selectionMode: "selectionMode", enableTristateMode: "enableTristateMode", semanticHighlighting: "semanticHighlighting", forceCheckedAllState: "forceCheckedAllState", ariaLabelledBy: "ariaLabelledBy", nonFrozenColumnsMinWidth: "nonFrozenColumnsMinWidth", loading: "loading" }, outputs: { presetChanged: "presetChanged", rowSelectionChange: "rowSelectionChange", sortChange: "sortChange", filterChange: "filterChange", groupChange: "groupChange", columnsChange: "columnsChange", pageChange: "pageChange", columnFreeze: "columnFreeze", rowToggleOpenState: "rowToggleOpenState", rowActivate: "rowActivate", rowNavigate: "rowNavigate", emptyRowAdded: "emptyRowAdded", save: "save", cancel: "cancel", tableScrolled: "tableScrolled", tableRowsSet: "tableRowsSet", allRowsExpanded: "allRowsExpanded", allRowsCollapsed: "allRowsCollapsed", cellFocused: "cellFocused" }, host: { properties: { "class.fd-table--no-horizontal-borders": "noHorizontalBorders || noBorders", "class.fd-table--no-vertical-borders": "noVerticalBorders || noBorders", "attr.id": "this.id", "class.fdp-table--no-outer-border": "this.noOuterBorders", "class.fd-table--group": "this._isGroupTable" }, classAttribute: "fdp-table" }, providers: [
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableComponent, selector: "fdp-table", inputs: { name: "name", id: "id", enableDragResize: "enableDragResize", fixed: "fixed", freezeColumnsTo: "freezeColumnsTo", freezeEndColumnsTo: "freezeEndColumnsTo", pageScrolling: "pageScrolling", pageSize: "pageSize", pageScrollingThreshold: "pageScrollingThreshold", bodyHeight: "bodyHeight", emptyTableMessage: "emptyTableMessage", noVisibleColumnsMessage: "noVisibleColumnsMessage", noHorizontalBorders: "noHorizontalBorders", noVerticalBorders: "noVerticalBorders", noBorders: "noBorders", noBodyBorders: "noBodyBorders", noOuterBorders: "noOuterBorders", noBorderX: "noBorderX", noBorderY: "noBorderY", relationKey: "relationKey", expandedStateKey: "expandedStateKey", hasChildrenKey: "hasChildrenKey", rowNavigatable: "rowNavigatable", highlightNavigatedRow: "highlightNavigatedRow", rowsActivable: "rowsActivable", selectedKey: "selectedKey", selectableKey: "selectableKey", trackBy: "trackBy", rowComparator: "rowComparator", rowsClass: "rowsClass", editableRowSkeleton: "editableRowSkeleton", expandOnInit: "expandOnInit", rowHeight: "rowHeight", loadPagesBefore: "loadPagesBefore", selectionMode: "selectionMode", enableTristateMode: "enableTristateMode", semanticHighlighting: "semanticHighlighting", forceCheckedAllState: "forceCheckedAllState", ariaLabelledBy: "ariaLabelledBy", nonFrozenColumnsMinWidth: "nonFrozenColumnsMinWidth", loading: "loading" }, outputs: { presetChanged: "presetChanged", rowSelectionChange: "rowSelectionChange", sortChange: "sortChange", filterChange: "filterChange", groupChange: "groupChange", columnsChange: "columnsChange", pageChange: "pageChange", columnFreeze: "columnFreeze", rowToggleOpenState: "rowToggleOpenState", cellActivate: "cellActivate", rowActivate: "rowActivate", rowNavigate: "rowNavigate", emptyRowAdded: "emptyRowAdded", save: "save", cancel: "cancel", tableScrolled: "tableScrolled", tableRowsSet: "tableRowsSet", allRowsExpanded: "allRowsExpanded", allRowsCollapsed: "allRowsCollapsed", cellFocused: "cellFocused" }, host: { properties: { "class.fd-table--no-horizontal-borders": "noHorizontalBorders || noBorders", "class.fd-table--no-vertical-borders": "noVerticalBorders || noBorders", "attr.id": "this.id", "class.fdp-table--no-outer-border": "this.noOuterBorders", "class.fd-table--group": "this._isGroupTable" }, classAttribute: "fdp-table" }, providers: [
         { provide: Table, useExisting: forwardRef(() => TableComponent) },
         TableRowService,
         TableService,
@@ -4702,6 +4722,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }], rowToggleOpenState: [{
                 type: Output
+            }], cellActivate: [{
+                type: Output
             }], rowActivate: [{
                 type: Output
             }], rowNavigate: [{