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

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, Inject, Optional, Host, Input, ContentChild, inject, DestroyRef, EventEmitter, Output, ViewChild, forwardRef, Pipe, TemplateRef, ContentChildren, ViewChildren, HostBinding, ChangeDetectorRef, NgZone, ElementRef, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@fundamental-ngx/platform/table-helpers';
-import { TableColumn, FilterableColumnDataType, FdpCellDef, FdpEditableCellDef, FdpHeaderCellDef, TableCellHeaderPopoverDirective, getFilterStrategiesBasedOnDataType, FILTER_STRATEGY, SortDirection, getUniqueListValuesByKey, FdpViewSettingsFilterCustomDef, FilterType, TableService, Table, FILTER_STRING_STRATEGY, SelectionMode, TableColumnResizeService, TableRowService, PlatformTableCellResizableDirective, SelectionCellStylesPipe, TableCellStylesPipe, ColumnResizableSidePipe, isTreeRow, isTreeRowFirstCell, EditableTableCell, TableDraggableDirective, FdpCellSelectableDirective, DEFAULT_HIGHLIGHTING_KEY, SEMANTIC_HIGHLIGHTING_COLUMN_WIDTH, ROW_HEIGHT, TableDataSourceDirective, FDP_TABLE_STATE_DIRECTIVE, FDP_TABLE_VIRTUAL_SCROLL_DIRECTIVE, FDP_TABLE_DRAGGABLE_DIRECTIVE, TableHeaderResizerDirective, isRowNavigatable, TableRowType, buildNewRowSkeleton, EDITABLE_ROW_SEMANTIC_STATE, SaveRowsEvent, getSelectableRows, TableRowActivateEvent, TableRowToggleOpenStateEvent, findRowChildren, getRowParents, TableSortChangeEvent, TablePageChangeEvent, TableGroupChangeEvent, TableColumnFreezeEvent, TableFilterChangeEvent, TableColumnsChangeEvent, convertObjectsToTableRows, isTableRow, convertTreeTableRowToFlatList, convertTreeObjectsToTableRows, getFreezableColumns, getFreezableEndColumns, applySelectionToChildren, SELECTION_COLUMN_WIDTH, TableScrollDispatcherService, TableResponsiveService, TableScrollableDirective, RowClassesPipe, TableHelpersModule } from '@fundamental-ngx/platform/table-helpers';
+import { TableColumn, FilterableColumnDataType, FdpCellDef, FdpEditableCellDef, FdpHeaderCellDef, TableCellHeaderPopoverDirective, getFilterStrategiesBasedOnDataType, FILTER_STRATEGY, SortDirection, getUniqueListValuesByKey, FdpViewSettingsFilterCustomDef, FilterType, TableService, Table, FILTER_STRING_STRATEGY, SelectionMode, TableColumnResizeService, TableRowService, PlatformTableCellResizableDirective, SelectionCellStylesPipe, TableCellStylesPipe, ColumnResizableSidePipe, TableColumnSortingDirectionPipe, isTreeRow, isTreeRowFirstCell, EditableTableCell, TableDraggableDirective, FdpCellSelectableDirective, DEFAULT_HIGHLIGHTING_KEY, SEMANTIC_HIGHLIGHTING_COLUMN_WIDTH, ROW_HEIGHT, TableDataSourceDirective, FDP_TABLE_STATE_DIRECTIVE, FDP_TABLE_VIRTUAL_SCROLL_DIRECTIVE, FDP_TABLE_DRAGGABLE_DIRECTIVE, TableHeaderResizerDirective, isRowNavigatable, TableRowType, buildNewRowSkeleton, EDITABLE_ROW_SEMANTIC_STATE, SaveRowsEvent, getSelectableRows, TableRowActivateEvent, TableRowToggleOpenStateEvent, findRowChildren, getRowParents, TableSortChangeEvent, TablePageChangeEvent, TableGroupChangeEvent, TableColumnFreezeEvent, TableFilterChangeEvent, TableColumnsChangeEvent, convertObjectsToTableRows, isTableRow, convertTreeTableRowToFlatList, convertTreeObjectsToTableRows, getFreezableColumns, getFreezableEndColumns, applySelectionToChildren, SELECTION_COLUMN_WIDTH, TableScrollDispatcherService, TableResponsiveService, TableScrollableDirective, RowClassesPipe, TableHelpersModule } from '@fundamental-ngx/platform/table-helpers';
 export * from '@fundamental-ngx/platform/table-helpers';
 import { AsyncPipe, DOCUMENT, NgIf, NgFor, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
@@ -825,7 +825,7 @@ class FilterRuleComponent {
         this.ruleChange.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FilterRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: FilterRuleComponent, isStandalone: true, selector: "fdp-table-filter-rule", inputs: { rule: "rule" }, outputs: { ruleChange: "ruleChange", ruleStateChange: "ruleStateChange" }, viewQueries: [{ propertyName: "ngForm", first: true, predicate: NgForm, descendants: true }], ngImport: i0, template: "<div fdLayoutGridRow>\n    <div fdLayoutGridCol colGrow>\n        <div fdLayoutGridRow>\n            <div fdLayoutGridCol colGrow>\n                <!-- Column -->\n                <fd-select\n                    class=\"filter-row__select\"\n                    [ngModel]=\"rule.columnKey\"\n                    (ngModelChange)=\"rule.setColumnKey($event); _onModelChange()\"\n                >\n                    <li fd-option *ngFor=\"let column of rule.columns\" [value]=\"column.key\">{{ column.label }}</li>\n                </fd-select>\n            </div>\n            <div fdLayoutGridCol colGrow>\n                <!-- Strategy -->\n                <fd-select\n                    class=\"filter-row__select\"\n                    [ngModel]=\"rule.strategy\"\n                    (ngModelChange)=\"rule.setStrategy($event); _onModelChange()\"\n                >\n                    <li fd-option *ngFor=\"let strategy of rule.strategies\" [value]=\"strategy\">\n                        <ng-container [ngSwitch]=\"strategy\">\n                            <span *ngSwitchCase=\"'between'\">\n                                {{ 'platformTable.P13FilterStrategyLabelBetween' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'contains'\">\n                                {{ 'platformTable.P13FilterStrategyLabelContains' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'beginsWith'\">\n                                {{ 'platformTable.P13FilterStrategyLabelBeginsWith' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'endsWith'\">\n                                {{ 'platformTable.P13FilterStrategyLabelEndsWith' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'equalTo'\">\n                                {{ 'platformTable.P13FilterStrategyLabelEqualTo' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'greaterThan'\">\n                                {{ 'platformTable.P13FilterStrategyLabelGreaterThan' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'greaterThanOrEqualTo'\">\n                                {{ 'platformTable.P13FilterStrategyLabelGreaterThanOrEqualTo' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'lessThan'\">\n                                {{ 'platformTable.P13FilterStrategyLabelLessThan' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'lessThanOrEqualTo'\">\n                                {{ 'platformTable.P13FilterStrategyLabelLessThanOrEqualTo' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'after'\">\n                                {{ 'platformTable.P13FilterStrategyLabelAfter' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'onOrAfter'\">\n                                {{ 'platformTable.P13FilterStrategyLabelOnOrAfter' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'before'\">\n                                {{ 'platformTable.P13FilterStrategyLabelBefore' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'beforeOrOn'\">\n                                {{ 'platformTable.P13FilterStrategyLabelBeforeOrOn' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchDefault>\n                                {{ 'platformTable.P13FilterStrategyLabelNotDefined' | fdTranslate }}\n                            </span>\n                        </ng-container>\n                    </li>\n                </fd-select>\n            </div>\n        </div>\n    </div>\n    <div fdLayoutGridCol colGrow>\n        <div fdLayoutGridRow [ngSwitch]=\"rule.strategy\" ngForm>\n            <ng-container *ngSwitchCase=\"FILTER_STRATEGY.BETWEEN\">\n                <div fdLayoutGridCol colGrow>\n                    <ng-container\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value' }\"\n                    ></ng-container>\n                </div>\n                <div fdLayoutGridCol colGrow>\n                    <ng-container\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value2' }\"\n                    ></ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <div fdLayoutGridCol colGrow>\n                    <ng-container\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value' }\"\n                    ></ng-container>\n                </div>\n            </ng-container>\n\n            <!-- Rule Control Based on Data Type -->\n            <ng-template #ruleInputTemplate let-valueKey=\"valueKey\">\n                <ng-container [ngSwitch]=\"rule.dataType\">\n                    <ng-container *ngSwitchCase=\"DATA_TYPE.DATE\">\n                        <fd-date-picker\n                            class=\"filter-row__input\"\n                            type=\"single\"\n                            [required]=\"true\"\n                            [name]=\"valueKey\"\n                            [(ngModel)]=\"rule[valueKey]\"\n                            (ngModelChange)=\"_onModelChange()\"\n                        ></fd-date-picker>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"DATA_TYPE.BOOLEAN\">\n                        <fd-select\n                            class=\"filter-row__select\"\n                            [name]=\"valueKey\"\n                            [(ngModel)]=\"rule[valueKey]\"\n                            (ngModelChange)=\"_onModelChange()\"\n                            [required]=\"true\"\n                        >\n                            <li fd-option [value]=\"undefined\">\n                                {{ 'platformTable.P13FilterBooleanOptionNotDefined' | fdTranslate }}\n                            </li>\n                            <li fd-option [value]=\"true\">\n                                {{ 'platformTable.P13FilterBooleanOptionTrue' | fdTranslate }}\n                            </li>\n                            <li fd-option [value]=\"false\">\n                                {{ 'platformTable.P13FilterBooleanOptionFalse' | fdTranslate }}\n                            </li>\n                        </fd-select>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <input\n                            type=\"text\"\n                            class=\"filter-row__input\"\n                            fd-form-control\n                            required\n                            [name]=\"valueKey\"\n                            [(ngModel)]=\"rule[valueKey]\"\n                            (ngModelChange)=\"_onModelChange()\"\n                        />\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "directive", type: LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "component", type: SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DatePickerComponent, selector: "fd-date-picker", inputs: ["type", "placeholder", "inputId", "required", "message", "messageTriggers", "selectedDate", "selectedRangeDate", "startingDayOfWeek", "rangeHoverEffect", "useValidation", "allowNull", "activeView", "placement", "appendTo", "disabled", "closeOnDateChoose", "showTodayButton", "todayButtonLabel", "previousButtonDisableFunction", "nextButtonDisableFunction", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "showWeekNumbers", "isOpen", "inline", "ariaLabelledBy", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["isOpenChange", "selectedDateChange", "selectedRangeDateChange", "activeViewChange"] }, { kind: "component", type: FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: FilterRuleComponent, isStandalone: true, selector: "fdp-table-filter-rule", inputs: { rule: "rule" }, outputs: { ruleChange: "ruleChange", ruleStateChange: "ruleStateChange" }, viewQueries: [{ propertyName: "ngForm", first: true, predicate: NgForm, descendants: true }], ngImport: i0, template: "<div fdLayoutGridRow>\n    <div fdLayoutGridCol colGrow>\n        <div fdLayoutGridRow>\n            <div fdLayoutGridCol colGrow>\n                <!-- Column -->\n                <fd-select\n                    class=\"filter-row__select\"\n                    [ngModel]=\"rule.columnKey\"\n                    (ngModelChange)=\"rule.setColumnKey($event); _onModelChange()\"\n                >\n                    <li fd-option *ngFor=\"let column of rule.columns\" [value]=\"column.key\">{{ column.label }}</li>\n                </fd-select>\n            </div>\n            <div fdLayoutGridCol colGrow>\n                <!-- Strategy -->\n                <fd-select\n                    class=\"filter-row__select\"\n                    [ngModel]=\"rule.strategy\"\n                    (ngModelChange)=\"rule.setStrategy($event); _onModelChange()\"\n                >\n                    <li fd-option *ngFor=\"let strategy of rule.strategies\" [value]=\"strategy\">\n                        <ng-container [ngSwitch]=\"strategy\">\n                            <span *ngSwitchCase=\"'between'\">\n                                {{ 'platformTable.P13FilterStrategyLabelBetween' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'contains'\">\n                                {{ 'platformTable.P13FilterStrategyLabelContains' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'beginsWith'\">\n                                {{ 'platformTable.P13FilterStrategyLabelBeginsWith' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'endsWith'\">\n                                {{ 'platformTable.P13FilterStrategyLabelEndsWith' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'equalTo'\">\n                                {{ 'platformTable.P13FilterStrategyLabelEqualTo' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'greaterThan'\">\n                                {{ 'platformTable.P13FilterStrategyLabelGreaterThan' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'greaterThanOrEqualTo'\">\n                                {{ 'platformTable.P13FilterStrategyLabelGreaterThanOrEqualTo' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'lessThan'\">\n                                {{ 'platformTable.P13FilterStrategyLabelLessThan' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'lessThanOrEqualTo'\">\n                                {{ 'platformTable.P13FilterStrategyLabelLessThanOrEqualTo' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'after'\">\n                                {{ 'platformTable.P13FilterStrategyLabelAfter' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'onOrAfter'\">\n                                {{ 'platformTable.P13FilterStrategyLabelOnOrAfter' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'before'\">\n                                {{ 'platformTable.P13FilterStrategyLabelBefore' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchCase=\"'beforeOrOn'\">\n                                {{ 'platformTable.P13FilterStrategyLabelBeforeOrOn' | fdTranslate }}\n                            </span>\n\n                            <span *ngSwitchDefault>\n                                {{ 'platformTable.P13FilterStrategyLabelNotDefined' | fdTranslate }}\n                            </span>\n                        </ng-container>\n                    </li>\n                </fd-select>\n            </div>\n        </div>\n    </div>\n    <div fdLayoutGridCol colGrow>\n        <div fdLayoutGridRow [ngSwitch]=\"rule.strategy\" ngForm>\n            <ng-container *ngSwitchCase=\"FILTER_STRATEGY.BETWEEN\">\n                <div fdLayoutGridCol colGrow>\n                    <ng-container\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value' }\"\n                    ></ng-container>\n                </div>\n                <div fdLayoutGridCol colGrow>\n                    <ng-container\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value2' }\"\n                    ></ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <div fdLayoutGridCol colGrow>\n                    <ng-container\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value' }\"\n                    ></ng-container>\n                </div>\n            </ng-container>\n\n            <!-- Rule Control Based on Data Type -->\n            <ng-template #ruleInputTemplate let-valueKey=\"valueKey\">\n                <ng-container [ngSwitch]=\"rule.dataType\">\n                    <ng-container *ngSwitchCase=\"DATA_TYPE.DATE\">\n                        <fd-date-picker\n                            class=\"filter-row__input\"\n                            type=\"single\"\n                            [required]=\"true\"\n                            [name]=\"valueKey\"\n                            [(ngModel)]=\"rule[valueKey]\"\n                            (ngModelChange)=\"_onModelChange()\"\n                        ></fd-date-picker>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"DATA_TYPE.BOOLEAN\">\n                        <fd-select\n                            class=\"filter-row__select\"\n                            [name]=\"valueKey\"\n                            [(ngModel)]=\"rule[valueKey]\"\n                            (ngModelChange)=\"_onModelChange()\"\n                            [required]=\"true\"\n                        >\n                            <li fd-option [value]=\"undefined\">\n                                {{ 'platformTable.P13FilterBooleanOptionNotDefined' | fdTranslate }}\n                            </li>\n                            <li fd-option [value]=\"true\">\n                                {{ 'platformTable.P13FilterBooleanOptionTrue' | fdTranslate }}\n                            </li>\n                            <li fd-option [value]=\"false\">\n                                {{ 'platformTable.P13FilterBooleanOptionFalse' | fdTranslate }}\n                            </li>\n                        </fd-select>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <input\n                            type=\"text\"\n                            class=\"filter-row__input\"\n                            fd-form-control\n                            required\n                            [name]=\"valueKey\"\n                            [(ngModel)]=\"rule[valueKey]\"\n                            (ngModelChange)=\"_onModelChange()\"\n                        />\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "directive", type: LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "component", type: SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DatePickerComponent, selector: "fd-date-picker", inputs: ["type", "placeholder", "inputId", "required", "message", "messageTriggers", "selectedDate", "selectedRangeDate", "startingDayOfWeek", "rangeHoverEffect", "useValidation", "allowNull", "activeView", "placement", "appendTo", "disabled", "closeOnDateChoose", "showTodayButton", "todayButtonLabel", "previousButtonDisableFunction", "nextButtonDisableFunction", "state", "buttonFocusable", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "markWeekends", "showWeekNumbers", "isOpen", "inline", "ariaLabelledBy", "processInputOnBlur", "preventScrollOnFocus", "mobile", "mobileConfig", "mobileLandscape", "mobilePortrait", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["isOpenChange", "selectedDateChange", "selectedRangeDateChange", "activeViewChange"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: FilterRuleComponent, decorators: [{
             type: Component,
@@ -2673,7 +2673,7 @@ class TableCellHeaderPopoverComponent {
         this.popover?.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TableCellHeaderPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: TableCellHeaderPopoverComponent, isStandalone: true, selector: "fdp-table-cell-header-popover", inputs: { column: "column", popoverTemplate: "popoverTemplate", disabled: "disabled", columnFrozen: "columnFrozen", filteringFromHeaderDisabled: "filteringFromHeaderDisabled" }, 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-icon></span>\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></span>\n                <span fd-list-title *ngIf=\"!column.endFreezable\">{{\n                    'platformTable.headerMenuFreeze' | fdTranslate\n                }}</span>\n                <span fd-list-title *ngIf=\"column.endFreezable\">{{\n                    'platformTable.headerMenuEndFreeze' | fdTranslate\n                }}</span>\n            </a>\n        </ng-container>\n        <ng-template #unfreezeTpl>\n            <a fd-list-link [focusable]=\"true\" (click)=\"_unFreeze()\" (keyup.enter)=\"_unFreeze()\">\n                <span></span>\n                <span fd-list-title>{{ 'platformTable.headerMenuUnfreeze' | fdTranslate }}</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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: TablePopoverDirective, selector: "[fdTablePopover], [fd-table-popover]" }, { kind: "component", type: ListComponent$1, 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FreeContentListItemComponent, selector: "fdp-free-content-list-item" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: TableCellHeaderPopoverComponent, isStandalone: true, selector: "fdp-table-cell-header-popover", inputs: { column: "column", popoverTemplate: "popoverTemplate", disabled: "disabled", columnFrozen: "columnFrozen", filteringFromHeaderDisabled: "filteringFromHeaderDisabled" }, 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-icon></span>\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></span>\n                <span fd-list-title *ngIf=\"!column.endFreezable\">{{\n                    'platformTable.headerMenuFreeze' | fdTranslate\n                }}</span>\n                <span fd-list-title *ngIf=\"column.endFreezable\">{{\n                    'platformTable.headerMenuEndFreeze' | fdTranslate\n                }}</span>\n            </a>\n        </ng-container>\n        <ng-template #unfreezeTpl>\n            <a fd-list-link [focusable]=\"true\" (click)=\"_unFreeze()\" (keyup.enter)=\"_unFreeze()\">\n                <span></span>\n                <span fd-list-title>{{ 'platformTable.headerMenuUnfreeze' | fdTranslate }}</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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: TablePopoverDirective, selector: "[fdTablePopover], [fd-table-popover]" }, { kind: "component", type: ListComponent$1, 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FreeContentListItemComponent, selector: "fdp-free-content-list-item" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TableCellHeaderPopoverComponent, decorators: [{
             type: Component,
@@ -2723,11 +2723,11 @@ class TableHeaderCellContentComponent {
         this.SORT_DIRECTION = SortDirection;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TableHeaderCellContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: TableHeaderCellContentComponent, isStandalone: true, selector: "fdp-table-header-cell-content", inputs: { id: "id", column: "column", hasSorting: "hasSorting", hasFilter: "hasFilter", sorting: "sorting" }, ngImport: i0, template: "<div class=\"fd-table__text--no-wrap\" [class.fd-table__inner]=\"hasSorting || hasFilter\">\n    <ng-container *ngTemplateOutlet=\"tableHeaderCellContentTemplate; context: { column: column }\"></ng-container>\n\n    <div class=\"fd-table__column-header-icons\" *ngIf=\"hasSorting || hasFilter\">\n        <fd-icon *ngIf=\"hasFilter\" fd-table-icon glyph=\"filter\"></fd-icon>\n\n        <fd-icon\n            *ngIf=\"hasSorting\"\n            fd-table-icon\n            [glyph]=\"sorting?.direction === SORT_DIRECTION.ASC ? 'sort-ascending' : 'sort-descending'\"\n        ></fd-icon>\n    </div>\n</div>\n\n<ng-content></ng-content>\n\n<ng-template #tableHeaderCellContentTemplate let-column=\"column\">\n    <ng-container *ngIf=\"column?.headerCellTemplate; else defaultHeaderCellTemplate\">\n        <ng-template\n            [ngTemplateOutlet]=\"column.headerCellTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: column }\"\n        ></ng-template>\n    </ng-container>\n\n    <ng-template #defaultHeaderCellTemplate>\n        <span [id]=\"id + '-header-cell-' + column?.name\" class=\"fd-table__cell--truncate-txt\">\n            {{ column?.label }}\n        </span>\n    </ng-template>\n</ng-template>\n", styles: ["fdp-table-header-cell-content{display:flex;align-items:center;justify-content:space-between;flex-grow:0}fdp-table-header-cell-content .fd-table__text--no-wrap{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "navigation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: TableHeaderCellContentComponent, isStandalone: true, selector: "fdp-table-header-cell-content", inputs: { id: "id", column: "column", hasSorting: "hasSorting", hasFilter: "hasFilter", sorting: "sorting" }, ngImport: i0, template: "<div class=\"fd-table__text--no-wrap\" [class.fd-table__inner]=\"hasSorting || hasFilter\">\n    <ng-container *ngTemplateOutlet=\"tableHeaderCellContentTemplate; context: { column: column }\"></ng-container>\n\n    <div class=\"fd-table__column-header-icons\" *ngIf=\"hasSorting || hasFilter\">\n        <fd-icon *ngIf=\"hasFilter\" fd-table-icon glyph=\"filter\"></fd-icon>\n\n        <fd-icon\n            *ngIf=\"hasSorting\"\n            fd-table-icon\n            [ariaHidden]=\"true\"\n            [glyph]=\"sorting?.direction === SORT_DIRECTION.ASC ? 'sort-ascending' : 'sort-descending'\"\n        ></fd-icon>\n    </div>\n</div>\n\n<ng-content></ng-content>\n\n<ng-template #tableHeaderCellContentTemplate let-column=\"column\">\n    <ng-container *ngIf=\"column?.headerCellTemplate; else defaultHeaderCellTemplate\">\n        <ng-template\n            [ngTemplateOutlet]=\"column.headerCellTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: column }\"\n        ></ng-template>\n    </ng-container>\n\n    <ng-template #defaultHeaderCellTemplate>\n        <span [id]=\"id + '-header-cell-' + column?.name\" class=\"fd-table__cell--truncate-txt\">\n            {{ column?.label }}\n        </span>\n    </ng-template>\n</ng-template>\n", styles: ["fdp-table-header-cell-content{display:flex;align-items:center;justify-content:space-between;flex-grow:0}fdp-table-header-cell-content .fd-table__text--no-wrap{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "navigation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TableHeaderCellContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-table-header-cell-content', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet, NgIf, IconComponent, TableIconDirective], template: "<div class=\"fd-table__text--no-wrap\" [class.fd-table__inner]=\"hasSorting || hasFilter\">\n    <ng-container *ngTemplateOutlet=\"tableHeaderCellContentTemplate; context: { column: column }\"></ng-container>\n\n    <div class=\"fd-table__column-header-icons\" *ngIf=\"hasSorting || hasFilter\">\n        <fd-icon *ngIf=\"hasFilter\" fd-table-icon glyph=\"filter\"></fd-icon>\n\n        <fd-icon\n            *ngIf=\"hasSorting\"\n            fd-table-icon\n            [glyph]=\"sorting?.direction === SORT_DIRECTION.ASC ? 'sort-ascending' : 'sort-descending'\"\n        ></fd-icon>\n    </div>\n</div>\n\n<ng-content></ng-content>\n\n<ng-template #tableHeaderCellContentTemplate let-column=\"column\">\n    <ng-container *ngIf=\"column?.headerCellTemplate; else defaultHeaderCellTemplate\">\n        <ng-template\n            [ngTemplateOutlet]=\"column.headerCellTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: column }\"\n        ></ng-template>\n    </ng-container>\n\n    <ng-template #defaultHeaderCellTemplate>\n        <span [id]=\"id + '-header-cell-' + column?.name\" class=\"fd-table__cell--truncate-txt\">\n            {{ column?.label }}\n        </span>\n    </ng-template>\n</ng-template>\n", styles: ["fdp-table-header-cell-content{display:flex;align-items:center;justify-content:space-between;flex-grow:0}fdp-table-header-cell-content .fd-table__text--no-wrap{width:100%}\n"] }]
+            args: [{ selector: 'fdp-table-header-cell-content', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet, NgIf, IconComponent, TableIconDirective], template: "<div class=\"fd-table__text--no-wrap\" [class.fd-table__inner]=\"hasSorting || hasFilter\">\n    <ng-container *ngTemplateOutlet=\"tableHeaderCellContentTemplate; context: { column: column }\"></ng-container>\n\n    <div class=\"fd-table__column-header-icons\" *ngIf=\"hasSorting || hasFilter\">\n        <fd-icon *ngIf=\"hasFilter\" fd-table-icon glyph=\"filter\"></fd-icon>\n\n        <fd-icon\n            *ngIf=\"hasSorting\"\n            fd-table-icon\n            [ariaHidden]=\"true\"\n            [glyph]=\"sorting?.direction === SORT_DIRECTION.ASC ? 'sort-ascending' : 'sort-descending'\"\n        ></fd-icon>\n    </div>\n</div>\n\n<ng-content></ng-content>\n\n<ng-template #tableHeaderCellContentTemplate let-column=\"column\">\n    <ng-container *ngIf=\"column?.headerCellTemplate; else defaultHeaderCellTemplate\">\n        <ng-template\n            [ngTemplateOutlet]=\"column.headerCellTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: column }\"\n        ></ng-template>\n    </ng-container>\n\n    <ng-template #defaultHeaderCellTemplate>\n        <span [id]=\"id + '-header-cell-' + column?.name\" class=\"fd-table__cell--truncate-txt\">\n            {{ column?.label }}\n        </span>\n    </ng-template>\n</ng-template>\n", styles: ["fdp-table-header-cell-content{display:flex;align-items:center;justify-content:space-between;flex-grow:0}fdp-table-header-cell-content .fd-table__text--no-wrap{width:100%}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], column: [{
@@ -2829,6 +2829,8 @@ class TableHeaderRowComponent extends TableRowDirective {
         /** @hidden */
         this.SELECTION_MODE = SelectionMode;
         /** @hidden */
+        this.SORT_DIRECTION = SortDirection;
+        /** @hidden */
         this._tableColumnResizeService = inject(TableColumnResizeService);
         /** @hidden */
         this._fdpTableService = inject(TableService);
@@ -2863,7 +2865,7 @@ class TableHeaderRowComponent extends TableRowDirective {
                 provide: FDK_FOCUSABLE_LIST_DIRECTIVE,
                 useExisting: TableHeaderRowComponent
             }
-        ], viewQueries: [{ propertyName: "_focusableCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }], usesInheritance: true, ngImport: i0, template: "<th\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async\"\n    [class.fd-table__cell--fixed]=\"fixed\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [style.min-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n    [style.max-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n></th>\n\n<th\n    *ngIf=\"isShownSelectionColumn\"\n    fd-table-cell\n    [focusable]=\"true\"\n    [class.fd-table__cell--fixed]=\"fixed\"\n    class=\"fd-table__cell--checkbox\"\n    [style]=\"\n        _contentDensityObserver\n            | async\n            | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n    \"\n    (keydown.enter)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n    (keydown.space)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    [attr.aria-description]=\"\n        !checkedState\n            ? ('platformTable.selectAllCheckboxLabel' | fdTranslate)\n            : ('platformTable.deselectAllCheckboxLabel' | fdTranslate)\n    \"\n>\n    <fd-checkbox\n        tabIndexValue=\"-1\"\n        *ngIf=\"selectionMode === SELECTION_MODE.MULTIPLE\"\n        labelClass=\"fd-table__checkbox-label\"\n        [fdkDisabled]=\"_fdpTableService.visibleColumnsLength === 0 || disableSelectionCheckbox\"\n        [tristate]=\"true\"\n        [tristateSelectable]=\"false\"\n        [ngModel]=\"checkedState\"\n        (ngModelChange)=\"_tableRowService.toggleAllSelectableRows($event)\"\n    ></fd-checkbox>\n</th>\n\n<ng-container\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        trackBy: _columnTrackBy;\n        last as isLast\n    \"\n>\n    <th\n        [focusable]=\"true\"\n        role=\"columnheader\"\n        [fdpTableCellResizable]=\"\n            colIdx\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength\n                    : (_fdpTableService._isShownNavigationColumn$ | async)\n        \"\n        [columnName]=\"column.name\"\n        [id]=\"rowId + '__' + column.name\"\n        [attr.aria-colindex]=\"colIdx\"\n        [ngClass]=\"[\n            'fdp-table__col--' + column.name,\n            column._freezed ? 'fd-table__cell--fixed' : '',\n            column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n            column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n            column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n            isLast && (_fdpTableService._isShownNavigationColumn$ | async) !== true ? 'is-last-child' : '',\n            (column | isColumnHasHeaderMenu) ? 'fd-table__item--clickable' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl\n                    : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                    : selectionColumnWidth\n                    : column._freezed\n                    : column._endFreezed\n                    : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                    : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                    : _tableColumnResizeService.getNextColumnsWidth(column.name)\n        \"\n        [fdPopoverTrigger]=\"(column | isColumnHasHeaderMenu) ? tablePopover.popover : null\"\n        (cellFocused)=\"_tableRowService.cellFocused($event)\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n    >\n        <fdp-table-header-cell-content\n            [id]=\"rowId\"\n            [column]=\"column\"\n            [hasFilter]=\"(_fdpTableService.filterRules$ | async)?.has(column.key) === true\"\n            [hasSorting]=\"(_fdpTableService.sortRules$ | async)?.has(column.key) === true\"\n            [sorting]=\"(_fdpTableService.sortRules$ | async)?.get(column.key)\"\n            [attr.title]=\"column.label\"\n        >\n            <!-- Header menu -->\n            <fdp-table-cell-header-popover\n                #tablePopover\n                [disabled]=\"!(column | isColumnHasHeaderMenu)\"\n                [columnFrozen]=\"column._freezed || column._endFreezed\"\n                [column]=\"column\"\n                [popoverTemplate]=\"(column | isColumnHasHeaderMenu) ? column.headerCellPopoverTemplate : null\"\n                [filteringFromHeaderDisabled]=\"_fdpTableService._isFilteringFromHeaderDisabled$ | async\"\n            ></fdp-table-cell-header-popover>\n        </fdp-table-header-cell-content>\n    </th>\n</ng-container>\n\n<th\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    role=\"columnheader\"\n></th>\n\n<th\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n></th>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return TableCellDirective; }), selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i0.forwardRef(function () { return TableStatusIndicatorDirective; }), selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: i0.forwardRef(function () { return DisabledBehaviorDirective; }), selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "component", type: i0.forwardRef(function () { return CheckboxComponent; }), selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return FormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i1$2.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i1$2.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(function () { return NgFor; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return PlatformTableCellResizableDirective; }), selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: i0.forwardRef(function () { return NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return PopoverTriggerDirective; }), selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: i0.forwardRef(function () { return TableHeaderCellContentComponent; }), selector: "fdp-table-header-cell-content", inputs: ["id", "column", "hasSorting", "hasFilter", "sorting"] }, { kind: "component", type: i0.forwardRef(function () { return TableCellHeaderPopoverComponent; }), selector: "fdp-table-cell-header-popover", inputs: ["column", "popoverTemplate", "disabled", "columnFrozen", "filteringFromHeaderDisabled"] }, { kind: "pipe", type: i0.forwardRef(function () { return AsyncPipe; }), name: "async" }, { kind: "pipe", type: i0.forwardRef(function () { return FdTranslatePipe; }), name: "fdTranslate" }, { kind: "pipe", type: i0.forwardRef(function () { return SelectionCellStylesPipe; }), name: "selectionCellStyles" }, { kind: "pipe", type: i0.forwardRef(function () { return TableCellStylesPipe; }), name: "tableCellStyles" }, { kind: "pipe", type: i0.forwardRef(function () { return ColumnResizableSidePipe; }), name: "columnResizableSide" }, { kind: "pipe", type: i0.forwardRef(function () { return IsColumnHasHeaderMenuPipe; }), name: "isColumnHasHeaderMenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_focusableCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }], usesInheritance: true, ngImport: i0, template: "<th\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async\"\n    [class.fd-table__cell--fixed]=\"fixed\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [style.min-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n    [style.max-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n></th>\n\n<th\n    *ngIf=\"isShownSelectionColumn\"\n    fd-table-cell\n    [focusable]=\"true\"\n    [class.fd-table__cell--fixed]=\"fixed\"\n    class=\"fd-table__cell--checkbox\"\n    [style]=\"\n        _contentDensityObserver\n            | async\n            | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n    \"\n    (keydown.enter)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n    (keydown.space)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    [attr.aria-description]=\"\n        !checkedState\n            ? ('platformTable.selectAllCheckboxLabel' | fdTranslate)\n            : ('platformTable.deselectAllCheckboxLabel' | fdTranslate)\n    \"\n>\n    <fd-checkbox\n        tabIndexValue=\"-1\"\n        *ngIf=\"selectionMode === SELECTION_MODE.MULTIPLE\"\n        labelClass=\"fd-table__checkbox-label\"\n        [fdkDisabled]=\"_fdpTableService.visibleColumnsLength === 0 || disableSelectionCheckbox\"\n        [tristate]=\"true\"\n        [tristateSelectable]=\"false\"\n        [ngModel]=\"checkedState\"\n        (ngModelChange)=\"_tableRowService.toggleAllSelectableRows($event)\"\n    ></fd-checkbox>\n</th>\n\n<ng-container\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        trackBy: _columnTrackBy;\n        last as isLast\n    \"\n>\n    <th\n        [focusable]=\"true\"\n        role=\"columnheader\"\n        [fdpTableCellResizable]=\"\n            colIdx\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength\n                    : (_fdpTableService._isShownNavigationColumn$ | async)\n        \"\n        [columnName]=\"column.name\"\n        [id]=\"rowId + '__' + column.name\"\n        [attr.aria-colindex]=\"colIdx\"\n        [attr.aria-sort]=\"(_fdpTableService.sortRules$ | async)?.get(column.key) | fdpTableColumnSortingDirection\"\n        [ngClass]=\"[\n            'fdp-table__col--' + column.name,\n            column._freezed ? 'fd-table__cell--fixed' : '',\n            column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n            column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n            column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n            isLast && (_fdpTableService._isShownNavigationColumn$ | async) !== true ? 'is-last-child' : '',\n            (column | isColumnHasHeaderMenu) ? 'fd-table__item--clickable' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl\n                    : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                    : selectionColumnWidth\n                    : column._freezed\n                    : column._endFreezed\n                    : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                    : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                    : _tableColumnResizeService.getNextColumnsWidth(column.name)\n        \"\n        [fdPopoverTrigger]=\"(column | isColumnHasHeaderMenu) ? tablePopover.popover : null\"\n        (cellFocused)=\"_tableRowService.cellFocused($event)\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n    >\n        <fdp-table-header-cell-content\n            [id]=\"rowId\"\n            [column]=\"column\"\n            [hasFilter]=\"(_fdpTableService.filterRules$ | async)?.has(column.key) === true\"\n            [hasSorting]=\"(_fdpTableService.sortRules$ | async)?.has(column.key) === true\"\n            [sorting]=\"(_fdpTableService.sortRules$ | async)?.get(column.key)\"\n            [attr.title]=\"column.label\"\n        >\n            <!-- Header menu -->\n            <fdp-table-cell-header-popover\n                #tablePopover\n                [disabled]=\"!(column | isColumnHasHeaderMenu)\"\n                [columnFrozen]=\"column._freezed || column._endFreezed\"\n                [column]=\"column\"\n                [popoverTemplate]=\"(column | isColumnHasHeaderMenu) ? column.headerCellPopoverTemplate : null\"\n                [filteringFromHeaderDisabled]=\"_fdpTableService._isFilteringFromHeaderDisabled$ | async\"\n            ></fdp-table-cell-header-popover>\n        </fdp-table-header-cell-content>\n    </th>\n</ng-container>\n\n<th\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    role=\"columnheader\"\n></th>\n\n<th\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n></th>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return TableCellDirective; }), selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i0.forwardRef(function () { return TableStatusIndicatorDirective; }), selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: i0.forwardRef(function () { return DisabledBehaviorDirective; }), selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "component", type: i0.forwardRef(function () { return CheckboxComponent; }), selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: i0.forwardRef(function () { return FormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i1$2.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i1$2.NgModel; }), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(function () { return NgFor; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return PlatformTableCellResizableDirective; }), selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: i0.forwardRef(function () { return NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return PopoverTriggerDirective; }), selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: i0.forwardRef(function () { return TableHeaderCellContentComponent; }), selector: "fdp-table-header-cell-content", inputs: ["id", "column", "hasSorting", "hasFilter", "sorting"] }, { kind: "component", type: i0.forwardRef(function () { return TableCellHeaderPopoverComponent; }), selector: "fdp-table-cell-header-popover", inputs: ["column", "popoverTemplate", "disabled", "columnFrozen", "filteringFromHeaderDisabled"] }, { kind: "pipe", type: i0.forwardRef(function () { return AsyncPipe; }), name: "async" }, { kind: "pipe", type: i0.forwardRef(function () { return FdTranslatePipe; }), name: "fdTranslate" }, { kind: "pipe", type: i0.forwardRef(function () { return SelectionCellStylesPipe; }), name: "selectionCellStyles" }, { kind: "pipe", type: i0.forwardRef(function () { return TableCellStylesPipe; }), name: "tableCellStyles" }, { kind: "pipe", type: i0.forwardRef(function () { return ColumnResizableSidePipe; }), name: "columnResizableSide" }, { kind: "pipe", type: i0.forwardRef(function () { return TableColumnSortingDirectionPipe; }), name: "fdpTableColumnSortingDirection" }, { kind: "pipe", type: i0.forwardRef(function () { return IsColumnHasHeaderMenuPipe; }), name: "isColumnHasHeaderMenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TableHeaderRowComponent, decorators: [{
             type: Component,
@@ -2893,8 +2895,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                         SelectionCellStylesPipe,
                         TableCellStylesPipe,
                         ColumnResizableSidePipe,
+                        TableColumnSortingDirectionPipe,
                         forwardRef(() => IsColumnHasHeaderMenuPipe)
-                    ], template: "<th\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async\"\n    [class.fd-table__cell--fixed]=\"fixed\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [style.min-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n    [style.max-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n></th>\n\n<th\n    *ngIf=\"isShownSelectionColumn\"\n    fd-table-cell\n    [focusable]=\"true\"\n    [class.fd-table__cell--fixed]=\"fixed\"\n    class=\"fd-table__cell--checkbox\"\n    [style]=\"\n        _contentDensityObserver\n            | async\n            | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n    \"\n    (keydown.enter)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n    (keydown.space)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    [attr.aria-description]=\"\n        !checkedState\n            ? ('platformTable.selectAllCheckboxLabel' | fdTranslate)\n            : ('platformTable.deselectAllCheckboxLabel' | fdTranslate)\n    \"\n>\n    <fd-checkbox\n        tabIndexValue=\"-1\"\n        *ngIf=\"selectionMode === SELECTION_MODE.MULTIPLE\"\n        labelClass=\"fd-table__checkbox-label\"\n        [fdkDisabled]=\"_fdpTableService.visibleColumnsLength === 0 || disableSelectionCheckbox\"\n        [tristate]=\"true\"\n        [tristateSelectable]=\"false\"\n        [ngModel]=\"checkedState\"\n        (ngModelChange)=\"_tableRowService.toggleAllSelectableRows($event)\"\n    ></fd-checkbox>\n</th>\n\n<ng-container\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        trackBy: _columnTrackBy;\n        last as isLast\n    \"\n>\n    <th\n        [focusable]=\"true\"\n        role=\"columnheader\"\n        [fdpTableCellResizable]=\"\n            colIdx\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength\n                    : (_fdpTableService._isShownNavigationColumn$ | async)\n        \"\n        [columnName]=\"column.name\"\n        [id]=\"rowId + '__' + column.name\"\n        [attr.aria-colindex]=\"colIdx\"\n        [ngClass]=\"[\n            'fdp-table__col--' + column.name,\n            column._freezed ? 'fd-table__cell--fixed' : '',\n            column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n            column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n            column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n            isLast && (_fdpTableService._isShownNavigationColumn$ | async) !== true ? 'is-last-child' : '',\n            (column | isColumnHasHeaderMenu) ? 'fd-table__item--clickable' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl\n                    : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                    : selectionColumnWidth\n                    : column._freezed\n                    : column._endFreezed\n                    : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                    : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                    : _tableColumnResizeService.getNextColumnsWidth(column.name)\n        \"\n        [fdPopoverTrigger]=\"(column | isColumnHasHeaderMenu) ? tablePopover.popover : null\"\n        (cellFocused)=\"_tableRowService.cellFocused($event)\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n    >\n        <fdp-table-header-cell-content\n            [id]=\"rowId\"\n            [column]=\"column\"\n            [hasFilter]=\"(_fdpTableService.filterRules$ | async)?.has(column.key) === true\"\n            [hasSorting]=\"(_fdpTableService.sortRules$ | async)?.has(column.key) === true\"\n            [sorting]=\"(_fdpTableService.sortRules$ | async)?.get(column.key)\"\n            [attr.title]=\"column.label\"\n        >\n            <!-- Header menu -->\n            <fdp-table-cell-header-popover\n                #tablePopover\n                [disabled]=\"!(column | isColumnHasHeaderMenu)\"\n                [columnFrozen]=\"column._freezed || column._endFreezed\"\n                [column]=\"column\"\n                [popoverTemplate]=\"(column | isColumnHasHeaderMenu) ? column.headerCellPopoverTemplate : null\"\n                [filteringFromHeaderDisabled]=\"_fdpTableService._isFilteringFromHeaderDisabled$ | async\"\n            ></fdp-table-cell-header-popover>\n        </fdp-table-header-cell-content>\n    </th>\n</ng-container>\n\n<th\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    role=\"columnheader\"\n></th>\n\n<th\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n></th>\n" }]
+                    ], template: "<th\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async\"\n    [class.fd-table__cell--fixed]=\"fixed\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [style.min-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n    [style.max-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n></th>\n\n<th\n    *ngIf=\"isShownSelectionColumn\"\n    fd-table-cell\n    [focusable]=\"true\"\n    [class.fd-table__cell--fixed]=\"fixed\"\n    class=\"fd-table__cell--checkbox\"\n    [style]=\"\n        _contentDensityObserver\n            | async\n            | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n    \"\n    (keydown.enter)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n    (keydown.space)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    [attr.aria-description]=\"\n        !checkedState\n            ? ('platformTable.selectAllCheckboxLabel' | fdTranslate)\n            : ('platformTable.deselectAllCheckboxLabel' | fdTranslate)\n    \"\n>\n    <fd-checkbox\n        tabIndexValue=\"-1\"\n        *ngIf=\"selectionMode === SELECTION_MODE.MULTIPLE\"\n        labelClass=\"fd-table__checkbox-label\"\n        [fdkDisabled]=\"_fdpTableService.visibleColumnsLength === 0 || disableSelectionCheckbox\"\n        [tristate]=\"true\"\n        [tristateSelectable]=\"false\"\n        [ngModel]=\"checkedState\"\n        (ngModelChange)=\"_tableRowService.toggleAllSelectableRows($event)\"\n    ></fd-checkbox>\n</th>\n\n<ng-container\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        trackBy: _columnTrackBy;\n        last as isLast\n    \"\n>\n    <th\n        [focusable]=\"true\"\n        role=\"columnheader\"\n        [fdpTableCellResizable]=\"\n            colIdx\n                | columnResizableSide\n                    : _fdpTableService.visibleColumnsLength\n                    : (_fdpTableService._isShownNavigationColumn$ | async)\n        \"\n        [columnName]=\"column.name\"\n        [id]=\"rowId + '__' + column.name\"\n        [attr.aria-colindex]=\"colIdx\"\n        [attr.aria-sort]=\"(_fdpTableService.sortRules$ | async)?.get(column.key) | fdpTableColumnSortingDirection\"\n        [ngClass]=\"[\n            'fdp-table__col--' + column.name,\n            column._freezed ? 'fd-table__cell--fixed' : '',\n            column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n            column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n            column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n            isLast && (_fdpTableService._isShownNavigationColumn$ | async) !== true ? 'is-last-child' : '',\n            (column | isColumnHasHeaderMenu) ? 'fd-table__item--clickable' : ''\n        ]\"\n        [ngStyle]=\"\n            column\n                | tableCellStyles\n                    : _rtl\n                    : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                    : selectionColumnWidth\n                    : column._freezed\n                    : column._endFreezed\n                    : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                    : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                    : _tableColumnResizeService.getNextColumnsWidth(column.name)\n        \"\n        [fdPopoverTrigger]=\"(column | isColumnHasHeaderMenu) ? tablePopover.popover : null\"\n        (cellFocused)=\"_tableRowService.cellFocused($event)\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n    >\n        <fdp-table-header-cell-content\n            [id]=\"rowId\"\n            [column]=\"column\"\n            [hasFilter]=\"(_fdpTableService.filterRules$ | async)?.has(column.key) === true\"\n            [hasSorting]=\"(_fdpTableService.sortRules$ | async)?.has(column.key) === true\"\n            [sorting]=\"(_fdpTableService.sortRules$ | async)?.get(column.key)\"\n            [attr.title]=\"column.label\"\n        >\n            <!-- Header menu -->\n            <fdp-table-cell-header-popover\n                #tablePopover\n                [disabled]=\"!(column | isColumnHasHeaderMenu)\"\n                [columnFrozen]=\"column._freezed || column._endFreezed\"\n                [column]=\"column\"\n                [popoverTemplate]=\"(column | isColumnHasHeaderMenu) ? column.headerCellPopoverTemplate : null\"\n                [filteringFromHeaderDisabled]=\"_fdpTableService._isFilteringFromHeaderDisabled$ | async\"\n            ></fdp-table-cell-header-popover>\n        </fdp-table-header-cell-content>\n    </th>\n</ng-container>\n\n<th\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    role=\"columnheader\"\n></th>\n\n<th\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n></th>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { rowId: [{
                 type: Input
             }], fixed: [{
@@ -3199,7 +3202,7 @@ class TableRowComponent extends TableRowDirective {
                 provide: FDK_FOCUSABLE_LIST_DIRECTIVE,
                 useExisting: TableRowComponent
             }
-        ], viewQueries: [{ propertyName: "_focusableViewCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }, { propertyName: "_editableCells", predicate: EditableTableCell, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<td\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async as semanticHighlighting\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n    [status]=\"row.value[semanticHighlighting]\"\n></td>\n\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n\n<!-- Row Selection Cell -->\n<ng-container [ngSwitch]=\"selectionMode\">\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.SINGLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            fd-table-cell-selectable\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.title]=\"\n                (row.checked ? 'platformTable.deselectSingleRowTitle' : 'platformTable.selectSingleRowTitle')\n                    | fdTranslate\n            \"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow()\"\n            (keydown.space)=\"_toggleSingleSelectableRow()\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.MULTIPLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.title]=\"\n                (row.checked ? 'platformTable.deselectSingleRowTitle' : 'platformTable.selectSingleRowTitle')\n                    | fdTranslate\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    </ng-container>\n</ng-container>\n\n<ng-template #selectionMock>\n    <td\n        class=\"fd-table__cell--checkbox\"\n        role=\"gridcell\"\n        fd-table-cell\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [class.fd-table__cell--fixed]=\"fixed\"\n    ></td>\n</ng-template>\n\n<td\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        last as isLast;\n        trackBy: _columnTrackBy\n    \"\n    [fdpTableCellResizable]=\"\n        colIdx\n            | columnResizableSide\n                : _fdpTableService.visibleColumnsLength\n                : (_fdpTableService._isShownNavigationColumn$ | async) === true\n    \"\n    [columnName]=\"column.name\"\n    [focusable]=\"true\"\n    [attr.role]=\"column.role\"\n    [headers]=\"rowId + '__' + column.name\"\n    [ngClass]=\"[\n        'fdp-table__col--' + column.name,\n        column._freezed ? 'fd-table__cell--fixed' : '',\n        column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n        column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n        column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n        row.isTree && colIdx === 0 ? 'fd-table__cell--expand' : '',\n        isLast && (_fdpTableService._isShownNavigationColumn$ | async) === false ? 'is-last-child' : ''\n    ]\"\n    [ngStyle]=\"\n        column\n            | tableCellStyles\n                : _rtl\n                : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                : selectionColumnWidth\n                : column._freezed\n                : column._endFreezed\n                : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                : _tableColumnResizeService.getNextColumnsWidth(column.name)\n    \"\n    [attr.aria-expanded]=\"_isTreeRowFirstCell(colIdx, row) ? row.expanded : null\"\n    [attr.data-nesting-level]=\"colIdx === 0 ? row.level + 1 : null\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    (click)=\"_tableRowService.cellClicked({ index: colIdx, row })\"\n    (keydown.enter)=\"_isTreeRowFirstCell(colIdx, row, $event) && _toggleGroupRow()\"\n    (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n    (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n>\n    <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n        <span\n            *ngIf=\"_isTreeRowFirstCell(colIdx, row)\"\n            class=\"fd-table__expand\"\n            [class.fd-table__expand--open]=\"row.expanded$ | async\"\n            aria-hidden=\"true\"\n        ></span>\n\n        <ng-container *ngIf=\"row.state === 'readonly'; else editModeCell\">\n            <span\n                *ngIf=\"(row.value | valueByPath : column.key) === '' || (row.value | valueByPath : column.key) === null\"\n                [ngStyle]=\"{\n                    position: 'absolute !important',\n                    height: '1px',\n                    width: '1px',\n                    overflow: 'hidden',\n                    clip: 'rect(1px, 1px, 1px, 1px)',\n                    color: 'transparent',\n                    display: 'block'\n                }\"\n                >{{ 'platformTable.emptyCell' | fdTranslate }}</span\n            >\n            <ng-container *ngIf=\"column?.columnCellTemplate; else defaultTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.columnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-template #defaultTableCellTemplate>{{ row.value | valueByPath : column.key }}</ng-template>\n\n        <ng-template #editModeCell>\n            <ng-container *ngIf=\"column?.editableColumnCellTemplate; else defaultEditableTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.editableColumnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n\n            <ng-template #defaultEditableTableCellTemplate>\n                <fdp-table-editable-cell\n                    [row]=\"row\"\n                    [column]=\"column\"\n                    [columnValue]=\"row.value | valueByPath : column.key\"\n                ></fdp-table-editable-cell>\n            </ng-template>\n        </ng-template>\n    </div>\n</td>\n\n<ng-content></ng-content>\n\n<td\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n>\n    <i\n        *ngIf=\"row.navigatable\"\n        fd-table-icon\n        [navigation]=\"true\"\n        [class]=\"_rtl ? 'sap-icon--slim-arrow-left' : 'sap-icon--slim-arrow-right'\"\n        class=\"fdp-table__navigation-indicator\"\n    ></i>\n</td>\n\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FdpCellSelectableDirective, selector: "[fdTableCellSelectable], [fd-table-cell-selectable]", inputs: ["enabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TableEditableCellComponent, selector: "fdp-table-editable-cell", inputs: ["row", "column", "columnValue"] }, { kind: "directive", type: TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "navigation"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ValueByPathPipe, name: "valueByPath" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: ColumnResizableSidePipe, name: "columnResizableSide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_focusableViewCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }, { propertyName: "_editableCells", predicate: EditableTableCell, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<td\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async as semanticHighlighting\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n    [status]=\"row.value[semanticHighlighting]\"\n></td>\n\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n\n<!-- Row Selection Cell -->\n<ng-container [ngSwitch]=\"selectionMode\">\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.SINGLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            fd-table-cell-selectable\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow()\"\n            (keydown.space)=\"_toggleSingleSelectableRow()\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.MULTIPLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.aria-selected]=\"row.checked\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    </ng-container>\n</ng-container>\n\n<ng-template #selectionMock>\n    <td\n        class=\"fd-table__cell--checkbox\"\n        role=\"gridcell\"\n        fd-table-cell\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [class.fd-table__cell--fixed]=\"fixed\"\n    ></td>\n</ng-template>\n\n<td\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        last as isLast;\n        trackBy: _columnTrackBy\n    \"\n    [fdpTableCellResizable]=\"\n        colIdx\n            | columnResizableSide\n                : _fdpTableService.visibleColumnsLength\n                : (_fdpTableService._isShownNavigationColumn$ | async) === true\n    \"\n    [columnName]=\"column.name\"\n    [focusable]=\"true\"\n    [attr.role]=\"column.role\"\n    [headers]=\"rowId + '__' + column.name\"\n    [ngClass]=\"[\n        'fdp-table__col--' + column.name,\n        column._freezed ? 'fd-table__cell--fixed' : '',\n        column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n        column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n        column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n        row.isTree && colIdx === 0 ? 'fd-table__cell--expand' : '',\n        isLast && (_fdpTableService._isShownNavigationColumn$ | async) === false ? 'is-last-child' : ''\n    ]\"\n    [ngStyle]=\"\n        column\n            | tableCellStyles\n                : _rtl\n                : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                : selectionColumnWidth\n                : column._freezed\n                : column._endFreezed\n                : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                : _tableColumnResizeService.getNextColumnsWidth(column.name)\n    \"\n    [attr.aria-expanded]=\"_isTreeRowFirstCell(colIdx, row) ? row.expanded : null\"\n    [attr.data-nesting-level]=\"colIdx === 0 ? row.level + 1 : null\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    (click)=\"_tableRowService.cellClicked({ index: colIdx, row })\"\n    (keydown.enter)=\"_isTreeRowFirstCell(colIdx, row, $event) && _toggleGroupRow()\"\n    (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n    (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n>\n    <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n        <span\n            *ngIf=\"_isTreeRowFirstCell(colIdx, row)\"\n            class=\"fd-table__expand\"\n            [class.fd-table__expand--open]=\"row.expanded$ | async\"\n            aria-hidden=\"true\"\n        ></span>\n\n        <ng-container *ngIf=\"row.state === 'readonly'; else editModeCell\">\n            <span\n                *ngIf=\"(row.value | valueByPath : column.key) === '' || (row.value | valueByPath : column.key) === null\"\n                [ngStyle]=\"{\n                    position: 'absolute !important',\n                    height: '1px',\n                    width: '1px',\n                    overflow: 'hidden',\n                    clip: 'rect(1px, 1px, 1px, 1px)',\n                    color: 'transparent',\n                    display: 'block'\n                }\"\n                >{{ 'platformTable.emptyCell' | fdTranslate }}</span\n            >\n            <ng-container *ngIf=\"column?.columnCellTemplate; else defaultTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.columnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-template #defaultTableCellTemplate>{{ row.value | valueByPath : column.key }}</ng-template>\n\n        <ng-template #editModeCell>\n            <ng-container *ngIf=\"column?.editableColumnCellTemplate; else defaultEditableTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.editableColumnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n\n            <ng-template #defaultEditableTableCellTemplate>\n                <fdp-table-editable-cell\n                    [row]=\"row\"\n                    [column]=\"column\"\n                    [columnValue]=\"row.value | valueByPath : column.key\"\n                ></fdp-table-editable-cell>\n            </ng-template>\n        </ng-template>\n    </div>\n</td>\n\n<ng-content></ng-content>\n\n<td\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n>\n    <i\n        *ngIf=\"row.navigatable\"\n        fd-table-icon\n        [navigation]=\"true\"\n        [class]=\"_rtl ? 'sap-icon--slim-arrow-left' : 'sap-icon--slim-arrow-right'\"\n        class=\"fdp-table__navigation-indicator\"\n    ></i>\n</td>\n\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FdpCellSelectableDirective, selector: "[fdTableCellSelectable], [fd-table-cell-selectable]", inputs: ["enabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TableEditableCellComponent, selector: "fdp-table-editable-cell", inputs: ["row", "column", "columnValue"] }, { kind: "directive", type: TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "navigation"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ValueByPathPipe, name: "valueByPath" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: ColumnResizableSidePipe, name: "columnResizableSide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TableRowComponent, decorators: [{
             type: Component,
@@ -3234,7 +3237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                         SelectionCellStylesPipe,
                         TableCellStylesPipe,
                         ColumnResizableSidePipe
-                    ], template: "<td\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async as semanticHighlighting\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n    [status]=\"row.value[semanticHighlighting]\"\n></td>\n\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n\n<!-- Row Selection Cell -->\n<ng-container [ngSwitch]=\"selectionMode\">\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.SINGLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            fd-table-cell-selectable\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.title]=\"\n                (row.checked ? 'platformTable.deselectSingleRowTitle' : 'platformTable.selectSingleRowTitle')\n                    | fdTranslate\n            \"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow()\"\n            (keydown.space)=\"_toggleSingleSelectableRow()\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.MULTIPLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.title]=\"\n                (row.checked ? 'platformTable.deselectSingleRowTitle' : 'platformTable.selectSingleRowTitle')\n                    | fdTranslate\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    </ng-container>\n</ng-container>\n\n<ng-template #selectionMock>\n    <td\n        class=\"fd-table__cell--checkbox\"\n        role=\"gridcell\"\n        fd-table-cell\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [class.fd-table__cell--fixed]=\"fixed\"\n    ></td>\n</ng-template>\n\n<td\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        last as isLast;\n        trackBy: _columnTrackBy\n    \"\n    [fdpTableCellResizable]=\"\n        colIdx\n            | columnResizableSide\n                : _fdpTableService.visibleColumnsLength\n                : (_fdpTableService._isShownNavigationColumn$ | async) === true\n    \"\n    [columnName]=\"column.name\"\n    [focusable]=\"true\"\n    [attr.role]=\"column.role\"\n    [headers]=\"rowId + '__' + column.name\"\n    [ngClass]=\"[\n        'fdp-table__col--' + column.name,\n        column._freezed ? 'fd-table__cell--fixed' : '',\n        column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n        column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n        column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n        row.isTree && colIdx === 0 ? 'fd-table__cell--expand' : '',\n        isLast && (_fdpTableService._isShownNavigationColumn$ | async) === false ? 'is-last-child' : ''\n    ]\"\n    [ngStyle]=\"\n        column\n            | tableCellStyles\n                : _rtl\n                : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                : selectionColumnWidth\n                : column._freezed\n                : column._endFreezed\n                : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                : _tableColumnResizeService.getNextColumnsWidth(column.name)\n    \"\n    [attr.aria-expanded]=\"_isTreeRowFirstCell(colIdx, row) ? row.expanded : null\"\n    [attr.data-nesting-level]=\"colIdx === 0 ? row.level + 1 : null\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    (click)=\"_tableRowService.cellClicked({ index: colIdx, row })\"\n    (keydown.enter)=\"_isTreeRowFirstCell(colIdx, row, $event) && _toggleGroupRow()\"\n    (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n    (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n>\n    <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n        <span\n            *ngIf=\"_isTreeRowFirstCell(colIdx, row)\"\n            class=\"fd-table__expand\"\n            [class.fd-table__expand--open]=\"row.expanded$ | async\"\n            aria-hidden=\"true\"\n        ></span>\n\n        <ng-container *ngIf=\"row.state === 'readonly'; else editModeCell\">\n            <span\n                *ngIf=\"(row.value | valueByPath : column.key) === '' || (row.value | valueByPath : column.key) === null\"\n                [ngStyle]=\"{\n                    position: 'absolute !important',\n                    height: '1px',\n                    width: '1px',\n                    overflow: 'hidden',\n                    clip: 'rect(1px, 1px, 1px, 1px)',\n                    color: 'transparent',\n                    display: 'block'\n                }\"\n                >{{ 'platformTable.emptyCell' | fdTranslate }}</span\n            >\n            <ng-container *ngIf=\"column?.columnCellTemplate; else defaultTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.columnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-template #defaultTableCellTemplate>{{ row.value | valueByPath : column.key }}</ng-template>\n\n        <ng-template #editModeCell>\n            <ng-container *ngIf=\"column?.editableColumnCellTemplate; else defaultEditableTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.editableColumnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n\n            <ng-template #defaultEditableTableCellTemplate>\n                <fdp-table-editable-cell\n                    [row]=\"row\"\n                    [column]=\"column\"\n                    [columnValue]=\"row.value | valueByPath : column.key\"\n                ></fdp-table-editable-cell>\n            </ng-template>\n        </ng-template>\n    </div>\n</td>\n\n<ng-content></ng-content>\n\n<td\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n>\n    <i\n        *ngIf=\"row.navigatable\"\n        fd-table-icon\n        [navigation]=\"true\"\n        [class]=\"_rtl ? 'sap-icon--slim-arrow-left' : 'sap-icon--slim-arrow-right'\"\n        class=\"fdp-table__navigation-indicator\"\n    ></i>\n</td>\n\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n" }]
+                    ], template: "<td\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async as semanticHighlighting\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n    [status]=\"row.value[semanticHighlighting]\"\n></td>\n\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n    <span\n        aria-hidden=\"true\"\n        [attr.id]=\"_rowSelectionHelperTextId\"\n        [ngStyle]=\"{\n            position: 'absolute !important',\n            height: '1px',\n            width: '1px',\n            overflow: 'hidden',\n            clip: 'rect(1px, 1px, 1px, 1px)',\n            color: 'transparent',\n            display: 'block'\n        }\"\n    >\n        {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n    </span>\n</ng-template>\n\n<!-- Row Selection Cell -->\n<ng-container [ngSwitch]=\"selectionMode\">\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.SINGLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            fd-table-cell-selectable\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow()\"\n            (keydown.space)=\"_toggleSingleSelectableRow()\"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n        </td>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.MULTIPLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n            [attr.aria-selected]=\"row.checked\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n        >\n            <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    </ng-container>\n</ng-container>\n\n<ng-template #selectionMock>\n    <td\n        class=\"fd-table__cell--checkbox\"\n        role=\"gridcell\"\n        fd-table-cell\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [class.fd-table__cell--fixed]=\"fixed\"\n    ></td>\n</ng-template>\n\n<td\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        last as isLast;\n        trackBy: _columnTrackBy\n    \"\n    [fdpTableCellResizable]=\"\n        colIdx\n            | columnResizableSide\n                : _fdpTableService.visibleColumnsLength\n                : (_fdpTableService._isShownNavigationColumn$ | async) === true\n    \"\n    [columnName]=\"column.name\"\n    [focusable]=\"true\"\n    [attr.role]=\"column.role\"\n    [headers]=\"rowId + '__' + column.name\"\n    [ngClass]=\"[\n        'fdp-table__col--' + column.name,\n        column._freezed ? 'fd-table__cell--fixed' : '',\n        column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n        column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n        column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n        row.isTree && colIdx === 0 ? 'fd-table__cell--expand' : '',\n        isLast && (_fdpTableService._isShownNavigationColumn$ | async) === false ? 'is-last-child' : ''\n    ]\"\n    [ngStyle]=\"\n        column\n            | tableCellStyles\n                : _rtl\n                : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                : selectionColumnWidth\n                : column._freezed\n                : column._endFreezed\n                : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                : _tableColumnResizeService.getNextColumnsWidth(column.name)\n    \"\n    [attr.aria-expanded]=\"_isTreeRowFirstCell(colIdx, row) ? row.expanded : null\"\n    [attr.data-nesting-level]=\"colIdx === 0 ? row.level + 1 : null\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    (click)=\"_tableRowService.cellClicked({ index: colIdx, row })\"\n    (keydown.enter)=\"_isTreeRowFirstCell(colIdx, row, $event) && _toggleGroupRow()\"\n    (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n    (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n>\n    <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n        <span\n            *ngIf=\"_isTreeRowFirstCell(colIdx, row)\"\n            class=\"fd-table__expand\"\n            [class.fd-table__expand--open]=\"row.expanded$ | async\"\n            aria-hidden=\"true\"\n        ></span>\n\n        <ng-container *ngIf=\"row.state === 'readonly'; else editModeCell\">\n            <span\n                *ngIf=\"(row.value | valueByPath : column.key) === '' || (row.value | valueByPath : column.key) === null\"\n                [ngStyle]=\"{\n                    position: 'absolute !important',\n                    height: '1px',\n                    width: '1px',\n                    overflow: 'hidden',\n                    clip: 'rect(1px, 1px, 1px, 1px)',\n                    color: 'transparent',\n                    display: 'block'\n                }\"\n                >{{ 'platformTable.emptyCell' | fdTranslate }}</span\n            >\n            <ng-container *ngIf=\"column?.columnCellTemplate; else defaultTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.columnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-template #defaultTableCellTemplate>{{ row.value | valueByPath : column.key }}</ng-template>\n\n        <ng-template #editModeCell>\n            <ng-container *ngIf=\"column?.editableColumnCellTemplate; else defaultEditableTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.editableColumnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n\n            <ng-template #defaultEditableTableCellTemplate>\n                <fdp-table-editable-cell\n                    [row]=\"row\"\n                    [column]=\"column\"\n                    [columnValue]=\"row.value | valueByPath : column.key\"\n                ></fdp-table-editable-cell>\n            </ng-template>\n        </ng-template>\n    </div>\n</td>\n\n<ng-content></ng-content>\n\n<td\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n>\n    <i\n        *ngIf=\"row.navigatable\"\n        fd-table-icon\n        [navigation]=\"true\"\n        [class]=\"_rtl ? 'sap-icon--slim-arrow-left' : 'sap-icon--slim-arrow-right'\"\n        class=\"fdp-table__navigation-indicator\"\n    ></i>\n</td>\n\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { rowId: [{
                 type: Input
             }], row: [{