@fundamental-ngx/platform 0.57.4-rc.32 → 0.57.4-rc.33

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

@@ -2919,7 +2919,7 @@ class SettingsDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: i1.Table }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SettingsDialogComponent, isStandalone: true, selector: "fdp-settings-dialog-settings", providers: [{ provide: RESETTABLE_TOKEN, useExisting: forwardRef(() => SettingsDialogComponent) }], ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                @if (activeTab() !== 'filter') {\n                    <fd-bar-element>\n                        <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n                            'platformTable.settingsDialogHeader' | fdTranslate\n                        }}</span>\n                    </fd-bar-element>\n                } @else {\n                    <fd-bar-element>\n                        @if (activeFilterStepView()?.titleTemplateRef) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"activeFilterStepView()?.titleTemplateRef ?? null\"\n                            ></ng-container>\n                        }\n                    </fd-bar-element>\n                }\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n\n        @if (showSubheader()) {\n            <ng-template fdkTemplate=\"subheader\">\n                <fd-segmented-button [(ngModel)]=\"activeTab\" [style.height]=\"'fit-content'\">\n                    @if (sortingData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"sort\"\n                            glyph=\"sort\"\n                            [title]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                            [ariaLabel]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                        ></button>\n                    }\n                    @if (filteringData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"filter\"\n                            glyph=\"filter\"\n                            [title]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                            [ariaLabel]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                        ></button>\n                    }\n                    @if (groupingData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"group\"\n                            glyph=\"group-2\"\n                            [title]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                            [ariaLabel]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                        ></button>\n                    }\n                </fd-segmented-button>\n            </ng-template>\n        }\n    </fd-dialog-header>\n\n    <fd-dialog-body disablePaddings>\n        @switch (activeTab()) {\n            @case ('sort') {\n                <fdp-sorting\n                    [headingLevel]=\"headingLevel\"\n                    [sortingData]=\"sortingData()!\"\n                    [initialSorting]=\"_initialSorting()\"\n                    (sortChange)=\"onSortChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-sorting>\n            }\n            @case ('filter') {\n                <fdp-filters\n                    [headingLevel]=\"headingLevel\"\n                    [filteringData]=\"filteringData()!\"\n                    [initialFilters]=\"_initialFilters()\"\n                    (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-filters>\n            }\n            @case ('group') {\n                <fdp-grouping\n                    [headingLevel]=\"headingLevel\"\n                    [groupingData]=\"groupingData()!\"\n                    [initialGrouping]=\"_initialGrouping()\"\n                    (groupChange)=\"onGroupChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-grouping>\n            }\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.confirmBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            [label]=\"'platformTable.cancelBtnLabel' | fdTranslate\"\n            fdkInitialFocus\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: SortingComponent, selector: "fdp-sorting", inputs: ["sortingData", "headingLevel", "initialSorting"], outputs: ["sortChange", "resetAvailabilityChange"] }, { kind: "component", type: FiltersComponent, selector: "fdp-filters", inputs: ["filteringData", "headingLevel", "initialFilters"], outputs: ["activeFilterStepViewChange", "filterChange", "resetAvailabilityChange"] }, { kind: "component", type: GroupingComponent, selector: "fdp-grouping", inputs: ["groupingData", "initialGrouping", "headingLevel"], outputs: ["groupChange", "resetAvailabilityChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle", "vertical"] }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "directive", type: FocusableItemDirective, selector: "[fdkFocusableItem]", inputs: ["fdkFocusableItem", "cellFocusedEventAnnouncer"], outputs: ["cellFocused"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SettingsDialogComponent, isStandalone: true, selector: "fdp-settings-dialog-settings", providers: [{ provide: RESETTABLE_TOKEN, useExisting: forwardRef(() => SettingsDialogComponent) }], ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                @if (activeTab() !== 'filter') {\n                    <fd-bar-element>\n                        <span role=\"heading\" [attr.aria-level]=\"headingLevel\" fd-title [headerSize]=\"4\">{{\n                            'platformTable.settingsDialogHeader' | fdTranslate\n                        }}</span>\n                    </fd-bar-element>\n                } @else {\n                    <fd-bar-element>\n                        @if (activeFilterStepView()?.titleTemplateRef) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"activeFilterStepView()?.titleTemplateRef ?? null\"\n                            ></ng-container>\n                        }\n                    </fd-bar-element>\n                }\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n\n        @if (showSubheader()) {\n            <ng-template fdkTemplate=\"subheader\">\n                <fd-segmented-button [(ngModel)]=\"activeTab\" [style.height]=\"'fit-content'\">\n                    @if (sortingData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"sort\"\n                            glyph=\"sort\"\n                            [title]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                            [ariaLabel]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                        ></button>\n                    }\n                    @if (filteringData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"filter\"\n                            glyph=\"filter\"\n                            [title]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                            [ariaLabel]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                        ></button>\n                    }\n                    @if (groupingData()) {\n                        <button\n                            fd-button\n                            fdkFocusableItem\n                            value=\"group\"\n                            glyph=\"group-2\"\n                            [title]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                            [ariaLabel]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                        ></button>\n                    }\n                </fd-segmented-button>\n            </ng-template>\n        }\n    </fd-dialog-header>\n\n    <fd-dialog-body disablePaddings>\n        @switch (activeTab()) {\n            @case ('sort') {\n                <fdp-sorting\n                    [headingLevel]=\"headingLevel\"\n                    [sortingData]=\"sortingData()!\"\n                    [initialSorting]=\"_initialSorting()\"\n                    (sortChange)=\"onSortChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-sorting>\n            }\n            @case ('filter') {\n                <fdp-filters\n                    [headingLevel]=\"headingLevel\"\n                    [filteringData]=\"filteringData()!\"\n                    [initialFilters]=\"_initialFilters()\"\n                    (activeFilterStepViewChange)=\"onActiveFilterStepViewChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-filters>\n            }\n            @case ('group') {\n                <fdp-grouping\n                    [headingLevel]=\"headingLevel\"\n                    [groupingData]=\"groupingData()!\"\n                    [initialGrouping]=\"_initialGrouping()\"\n                    (groupChange)=\"onGroupChange($event)\"\n                    (resetAvailabilityChange)=\"onResetAvailabilityChange($event)\"\n                ></fdp-grouping>\n            }\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.confirmBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            [label]=\"'platformTable.cancelBtnLabel' | fdTranslate\"\n            fdkInitialFocus\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: SortingComponent, selector: "fdp-sorting", inputs: ["sortingData", "headingLevel", "initialSorting"], outputs: ["sortChange", "resetAvailabilityChange"] }, { kind: "component", type: FiltersComponent, selector: "fdp-filters", inputs: ["filteringData", "headingLevel", "initialFilters"], outputs: ["activeFilterStepViewChange", "filterChange", "resetAvailabilityChange"] }, { kind: "component", type: GroupingComponent, selector: "fdp-grouping", inputs: ["groupingData", "initialGrouping", "headingLevel"], outputs: ["groupChange", "resetAvailabilityChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle", "vertical"] }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "directive", type: FocusableItemDirective, selector: "[fdkFocusableItem]", inputs: ["fdkFocusableItem", "cellFocusedEventAnnouncer"], outputs: ["cellFocused", "focusableChildElementFocused", "_parentFocusableItemFocused"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SettingsDialogComponent, decorators: [{
             type: Component,
@@ -3640,7 +3640,7 @@ class TableRowComponent extends TableRowDirective {
                 provide: FDK_FOCUSABLE_LIST_DIRECTIVE,
                 useExisting: TableRowComponent
             }
-        ], viewQueries: [{ propertyName: "_focusableViewCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }, { propertyName: "_editableCells", predicate: EditableTableCell, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (_fdpTableService._semanticHighlighting$(); as semanticHighlighting) {\n    <td\n        fd-table-cell\n        fd-table-status-indicator\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [status]=\"row.value[semanticHighlighting]\"\n        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n    ></td>\n}\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn$() ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver.contentDensity$()\n                    | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow($event)\"\n            (keydown.space)=\"_toggleSingleSelectableRow($event)\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        ></td>\n    }\n} @else if (selectionMode === SELECTION_MODE.MULTIPLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.aria-selected]=\"row.checked\"\n            [style]=\"\n                _contentDensityObserver.contentDensity$()\n                    | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n            \"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        ></td>\n    }\n}\n@for (column of _fdpTableService.visibleColumns$(); track column.name) {\n    <td\n        #tableCellElement\n        [fdpTableCellResizable]=\"\n            $index\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength()\n                    : _fdpTableService._isShownNavigationColumn$()\n        \"\n        [columnName]=\"column.name\"\n        [focusable]=\"true\"\n        [attr.role]=\"column.role\"\n        [headers]=\"rowId + '__' + column.name\"\n        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        [ngClass]=\"[\n            'fdp-table__col--' + column.name,\n            column._freezed ? 'fd-table__cell--fixed' : '',\n            column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n            column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n            column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n            row.isTree && $index === 0 ? 'fd-table__cell--expand' : '',\n            $last && !_fdpTableService._isShownNavigationColumn$() ? 'is-last-child' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl$()\n                    : _fdpTableService._semanticHighlightingColumnWidth$()\n                    : selectionColumnWidth\n                    : column._freezed\n                    : column._endFreezed\n                    : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                    : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                    : _tableColumnResizeService.getNextColumnsWidth(column.name)\n        \"\n        [attr.aria-expanded]=\"_isTreeRowFirstCell($index, row) ? row.expanded : null\"\n        [attr.data-nesting-level]=\"$index === 0 ? row.level + 1 : null\"\n        (cellFocused)=\"_handleCellFocused($event, $index, row, column, tableTextContainer)\"\n        (focusout)=\"_announceEmptyCell.set(false)\"\n        (click)=\"_tableRowService.cellClicked({ index: $index, row })\"\n        (keydown.enter)=\"_isTreeRowFirstCell($index, row, $event) && _toggleGroupRow()\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.space)=\"_handleCellSpaceKey($index, tableCellElement, $event)\"\n        [attr.title]=\"\n            _isTreeRowFirstCell($index, row) && row.expanded\n                ? ('platformTable.collapseRowButtonTitle' | fdTranslate)\n                : _isTreeRowFirstCell($index, row) && !row.expanded\n                  ? ('platformTable.expandRowButtonTitle' | fdTranslate)\n                  : null\n        \"\n    >\n        <div\n            [class.fd-table__text]=\"column.applyText\"\n            [class.fd-table__text--no-wrap]=\"column.noWrap\"\n            #tableTextContainer\n        >\n            @if (_isTreeRowFirstCell($index, row)) {\n                <span\n                    class=\"fd-table__expand\"\n                    [class.fd-table__expand--open]=\"row.expanded$ | async\"\n                    aria-hidden=\"true\"\n                ></span>\n            }\n            @if (row.state === 'readonly') {\n                @if (_announceEmptyCell()) {\n                    <span\n                        [ngStyle]=\"{\n                            position: 'absolute',\n                            height: '1px',\n                            width: '1px',\n                            overflow: 'hidden',\n                            clip: 'rect(1px, 1px, 1px, 1px)',\n                            color: 'transparent',\n                            display: 'block'\n                        }\"\n                    >\n                        {{ 'platformTable.emptyCell' | fdTranslate }}\n                    </span>\n                }\n                @if (column?.columnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.columnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    {{ row.value | valueByPath: column.key }}\n                }\n            } @else {\n                @if (column?.editableColumnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.editableColumnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    <fdp-table-editable-cell\n                        [row]=\"row\"\n                        [column]=\"column\"\n                        [columnValue]=\"row.value | valueByPath: column.key\"\n                    ></fdp-table-editable-cell>\n                }\n            }\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n@if (_fdpTableService._isShownNavigationColumn$()) {\n    <td fd-table-cell class=\"fdp-table__cell--navigation is-last-child\" fdkDisabled [addDisabledClass]=\"false\">\n        @if (row.navigatable) {\n            <fd-icon\n                fd-table-icon\n                [navigation]=\"true\"\n                [glyph]=\"_rtl$() ? 'slim-arrow-left' : 'slim-arrow-right'\"\n                class=\"fdp-table__navigation-indicator\"\n                [attr.title]=\"'platformTable.rowNavigateButtonTitle' | fdTranslate\"\n            ></fd-icon>\n        }\n    </td>\n}\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"!_tableColumnResizeService.cellMockVisible$()\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n", dependencies: [{ kind: "directive", type: TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "nonInteractive", "key"] }, { kind: "directive", type: TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TableEditableCellComponent, selector: "fdp-table-editable-cell", inputs: ["row", "column", "columnValue"] }, { kind: "directive", type: TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "glyphFont", "navigation"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ValueByPathPipe, name: "valueByPath" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: ColumnResizableSidePipe, name: "columnResizableSide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_focusableViewCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }, { propertyName: "_editableCells", predicate: EditableTableCell, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (_fdpTableService._semanticHighlighting$(); as semanticHighlighting) {\n    <td\n        fd-table-cell\n        fd-table-status-indicator\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [status]=\"row.value[semanticHighlighting]\"\n        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n    ></td>\n}\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn$() ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver.contentDensity$()\n                    | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow($event)\"\n            (keydown.space)=\"_toggleSingleSelectableRow($event)\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        ></td>\n    }\n} @else if (selectionMode === SELECTION_MODE.MULTIPLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.aria-selected]=\"row.checked\"\n            [style]=\"\n                _contentDensityObserver.contentDensity$()\n                    | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n            \"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        ></td>\n    }\n}\n@for (column of _fdpTableService.visibleColumns$(); track column.name) {\n    <td\n        #tableCellElement\n        fd-table-cell\n        [fdpTableCellResizable]=\"\n            $index\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength()\n                    : _fdpTableService._isShownNavigationColumn$()\n        \"\n        [columnName]=\"column.name\"\n        [focusable]=\"true\"\n        [attr.role]=\"column.role\"\n        [headers]=\"rowId + '__' + column.name\"\n        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        [ngClass]=\"[\n            'fdp-table__col--' + column.name,\n            column._freezed ? 'fd-table__cell--fixed' : '',\n            column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n            column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n            column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n            row.isTree && $index === 0 ? 'fd-table__cell--expand' : '',\n            $last && !_fdpTableService._isShownNavigationColumn$() ? 'is-last-child' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl$()\n                    : _fdpTableService._semanticHighlightingColumnWidth$()\n                    : selectionColumnWidth\n                    : column._freezed\n                    : column._endFreezed\n                    : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                    : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                    : _tableColumnResizeService.getNextColumnsWidth(column.name)\n        \"\n        [attr.aria-expanded]=\"_isTreeRowFirstCell($index, row) ? row.expanded : null\"\n        [attr.data-nesting-level]=\"$index === 0 ? row.level + 1 : null\"\n        (cellFocused)=\"_handleCellFocused($event, $index, row, column, tableTextContainer)\"\n        (focusout)=\"_announceEmptyCell.set(false)\"\n        (click)=\"_tableRowService.cellClicked({ index: $index, row })\"\n        (keydown.enter)=\"_isTreeRowFirstCell($index, row, $event) && _toggleGroupRow()\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.space)=\"_handleCellSpaceKey($index, tableCellElement, $event)\"\n        [attr.title]=\"\n            _isTreeRowFirstCell($index, row) && row.expanded\n                ? ('platformTable.collapseRowButtonTitle' | fdTranslate)\n                : _isTreeRowFirstCell($index, row) && !row.expanded\n                  ? ('platformTable.expandRowButtonTitle' | fdTranslate)\n                  : null\n        \"\n    >\n        <div\n            [class.fd-table__text]=\"column.applyText\"\n            [class.fd-table__text--no-wrap]=\"column.noWrap\"\n            #tableTextContainer\n        >\n            @if (_isTreeRowFirstCell($index, row)) {\n                <span\n                    class=\"fd-table__expand\"\n                    [class.fd-table__expand--open]=\"row.expanded$ | async\"\n                    aria-hidden=\"true\"\n                ></span>\n            }\n            @if (row.state === 'readonly') {\n                @if (_announceEmptyCell()) {\n                    <span\n                        [ngStyle]=\"{\n                            position: 'absolute',\n                            height: '1px',\n                            width: '1px',\n                            overflow: 'hidden',\n                            clip: 'rect(1px, 1px, 1px, 1px)',\n                            color: 'transparent',\n                            display: 'block'\n                        }\"\n                    >\n                        {{ 'platformTable.emptyCell' | fdTranslate }}\n                    </span>\n                }\n                @if (column?.columnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.columnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    {{ row.value | valueByPath: column.key }}\n                }\n            } @else {\n                @if (column?.editableColumnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.editableColumnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    <fdp-table-editable-cell\n                        [row]=\"row\"\n                        [column]=\"column\"\n                        [columnValue]=\"row.value | valueByPath: column.key\"\n                    ></fdp-table-editable-cell>\n                }\n            }\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n@if (_fdpTableService._isShownNavigationColumn$()) {\n    <td fd-table-cell class=\"fdp-table__cell--navigation is-last-child\" fdkDisabled [addDisabledClass]=\"false\">\n        @if (row.navigatable) {\n            <fd-icon\n                fd-table-icon\n                [navigation]=\"true\"\n                [glyph]=\"_rtl$() ? 'slim-arrow-left' : 'slim-arrow-right'\"\n                class=\"fdp-table__navigation-indicator\"\n                [attr.title]=\"'platformTable.rowNavigateButtonTitle' | fdTranslate\"\n            ></fd-icon>\n        }\n    </td>\n}\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"!_tableColumnResizeService.cellMockVisible$()\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n", dependencies: [{ kind: "directive", type: TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "nonInteractive", "key"] }, { kind: "directive", type: TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TableEditableCellComponent, selector: "fdp-table-editable-cell", inputs: ["row", "column", "columnValue"] }, { kind: "directive", type: TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "glyphFont", "navigation"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ValueByPathPipe, name: "valueByPath" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: ColumnResizableSidePipe, name: "columnResizableSide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableRowComponent, decorators: [{
             type: Component,
@@ -3671,7 +3671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         TableCellStylesPipe,
                         ColumnResizableSidePipe,
                         IconComponent
-                    ], template: "@if (_fdpTableService._semanticHighlighting$(); as semanticHighlighting) {\n    <td\n        fd-table-cell\n        fd-table-status-indicator\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [status]=\"row.value[semanticHighlighting]\"\n        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n    ></td>\n}\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn$() ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver.contentDensity$()\n                    | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow($event)\"\n            (keydown.space)=\"_toggleSingleSelectableRow($event)\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        ></td>\n    }\n} @else if (selectionMode === SELECTION_MODE.MULTIPLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.aria-selected]=\"row.checked\"\n            [style]=\"\n                _contentDensityObserver.contentDensity$()\n                    | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n            \"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        ></td>\n    }\n}\n@for (column of _fdpTableService.visibleColumns$(); track column.name) {\n    <td\n        #tableCellElement\n        [fdpTableCellResizable]=\"\n            $index\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength()\n                    : _fdpTableService._isShownNavigationColumn$()\n        \"\n        [columnName]=\"column.name\"\n        [focusable]=\"true\"\n        [attr.role]=\"column.role\"\n        [headers]=\"rowId + '__' + column.name\"\n        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        [ngClass]=\"[\n            'fdp-table__col--' + column.name,\n            column._freezed ? 'fd-table__cell--fixed' : '',\n            column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n            column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n            column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n            row.isTree && $index === 0 ? 'fd-table__cell--expand' : '',\n            $last && !_fdpTableService._isShownNavigationColumn$() ? 'is-last-child' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl$()\n                    : _fdpTableService._semanticHighlightingColumnWidth$()\n                    : selectionColumnWidth\n                    : column._freezed\n                    : column._endFreezed\n                    : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                    : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                    : _tableColumnResizeService.getNextColumnsWidth(column.name)\n        \"\n        [attr.aria-expanded]=\"_isTreeRowFirstCell($index, row) ? row.expanded : null\"\n        [attr.data-nesting-level]=\"$index === 0 ? row.level + 1 : null\"\n        (cellFocused)=\"_handleCellFocused($event, $index, row, column, tableTextContainer)\"\n        (focusout)=\"_announceEmptyCell.set(false)\"\n        (click)=\"_tableRowService.cellClicked({ index: $index, row })\"\n        (keydown.enter)=\"_isTreeRowFirstCell($index, row, $event) && _toggleGroupRow()\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.space)=\"_handleCellSpaceKey($index, tableCellElement, $event)\"\n        [attr.title]=\"\n            _isTreeRowFirstCell($index, row) && row.expanded\n                ? ('platformTable.collapseRowButtonTitle' | fdTranslate)\n                : _isTreeRowFirstCell($index, row) && !row.expanded\n                  ? ('platformTable.expandRowButtonTitle' | fdTranslate)\n                  : null\n        \"\n    >\n        <div\n            [class.fd-table__text]=\"column.applyText\"\n            [class.fd-table__text--no-wrap]=\"column.noWrap\"\n            #tableTextContainer\n        >\n            @if (_isTreeRowFirstCell($index, row)) {\n                <span\n                    class=\"fd-table__expand\"\n                    [class.fd-table__expand--open]=\"row.expanded$ | async\"\n                    aria-hidden=\"true\"\n                ></span>\n            }\n            @if (row.state === 'readonly') {\n                @if (_announceEmptyCell()) {\n                    <span\n                        [ngStyle]=\"{\n                            position: 'absolute',\n                            height: '1px',\n                            width: '1px',\n                            overflow: 'hidden',\n                            clip: 'rect(1px, 1px, 1px, 1px)',\n                            color: 'transparent',\n                            display: 'block'\n                        }\"\n                    >\n                        {{ 'platformTable.emptyCell' | fdTranslate }}\n                    </span>\n                }\n                @if (column?.columnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.columnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    {{ row.value | valueByPath: column.key }}\n                }\n            } @else {\n                @if (column?.editableColumnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.editableColumnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    <fdp-table-editable-cell\n                        [row]=\"row\"\n                        [column]=\"column\"\n                        [columnValue]=\"row.value | valueByPath: column.key\"\n                    ></fdp-table-editable-cell>\n                }\n            }\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n@if (_fdpTableService._isShownNavigationColumn$()) {\n    <td fd-table-cell class=\"fdp-table__cell--navigation is-last-child\" fdkDisabled [addDisabledClass]=\"false\">\n        @if (row.navigatable) {\n            <fd-icon\n                fd-table-icon\n                [navigation]=\"true\"\n                [glyph]=\"_rtl$() ? 'slim-arrow-left' : 'slim-arrow-right'\"\n                class=\"fdp-table__navigation-indicator\"\n                [attr.title]=\"'platformTable.rowNavigateButtonTitle' | fdTranslate\"\n            ></fd-icon>\n        }\n    </td>\n}\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"!_tableColumnResizeService.cellMockVisible$()\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n" }]
+                    ], template: "@if (_fdpTableService._semanticHighlighting$(); as semanticHighlighting) {\n    <td\n        fd-table-cell\n        fd-table-status-indicator\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [status]=\"row.value[semanticHighlighting]\"\n        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n    ></td>\n}\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn$() ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver.contentDensity$()\n                    | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow($event)\"\n            (keydown.space)=\"_toggleSingleSelectableRow($event)\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        ></td>\n    }\n} @else if (selectionMode === SELECTION_MODE.MULTIPLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.aria-selected]=\"row.checked\"\n            [style]=\"\n                _contentDensityObserver.contentDensity$()\n                    | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n            \"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        ></td>\n    }\n}\n@for (column of _fdpTableService.visibleColumns$(); track column.name) {\n    <td\n        #tableCellElement\n        fd-table-cell\n        [fdpTableCellResizable]=\"\n            $index\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength()\n                    : _fdpTableService._isShownNavigationColumn$()\n        \"\n        [columnName]=\"column.name\"\n        [focusable]=\"true\"\n        [attr.role]=\"column.role\"\n        [headers]=\"rowId + '__' + column.name\"\n        [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n        [ngClass]=\"[\n            'fdp-table__col--' + column.name,\n            column._freezed ? 'fd-table__cell--fixed' : '',\n            column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n            column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n            column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n            row.isTree && $index === 0 ? 'fd-table__cell--expand' : '',\n            $last && !_fdpTableService._isShownNavigationColumn$() ? 'is-last-child' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl$()\n                    : _fdpTableService._semanticHighlightingColumnWidth$()\n                    : selectionColumnWidth\n                    : column._freezed\n                    : column._endFreezed\n                    : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                    : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                    : _tableColumnResizeService.getNextColumnsWidth(column.name)\n        \"\n        [attr.aria-expanded]=\"_isTreeRowFirstCell($index, row) ? row.expanded : null\"\n        [attr.data-nesting-level]=\"$index === 0 ? row.level + 1 : null\"\n        (cellFocused)=\"_handleCellFocused($event, $index, row, column, tableTextContainer)\"\n        (focusout)=\"_announceEmptyCell.set(false)\"\n        (click)=\"_tableRowService.cellClicked({ index: $index, row })\"\n        (keydown.enter)=\"_isTreeRowFirstCell($index, row, $event) && _toggleGroupRow()\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.space)=\"_handleCellSpaceKey($index, tableCellElement, $event)\"\n        [attr.title]=\"\n            _isTreeRowFirstCell($index, row) && row.expanded\n                ? ('platformTable.collapseRowButtonTitle' | fdTranslate)\n                : _isTreeRowFirstCell($index, row) && !row.expanded\n                  ? ('platformTable.expandRowButtonTitle' | fdTranslate)\n                  : null\n        \"\n    >\n        <div\n            [class.fd-table__text]=\"column.applyText\"\n            [class.fd-table__text--no-wrap]=\"column.noWrap\"\n            #tableTextContainer\n        >\n            @if (_isTreeRowFirstCell($index, row)) {\n                <span\n                    class=\"fd-table__expand\"\n                    [class.fd-table__expand--open]=\"row.expanded$ | async\"\n                    aria-hidden=\"true\"\n                ></span>\n            }\n            @if (row.state === 'readonly') {\n                @if (_announceEmptyCell()) {\n                    <span\n                        [ngStyle]=\"{\n                            position: 'absolute',\n                            height: '1px',\n                            width: '1px',\n                            overflow: 'hidden',\n                            clip: 'rect(1px, 1px, 1px, 1px)',\n                            color: 'transparent',\n                            display: 'block'\n                        }\"\n                    >\n                        {{ 'platformTable.emptyCell' | fdTranslate }}\n                    </span>\n                }\n                @if (column?.columnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.columnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    {{ row.value | valueByPath: column.key }}\n                }\n            } @else {\n                @if (column?.editableColumnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.editableColumnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    <fdp-table-editable-cell\n                        [row]=\"row\"\n                        [column]=\"column\"\n                        [columnValue]=\"row.value | valueByPath: column.key\"\n                    ></fdp-table-editable-cell>\n                }\n            }\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n@if (_fdpTableService._isShownNavigationColumn$()) {\n    <td fd-table-cell class=\"fdp-table__cell--navigation is-last-child\" fdkDisabled [addDisabledClass]=\"false\">\n        @if (row.navigatable) {\n            <fd-icon\n                fd-table-icon\n                [navigation]=\"true\"\n                [glyph]=\"_rtl$() ? 'slim-arrow-left' : 'slim-arrow-right'\"\n                class=\"fdp-table__navigation-indicator\"\n                [attr.title]=\"'platformTable.rowNavigateButtonTitle' | fdTranslate\"\n            ></fd-icon>\n        }\n    </td>\n}\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"!_tableColumnResizeService.cellMockVisible$()\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n" }]
         }], ctorParameters: () => [], propDecorators: { rowId: [{
                 type: Input
             }], row: [{