@fundamental-ngx/platform 0.43.2 → 0.43.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2688,7 +2688,7 @@ TableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
2688
2688
  useExisting: TableRowComponent
2689
2689
  },
2690
2690
  DestroyedService
2691
- ], 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 [cellFocusedEventAnnouncer]=\"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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i2$2.TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: i2$2.TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "navigation"] }, { kind: "component", type: i4$1.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "directive", type: i2.DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: i1.PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: i1.FdpCellSelectableDirective, selector: "[fdTableCellSelectable], [fd-table-cell-selectable]", inputs: ["enabled"] }, { kind: "component", type: TableEditableCellComponent, selector: "fdp-table-editable-cell", inputs: ["row", "column", "columnValue"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.ValueByPathPipe, name: "valueByPath" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i1.SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: i1.TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: i1.ColumnResizableSidePipe, name: "columnResizableSide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2691
+ ], 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i2$2.TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: i2$2.TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "navigation"] }, { kind: "component", type: i4$1.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "directive", type: i2.DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: i1.PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: i1.FdpCellSelectableDirective, selector: "[fdTableCellSelectable], [fd-table-cell-selectable]", inputs: ["enabled"] }, { kind: "component", type: TableEditableCellComponent, selector: "fdp-table-editable-cell", inputs: ["row", "column", "columnValue"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.ValueByPathPipe, name: "valueByPath" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i1.SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: i1.TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: i1.ColumnResizableSidePipe, name: "columnResizableSide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2692
2692
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableRowComponent, decorators: [{
2693
2693
  type: Component,
2694
2694
  args: [{ selector: '[fdp-table-row]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -2697,7 +2697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
2697
2697
  useExisting: TableRowComponent
2698
2698
  },
2699
2699
  DestroyedService
2700
- ], 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 [cellFocusedEventAnnouncer]=\"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" }]
2700
+ ], 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" }]
2701
2701
  }], ctorParameters: function () { return []; }, propDecorators: { rowId: [{
2702
2702
  type: Input
2703
2703
  }], row: [{
@@ -2915,7 +2915,7 @@ TableHeaderRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
2915
2915
  useExisting: TableHeaderRowComponent
2916
2916
  },
2917
2917
  DestroyedService
2918
- ], viewQueries: [{ propertyName: "_focusableCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }], usesInheritance: true, ngImport: i0, template: "<th\n *ngIf=\"_fdpTableService._semanticHighlighting$ | async\"\n [class.fd-table__cell--fixed]=\"fixed\"\n fd-table-cell\n fd-table-status-indicator\n fdkDisabled\n [style.min-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n [style.max-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n></th>\n\n<th\n *ngIf=\"isShownSelectionColumn\"\n fd-table-cell\n [focusable]=\"true\"\n [class.fd-table__cell--fixed]=\"fixed\"\n class=\"fd-table__cell--checkbox\"\n [style]=\"\n _contentDensityObserver\n | async\n | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n \"\n (keydown.enter)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n (keydown.space)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n>\n <fd-checkbox\n tabIndexValue=\"-1\"\n *ngIf=\"selectionMode === SELECTION_MODE.MULTIPLE\"\n labelClass=\"fd-table__checkbox-label\"\n [fdkDisabled]=\"_fdpTableService.visibleColumnsLength === 0 || disableSelectionCheckbox\"\n [tristate]=\"true\"\n [tristateSelectable]=\"false\"\n [ngModel]=\"checkedState\"\n (ngModelChange)=\"_tableRowService.toggleAllSelectableRows($event)\"\n [attr.aria-description]=\"\n !checkedState\n ? ('platformTable.selectAllCheckboxLabel' | fdTranslate)\n : ('platformTable.deselectAllCheckboxLabel' | fdTranslate)\n \"\n ></fd-checkbox>\n</th>\n\n<ng-container\n *ngFor=\"\n let column of _fdpTableService.visibleColumns$ | async;\n let colIdx = index;\n trackBy: _columnTrackBy;\n last as isLast\n \"\n>\n <th\n [focusable]=\"true\"\n role=\"columnheader\"\n [fdpTableCellResizable]=\"\n colIdx\n | columnResizableSide\n : _fdpTableService.visibleColumnsLength\n : (_fdpTableService._isShownNavigationColumn$ | async)\n \"\n [columnName]=\"column.name\"\n [id]=\"rowId + '__' + column.name\"\n [attr.aria-colindex]=\"colIdx\"\n [ngClass]=\"[\n 'fdp-table__col--' + column.name,\n column._freezed ? 'fd-table__cell--fixed' : '',\n column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n isLast && (_fdpTableService._isShownNavigationColumn$ | async) !== true ? 'is-last-child' : '',\n _isColumnHasHeaderMenu(column) ? 'fd-table__item--clickable' : ''\n ]\"\n [ngStyle]=\"\n column\n | tableCellStyles\n : _rtl\n : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n : selectionColumnWidth\n : column._freezed\n : column._endFreezed\n : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n : _tableColumnResizeService.getColumnWidthStyle(column.name)\n : _tableColumnResizeService.getNextColumnsWidth(column.name)\n \"\n [fdPopoverTrigger]=\"tablePopover.popover\"\n [cellFocusedEventAnnouncer]=\"null\"\n (cellFocused)=\"_tableRowService.cellFocused($event)\"\n (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n >\n <fdp-table-header-cell-content\n [id]=\"rowId\"\n [column]=\"column\"\n [hasFilter]=\"(_fdpTableService.filterRules$ | async)?.has(column.key) === true\"\n [hasSorting]=\"(_fdpTableService.sortRules$ | async)?.has(column.key) === true\"\n [sorting]=\"(_fdpTableService.sortRules$ | async)?.get(column.key)\"\n [attr.title]=\"column?.headerOverflows ? column.label : null\"\n >\n <!-- Header menu -->\n <fdp-table-cell-header-popover\n #tablePopover\n [disabled]=\"!_isColumnHasHeaderMenu(column)\"\n [column]=\"column\"\n [popoverTemplate]=\"column.headerCellPopoverTemplate\"\n [filteringFromHeaderDisabled]=\"_fdpTableService._isFilteringFromHeaderDisabled$ | async\"\n ></fdp-table-cell-header-popover>\n </fdp-table-header-cell-content>\n </th>\n</ng-container>\n\n<th\n *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n fd-table-cell\n class=\"fdp-table__cell--navigation is-last-child\"\n role=\"columnheader\"\n></th>\n\n<th\n aria-hidden=\"true\"\n class=\"fd-table__cell fd-table__cell--mock\"\n [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n fdkDisabled\n></th>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i2$2.TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "component", type: i4$1.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "directive", type: i4$3.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "directive", type: i2.DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: i1.PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "component", type: TableHeaderCellContentComponent, selector: "fdp-table-header-cell-content", inputs: ["id", "column", "hasSorting", "hasFilter", "sorting"] }, { kind: "component", type: TableCellHeaderPopoverComponent, selector: "fdp-table-cell-header-popover", inputs: ["column", "popoverTemplate", "disabled", "columnFrozen", "filteringFromHeaderDisabled"], outputs: ["freezeToColumn", "unFreeze"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i1.SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: i1.TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: i1.ColumnResizableSidePipe, name: "columnResizableSide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2918
+ ], viewQueries: [{ propertyName: "_focusableCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }], usesInheritance: true, ngImport: i0, template: "<th\n *ngIf=\"_fdpTableService._semanticHighlighting$ | async\"\n [class.fd-table__cell--fixed]=\"fixed\"\n fd-table-cell\n fd-table-status-indicator\n fdkDisabled\n [style.min-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n [style.max-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n></th>\n\n<th\n *ngIf=\"isShownSelectionColumn\"\n fd-table-cell\n [focusable]=\"true\"\n [class.fd-table__cell--fixed]=\"fixed\"\n class=\"fd-table__cell--checkbox\"\n [style]=\"\n _contentDensityObserver\n | async\n | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n \"\n (keydown.enter)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n (keydown.space)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n [attr.aria-description]=\"\n !checkedState\n ? ('platformTable.selectAllCheckboxLabel' | fdTranslate)\n : ('platformTable.deselectAllCheckboxLabel' | fdTranslate)\n \"\n>\n <fd-checkbox\n tabIndexValue=\"-1\"\n *ngIf=\"selectionMode === SELECTION_MODE.MULTIPLE\"\n labelClass=\"fd-table__checkbox-label\"\n [fdkDisabled]=\"_fdpTableService.visibleColumnsLength === 0 || disableSelectionCheckbox\"\n [tristate]=\"true\"\n [tristateSelectable]=\"false\"\n [ngModel]=\"checkedState\"\n (ngModelChange)=\"_tableRowService.toggleAllSelectableRows($event)\"\n ></fd-checkbox>\n</th>\n\n<ng-container\n *ngFor=\"\n let column of _fdpTableService.visibleColumns$ | async;\n let colIdx = index;\n trackBy: _columnTrackBy;\n last as isLast\n \"\n>\n <th\n [focusable]=\"true\"\n role=\"columnheader\"\n [fdpTableCellResizable]=\"\n colIdx\n | columnResizableSide\n : _fdpTableService.visibleColumnsLength\n : (_fdpTableService._isShownNavigationColumn$ | async)\n \"\n [columnName]=\"column.name\"\n [id]=\"rowId + '__' + column.name\"\n [attr.aria-colindex]=\"colIdx\"\n [ngClass]=\"[\n 'fdp-table__col--' + column.name,\n column._freezed ? 'fd-table__cell--fixed' : '',\n column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n isLast && (_fdpTableService._isShownNavigationColumn$ | async) !== true ? 'is-last-child' : '',\n _isColumnHasHeaderMenu(column) ? 'fd-table__item--clickable' : ''\n ]\"\n [ngStyle]=\"\n column\n | tableCellStyles\n : _rtl\n : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n : selectionColumnWidth\n : column._freezed\n : column._endFreezed\n : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n : _tableColumnResizeService.getColumnWidthStyle(column.name)\n : _tableColumnResizeService.getNextColumnsWidth(column.name)\n \"\n [fdPopoverTrigger]=\"tablePopover.popover\"\n (cellFocused)=\"_tableRowService.cellFocused($event)\"\n (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n >\n <fdp-table-header-cell-content\n [id]=\"rowId\"\n [column]=\"column\"\n [hasFilter]=\"(_fdpTableService.filterRules$ | async)?.has(column.key) === true\"\n [hasSorting]=\"(_fdpTableService.sortRules$ | async)?.has(column.key) === true\"\n [sorting]=\"(_fdpTableService.sortRules$ | async)?.get(column.key)\"\n [attr.title]=\"column?.headerOverflows ? column.label : null\"\n >\n <!-- Header menu -->\n <fdp-table-cell-header-popover\n #tablePopover\n [disabled]=\"!_isColumnHasHeaderMenu(column)\"\n [column]=\"column\"\n [popoverTemplate]=\"column.headerCellPopoverTemplate\"\n [filteringFromHeaderDisabled]=\"_fdpTableService._isFilteringFromHeaderDisabled$ | async\"\n ></fdp-table-cell-header-popover>\n </fdp-table-header-cell-content>\n </th>\n</ng-container>\n\n<th\n *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n fd-table-cell\n class=\"fdp-table__cell--navigation is-last-child\"\n role=\"columnheader\"\n></th>\n\n<th\n aria-hidden=\"true\"\n class=\"fd-table__cell fd-table__cell--mock\"\n [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n fdkDisabled\n></th>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i2$2.TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "component", type: i4$1.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "directive", type: i4$3.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "directive", type: i2.DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: i1.PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "component", type: TableHeaderCellContentComponent, selector: "fdp-table-header-cell-content", inputs: ["id", "column", "hasSorting", "hasFilter", "sorting"] }, { kind: "component", type: TableCellHeaderPopoverComponent, selector: "fdp-table-cell-header-popover", inputs: ["column", "popoverTemplate", "disabled", "columnFrozen", "filteringFromHeaderDisabled"], outputs: ["freezeToColumn", "unFreeze"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i1.SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: i1.TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: i1.ColumnResizableSidePipe, name: "columnResizableSide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2919
2919
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableHeaderRowComponent, decorators: [{
2920
2920
  type: Component,
2921
2921
  args: [{ selector: '[fdp-table-header-row]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -2924,7 +2924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
2924
2924
  useExisting: TableHeaderRowComponent
2925
2925
  },
2926
2926
  DestroyedService
2927
- ], template: "<th\n *ngIf=\"_fdpTableService._semanticHighlighting$ | async\"\n [class.fd-table__cell--fixed]=\"fixed\"\n fd-table-cell\n fd-table-status-indicator\n fdkDisabled\n [style.min-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n [style.max-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n></th>\n\n<th\n *ngIf=\"isShownSelectionColumn\"\n fd-table-cell\n [focusable]=\"true\"\n [class.fd-table__cell--fixed]=\"fixed\"\n class=\"fd-table__cell--checkbox\"\n [style]=\"\n _contentDensityObserver\n | async\n | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n \"\n (keydown.enter)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n (keydown.space)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n>\n <fd-checkbox\n tabIndexValue=\"-1\"\n *ngIf=\"selectionMode === SELECTION_MODE.MULTIPLE\"\n labelClass=\"fd-table__checkbox-label\"\n [fdkDisabled]=\"_fdpTableService.visibleColumnsLength === 0 || disableSelectionCheckbox\"\n [tristate]=\"true\"\n [tristateSelectable]=\"false\"\n [ngModel]=\"checkedState\"\n (ngModelChange)=\"_tableRowService.toggleAllSelectableRows($event)\"\n [attr.aria-description]=\"\n !checkedState\n ? ('platformTable.selectAllCheckboxLabel' | fdTranslate)\n : ('platformTable.deselectAllCheckboxLabel' | fdTranslate)\n \"\n ></fd-checkbox>\n</th>\n\n<ng-container\n *ngFor=\"\n let column of _fdpTableService.visibleColumns$ | async;\n let colIdx = index;\n trackBy: _columnTrackBy;\n last as isLast\n \"\n>\n <th\n [focusable]=\"true\"\n role=\"columnheader\"\n [fdpTableCellResizable]=\"\n colIdx\n | columnResizableSide\n : _fdpTableService.visibleColumnsLength\n : (_fdpTableService._isShownNavigationColumn$ | async)\n \"\n [columnName]=\"column.name\"\n [id]=\"rowId + '__' + column.name\"\n [attr.aria-colindex]=\"colIdx\"\n [ngClass]=\"[\n 'fdp-table__col--' + column.name,\n column._freezed ? 'fd-table__cell--fixed' : '',\n column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n isLast && (_fdpTableService._isShownNavigationColumn$ | async) !== true ? 'is-last-child' : '',\n _isColumnHasHeaderMenu(column) ? 'fd-table__item--clickable' : ''\n ]\"\n [ngStyle]=\"\n column\n | tableCellStyles\n : _rtl\n : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n : selectionColumnWidth\n : column._freezed\n : column._endFreezed\n : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n : _tableColumnResizeService.getColumnWidthStyle(column.name)\n : _tableColumnResizeService.getNextColumnsWidth(column.name)\n \"\n [fdPopoverTrigger]=\"tablePopover.popover\"\n [cellFocusedEventAnnouncer]=\"null\"\n (cellFocused)=\"_tableRowService.cellFocused($event)\"\n (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n >\n <fdp-table-header-cell-content\n [id]=\"rowId\"\n [column]=\"column\"\n [hasFilter]=\"(_fdpTableService.filterRules$ | async)?.has(column.key) === true\"\n [hasSorting]=\"(_fdpTableService.sortRules$ | async)?.has(column.key) === true\"\n [sorting]=\"(_fdpTableService.sortRules$ | async)?.get(column.key)\"\n [attr.title]=\"column?.headerOverflows ? column.label : null\"\n >\n <!-- Header menu -->\n <fdp-table-cell-header-popover\n #tablePopover\n [disabled]=\"!_isColumnHasHeaderMenu(column)\"\n [column]=\"column\"\n [popoverTemplate]=\"column.headerCellPopoverTemplate\"\n [filteringFromHeaderDisabled]=\"_fdpTableService._isFilteringFromHeaderDisabled$ | async\"\n ></fdp-table-cell-header-popover>\n </fdp-table-header-cell-content>\n </th>\n</ng-container>\n\n<th\n *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n fd-table-cell\n class=\"fdp-table__cell--navigation is-last-child\"\n role=\"columnheader\"\n></th>\n\n<th\n aria-hidden=\"true\"\n class=\"fd-table__cell fd-table__cell--mock\"\n [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n fdkDisabled\n></th>\n" }]
2927
+ ], template: "<th\n *ngIf=\"_fdpTableService._semanticHighlighting$ | async\"\n [class.fd-table__cell--fixed]=\"fixed\"\n fd-table-cell\n fd-table-status-indicator\n fdkDisabled\n [style.min-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n [style.max-width]=\"_fdpTableService._semanticHighlightingColumnWidth$ | async\"\n></th>\n\n<th\n *ngIf=\"isShownSelectionColumn\"\n fd-table-cell\n [focusable]=\"true\"\n [class.fd-table__cell--fixed]=\"fixed\"\n class=\"fd-table__cell--checkbox\"\n [style]=\"\n _contentDensityObserver\n | async\n | selectionCellStyles : _rtl : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n \"\n (keydown.enter)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n (keydown.space)=\"_tableRowService.toggleAllSelectableRows(!checkedState)\"\n [attr.aria-description]=\"\n !checkedState\n ? ('platformTable.selectAllCheckboxLabel' | fdTranslate)\n : ('platformTable.deselectAllCheckboxLabel' | fdTranslate)\n \"\n>\n <fd-checkbox\n tabIndexValue=\"-1\"\n *ngIf=\"selectionMode === SELECTION_MODE.MULTIPLE\"\n labelClass=\"fd-table__checkbox-label\"\n [fdkDisabled]=\"_fdpTableService.visibleColumnsLength === 0 || disableSelectionCheckbox\"\n [tristate]=\"true\"\n [tristateSelectable]=\"false\"\n [ngModel]=\"checkedState\"\n (ngModelChange)=\"_tableRowService.toggleAllSelectableRows($event)\"\n ></fd-checkbox>\n</th>\n\n<ng-container\n *ngFor=\"\n let column of _fdpTableService.visibleColumns$ | async;\n let colIdx = index;\n trackBy: _columnTrackBy;\n last as isLast\n \"\n>\n <th\n [focusable]=\"true\"\n role=\"columnheader\"\n [fdpTableCellResizable]=\"\n colIdx\n | columnResizableSide\n : _fdpTableService.visibleColumnsLength\n : (_fdpTableService._isShownNavigationColumn$ | async)\n \"\n [columnName]=\"column.name\"\n [id]=\"rowId + '__' + column.name\"\n [attr.aria-colindex]=\"colIdx\"\n [ngClass]=\"[\n 'fdp-table__col--' + column.name,\n column._freezed ? 'fd-table__cell--fixed' : '',\n column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n isLast && (_fdpTableService._isShownNavigationColumn$ | async) !== true ? 'is-last-child' : '',\n _isColumnHasHeaderMenu(column) ? 'fd-table__item--clickable' : ''\n ]\"\n [ngStyle]=\"\n column\n | tableCellStyles\n : _rtl\n : (_fdpTableService._semanticHighlightingColumnWidth$ | async)\n : selectionColumnWidth\n : column._freezed\n : column._endFreezed\n : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n : _tableColumnResizeService.getColumnWidthStyle(column.name)\n : _tableColumnResizeService.getNextColumnsWidth(column.name)\n \"\n [fdPopoverTrigger]=\"tablePopover.popover\"\n (cellFocused)=\"_tableRowService.cellFocused($event)\"\n (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n >\n <fdp-table-header-cell-content\n [id]=\"rowId\"\n [column]=\"column\"\n [hasFilter]=\"(_fdpTableService.filterRules$ | async)?.has(column.key) === true\"\n [hasSorting]=\"(_fdpTableService.sortRules$ | async)?.has(column.key) === true\"\n [sorting]=\"(_fdpTableService.sortRules$ | async)?.get(column.key)\"\n [attr.title]=\"column?.headerOverflows ? column.label : null\"\n >\n <!-- Header menu -->\n <fdp-table-cell-header-popover\n #tablePopover\n [disabled]=\"!_isColumnHasHeaderMenu(column)\"\n [column]=\"column\"\n [popoverTemplate]=\"column.headerCellPopoverTemplate\"\n [filteringFromHeaderDisabled]=\"_fdpTableService._isFilteringFromHeaderDisabled$ | async\"\n ></fdp-table-cell-header-popover>\n </fdp-table-header-cell-content>\n </th>\n</ng-container>\n\n<th\n *ngIf=\"_fdpTableService._isShownNavigationColumn$ | async\"\n fd-table-cell\n class=\"fdp-table__cell--navigation is-last-child\"\n role=\"columnheader\"\n></th>\n\n<th\n aria-hidden=\"true\"\n class=\"fd-table__cell fd-table__cell--mock\"\n [class.fd-table__cell--mock-borderless]=\"(_tableColumnResizeService.cellMockVisible$ | async) !== true\"\n fdkDisabled\n></th>\n" }]
2928
2928
  }], ctorParameters: function () { return []; }, propDecorators: { rowId: [{
2929
2929
  type: Input
2930
2930
  }], fixed: [{