@fundamental-ngx/platform 0.45.1 → 0.46.0-rc.1

package/esm2022/table/components/table-p13-dialog/grouping/grouping.component.mjs

@@ -116,7 +116,7 @@ export class P13GroupingDialogComponent {
         return getUniqueListValuesByKey(rules, 'columnKey');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: P13GroupingDialogComponent, deps: [{ token: i1.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: P13GroupingDialogComponent, 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        <div class=\"group-row\" *ngFor=\"let rule of rules; let i = index\">\n            <fd-select\n                class=\"group-row__select\"\n                [value]=\"rule.columnKey\"\n                (valueChange)=\"_onRuleColumnKeyChange(rule, $event)\"\n                [placeholder]=\"'platformTable.P13GroupDialogNoneSelectedColumnSelectPlaceholder' | fdTranslate\"\n            >\n                <li fd-option *ngFor=\"let column of columns\" [value]=\"column.key\">\n                    {{ column.label }}\n                </li>\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(i)\"\n                ></button>\n            </div>\n        </div>\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: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i6.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i6.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i6.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i6.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i7.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: i8.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i8.InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "component", type: i9.SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i9.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: i10.ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: P13GroupingDialogComponent, 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        <div class=\"group-row\" *ngFor=\"let rule of rules; let i = index\">\n            <fd-select\n                class=\"group-row__select\"\n                [value]=\"rule.columnKey\"\n                (valueChange)=\"_onRuleColumnKeyChange(rule, $event)\"\n                [placeholder]=\"'platformTable.P13GroupDialogNoneSelectedColumnSelectPlaceholder' | fdTranslate\"\n            >\n                <li fd-option *ngFor=\"let column of columns\" [value]=\"column.key\">\n                    {{ column.label }}\n                </li>\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(i)\"\n                ></button>\n            </div>\n        </div>\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: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.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: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i6.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i6.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i6.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i6.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i7.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: i8.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i8.InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "component", type: i9.SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i9.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: i10.ResetButtonComponent, selector: "fdp-table-reset-button" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: P13GroupingDialogComponent, decorators: [{
             type: Component,

package/esm2022/table/components/table-row/table-row.component.mjs

@@ -160,7 +160,7 @@ export class TableRowComponent extends TableRowDirective {
                 provide: FDK_FOCUSABLE_LIST_DIRECTIVE,
                 useExisting: TableRowComponent
             }
-        ], viewQueries: [{ propertyName: "_focusableViewCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }, { propertyName: "_editableCells", predicate: EditableTableCell, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<td\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async as semanticHighlighting\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n    [status]=\"row.value[semanticHighlighting]\"\n></td>\n\n<!-- Row Selection Cell -->\n<ng-container [ngSwitch]=\"selectionMode\">\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.SINGLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            fd-table-cell-selectable\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow()\"\n            (keydown.space)=\"_toggleSingleSelectableRow()\"\n        >\n            <!-- hidden text for screenreader -->\n            <span\n                style=\"\n                    position: absolute !important;\n                    height: 1px;\n                    width: 1px;\n                    overflow: hidden;\n                    clip: rect(1px, 1px, 1px, 1px);\n                    color: transparent;\n                \"\n            >\n                <ng-container *ngIf=\"row.checked\">\n                    {{ 'platformTable.deselectSingleRow' | fdTranslate }}\n                </ng-container>\n                <ng-container *ngIf=\"!row.checked\">\n                    {{ 'platformTable.selectSingleRow' | fdTranslate }}\n                </ng-container>\n            </span>\n        </td>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.MULTIPLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n        >\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    </ng-container>\n</ng-container>\n\n<ng-template #selectionMock>\n    <td\n        class=\"fd-table__cell--checkbox\"\n        role=\"gridcell\"\n        fd-table-cell\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [class.fd-table__cell--fixed]=\"fixed\"\n    ></td>\n</ng-template>\n\n<td\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        last as isLast;\n        trackBy: _columnTrackBy\n    \"\n    [fdpTableCellResizable]=\"\n        colIdx\n            | columnResizableSide\n                : _fdpTableService.visibleColumnsLength\n                : (_fdpTableService._isShownNavigationColumn$ | async) === true\n    \"\n    [columnName]=\"column.name\"\n    [focusable]=\"true\"\n    [attr.role]=\"column.role\"\n    [headers]=\"rowId + '__' + column.name\"\n    [ngClass]=\"'fdp-table__col--' + column.name\"\n    [ngClass]=\"[\n        'fdp-table__col--' + column.name,\n        column._freezed ? 'fd-table__cell--fixed' : '',\n        column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n        column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n        column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n        row.isTree && colIdx === 0 ? 'fd-table__cell--expand' : '',\n        isLast && (_fdpTableService._isShownNavigationColumn$ | async) === false ? 'is-last-child' : ''\n    ]\"\n    [ngStyle]=\"\n        column\n            | tableCellStyles\n                : _rtl\n                : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                : selectionColumnWidth\n                : column._freezed\n                : column._endFreezed\n                : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                : _tableColumnResizeService.getNextColumnsWidth(column.name)\n    \"\n    [attr.aria-expanded]=\"_isTreeRowFirstCell(colIdx, row) ? row.expanded : null\"\n    [attr.data-nesting-level]=\"colIdx === 0 ? row.level + 1 : null\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    (click)=\"_tableRowService.cellClicked({ index: colIdx, row })\"\n    (keydown.enter)=\"_isTreeRowFirstCell(colIdx, row, $event) && _toggleGroupRow()\"\n    (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n    (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n>\n    <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n        <span\n            *ngIf=\"_isTreeRowFirstCell(colIdx, row)\"\n            class=\"fd-table__expand\"\n            [class.fd-table__expand--open]=\"row.expanded$ | async\"\n            aria-hidden=\"true\"\n        ></span>\n\n        <ng-container *ngIf=\"row.state === 'readonly'; else editModeCell\">\n            <ng-container *ngIf=\"column?.columnCellTemplate; else defaultTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.columnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-template #defaultTableCellTemplate>{{ row.value | valueByPath : column.key }}</ng-template>\n\n        <ng-template #editModeCell>\n            <ng-container *ngIf=\"column?.editableColumnCellTemplate; else defaultEditableTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.editableColumnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n\n            <ng-template #defaultEditableTableCellTemplate>\n                <fdp-table-editable-cell\n                    [row]=\"row\"\n                    [column]=\"column\"\n                    [columnValue]=\"row.value | valueByPath : column.key\"\n                ></fdp-table-editable-cell>\n            </ng-template>\n        </ng-template>\n    </div>\n</td>\n\n<ng-content></ng-content>\n\n<td\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n>\n    <i\n        *ngIf=\"row.navigatable\"\n        fd-table-icon\n        [navigation]=\"true\"\n        [class]=\"_rtl ? 'sap-icon--slim-arrow-left' : 'sap-icon--slim-arrow-right'\"\n        class=\"fdp-table__navigation-indicator\"\n    ></i>\n</td>\n\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i3.TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: i3.TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "navigation"] }, { kind: "component", type: i4.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "directive", type: i5.DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: i6.PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: i6.FdpCellSelectableDirective, selector: "[fdTableCellSelectable], [fd-table-cell-selectable]", inputs: ["enabled"] }, { kind: "component", type: i7.TableEditableCellComponent, selector: "fdp-table-editable-cell", inputs: ["row", "column", "columnValue"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.ValueByPathPipe, name: "valueByPath" }, { kind: "pipe", type: i8.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i6.SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: i6.TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: i6.ColumnResizableSidePipe, name: "columnResizableSide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_focusableViewCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }, { propertyName: "_editableCells", predicate: EditableTableCell, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<td\n    *ngIf=\"_fdpTableService._semanticHighlighting$ | async as semanticHighlighting\"\n    fd-table-cell\n    fd-table-status-indicator\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n    [status]=\"row.value[semanticHighlighting]\"\n></td>\n\n<!-- Row Selection Cell -->\n<ng-container [ngSwitch]=\"selectionMode\">\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.SINGLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            [attr.role]=\"_hasRowHeaderColumn ? 'rowheader' : 'gridcell'\"\n            fd-table-cell\n            fd-table-cell-selectable\n            [focusable]=\"true\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n            [attr.aria-selected]=\"row.checked\"\n            (click)=\"_toggleSingleSelectableRow()\"\n            (keydown.enter)=\"_toggleSingleSelectableRow()\"\n            (keydown.space)=\"_toggleSingleSelectableRow()\"\n        >\n            <!-- hidden text for screenreader -->\n            <span\n                style=\"\n                    position: absolute !important;\n                    height: 1px;\n                    width: 1px;\n                    overflow: hidden;\n                    clip: rect(1px, 1px, 1px, 1px);\n                    color: transparent;\n                \"\n            >\n                <ng-container *ngIf=\"row.checked\">\n                    {{ 'platformTable.deselectSingleRow' | fdTranslate }}\n                </ng-container>\n                <ng-container *ngIf=\"!row.checked\">\n                    {{ 'platformTable.selectSingleRow' | fdTranslate }}\n                </ng-container>\n            </span>\n        </td>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"SELECTION_MODE.MULTIPLE\">\n        <td\n            *ngIf=\"row.value[selectableKey] !== false; else selectionMock\"\n            class=\"fd-table__cell--checkbox\"\n            [class.fd-table__cell--fixed]=\"fixed\"\n            role=\"cell\"\n            fd-table-cell\n            [focusable]=\"true\"\n            (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n            (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n            [style]=\"\n                _contentDensityObserver\n                    | async\n                    | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n            \"\n        >\n            <fd-checkbox\n                tabIndexValue=\"-1\"\n                labelClass=\"fd-table__checkbox-label\"\n                [tristate]=\"enableTristateMode\"\n                [tristateSelectable]=\"false\"\n                [ngModel]=\"row.checked$ | async\"\n                (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n            ></fd-checkbox>\n        </td>\n    </ng-container>\n</ng-container>\n\n<ng-template #selectionMock>\n    <td\n        class=\"fd-table__cell--checkbox\"\n        role=\"gridcell\"\n        fd-table-cell\n        fdkDisabled\n        [addDisabledClass]=\"false\"\n        [class.fd-table__cell--fixed]=\"fixed\"\n    ></td>\n</ng-template>\n\n<td\n    *ngFor=\"\n        let column of _fdpTableService.visibleColumns$ | async;\n        let colIdx = index;\n        last as isLast;\n        trackBy: _columnTrackBy\n    \"\n    [fdpTableCellResizable]=\"\n        colIdx\n            | columnResizableSide\n                : _fdpTableService.visibleColumnsLength\n                : (_fdpTableService._isShownNavigationColumn$ | async) === true\n    \"\n    [columnName]=\"column.name\"\n    [focusable]=\"true\"\n    [attr.role]=\"column.role\"\n    [headers]=\"rowId + '__' + column.name\"\n    [ngClass]=\"'fdp-table__col--' + column.name\"\n    [ngClass]=\"[\n        'fdp-table__col--' + column.name,\n        column._freezed ? 'fd-table__cell--fixed' : '',\n        column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n        column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n        column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n        row.isTree && colIdx === 0 ? 'fd-table__cell--expand' : '',\n        isLast && (_fdpTableService._isShownNavigationColumn$ | async) === false ? 'is-last-child' : ''\n    ]\"\n    [ngStyle]=\"\n        column\n            | tableCellStyles\n                : _rtl\n                : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n                : selectionColumnWidth\n                : column._freezed\n                : column._endFreezed\n                : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n                : _tableColumnResizeService.getColumnWidthStyle(column.name)\n                : _tableColumnResizeService.getNextColumnsWidth(column.name)\n    \"\n    [attr.aria-expanded]=\"_isTreeRowFirstCell(colIdx, row) ? row.expanded : null\"\n    [attr.data-nesting-level]=\"colIdx === 0 ? row.level + 1 : null\"\n    (cellFocused)=\"_tableRowService.cellFocused($event)\"\n    (click)=\"_tableRowService.cellClicked({ index: colIdx, row })\"\n    (keydown.enter)=\"_isTreeRowFirstCell(colIdx, row, $event) && _toggleGroupRow()\"\n    (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n    (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n>\n    <div [class.fd-table__text]=\"column.applyText\" [class.fd-table__text--no-wrap]=\"column.noWrap\">\n        <span\n            *ngIf=\"_isTreeRowFirstCell(colIdx, row)\"\n            class=\"fd-table__expand\"\n            [class.fd-table__expand--open]=\"row.expanded$ | async\"\n            aria-hidden=\"true\"\n        ></span>\n\n        <ng-container *ngIf=\"row.state === 'readonly'; else editModeCell\">\n            <ng-container *ngIf=\"column?.columnCellTemplate; else defaultTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.columnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n        <ng-template #defaultTableCellTemplate>{{ row.value | valueByPath : column.key }}</ng-template>\n\n        <ng-template #editModeCell>\n            <ng-container *ngIf=\"column?.editableColumnCellTemplate; else defaultEditableTableCellTemplate\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        column.editableColumnCellTemplate!;\n                        context: { $implicit: row.value, popping: false, rowIndex: row.index }\n                    \"\n                ></ng-container>\n            </ng-container>\n\n            <ng-template #defaultEditableTableCellTemplate>\n                <fdp-table-editable-cell\n                    [row]=\"row\"\n                    [column]=\"column\"\n                    [columnValue]=\"row.value | valueByPath : column.key\"\n                ></fdp-table-editable-cell>\n            </ng-template>\n        </ng-template>\n    </div>\n</td>\n\n<ng-content></ng-content>\n\n<td\n    *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n    fd-table-cell\n    class=\"fdp-table__cell--navigation is-last-child\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n>\n    <i\n        *ngIf=\"row.navigatable\"\n        fd-table-icon\n        [navigation]=\"true\"\n        [class]=\"_rtl ? 'sap-icon--slim-arrow-left' : 'sap-icon--slim-arrow-right'\"\n        class=\"fdp-table__navigation-indicator\"\n    ></i>\n</td>\n\n<td\n    aria-hidden=\"true\"\n    class=\"fd-table__cell fd-table__cell--mock\"\n    [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n    fdkDisabled\n    [addDisabledClass]=\"false\"\n></td>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i3.TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: i3.TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "navigation"] }, { kind: "component", type: i4.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: "directive", type: i5.DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: i6.PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: i6.FdpCellSelectableDirective, selector: "[fdTableCellSelectable], [fd-table-cell-selectable]", inputs: ["enabled"] }, { kind: "component", type: i7.TableEditableCellComponent, selector: "fdp-table-editable-cell", inputs: ["row", "column", "columnValue"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.ValueByPathPipe, name: "valueByPath" }, { kind: "pipe", type: i8.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i6.SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: i6.TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: i6.ColumnResizableSidePipe, name: "columnResizableSide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: TableRowComponent, decorators: [{
             type: Component,

package/esm2022/table/components/table-toolbar/table-toolbar.component.mjs

@@ -116,7 +116,7 @@ export class TableToolbarComponent {
         this._table.collapseAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: TableToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Table }, { token: i1.TableService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: TableToolbarComponent, 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        <ng-container *ngIf=\"_tableToolbarLeftActionsComponent\">\n            <span fd-toolbar-item fdOverflowPriority=\"never\">\n                <fd-toolbar-separator *ngIf=\"!!title || !hideItemCount\"></fd-toolbar-separator>\n                <ng-container *ngTemplateOutlet=\"_tableToolbarLeftActionsComponent._contentTemplateRef\"></ng-container>\n            </span>\n        </ng-container>\n        <fd-toolbar-spacer></fd-toolbar-spacer>\n\n        <fdp-search-field\n            fd-toolbar-item\n            *ngIf=\"!hideSearchInput\"\n            style=\"min-width: 15.5rem\"\n            [placeholder]=\"'platformTable.toolbarSearchPlaceholder' | fdTranslate\"\n            [inputText]=\"_searchInputText\"\n            [disabled]=\"!!(tableLoading$ | async)\"\n            [suggestions]=\"searchSuggestions\"\n            [ariaLabelledBy]=\"tableToolbarTitleId\"\n            (searchSubmit)=\"submitSearch($event)\"\n            (cancelSearch)=\"submitSearch($event)\"\n        ></fdp-search-field>\n\n        <ng-container *ngIf=\"editMode !== 'none'\">\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                [label]=\"'platformTable.toolbarActionCreateButtonLabel' | fdTranslate\"\n                (click)=\"_addRow()\"\n            ></fdp-button>\n            <ng-container *ngIf=\"_showSaveButton\">\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    [label]=\"'platformTable.toolbarActionSaveButtonLabel' | fdTranslate\"\n                    *ngIf=\"_showSaveButton\"\n                    (click)=\"_saveRows()\"\n                ></fdp-button>\n                <fd-toolbar-separator></fd-toolbar-separator>\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    [label]=\"'platformTable.toolbarActionCancelButtonLabel' | fdTranslate\"\n                    (click)=\"_cancelEditing()\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            </ng-container>\n            <fd-toolbar-separator\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"\n                    tableToolbarActionsComponent ||\n                    (sortable | async) ||\n                    (filterable | async) ||\n                    (groupable | async) ||\n                    (columns | async)\n                \"\n            ></fd-toolbar-separator>\n        </ng-container>\n\n        <span fd-toolbar-item *ngIf=\"tableToolbarActionsComponent\" class=\"fdp-table-toolbar-actions\">\n            <ng-container *ngTemplateOutlet=\"tableToolbarActionsComponent.contentTemplateRef\"></ng-container>\n        </span>\n\n        <ng-container\n            *ngIf=\"\n                showExpandCollapseButtons ||\n                (sortable | async) ||\n                (filterable | async) ||\n                (groupable | async) ||\n                (columns | async)\n            \"\n        >\n            <fd-toolbar-separator\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"tableToolbarActionsComponent\"\n            ></fd-toolbar-separator>\n\n            <ng-container *ngIf=\"showExpandCollapseButtons\">\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"expand-all\"\n                    (click)=\"_expandAll()\"\n                    [title]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"collapse-all\"\n                    (click)=\"_collapseAll()\"\n                    [title]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            </ng-container>\n\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"sortable | async\"\n                glyph=\"sort\"\n                [title]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openSorting()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"filterable | async\"\n                glyph=\"filter\"\n                [title]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openFiltering()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"groupable | async\"\n                glyph=\"group-2\"\n                [title]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openGrouping()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"columns | async\"\n                glyph=\"action-settings\"\n                [title]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openColumns()\"\n            ></fdp-button>\n        </ng-container>\n    </fd-toolbar>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i3.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i3.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: i3.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "component", type: i4.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "toggled", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: i5.SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "forceSearchButton"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: TableToolbarComponent, 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        <ng-container *ngIf=\"_tableToolbarLeftActionsComponent\">\n            <span fd-toolbar-item fdOverflowPriority=\"never\">\n                <fd-toolbar-separator *ngIf=\"!!title || !hideItemCount\"></fd-toolbar-separator>\n                <ng-container *ngTemplateOutlet=\"_tableToolbarLeftActionsComponent._contentTemplateRef\"></ng-container>\n            </span>\n        </ng-container>\n        <fd-toolbar-spacer></fd-toolbar-spacer>\n\n        <fdp-search-field\n            fd-toolbar-item\n            *ngIf=\"!hideSearchInput\"\n            style=\"min-width: 15.5rem\"\n            [placeholder]=\"'platformTable.toolbarSearchPlaceholder' | fdTranslate\"\n            [inputText]=\"_searchInputText\"\n            [disabled]=\"!!(tableLoading$ | async)\"\n            [suggestions]=\"searchSuggestions\"\n            [ariaLabelledBy]=\"tableToolbarTitleId\"\n            (searchSubmit)=\"submitSearch($event)\"\n            (cancelSearch)=\"submitSearch($event)\"\n        ></fdp-search-field>\n\n        <ng-container *ngIf=\"editMode !== 'none'\">\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                [label]=\"'platformTable.toolbarActionCreateButtonLabel' | fdTranslate\"\n                (click)=\"_addRow()\"\n            ></fdp-button>\n            <ng-container *ngIf=\"_showSaveButton\">\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    [label]=\"'platformTable.toolbarActionSaveButtonLabel' | fdTranslate\"\n                    *ngIf=\"_showSaveButton\"\n                    (click)=\"_saveRows()\"\n                ></fdp-button>\n                <fd-toolbar-separator></fd-toolbar-separator>\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    [label]=\"'platformTable.toolbarActionCancelButtonLabel' | fdTranslate\"\n                    (click)=\"_cancelEditing()\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            </ng-container>\n            <fd-toolbar-separator\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"\n                    tableToolbarActionsComponent ||\n                    (sortable | async) ||\n                    (filterable | async) ||\n                    (groupable | async) ||\n                    (columns | async)\n                \"\n            ></fd-toolbar-separator>\n        </ng-container>\n\n        <span fd-toolbar-item *ngIf=\"tableToolbarActionsComponent\" class=\"fdp-table-toolbar-actions\">\n            <ng-container *ngTemplateOutlet=\"tableToolbarActionsComponent.contentTemplateRef\"></ng-container>\n        </span>\n\n        <ng-container\n            *ngIf=\"\n                showExpandCollapseButtons ||\n                (sortable | async) ||\n                (filterable | async) ||\n                (groupable | async) ||\n                (columns | async)\n            \"\n        >\n            <fd-toolbar-separator\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"tableToolbarActionsComponent\"\n            ></fd-toolbar-separator>\n\n            <ng-container *ngIf=\"showExpandCollapseButtons\">\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"expand-all\"\n                    (click)=\"_expandAll()\"\n                    [title]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionExpandAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n\n                <fdp-button\n                    fd-toolbar-item\n                    fdOverflowPriority=\"never\"\n                    glyph=\"collapse-all\"\n                    (click)=\"_collapseAll()\"\n                    [title]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    [ariaLabel]=\"'platformTable.toolbarActionCollapseAllButtonTitle' | fdTranslate\"\n                    buttonType=\"transparent\"\n                ></fdp-button>\n            </ng-container>\n\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"sortable | async\"\n                glyph=\"sort\"\n                [title]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionSortButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openSorting()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"filterable | async\"\n                glyph=\"filter\"\n                [title]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionFilterButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openFiltering()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"groupable | async\"\n                glyph=\"group-2\"\n                [title]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionGroupButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openGrouping()\"\n            ></fdp-button>\n            <fdp-button\n                fd-toolbar-item\n                fdOverflowPriority=\"never\"\n                *ngIf=\"columns | async\"\n                glyph=\"action-settings\"\n                [title]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                [ariaLabel]=\"'platformTable.toolbarActionColumnsButtonTitle' | fdTranslate\"\n                buttonType=\"transparent\"\n                aria-haspopup=\"modal\"\n                (click)=\"openColumns()\"\n            ></fdp-button>\n        </ng-container>\n    </fd-toolbar>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i3.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i3.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: i3.ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "component", type: i4.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "toggled", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: i5.SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "forceSearchButton"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: TableToolbarComponent, decorators: [{
             type: Component,

package/esm2022/table/components/table-view-settings-dialog/filtering/filter-multi-select.component.mjs

@@ -31,7 +31,7 @@ export class FilterMultiSelectComponent {
         this._value = this._selectableOptions.filter(({ selected }) => selected).map(({ value }) => value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: FilterMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: FilterMultiSelectComponent, selector: "fdp-filter-multi-select", inputs: { options: "options", filterBy: "filterBy" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<ul fd-list [selection]=\"true\">\n    <li fd-list-item *ngFor=\"let option of _selectableOptions\" [selected]=\"option.selected\">\n        <fd-checkbox [ngModel]=\"option.selected\" (ngModelChange)=\"_onSelectChange(option, $event)\"></fd-checkbox>\n        <span fd-list-title>{{ option.label }}</span>\n    </li>\n</ul>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i4.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i4.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i4.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: FilterMultiSelectComponent, selector: "fdp-filter-multi-select", inputs: { options: "options", filterBy: "filterBy" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<ul fd-list [selection]=\"true\">\n    <li fd-list-item *ngFor=\"let option of _selectableOptions\" [selected]=\"option.selected\">\n        <fd-checkbox [ngModel]=\"option.selected\" (ngModelChange)=\"_onSelectChange(option, $event)\"></fd-checkbox>\n        <span fd-list-title>{{ option.label }}</span>\n    </li>\n</ul>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.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: "component", type: i4.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i4.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i4.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: FilterMultiSelectComponent, decorators: [{
             type: Component,