@fundamental-ngx/platform 0.43.28 → 0.43.29

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

@@ -1201,10 +1201,10 @@ class P13ColumnsDialogComponent {
     }
 }
 P13ColumnsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: P13ColumnsDialogComponent, deps: [{ token: i1$2.DialogRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-P13ColumnsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: P13ColumnsDialogComponent, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13ColumnsDialogComponent }], ngImport: i0, template: "<fd-dialog class=\"fdp-table-p13-columns-dialog\">\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">\n                        {{ 'platformTable.P13ColumnsDialogHeader' | fdTranslate }}\n                    </h4>\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body>\n        <fd-toolbar>\n            <fdp-search-field\n                [placeholder]=\"'platformTable.P13ColumnsDialogSearchPlaceholder' | fdTranslate\"\n                [inputText]=\"(_searchQuerySubject | async) || ''\"\n                [suggestions]=\"[]\"\n                (inputChange)=\"_searchInputChange($event)\"\n                fdkInitialFocus\n            ></fdp-search-field>\n\n            <fd-toolbar-spacer></fd-toolbar-spacer>\n\n            <!-- Show Selected/All -->\n            <button fd-toolbar-item fd-button fdType=\"transparent\" (click)=\"_toggleShowAll()\">\n                <ng-container *ngIf=\"(_showAllItemsSubject | async) === true; else showAll\">\n                    {{ 'platformTable.P13ColumnsDialogsShowSelected' | fdTranslate }}\n                </ng-container>\n                <ng-template #showAll>\n                    {{ 'platformTable.P13ColumnsDialogShowAll' | fdTranslate }}\n                </ng-template>\n            </button>\n\n            <!-- Active Button Movement -->\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"collapse-group\"\n                [disabled]=\"_moveUpDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n                (click)=\"_moveActiveToTop()\"\n            ></button>\n\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"slim-arrow-up\"\n                [disabled]=\"_moveUpDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n                (click)=\"_moveActiveUp()\"\n            ></button>\n\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"slim-arrow-down\"\n                [disabled]=\"_moveDownDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n                (click)=\"_moveActiveDown()\"\n            ></button>\n\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"expand-group\"\n                [disabled]=\"_moveDownDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n                (click)=\"_moveActiveToBottom()\"\n            ></button>\n        </fd-toolbar>\n\n        <ul fd-list [selection]=\"true\" aria-multiselectable=\"true\">\n            <li\n                (focus)=\"_setActiveColumn(null)\"\n                fd-list-item\n                [selected]=\"_selectedColumnsCount === _selectableColumns.length\"\n            >\n                <fd-checkbox\n                    [ngModel]=\"_selectedColumnsCount === _selectableColumns.length\"\n                    (ngModelChange)=\"_toggleSelectAll($event)\"\n                    [disabled]=\"_selectAllDisabled\"\n                ></fd-checkbox>\n                <span fd-list-title>\n                    {{\n                        'platformTable.P13ColumnsDialogSelectAll'\n                            | fdTranslate\n                                : {\n                                      selectedColumnsCount: _selectedColumnsCount,\n                                      selectableColumnsCount: _selectableColumns.length\n                                  }\n                    }}\n                </span>\n            </li>\n            <li\n                fd-list-item\n                *ngFor=\"let item of _filteredColumns; trackBy: _filterByColumnKy\"\n                [class.fd-select-item--selected]=\"item.selected\"\n                [class.is-focus]=\"item.active\"\n                [selected]=\"item.selected\"\n                (focus)=\"_setActiveColumn(item)\"\n            >\n                <fd-checkbox [(ngModel)]=\"item.selected\" (ngModelChange)=\"_onToggleColumn()\"></fd-checkbox>\n                <span fd-list-title>\n                    {{ item.column.label }}\n                </span>\n            </li>\n        </ul>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-dialog-footer-button>\n            <button\n                fd-button\n                fdType=\"emphasized\"\n                fd-dialog-decisive-button\n                [label]=\"'platformTable.P13ColumnsDialogConfirmationBtnLabel' | fdTranslate\"\n                (click)=\"confirm()\"\n            ></button>\n        </fd-dialog-footer-button>\n\n        <fd-dialog-footer-button>\n            <button\n                fd-button\n                fdType=\"transparent\"\n                fd-dialog-decisive-button\n                [label]=\"'platformTable.P13ColumnsDialogCancelBtnLabel' | fdTranslate\"\n                (click)=\"cancel()\"\n            ></button>\n        </fd-dialog-footer-button>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-columns-dialog fd-toolbar{position:sticky;top:0;z-index:1;display:block}.fdp-table-p13-columns-dialog .fd-select-item--active{background:#e5f0fa;background:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.fdp-table-p13-columns-dialog .group-row{display:flex;align-items:center;margin-bottom:.5rem}.fdp-table-p13-columns-dialog .group-row .fd-popover-custom{display:block}.fdp-table-p13-columns-dialog .group-row__checkbox,.fdp-table-p13-columns-dialog .group-row__actions,.fdp-table-p13-columns-dialog .group-row__select{margin-right:1rem}.fdp-table-p13-columns-dialog .group-row__select{flex:1 1 0}\n"], dependencies: [{ kind: "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: 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: "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: 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: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i1$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1$2.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1$2.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1$2.DialogFooterButtonComponent, selector: "fd-dialog-footer-button" }, { kind: "directive", type: i1$2.DialogDecisiveButtonDirective, selector: "[fd-dialog-decisive-button]" }, { kind: "directive", type: i4.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i4.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title], span[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i2.TemplateDirective, selector: "[fdkTemplate], [fdTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i2.InitialFocusDirective, selector: "[fdkInitialFocus], [fdInitialFocus], [fd-initial-focus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { 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: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+P13ColumnsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: P13ColumnsDialogComponent, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13ColumnsDialogComponent }], ngImport: i0, template: "<fd-dialog class=\"fdp-table-p13-columns-dialog\">\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">\n                        {{ 'platformTable.P13ColumnsDialogHeader' | fdTranslate }}\n                    </h4>\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body>\n        <fd-toolbar>\n            <fdp-search-field\n                [placeholder]=\"'platformTable.P13ColumnsDialogSearchPlaceholder' | fdTranslate\"\n                [inputText]=\"(_searchQuerySubject | async) || ''\"\n                [suggestions]=\"[]\"\n                (inputChange)=\"_searchInputChange($event)\"\n                fdkInitialFocus\n            ></fdp-search-field>\n\n            <fd-toolbar-spacer></fd-toolbar-spacer>\n\n            <!-- Show Selected/All -->\n            <button fd-toolbar-item fd-button fdType=\"transparent\" (click)=\"_toggleShowAll()\">\n                <ng-container *ngIf=\"(_showAllItemsSubject | async) === true; else showAll\">\n                    {{ 'platformTable.P13ColumnsDialogsShowSelected' | fdTranslate }}\n                </ng-container>\n                <ng-template #showAll>\n                    {{ 'platformTable.P13ColumnsDialogShowAll' | fdTranslate }}\n                </ng-template>\n            </button>\n\n            <!-- Active Button Movement -->\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"collapse-group\"\n                [disabled]=\"_moveUpDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n                (click)=\"_moveActiveToTop()\"\n            ></button>\n\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"slim-arrow-down\"\n                style=\"transform: rotate(180deg)\"\n                [disabled]=\"_moveUpDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n                (click)=\"_moveActiveUp()\"\n            ></button>\n\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"slim-arrow-down\"\n                [disabled]=\"_moveDownDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n                (click)=\"_moveActiveDown()\"\n            ></button>\n\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"expand-group\"\n                [disabled]=\"_moveDownDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n                (click)=\"_moveActiveToBottom()\"\n            ></button>\n        </fd-toolbar>\n\n        <ul fd-list [selection]=\"true\" aria-multiselectable=\"true\">\n            <li\n                (focus)=\"_setActiveColumn(null)\"\n                fd-list-item\n                [selected]=\"_selectedColumnsCount === _selectableColumns.length\"\n            >\n                <fd-checkbox\n                    [ngModel]=\"_selectedColumnsCount === _selectableColumns.length\"\n                    (ngModelChange)=\"_toggleSelectAll($event)\"\n                    [disabled]=\"_selectAllDisabled\"\n                ></fd-checkbox>\n                <span fd-list-title>\n                    {{\n                        'platformTable.P13ColumnsDialogSelectAll'\n                            | fdTranslate\n                                : {\n                                      selectedColumnsCount: _selectedColumnsCount,\n                                      selectableColumnsCount: _selectableColumns.length\n                                  }\n                    }}\n                </span>\n            </li>\n            <li\n                fd-list-item\n                *ngFor=\"let item of _filteredColumns; trackBy: _filterByColumnKy\"\n                [class.fd-select-item--selected]=\"item.selected\"\n                [class.is-focus]=\"item.active\"\n                [selected]=\"item.selected\"\n                (focus)=\"_setActiveColumn(item)\"\n            >\n                <fd-checkbox [(ngModel)]=\"item.selected\" (ngModelChange)=\"_onToggleColumn()\"></fd-checkbox>\n                <span fd-list-title>\n                    {{ item.column.label }}\n                </span>\n            </li>\n        </ul>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-dialog-footer-button>\n            <button\n                fd-button\n                fdType=\"emphasized\"\n                fd-dialog-decisive-button\n                [label]=\"'platformTable.P13ColumnsDialogConfirmationBtnLabel' | fdTranslate\"\n                (click)=\"confirm()\"\n            ></button>\n        </fd-dialog-footer-button>\n\n        <fd-dialog-footer-button>\n            <button\n                fd-button\n                fdType=\"transparent\"\n                fd-dialog-decisive-button\n                [label]=\"'platformTable.P13ColumnsDialogCancelBtnLabel' | fdTranslate\"\n                (click)=\"cancel()\"\n            ></button>\n        </fd-dialog-footer-button>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-columns-dialog fd-toolbar{position:sticky;top:0;z-index:1;display:block}.fdp-table-p13-columns-dialog .fd-select-item--active{background:#e5f0fa;background:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.fdp-table-p13-columns-dialog .group-row{display:flex;align-items:center;margin-bottom:.5rem}.fdp-table-p13-columns-dialog .group-row .fd-popover-custom{display:block}.fdp-table-p13-columns-dialog .group-row__checkbox,.fdp-table-p13-columns-dialog .group-row__actions,.fdp-table-p13-columns-dialog .group-row__select{margin-right:1rem}.fdp-table-p13-columns-dialog .group-row__select{flex:1 1 0}\n"], dependencies: [{ kind: "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: 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: "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: 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: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i1$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1$2.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1$2.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1$2.DialogFooterButtonComponent, selector: "fd-dialog-footer-button" }, { kind: "directive", type: i1$2.DialogDecisiveButtonDirective, selector: "[fd-dialog-decisive-button]" }, { kind: "directive", type: i4.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i4.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title], span[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i2.TemplateDirective, selector: "[fdkTemplate], [fdTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i2.InitialFocusDirective, selector: "[fdkInitialFocus], [fdInitialFocus], [fd-initial-focus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { 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: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { 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: P13ColumnsDialogComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13ColumnsDialogComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-dialog class=\"fdp-table-p13-columns-dialog\">\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">\n                        {{ 'platformTable.P13ColumnsDialogHeader' | fdTranslate }}\n                    </h4>\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body>\n        <fd-toolbar>\n            <fdp-search-field\n                [placeholder]=\"'platformTable.P13ColumnsDialogSearchPlaceholder' | fdTranslate\"\n                [inputText]=\"(_searchQuerySubject | async) || ''\"\n                [suggestions]=\"[]\"\n                (inputChange)=\"_searchInputChange($event)\"\n                fdkInitialFocus\n            ></fdp-search-field>\n\n            <fd-toolbar-spacer></fd-toolbar-spacer>\n\n            <!-- Show Selected/All -->\n            <button fd-toolbar-item fd-button fdType=\"transparent\" (click)=\"_toggleShowAll()\">\n                <ng-container *ngIf=\"(_showAllItemsSubject | async) === true; else showAll\">\n                    {{ 'platformTable.P13ColumnsDialogsShowSelected' | fdTranslate }}\n                </ng-container>\n                <ng-template #showAll>\n                    {{ 'platformTable.P13ColumnsDialogShowAll' | fdTranslate }}\n                </ng-template>\n            </button>\n\n            <!-- Active Button Movement -->\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"collapse-group\"\n                [disabled]=\"_moveUpDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n                (click)=\"_moveActiveToTop()\"\n            ></button>\n\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"slim-arrow-up\"\n                [disabled]=\"_moveUpDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n                (click)=\"_moveActiveUp()\"\n            ></button>\n\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"slim-arrow-down\"\n                [disabled]=\"_moveDownDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n                (click)=\"_moveActiveDown()\"\n            ></button>\n\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"expand-group\"\n                [disabled]=\"_moveDownDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n                (click)=\"_moveActiveToBottom()\"\n            ></button>\n        </fd-toolbar>\n\n        <ul fd-list [selection]=\"true\" aria-multiselectable=\"true\">\n            <li\n                (focus)=\"_setActiveColumn(null)\"\n                fd-list-item\n                [selected]=\"_selectedColumnsCount === _selectableColumns.length\"\n            >\n                <fd-checkbox\n                    [ngModel]=\"_selectedColumnsCount === _selectableColumns.length\"\n                    (ngModelChange)=\"_toggleSelectAll($event)\"\n                    [disabled]=\"_selectAllDisabled\"\n                ></fd-checkbox>\n                <span fd-list-title>\n                    {{\n                        'platformTable.P13ColumnsDialogSelectAll'\n                            | fdTranslate\n                                : {\n                                      selectedColumnsCount: _selectedColumnsCount,\n                                      selectableColumnsCount: _selectableColumns.length\n                                  }\n                    }}\n                </span>\n            </li>\n            <li\n                fd-list-item\n                *ngFor=\"let item of _filteredColumns; trackBy: _filterByColumnKy\"\n                [class.fd-select-item--selected]=\"item.selected\"\n                [class.is-focus]=\"item.active\"\n                [selected]=\"item.selected\"\n                (focus)=\"_setActiveColumn(item)\"\n            >\n                <fd-checkbox [(ngModel)]=\"item.selected\" (ngModelChange)=\"_onToggleColumn()\"></fd-checkbox>\n                <span fd-list-title>\n                    {{ item.column.label }}\n                </span>\n            </li>\n        </ul>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-dialog-footer-button>\n            <button\n                fd-button\n                fdType=\"emphasized\"\n                fd-dialog-decisive-button\n                [label]=\"'platformTable.P13ColumnsDialogConfirmationBtnLabel' | fdTranslate\"\n                (click)=\"confirm()\"\n            ></button>\n        </fd-dialog-footer-button>\n\n        <fd-dialog-footer-button>\n            <button\n                fd-button\n                fdType=\"transparent\"\n                fd-dialog-decisive-button\n                [label]=\"'platformTable.P13ColumnsDialogCancelBtnLabel' | fdTranslate\"\n                (click)=\"cancel()\"\n            ></button>\n        </fd-dialog-footer-button>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-columns-dialog fd-toolbar{position:sticky;top:0;z-index:1;display:block}.fdp-table-p13-columns-dialog .fd-select-item--active{background:#e5f0fa;background:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.fdp-table-p13-columns-dialog .group-row{display:flex;align-items:center;margin-bottom:.5rem}.fdp-table-p13-columns-dialog .group-row .fd-popover-custom{display:block}.fdp-table-p13-columns-dialog .group-row__checkbox,.fdp-table-p13-columns-dialog .group-row__actions,.fdp-table-p13-columns-dialog .group-row__select{margin-right:1rem}.fdp-table-p13-columns-dialog .group-row__select{flex:1 1 0}\n"] }]
+            args: [{ encapsulation: ViewEncapsulation.None, providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13ColumnsDialogComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-dialog class=\"fdp-table-p13-columns-dialog\">\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">\n                        {{ 'platformTable.P13ColumnsDialogHeader' | fdTranslate }}\n                    </h4>\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body>\n        <fd-toolbar>\n            <fdp-search-field\n                [placeholder]=\"'platformTable.P13ColumnsDialogSearchPlaceholder' | fdTranslate\"\n                [inputText]=\"(_searchQuerySubject | async) || ''\"\n                [suggestions]=\"[]\"\n                (inputChange)=\"_searchInputChange($event)\"\n                fdkInitialFocus\n            ></fdp-search-field>\n\n            <fd-toolbar-spacer></fd-toolbar-spacer>\n\n            <!-- Show Selected/All -->\n            <button fd-toolbar-item fd-button fdType=\"transparent\" (click)=\"_toggleShowAll()\">\n                <ng-container *ngIf=\"(_showAllItemsSubject | async) === true; else showAll\">\n                    {{ 'platformTable.P13ColumnsDialogsShowSelected' | fdTranslate }}\n                </ng-container>\n                <ng-template #showAll>\n                    {{ 'platformTable.P13ColumnsDialogShowAll' | fdTranslate }}\n                </ng-template>\n            </button>\n\n            <!-- Active Button Movement -->\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"collapse-group\"\n                [disabled]=\"_moveUpDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveToTopBtn' | fdTranslate\"\n                (click)=\"_moveActiveToTop()\"\n            ></button>\n\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"slim-arrow-down\"\n                style=\"transform: rotate(180deg)\"\n                [disabled]=\"_moveUpDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveUpBtn' | fdTranslate\"\n                (click)=\"_moveActiveUp()\"\n            ></button>\n\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"slim-arrow-down\"\n                [disabled]=\"_moveDownDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveDownBtn' | fdTranslate\"\n                (click)=\"_moveActiveDown()\"\n            ></button>\n\n            <button\n                fd-toolbar-item\n                fd-button\n                fdType=\"transparent\"\n                glyph=\"expand-group\"\n                [disabled]=\"_moveDownDisabled\"\n                [attr.aria-label]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n                [title]=\"'platformTable.P13ColumnsDialogMoveToBottomBtn' | fdTranslate\"\n                (click)=\"_moveActiveToBottom()\"\n            ></button>\n        </fd-toolbar>\n\n        <ul fd-list [selection]=\"true\" aria-multiselectable=\"true\">\n            <li\n                (focus)=\"_setActiveColumn(null)\"\n                fd-list-item\n                [selected]=\"_selectedColumnsCount === _selectableColumns.length\"\n            >\n                <fd-checkbox\n                    [ngModel]=\"_selectedColumnsCount === _selectableColumns.length\"\n                    (ngModelChange)=\"_toggleSelectAll($event)\"\n                    [disabled]=\"_selectAllDisabled\"\n                ></fd-checkbox>\n                <span fd-list-title>\n                    {{\n                        'platformTable.P13ColumnsDialogSelectAll'\n                            | fdTranslate\n                                : {\n                                      selectedColumnsCount: _selectedColumnsCount,\n                                      selectableColumnsCount: _selectableColumns.length\n                                  }\n                    }}\n                </span>\n            </li>\n            <li\n                fd-list-item\n                *ngFor=\"let item of _filteredColumns; trackBy: _filterByColumnKy\"\n                [class.fd-select-item--selected]=\"item.selected\"\n                [class.is-focus]=\"item.active\"\n                [selected]=\"item.selected\"\n                (focus)=\"_setActiveColumn(item)\"\n            >\n                <fd-checkbox [(ngModel)]=\"item.selected\" (ngModelChange)=\"_onToggleColumn()\"></fd-checkbox>\n                <span fd-list-title>\n                    {{ item.column.label }}\n                </span>\n            </li>\n        </ul>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-dialog-footer-button>\n            <button\n                fd-button\n                fdType=\"emphasized\"\n                fd-dialog-decisive-button\n                [label]=\"'platformTable.P13ColumnsDialogConfirmationBtnLabel' | fdTranslate\"\n                (click)=\"confirm()\"\n            ></button>\n        </fd-dialog-footer-button>\n\n        <fd-dialog-footer-button>\n            <button\n                fd-button\n                fdType=\"transparent\"\n                fd-dialog-decisive-button\n                [label]=\"'platformTable.P13ColumnsDialogCancelBtnLabel' | fdTranslate\"\n                (click)=\"cancel()\"\n            ></button>\n        </fd-dialog-footer-button>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-columns-dialog fd-toolbar{position:sticky;top:0;z-index:1;display:block}.fdp-table-p13-columns-dialog .fd-select-item--active{background:#e5f0fa;background:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.fdp-table-p13-columns-dialog .group-row{display:flex;align-items:center;margin-bottom:.5rem}.fdp-table-p13-columns-dialog .group-row .fd-popover-custom{display:block}.fdp-table-p13-columns-dialog .group-row__checkbox,.fdp-table-p13-columns-dialog .group-row__actions,.fdp-table-p13-columns-dialog .group-row__select{margin-right:1rem}.fdp-table-p13-columns-dialog .group-row__select{flex:1 1 0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.DialogRef }, { type: i0.ChangeDetectorRef }]; } });
 
 const dialogConfig$1 = {
@@ -2468,7 +2468,7 @@ class TableCellHeaderPopoverComponent {
     }
 }
 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"] }, { 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: "_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 });
 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" }]
@@ -2706,11 +2706,13 @@ class TableRowComponent extends TableRowDirective {
         this._tableRowService.toggleRow({ type: 'toggleRow', row: this.row });
     }
     /** @hidden */
-    _toggleSingleSelectableRow() {
+    _toggleSingleSelectableRow(event) {
+        event?.preventDefault();
         this._tableRowService.toggleRow({ type: 'toggleSingleSelectableRow', row: this.row });
     }
     /** @hidden */
     _toggleMultiSelectRow(row, event) {
+        event?.preventDefault();
         this._tableRowService.toggleRow({ ...{ row, event }, ...{ type: 'toggleMultiSelectRow' } });
     }
     /** @hidden */
@@ -2725,7 +2727,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            fd-table-cell-selectable\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()\"\n            (keydown.space)=\"_toggleSingleSelectableRow()\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.MULTIPLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            [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\">\n        <span\n            *ngIf=\"_isTreeRowFirstCell(colIdx, row)\"\n            class=\"fd-table__expand\"\n            [class.fd-table__expand--open]=\"row.expanded$ | async\"\n            aria-hidden=\"true\"\n        ></span>\n\n        <ng-container *ngIf=\"row.state === 'readonly'; else editModeCell\">\n            <span\n                *ngIf=\"(row.value | valueByPath : column.key) === '' || (row.value | valueByPath : column.key) === null\"\n                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: "directive", type: i1.FdpCellSelectableDirective, selector: "[fdTableCellSelectable], [fd-table-cell-selectable]", inputs: ["enabled"] }, { 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)\"\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\">\n        <span\n            *ngIf=\"_isTreeRowFirstCell(colIdx, row)\"\n            class=\"fd-table__expand\"\n            [class.fd-table__expand--open]=\"row.expanded$ | async\"\n            aria-hidden=\"true\"\n        ></span>\n\n        <ng-container *ngIf=\"row.state === 'readonly'; else editModeCell\">\n            <span\n                *ngIf=\"(row.value | valueByPath : column.key) === '' || (row.value | valueByPath : column.key) === null\"\n                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: [
@@ -2737,7 +2739,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            fd-table-cell-selectable\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()\"\n            (keydown.space)=\"_toggleSingleSelectableRow()\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.MULTIPLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            [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\">\n        <span\n            *ngIf=\"_isTreeRowFirstCell(colIdx, row)\"\n            class=\"fd-table__expand\"\n            [class.fd-table__expand--open]=\"row.expanded$ | async\"\n            aria-hidden=\"true\"\n        ></span>\n\n        <ng-container *ngIf=\"row.state === 'readonly'; else editModeCell\">\n            <span\n                *ngIf=\"(row.value | valueByPath : column.key) === '' || (row.value | valueByPath : column.key) === null\"\n                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)\"\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\">\n        <span\n            *ngIf=\"_isTreeRowFirstCell(colIdx, row)\"\n            class=\"fd-table__expand\"\n            [class.fd-table__expand--open]=\"row.expanded$ | async\"\n            aria-hidden=\"true\"\n        ></span>\n\n        <ng-container *ngIf=\"row.state === 'readonly'; else editModeCell\">\n            <span\n                *ngIf=\"(row.value | valueByPath : column.key) === '' || (row.value | valueByPath : column.key) === null\"\n                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: [{