@fundamental-ngx/platform 0.48.0-rc.20 → 0.48.0-rc.21

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

@@ -185,7 +185,7 @@ class TableCellHeaderPopoverComponent {
         this.popover?.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableCellHeaderPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", 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: "@if (!popoverTemplate) {\n    <fd-popover\n        [disabled]=\"disabled\"\n        [noArrow]=\"true\"\n        fd-table-popover\n        [focusAutoCapture]=\"true\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"_headerPopoverTriggers\"\n    >\n        <fdp-list [noBorder]=\"true\" [navigated]=\"true\">\n            @for (item of _popoverItems$.asObservable() | async; track item) {\n                <fdp-free-content-list-item>\n                    <ng-template\n                        [ngTemplateOutlet]=\"item\"\n                        [ngTemplateOutletContext]=\"{ popover: popover }\"\n                    ></ng-template>\n                </fdp-free-content-list-item>\n            }\n        </fdp-list>\n    </fd-popover>\n} @else {\n    <ng-template\n        [ngTemplateOutlet]=\"popoverTemplate!\"\n        [ngTemplateOutletContext]=\"{ $implicit: _popoverItems$.asObservable() }\"\n    ></ng-template>\n}\n@if (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}\n@if (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}\n@if (column?.freezable || column?.endFreezable) {\n    <ng-template fdkTemplate=\"freezePopoverItem\" let-popover=\"popover\">\n        @if (!columnFrozen) {\n            <a fd-list-link [focusable]=\"true\" (click)=\"_freeze()\" (keyup.enter)=\"_freeze()\">\n                <span></span>\n                <span fd-list-title>{{\n                    (!column.endFreezable ? 'platformTable.headerMenuFreeze' : 'platformTable.headerMenuEndFreeze')\n                        | fdTranslate\n                }}</span>\n            </a>\n        } @else {\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        }\n    </ng-template>\n}\n@if (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}\n", dependencies: [{ 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, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "component", type: 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", 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: "@if (!popoverTemplate) {\n    <fd-popover\n        [disabled]=\"disabled\"\n        [noArrow]=\"true\"\n        fd-table-popover\n        [focusAutoCapture]=\"true\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"_headerPopoverTriggers\"\n    >\n        <fdp-list [noBorder]=\"true\" [navigated]=\"true\">\n            @for (item of _popoverItems$.asObservable() | async; track item) {\n                <fdp-free-content-list-item>\n                    <ng-template\n                        [ngTemplateOutlet]=\"item\"\n                        [ngTemplateOutletContext]=\"{ popover: popover }\"\n                    ></ng-template>\n                </fdp-free-content-list-item>\n            }\n        </fdp-list>\n    </fd-popover>\n} @else {\n    <ng-template\n        [ngTemplateOutlet]=\"popoverTemplate!\"\n        [ngTemplateOutletContext]=\"{ $implicit: _popoverItems$.asObservable() }\"\n    ></ng-template>\n}\n@if (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}\n@if (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}\n@if (column?.freezable || column?.endFreezable) {\n    <ng-template fdkTemplate=\"freezePopoverItem\" let-popover=\"popover\">\n        @if (!columnFrozen) {\n            <a fd-list-link [focusable]=\"true\" (click)=\"_freeze()\" (keyup.enter)=\"_freeze()\">\n                <span></span>\n                <span fd-list-title>{{\n                    (!column.endFreezable ? 'platformTable.headerMenuFreeze' : 'platformTable.headerMenuEndFreeze')\n                        | fdTranslate\n                }}</span>\n            </a>\n        } @else {\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        }\n    </ng-template>\n}\n@if (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}\n", dependencies: [{ 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, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "component", type: 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", "glyphFont", "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: "17.0.4", ngImport: i0, type: TableCellHeaderPopoverComponent, decorators: [{
             type: Component,
@@ -474,7 +474,7 @@ class TableHeaderCellContentComponent {
         this.SORT_DIRECTION = SortDirection;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableHeaderCellContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", 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-template\n        [ngTemplateOutlet]=\"tableHeaderCellContentTemplate\"\n        [ngTemplateOutletContext]=\"{ column: column }\"\n    ></ng-template>\n    @if (hasSorting || hasFilter) {\n        <div class=\"fd-table__column-header-icons\">\n            @if (hasFilter) {\n                <fd-icon fd-table-icon glyph=\"filter\"></fd-icon>\n            }\n            @if (hasSorting) {\n                <fd-icon\n                    fd-table-icon\n                    [ariaHidden]=\"true\"\n                    [glyph]=\"sorting?.direction === SORT_DIRECTION.ASC ? 'sort-ascending' : 'sort-descending'\"\n                ></fd-icon>\n            }\n        </div>\n    }\n</div>\n<ng-content></ng-content>\n<ng-template #tableHeaderCellContentTemplate let-column=\"column\">\n    @if (column?.headerCellTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"column.headerCellTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: column }\"\n        ></ng-template>\n    } @else {\n        <span [id]=\"id + '-header-cell-' + column?.name\" class=\"fd-table__cell--truncate-txt\">\n            {{ column?.label }}\n        </span>\n    }\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: "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: "17.0.0", version: "17.0.4", 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-template\n        [ngTemplateOutlet]=\"tableHeaderCellContentTemplate\"\n        [ngTemplateOutletContext]=\"{ column: column }\"\n    ></ng-template>\n    @if (hasSorting || hasFilter) {\n        <div class=\"fd-table__column-header-icons\">\n            @if (hasFilter) {\n                <fd-icon fd-table-icon glyph=\"filter\"></fd-icon>\n            }\n            @if (hasSorting) {\n                <fd-icon\n                    fd-table-icon\n                    [ariaHidden]=\"true\"\n                    [glyph]=\"sorting?.direction === SORT_DIRECTION.ASC ? 'sort-ascending' : 'sort-descending'\"\n                ></fd-icon>\n            }\n        </div>\n    }\n</div>\n<ng-content></ng-content>\n<ng-template #tableHeaderCellContentTemplate let-column=\"column\">\n    @if (column?.headerCellTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"column.headerCellTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: column }\"\n        ></ng-template>\n    } @else {\n        <span [id]=\"id + '-header-cell-' + column?.name\" class=\"fd-table__cell--truncate-txt\">\n            {{ column?.label }}\n        </span>\n    }\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: "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", "glyphFont", "navigation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableHeaderCellContentComponent, decorators: [{
             type: Component,
@@ -903,7 +903,7 @@ class FilterRuleComponent {
         this.ruleChange.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: FilterRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", 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                    @for (column of rule.columns; track column) {\n                        <li fd-option [value]=\"column.key\">{{ column.label }}</li>\n                    }\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                    @for (strategy of rule.strategies; track strategy) {\n                        <li fd-option [value]=\"strategy\">\n                            {{\n                                strategyLabels[strategy] || 'platformTable.P13FilterStrategyLabelNotDefined'\n                                    | fdTranslate\n                            }}\n                        </li>\n                    }\n                </fd-select>\n            </div>\n        </div>\n    </div>\n    <div fdLayoutGridCol colGrow>\n        <div fdLayoutGridRow ngForm>\n            @if (rule.strategy === FILTER_STRATEGY.BETWEEN) {\n                <div fdLayoutGridCol colGrow>\n                    <ng-template\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value' }\"\n                    ></ng-template>\n                </div>\n                <div fdLayoutGridCol colGrow>\n                    <ng-template\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value2' }\"\n                    ></ng-template>\n                </div>\n            } @else {\n                <div fdLayoutGridCol colGrow>\n                    <ng-template\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value' }\"\n                    ></ng-template>\n                </div>\n            }\n\n            <!-- Rule Control Based on Data Type -->\n            <ng-template #ruleInputTemplate let-valueKey=\"valueKey\">\n                @if (rule.dataType === 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                } @else if (rule.dataType === 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                } @else {\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                }\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", "tabOutStrategy", "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: "component", type: OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", 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                    @for (column of rule.columns; track column) {\n                        <li fd-option [value]=\"column.key\">{{ column.label }}</li>\n                    }\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                    @for (strategy of rule.strategies; track strategy) {\n                        <li fd-option [value]=\"strategy\">\n                            {{\n                                strategyLabels[strategy] || 'platformTable.P13FilterStrategyLabelNotDefined'\n                                    | fdTranslate\n                            }}\n                        </li>\n                    }\n                </fd-select>\n            </div>\n        </div>\n    </div>\n    <div fdLayoutGridCol colGrow>\n        <div fdLayoutGridRow ngForm>\n            @if (rule.strategy === FILTER_STRATEGY.BETWEEN) {\n                <div fdLayoutGridCol colGrow>\n                    <ng-template\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value' }\"\n                    ></ng-template>\n                </div>\n                <div fdLayoutGridCol colGrow>\n                    <ng-template\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value2' }\"\n                    ></ng-template>\n                </div>\n            } @else {\n                <div fdLayoutGridCol colGrow>\n                    <ng-template\n                        [ngTemplateOutlet]=\"ruleInputTemplate\"\n                        [ngTemplateOutletContext]=\"{ valueKey: 'value' }\"\n                    ></ng-template>\n                </div>\n            }\n\n            <!-- Rule Control Based on Data Type -->\n            <ng-template #ruleInputTemplate let-valueKey=\"valueKey\">\n                @if (rule.dataType === 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                } @else if (rule.dataType === 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                } @else {\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                }\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", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "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: "component", type: OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { 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: "17.0.4", ngImport: i0, type: FilterRuleComponent, decorators: [{
             type: Component,
@@ -1200,7 +1200,7 @@ class P13GroupingDialogComponent {
         return getUniqueListValuesByKey(rules, 'columnKey');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: P13GroupingDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: P13GroupingDialogComponent, isStandalone: true, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13GroupingDialogComponent }], ngImport: i0, template: "<fd-dialog class=\"fdp-table-p13-grouping-dialog\">\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">{{ 'platformTable.P13GroupDialogHeader' | fdTranslate }}</h4>\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body>\n        @for (rule of rules; track rule) {\n            <div class=\"group-row\">\n                <fd-select\n                    class=\"group-row__select\"\n                    [value]=\"rule.columnKey\"\n                    (valueChange)=\"_onRuleColumnKeyChange(rule, $event)\"\n                    [placeholder]=\"'platformTable.P13GroupDialogNoneSelectedColumnSelectPlaceholder' | fdTranslate\"\n                >\n                    @for (column of columns; track column) {\n                        <li fd-option [value]=\"column.key\">\n                            {{ column.label }}\n                        </li>\n                    }\n                </fd-select>\n\n                <fd-checkbox\n                    class=\"group-row__checkbox\"\n                    [ngModel]=\"rule.showAsColumn\"\n                    (ngModelChange)=\"_onRuleShowAsColumnChange(rule, $event)\"\n                    [label]=\"'platformTable.P13GroupDialogShowFieldAsColumnCheckboxLabel' | fdTranslate\"\n                ></fd-checkbox>\n\n                <div class=\"group-row__actions\">\n                    <button\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"sys-cancel\"\n                        [attr.aria-label]=\"'platformTable.P13GroupDialogRemoveGroupBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13GroupDialogRemoveGroupBtnTitle' | fdTranslate\"\n                        (click)=\"_removeRule(rule)\"\n                    ></button>\n\n                    <button\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"add\"\n                        [attr.aria-label]=\"'platformTable.P13GroupDialogAddNewGroupBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13GroupDialogAddNewGroupBtnTitle' | fdTranslate\"\n                        (click)=\"_addNew($index)\"\n                    ></button>\n                </div>\n            </div>\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.P13GroupDialogConfirmationBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n\n        <fd-button-bar\n            fdType=\"transparent\"\n            fdkInitialFocus\n            [label]=\"'platformTable.P13GroupDialogCancelBtnLabel' | fdTranslate\"\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-grouping-dialog .group-row{display:flex;align-items:center;margin-bottom:.5rem}.fdp-table-p13-grouping-dialog .group-row .fd-popover-custom{display:block}.fdp-table-p13-grouping-dialog .group-row__checkbox,.fdp-table-p13-grouping-dialog .group-row__actions,.fdp-table-p13-grouping-dialog .group-row__select{margin-right:1rem}.fdp-table-p13-grouping-dialog .group-row__select{flex:1 1 0}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: 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", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { 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: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: P13GroupingDialogComponent, isStandalone: true, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13GroupingDialogComponent }], ngImport: i0, template: "<fd-dialog class=\"fdp-table-p13-grouping-dialog\">\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">{{ 'platformTable.P13GroupDialogHeader' | fdTranslate }}</h4>\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n\n    <fd-dialog-body>\n        @for (rule of rules; track rule) {\n            <div class=\"group-row\">\n                <fd-select\n                    class=\"group-row__select\"\n                    [value]=\"rule.columnKey\"\n                    (valueChange)=\"_onRuleColumnKeyChange(rule, $event)\"\n                    [placeholder]=\"'platformTable.P13GroupDialogNoneSelectedColumnSelectPlaceholder' | fdTranslate\"\n                >\n                    @for (column of columns; track column) {\n                        <li fd-option [value]=\"column.key\">\n                            {{ column.label }}\n                        </li>\n                    }\n                </fd-select>\n\n                <fd-checkbox\n                    class=\"group-row__checkbox\"\n                    [ngModel]=\"rule.showAsColumn\"\n                    (ngModelChange)=\"_onRuleShowAsColumnChange(rule, $event)\"\n                    [label]=\"'platformTable.P13GroupDialogShowFieldAsColumnCheckboxLabel' | fdTranslate\"\n                ></fd-checkbox>\n\n                <div class=\"group-row__actions\">\n                    <button\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"sys-cancel\"\n                        [attr.aria-label]=\"'platformTable.P13GroupDialogRemoveGroupBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13GroupDialogRemoveGroupBtnTitle' | fdTranslate\"\n                        (click)=\"_removeRule(rule)\"\n                    ></button>\n\n                    <button\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"add\"\n                        [attr.aria-label]=\"'platformTable.P13GroupDialogAddNewGroupBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13GroupDialogAddNewGroupBtnTitle' | fdTranslate\"\n                        (click)=\"_addNew($index)\"\n                    ></button>\n                </div>\n            </div>\n        }\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.P13GroupDialogConfirmationBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n\n        <fd-button-bar\n            fdType=\"transparent\"\n            fdkInitialFocus\n            [label]=\"'platformTable.P13GroupDialogCancelBtnLabel' | fdTranslate\"\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-grouping-dialog .group-row{display:flex;align-items:center;margin-bottom:.5rem}.fdp-table-p13-grouping-dialog .group-row .fd-popover-custom{display:block}.fdp-table-p13-grouping-dialog .group-row__checkbox,.fdp-table-p13-grouping-dialog .group-row__actions,.fdp-table-p13-grouping-dialog .group-row__select{margin-right:1rem}.fdp-table-p13-grouping-dialog .group-row__select{flex:1 1 0}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { 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: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: P13GroupingDialogComponent, decorators: [{
             type: Component,
@@ -1411,7 +1411,7 @@ class P13SortingDialogComponent {
         return getUniqueListValuesByKey(rules, 'columnKey');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: P13SortingDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: P13SortingDialogComponent, isStandalone: true, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13SortingDialogComponent }], ngImport: i0, template: "<fd-dialog class=\"fdp-table-p13-sorting-dialog\">\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">\n                        {{ 'platformTable.P13SortDialogHeader' | fdTranslate }}\n                    </h4>\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n    <fd-dialog-body>\n        @for (rule of rules; track _trackByColumnKey(i, rule); let i = $index) {\n            <div class=\"sort-row\">\n                <fd-select\n                    class=\"sort-row__select\"\n                    [value]=\"rule.columnKey\"\n                    (valueChange)=\"_onRuleColumnKeyChange(rule, $event)\"\n                    [placeholder]=\"'platformTable.P13SortDialogNoneSelectedColumn' | fdTranslate\"\n                >\n                    @for (column of columns | getAvailableSortColumns: rules : rule.columnKey; track column) {\n                        <li fd-option [value]=\"column.key\">\n                            {{ column.label }}\n                        </li>\n                    }\n                </fd-select>\n                <fd-select\n                    class=\"sort-row__select\"\n                    [value]=\"rule.direction\"\n                    (valueChange)=\"_onRuleDirectionChange(rule, $event)\"\n                    [placeholder]=\"'platformTable.P13SortDialogNoneSelectedSorting' | fdTranslate\"\n                >\n                    <li fd-option [value]=\"SORT_DIRECTION.ASC\">\n                        {{ 'platformTable.P13SortDialogSortOrderSelectOptionAsc' | fdTranslate }}\n                    </li>\n                    <li fd-option [value]=\"SORT_DIRECTION.DESC\">\n                        {{ 'platformTable.P13SortDialogSortOrderSelectOptionDesc' | fdTranslate }}\n                    </li>\n                </fd-select>\n                <div class=\"sort-row__actions\">\n                    <button\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"sys-cancel\"\n                        [attr.aria-label]=\"'platformTable.P13SortDialogRemoveSortBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13SortDialogRemoveSortBtnTitle' | fdTranslate\"\n                        (click)=\"_removeRule(rule)\"\n                    ></button>\n                    <button\n                        fd-button\n                        [fdkDisabled]=\"rules.length === columns.length\"\n                        fdType=\"transparent\"\n                        glyph=\"add\"\n                        [attr.aria-label]=\"'platformTable.P13SortDialogAddNewSortBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13SortDialogAddNewSortBtnTitle' | fdTranslate\"\n                        (click)=\"_addNew(i)\"\n                    ></button>\n                </div>\n            </div>\n        }\n    </fd-dialog-body>\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.P13SortDialogConfirmationBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            fdType=\"transparent\"\n            fdkInitialFocus\n            [label]=\"'platformTable.P13SortDialogCancelBtnLabel' | fdTranslate\"\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-sorting-dialog .sort-row{display:flex;margin-bottom:.5rem}.fdp-table-p13-sorting-dialog .sort-row .fd-popover-custom{display:block}.fdp-table-p13-sorting-dialog .sort-row__select{flex:1 1 0;margin-right:1rem}.fdp-table-p13-sorting-dialog .sort-row__actions{margin-left:1rem}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DialogComponent), selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i0.forwardRef(() => DialogHeaderComponent), selector: "fd-dialog-header" }, { kind: "directive", type: i0.forwardRef(() => TemplateDirective), selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i0.forwardRef(() => BarLeftDirective), selector: "[fd-bar-left]" }, { kind: "directive", type: i0.forwardRef(() => BarElementDirective), selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i0.forwardRef(() => TitleComponent), selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i0.forwardRef(() => BarRightDirective), selector: "[fd-bar-right]" }, { kind: "component", type: i0.forwardRef(() => ResetButtonComponent), selector: "fdp-table-reset-button" }, { kind: "component", type: i0.forwardRef(() => DialogBodyComponent), selector: "fd-dialog-body" }, { kind: "component", type: i0.forwardRef(() => 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", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i0.forwardRef(() => OptionComponent), selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: i0.forwardRef(() => ButtonComponent), selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i0.forwardRef(() => DisabledBehaviorDirective), selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "component", type: i0.forwardRef(() => DialogFooterComponent), selector: "fd-dialog-footer" }, { kind: "component", type: i0.forwardRef(() => ButtonBarComponent), selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: i0.forwardRef(() => FdTranslatePipe), name: "fdTranslate" }, { kind: "pipe", type: i0.forwardRef(() => GetAvailableSortColumnsPipe), name: "getAvailableSortColumns" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: P13SortingDialogComponent, isStandalone: true, selector: "ng-component", providers: [{ provide: RESETTABLE_TOKEN, useExisting: P13SortingDialogComponent }], ngImport: i0, template: "<fd-dialog class=\"fdp-table-p13-sorting-dialog\">\n    <fd-dialog-header>\n        <ng-template fdkTemplate=\"header\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    <h4 fd-title [headerSize]=\"4\">\n                        {{ 'platformTable.P13SortDialogHeader' | fdTranslate }}\n                    </h4>\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fdp-table-reset-button></fdp-table-reset-button>\n                </fd-bar-element>\n            </div>\n        </ng-template>\n    </fd-dialog-header>\n    <fd-dialog-body>\n        @for (rule of rules; track _trackByColumnKey(i, rule); let i = $index) {\n            <div class=\"sort-row\">\n                <fd-select\n                    class=\"sort-row__select\"\n                    [value]=\"rule.columnKey\"\n                    (valueChange)=\"_onRuleColumnKeyChange(rule, $event)\"\n                    [placeholder]=\"'platformTable.P13SortDialogNoneSelectedColumn' | fdTranslate\"\n                >\n                    @for (column of columns | getAvailableSortColumns: rules : rule.columnKey; track column) {\n                        <li fd-option [value]=\"column.key\">\n                            {{ column.label }}\n                        </li>\n                    }\n                </fd-select>\n                <fd-select\n                    class=\"sort-row__select\"\n                    [value]=\"rule.direction\"\n                    (valueChange)=\"_onRuleDirectionChange(rule, $event)\"\n                    [placeholder]=\"'platformTable.P13SortDialogNoneSelectedSorting' | fdTranslate\"\n                >\n                    <li fd-option [value]=\"SORT_DIRECTION.ASC\">\n                        {{ 'platformTable.P13SortDialogSortOrderSelectOptionAsc' | fdTranslate }}\n                    </li>\n                    <li fd-option [value]=\"SORT_DIRECTION.DESC\">\n                        {{ 'platformTable.P13SortDialogSortOrderSelectOptionDesc' | fdTranslate }}\n                    </li>\n                </fd-select>\n                <div class=\"sort-row__actions\">\n                    <button\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"sys-cancel\"\n                        [attr.aria-label]=\"'platformTable.P13SortDialogRemoveSortBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13SortDialogRemoveSortBtnTitle' | fdTranslate\"\n                        (click)=\"_removeRule(rule)\"\n                    ></button>\n                    <button\n                        fd-button\n                        [fdkDisabled]=\"rules.length === columns.length\"\n                        fdType=\"transparent\"\n                        glyph=\"add\"\n                        [attr.aria-label]=\"'platformTable.P13SortDialogAddNewSortBtnTitle' | fdTranslate\"\n                        [title]=\"'platformTable.P13SortDialogAddNewSortBtnTitle' | fdTranslate\"\n                        (click)=\"_addNew(i)\"\n                    ></button>\n                </div>\n            </div>\n        }\n    </fd-dialog-body>\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformTable.P13SortDialogConfirmationBtnLabel' | fdTranslate\"\n            (click)=\"confirm()\"\n        ></fd-button-bar>\n        <fd-button-bar\n            fdType=\"transparent\"\n            fdkInitialFocus\n            [label]=\"'platformTable.P13SortDialogCancelBtnLabel' | fdTranslate\"\n            (click)=\"cancel()\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", styles: [".fdp-table-p13-sorting-dialog .sort-row{display:flex;margin-bottom:.5rem}.fdp-table-p13-sorting-dialog .sort-row .fd-popover-custom{display:block}.fdp-table-p13-sorting-dialog .sort-row__select{flex:1 1 0;margin-right:1rem}.fdp-table-p13-sorting-dialog .sort-row__actions{margin-left:1rem}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DialogComponent), selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i0.forwardRef(() => DialogHeaderComponent), selector: "fd-dialog-header" }, { kind: "directive", type: i0.forwardRef(() => TemplateDirective), selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i0.forwardRef(() => BarLeftDirective), selector: "[fd-bar-left]" }, { kind: "directive", type: i0.forwardRef(() => BarElementDirective), selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i0.forwardRef(() => TitleComponent), selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i0.forwardRef(() => BarRightDirective), selector: "[fd-bar-right]" }, { kind: "component", type: i0.forwardRef(() => ResetButtonComponent), selector: "fdp-table-reset-button" }, { kind: "component", type: i0.forwardRef(() => DialogBodyComponent), selector: "fd-dialog-body" }, { kind: "component", type: i0.forwardRef(() => SelectComponent), selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i0.forwardRef(() => OptionComponent), selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: i0.forwardRef(() => ButtonComponent), selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i0.forwardRef(() => DisabledBehaviorDirective), selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "component", type: i0.forwardRef(() => DialogFooterComponent), selector: "fd-dialog-footer" }, { kind: "component", type: i0.forwardRef(() => ButtonBarComponent), selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: i0.forwardRef(() => FdTranslatePipe), name: "fdTranslate" }, { kind: "pipe", type: i0.forwardRef(() => GetAvailableSortColumnsPipe), name: "getAvailableSortColumns" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: P13SortingDialogComponent, decorators: [{
             type: Component,
@@ -1840,7 +1840,7 @@ class TableToolbarComponent {
         this._table.collapseAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Table }, { token: i1.TableService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: TableToolbarComponent, isStandalone: true, selector: "fdp-table-toolbar", inputs: { shouldOverflow: "shouldOverflow", title: "title", hideItemCount: "hideItemCount", hideSearchInput: "hideSearchInput", showExpandCollapseButtons: "showExpandCollapseButtons", searchSuggestions: "searchSuggestions", editMode: "editMode" }, providers: [{ provide: TABLE_TOOLBAR, useExisting: TableToolbarComponent }], queries: [{ propertyName: "tableToolbarActionsComponent", first: true, predicate: TableToolbarActionsComponent, descendants: true }, { propertyName: "_tableToolbarLeftActionsComponent", first: true, predicate: TableToolbarLeftActionsComponent, descendants: true }], viewQueries: [{ propertyName: "contentTemplateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template\n    let-counter=\"counter\"\n    let-sortable=\"sortable\"\n    let-filterable=\"filterable\"\n    let-groupable=\"groupable\"\n    let-columns=\"columns\"\n>\n    <fd-toolbar\n        fdType=\"transparent\"\n        [clearBorder]=\"true\"\n        [titleId]=\"tableToolbarTitleId\"\n        [title]=\"title && !hideItemCount ? title + ' (' + (counter | async) + ')' : title\"\n        [shouldOverflow]=\"shouldOverflow\"\n    >\n        @if (_tableToolbarLeftActionsComponent) {\n            <span fd-toolbar-item fdOverflowPriority=\"never\">\n                @if (!!title || !hideItemCount) {\n                    <fd-toolbar-separator></fd-toolbar-separator>\n                }\n                <ng-template [ngTemplateOutlet]=\"_tableToolbarLeftActionsComponent._contentTemplateRef\"></ng-template>\n            </span>\n        }\n        <fd-toolbar-spacer></fd-toolbar-spacer>\n        @if (!hideSearchInput) {\n            <fdp-search-field\n                fd-toolbar-item\n                [style.min-width.rem]=\"15.5\"\n                [placeholder]=\"'platformTable.toolbarSearchPlaceholder' | fdTranslate\"\n                [inputText]=\"_searchInputText\"\n                [disabled]=\"!!(tableLoading$ | async)\"\n                [suggestions]=\"searchSuggestions\"\n                [ariaLabelledBy]=\"tableToolbarTitleId\"\n                (searchSubmit)=\"submitSearch($event)\"\n                (cancelSearch)=\"submitSearch($event)\"\n                [disableSuggestionsFoundAnnouncer]=\"true\"\n            ></fdp-search-field>\n        }\n        @if (editMode !== 'none') {\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                [label]=\"'platformTable.toolbarActionCreateButtonLabel' | fdTranslate\"\n                (click)=\"_addRow()\"\n            ></fdp-button>\n            @if (_showSaveButton) {\n                @if (_showSaveButton) {\n                    <fdp-button\n                        fd-toolbar-item\n                        fdOverflowPriority=\"never\"\n                        [label]=\"'platformTable.toolbarActionSaveButtonLabel' | fdTranslate\"\n                        (click)=\"_saveRows()\"\n                    ></fdp-button>\n                }\n                <fd-toolbar-separator></fd-toolbar-separator>\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    [label]=\"'platformTable.toolbarActionCancelButtonLabel' | fdTranslate\"\n                    (click)=\"_cancelEditing()\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            }\n            @if (\n                tableToolbarActionsComponent ||\n                (sortable | async) ||\n                (filterable | async) ||\n                (groupable | async) ||\n                (columns | async)\n            ) {\n                <fd-toolbar-separator fd-toolbar-item fdOverflowPriority=\"never\"></fd-toolbar-separator>\n            }\n        }\n        @if (tableToolbarActionsComponent) {\n            <span fd-toolbar-item class=\"fdp-table-toolbar-actions\">\n                <ng-template [ngTemplateOutlet]=\"tableToolbarActionsComponent.contentTemplateRef\"></ng-template>\n            </span>\n        }\n        @if (\n            showExpandCollapseButtons ||\n            (sortable | async) ||\n            (filterable | async) ||\n            (groupable | async) ||\n            (columns | async)\n        ) {\n            @if (tableToolbarActionsComponent) {\n                <fd-toolbar-separator fd-toolbar-item fdOverflowPriority=\"never\"></fd-toolbar-separator>\n            }\n            @if (showExpandCollapseButtons) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"expand-all\"\n                    (click)=\"_expandAll()\"\n                    [title]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"collapse-all\"\n                    (click)=\"_collapseAll()\"\n                    [title]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            }\n            @if (sortable | async) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"sort\"\n                    [title]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                    aria-haspopup=\"modal\"\n                    (click)=\"openSorting()\"\n                ></fdp-button>\n            }\n            @if (filterable | async) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"filter\"\n                    [title]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                    aria-haspopup=\"modal\"\n                    (click)=\"openFiltering()\"\n                ></fdp-button>\n            }\n            @if (groupable | async) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"group-2\"\n                    [title]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                    aria-haspopup=\"modal\"\n                    (click)=\"openGrouping()\"\n                ></fdp-button>\n            }\n            @if (columns | async) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"action-settings\"\n                    [title]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                    aria-haspopup=\"modal\"\n                    (click)=\"openColumns()\"\n                ></fdp-button>\n            }\n        }\n    </fd-toolbar>\n</ng-template>\n", dependencies: [{ kind: "component", type: ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "component", type: ButtonComponent$1, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "toggled", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { 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: "17.0.0", version: "17.0.4", type: TableToolbarComponent, isStandalone: true, selector: "fdp-table-toolbar", inputs: { shouldOverflow: "shouldOverflow", title: "title", hideItemCount: "hideItemCount", hideSearchInput: "hideSearchInput", showExpandCollapseButtons: "showExpandCollapseButtons", searchSuggestions: "searchSuggestions", editMode: "editMode" }, providers: [{ provide: TABLE_TOOLBAR, useExisting: TableToolbarComponent }], queries: [{ propertyName: "tableToolbarActionsComponent", first: true, predicate: TableToolbarActionsComponent, descendants: true }, { propertyName: "_tableToolbarLeftActionsComponent", first: true, predicate: TableToolbarLeftActionsComponent, descendants: true }], viewQueries: [{ propertyName: "contentTemplateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template\n    let-counter=\"counter\"\n    let-sortable=\"sortable\"\n    let-filterable=\"filterable\"\n    let-groupable=\"groupable\"\n    let-columns=\"columns\"\n>\n    <fd-toolbar\n        fdType=\"transparent\"\n        [clearBorder]=\"true\"\n        [titleId]=\"tableToolbarTitleId\"\n        [title]=\"title && !hideItemCount ? title + ' (' + (counter | async) + ')' : title\"\n        [shouldOverflow]=\"shouldOverflow\"\n    >\n        @if (_tableToolbarLeftActionsComponent) {\n            <span fd-toolbar-item fdOverflowPriority=\"never\">\n                @if (!!title || !hideItemCount) {\n                    <fd-toolbar-separator></fd-toolbar-separator>\n                }\n                <ng-template [ngTemplateOutlet]=\"_tableToolbarLeftActionsComponent._contentTemplateRef\"></ng-template>\n            </span>\n        }\n        <fd-toolbar-spacer></fd-toolbar-spacer>\n        @if (!hideSearchInput) {\n            <fdp-search-field\n                fd-toolbar-item\n                [style.min-width.rem]=\"15.5\"\n                [placeholder]=\"'platformTable.toolbarSearchPlaceholder' | fdTranslate\"\n                [inputText]=\"_searchInputText\"\n                [disabled]=\"!!(tableLoading$ | async)\"\n                [suggestions]=\"searchSuggestions\"\n                [ariaLabelledBy]=\"tableToolbarTitleId\"\n                (searchSubmit)=\"submitSearch($event)\"\n                (cancelSearch)=\"submitSearch($event)\"\n                [disableSuggestionsFoundAnnouncer]=\"true\"\n            ></fdp-search-field>\n        }\n        @if (editMode !== 'none') {\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                [label]=\"'platformTable.toolbarActionCreateButtonLabel' | fdTranslate\"\n                (click)=\"_addRow()\"\n            ></fdp-button>\n            @if (_showSaveButton) {\n                @if (_showSaveButton) {\n                    <fdp-button\n                        fd-toolbar-item\n                        fdOverflowPriority=\"never\"\n                        [label]=\"'platformTable.toolbarActionSaveButtonLabel' | fdTranslate\"\n                        (click)=\"_saveRows()\"\n                    ></fdp-button>\n                }\n                <fd-toolbar-separator></fd-toolbar-separator>\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    [label]=\"'platformTable.toolbarActionCancelButtonLabel' | fdTranslate\"\n                    (click)=\"_cancelEditing()\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            }\n            @if (\n                tableToolbarActionsComponent ||\n                (sortable | async) ||\n                (filterable | async) ||\n                (groupable | async) ||\n                (columns | async)\n            ) {\n                <fd-toolbar-separator fd-toolbar-item fdOverflowPriority=\"never\"></fd-toolbar-separator>\n            }\n        }\n        @if (tableToolbarActionsComponent) {\n            <span fd-toolbar-item class=\"fdp-table-toolbar-actions\">\n                <ng-template [ngTemplateOutlet]=\"tableToolbarActionsComponent.contentTemplateRef\"></ng-template>\n            </span>\n        }\n        @if (\n            showExpandCollapseButtons ||\n            (sortable | async) ||\n            (filterable | async) ||\n            (groupable | async) ||\n            (columns | async)\n        ) {\n            @if (tableToolbarActionsComponent) {\n                <fd-toolbar-separator fd-toolbar-item fdOverflowPriority=\"never\"></fd-toolbar-separator>\n            }\n            @if (showExpandCollapseButtons) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"expand-all\"\n                    (click)=\"_expandAll()\"\n                    [title]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"collapse-all\"\n                    (click)=\"_collapseAll()\"\n                    [title]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            }\n            @if (sortable | async) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"sort\"\n                    [title]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                    aria-haspopup=\"modal\"\n                    (click)=\"openSorting()\"\n                ></fdp-button>\n            }\n            @if (filterable | async) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"filter\"\n                    [title]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                    aria-haspopup=\"modal\"\n                    (click)=\"openFiltering()\"\n                ></fdp-button>\n            }\n            @if (groupable | async) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"group-2\"\n                    [title]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                    aria-haspopup=\"modal\"\n                    (click)=\"openGrouping()\"\n                ></fdp-button>\n            }\n            @if (columns | async) {\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"action-settings\"\n                    [title]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                    aria-haspopup=\"modal\"\n                    (click)=\"openColumns()\"\n                ></fdp-button>\n            }\n        }\n    </fd-toolbar>\n</ng-template>\n", dependencies: [{ kind: "component", type: ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "component", type: ButtonComponent$1, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "glyphFont", "buttonType", "toggled", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { 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: "17.0.4", ngImport: i0, type: TableToolbarComponent, decorators: [{
             type: Component,
@@ -3159,7 +3159,7 @@ class TableRowComponent extends TableRowDirective {
                 provide: FDK_FOCUSABLE_LIST_DIRECTIVE,
                 useExisting: TableRowComponent
             }
-        ], viewQueries: [{ propertyName: "_focusableViewCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }, { propertyName: "_editableCells", predicate: EditableTableCell, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (_fdpTableService._semanticHighlighting$ | async; as semanticHighlighting) {\n    <td\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<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            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    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n        ></td>\n    }\n} @else if (selectionMode === SELECTION_MODE.MULTIPLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            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    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n        ></td>\n    }\n}\n@for (column of _fdpTableService.visibleColumns$ | async; track column.name) {\n    <td\n        #tableCellElement\n        [fdpTableCellResizable]=\"\n            $index\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 && $index === 0 ? 'fd-table__cell--expand' : '',\n            $last && (_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($index, row) ? row.expanded : null\"\n        [attr.data-nesting-level]=\"$index === 0 ? row.level + 1 : null\"\n        (cellFocused)=\"_tableRowService.cellFocused($event)\"\n        (click)=\"_tableRowService.cellClicked({ index: $index, row })\"\n        (keydown.enter)=\"_isTreeRowFirstCell($index, row, $event) && _toggleGroupRow()\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.space)=\"_handleCellSpaceKey($index, tableCellElement, $event)\"\n    >\n        <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n            @if (_isTreeRowFirstCell($index, row)) {\n                <span\n                    class=\"fd-table__expand\"\n                    [class.fd-table__expand--open]=\"row.expanded$ | async\"\n                    aria-hidden=\"true\"\n                ></span>\n            }\n            @if (row.state === 'readonly') {\n                @if ((row.value | valueByPath: column.key) === '' || (row.value | valueByPath: column.key) === null) {\n                    <span\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                        {{ 'platformTable.emptyCell' | fdTranslate }}\n                    </span>\n                }\n                @if (column?.columnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.columnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    {{ row.value | valueByPath: column.key }}\n                }\n            } @else {\n                @if (column?.editableColumnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.editableColumnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    <fdp-table-editable-cell\n                        [row]=\"row\"\n                        [column]=\"column\"\n                        [columnValue]=\"row.value | valueByPath: column.key\"\n                    ></fdp-table-editable-cell>\n                }\n            }\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n@if (_fdpTableService._isShownNavigationColumn$ | async) {\n    <td fd-table-cell class=\"fdp-table__cell--navigation is-last-child\" fdkDisabled [addDisabledClass]=\"false\">\n        @if (row.navigatable) {\n            <i\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        }\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: 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: 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: 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: "@if (_fdpTableService._semanticHighlighting$ | async; as semanticHighlighting) {\n    <td\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<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            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    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n        ></td>\n    }\n} @else if (selectionMode === SELECTION_MODE.MULTIPLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            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    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n        ></td>\n    }\n}\n@for (column of _fdpTableService.visibleColumns$ | async; track column.name) {\n    <td\n        #tableCellElement\n        [fdpTableCellResizable]=\"\n            $index\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 && $index === 0 ? 'fd-table__cell--expand' : '',\n            $last && (_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($index, row) ? row.expanded : null\"\n        [attr.data-nesting-level]=\"$index === 0 ? row.level + 1 : null\"\n        (cellFocused)=\"_tableRowService.cellFocused($event)\"\n        (click)=\"_tableRowService.cellClicked({ index: $index, row })\"\n        (keydown.enter)=\"_isTreeRowFirstCell($index, row, $event) && _toggleGroupRow()\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.space)=\"_handleCellSpaceKey($index, tableCellElement, $event)\"\n    >\n        <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n            @if (_isTreeRowFirstCell($index, row)) {\n                <span\n                    class=\"fd-table__expand\"\n                    [class.fd-table__expand--open]=\"row.expanded$ | async\"\n                    aria-hidden=\"true\"\n                ></span>\n            }\n            @if (row.state === 'readonly') {\n                @if ((row.value | valueByPath: column.key) === '' || (row.value | valueByPath: column.key) === null) {\n                    <span\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                        {{ 'platformTable.emptyCell' | fdTranslate }}\n                    </span>\n                }\n                @if (column?.columnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.columnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    {{ row.value | valueByPath: column.key }}\n                }\n            } @else {\n                @if (column?.editableColumnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.editableColumnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    <fdp-table-editable-cell\n                        [row]=\"row\"\n                        [column]=\"column\"\n                        [columnValue]=\"row.value | valueByPath: column.key\"\n                    ></fdp-table-editable-cell>\n                }\n            }\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n@if (_fdpTableService._isShownNavigationColumn$ | async) {\n    <td fd-table-cell class=\"fdp-table__cell--navigation is-last-child\" fdkDisabled [addDisabledClass]=\"false\">\n        @if (row.navigatable) {\n            <fd-icon\n                fd-table-icon\n                [navigation]=\"true\"\n                [glyph]=\"_rtl ? 'slim-arrow-left' : 'slim-arrow-right'\"\n                class=\"fdp-table__navigation-indicator\"\n            ></fd-icon>\n        }\n    </td>\n}\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n", dependencies: [{ kind: "directive", type: TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "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: 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: PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TableEditableCellComponent, selector: "fdp-table-editable-cell", inputs: ["row", "column", "columnValue"] }, { kind: "directive", type: TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "glyphFont", "navigation"] }, { kind: "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" }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TableRowComponent, decorators: [{
             type: Component,
@@ -3189,8 +3189,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                         FdTranslatePipe,
                         SelectionCellStylesPipe,
                         TableCellStylesPipe,
-                        ColumnResizableSidePipe
-                    ], template: "@if (_fdpTableService._semanticHighlighting$ | async; as semanticHighlighting) {\n    <td\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<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            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    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n        ></td>\n    }\n} @else if (selectionMode === SELECTION_MODE.MULTIPLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            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    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n        ></td>\n    }\n}\n@for (column of _fdpTableService.visibleColumns$ | async; track column.name) {\n    <td\n        #tableCellElement\n        [fdpTableCellResizable]=\"\n            $index\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 && $index === 0 ? 'fd-table__cell--expand' : '',\n            $last && (_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($index, row) ? row.expanded : null\"\n        [attr.data-nesting-level]=\"$index === 0 ? row.level + 1 : null\"\n        (cellFocused)=\"_tableRowService.cellFocused($event)\"\n        (click)=\"_tableRowService.cellClicked({ index: $index, row })\"\n        (keydown.enter)=\"_isTreeRowFirstCell($index, row, $event) && _toggleGroupRow()\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.space)=\"_handleCellSpaceKey($index, tableCellElement, $event)\"\n    >\n        <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n            @if (_isTreeRowFirstCell($index, row)) {\n                <span\n                    class=\"fd-table__expand\"\n                    [class.fd-table__expand--open]=\"row.expanded$ | async\"\n                    aria-hidden=\"true\"\n                ></span>\n            }\n            @if (row.state === 'readonly') {\n                @if ((row.value | valueByPath: column.key) === '' || (row.value | valueByPath: column.key) === null) {\n                    <span\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                        {{ 'platformTable.emptyCell' | fdTranslate }}\n                    </span>\n                }\n                @if (column?.columnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.columnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    {{ row.value | valueByPath: column.key }}\n                }\n            } @else {\n                @if (column?.editableColumnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.editableColumnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    <fdp-table-editable-cell\n                        [row]=\"row\"\n                        [column]=\"column\"\n                        [columnValue]=\"row.value | valueByPath: column.key\"\n                    ></fdp-table-editable-cell>\n                }\n            }\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n@if (_fdpTableService._isShownNavigationColumn$ | async) {\n    <td fd-table-cell class=\"fdp-table__cell--navigation is-last-child\" fdkDisabled [addDisabledClass]=\"false\">\n        @if (row.navigatable) {\n            <i\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        }\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" }]
+                        ColumnResizableSidePipe,
+                        IconComponent
+                    ], template: "@if (_fdpTableService._semanticHighlighting$ | async; as semanticHighlighting) {\n    <td\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<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            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    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n        ></td>\n    }\n} @else if (selectionMode === SELECTION_MODE.MULTIPLE) {\n    @if (row.value[selectableKey] !== false) {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            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    } @else {\n        <td\n            class=\"fd-table__cell--checkbox\"\n            role=\"gridcell\"\n            fd-table-cell\n            fdkDisabled\n            [addDisabledClass]=\"false\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n        ></td>\n    }\n}\n@for (column of _fdpTableService.visibleColumns$ | async; track column.name) {\n    <td\n        #tableCellElement\n        [fdpTableCellResizable]=\"\n            $index\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 && $index === 0 ? 'fd-table__cell--expand' : '',\n            $last && (_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($index, row) ? row.expanded : null\"\n        [attr.data-nesting-level]=\"$index === 0 ? row.level + 1 : null\"\n        (cellFocused)=\"_tableRowService.cellFocused($event)\"\n        (click)=\"_tableRowService.cellClicked({ index: $index, row })\"\n        (keydown.enter)=\"_isTreeRowFirstCell($index, row, $event) && _toggleGroupRow()\"\n        (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n        (keydown.space)=\"_handleCellSpaceKey($index, tableCellElement, $event)\"\n    >\n        <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n            @if (_isTreeRowFirstCell($index, row)) {\n                <span\n                    class=\"fd-table__expand\"\n                    [class.fd-table__expand--open]=\"row.expanded$ | async\"\n                    aria-hidden=\"true\"\n                ></span>\n            }\n            @if (row.state === 'readonly') {\n                @if ((row.value | valueByPath: column.key) === '' || (row.value | valueByPath: column.key) === null) {\n                    <span\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                        {{ 'platformTable.emptyCell' | fdTranslate }}\n                    </span>\n                }\n                @if (column?.columnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.columnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    {{ row.value | valueByPath: column.key }}\n                }\n            } @else {\n                @if (column?.editableColumnCellTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"column.editableColumnCellTemplate!\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n                    ></ng-template>\n                } @else {\n                    <fdp-table-editable-cell\n                        [row]=\"row\"\n                        [column]=\"column\"\n                        [columnValue]=\"row.value | valueByPath: column.key\"\n                    ></fdp-table-editable-cell>\n                }\n            }\n        </div>\n    </td>\n}\n<ng-content></ng-content>\n@if (_fdpTableService._isShownNavigationColumn$ | async) {\n    <td fd-table-cell class=\"fdp-table__cell--navigation is-last-child\" fdkDisabled [addDisabledClass]=\"false\">\n        @if (row.navigatable) {\n            <fd-icon\n                fd-table-icon\n                [navigation]=\"true\"\n                [glyph]=\"_rtl ? 'slim-arrow-left' : 'slim-arrow-right'\"\n                class=\"fdp-table__navigation-indicator\"\n            ></fd-icon>\n        }\n    </td>\n}\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n" }]
         }], ctorParameters: () => [], propDecorators: { rowId: [{
                 type: Input
             }], row: [{