@fundamental-ngx/platform 0.62.3-rc.0 → 0.62.3-rc.1
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.
|
@@ -3303,6 +3303,11 @@ class TableHeaderRowComponent extends TableRowDirective {
|
|
|
3303
3303
|
this.noBorders = false;
|
|
3304
3304
|
/** @hidden */
|
|
3305
3305
|
this.disableSelectionCheckbox = false;
|
|
3306
|
+
/**
|
|
3307
|
+
* @hidden
|
|
3308
|
+
* Used to remove the selection column title, to prevent screenreader from reading "Select All" when focusing non-header cells
|
|
3309
|
+
* */
|
|
3310
|
+
this.selectionColumnHeaderDisableTitle = signal(true, ...(ngDevMode ? [{ debugName: "selectionColumnHeaderDisableTitle" }] : []));
|
|
3306
3311
|
/** @hidden */
|
|
3307
3312
|
this.SELECTION_MODE = SelectionMode;
|
|
3308
3313
|
/** @hidden */
|
|
@@ -3345,7 +3350,7 @@ class TableHeaderRowComponent extends TableRowDirective {
|
|
|
3345
3350
|
provide: FDK_FOCUSABLE_LIST_DIRECTIVE,
|
|
3346
3351
|
useExisting: TableHeaderRowComponent
|
|
3347
3352
|
}
|
|
3348
|
-
], viewQueries: [{ propertyName: "_focusableCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (_fdpTableService._semanticHighlighting$()) {\n <th\n [class.fd-table__cell--fixed]=\"fixed\"\n class=\"fd-table__cell\"\n [ngClass]=\"{\n 'fd-table__cell--no-horizontal-border': noHorizontalBorders || noBorders,\n 'fd-table__cell--no-vertical-border': noVerticalBorders || noBorders\n }\"\n fd-table-status-indicator\n fdkDisabled\n [style.min-width]=\"_fdpTableService._semanticHighlightingColumnWidth$()\"\n [style.max-width]=\"_fdpTableService._semanticHighlightingColumnWidth$()\"\n ></th>\n}\n\n@if (isShownSelectionColumn) {\n <th\n fd-table-cell\n [ngClass]=\"{\n 'fd-table__cell--no-horizontal-border': noHorizontalBorders || noBorders,\n 'fd-table__cell--no-vertical-border': noVerticalBorders || noBorders\n }\"\n [focusable]=\"true\"\n [class.fd-table__cell--fixed]=\"fixed\"\n class=\"fd-table__cell--checkbox\"\n [style]=\"\n _contentDensityObserver.contentDensity$()\n | selectionCellStyles: isRtl() : _fdpTableService._semanticHighlightingColumnWidth$()\n \"\n (keydown.enter)=\"\n selectionMode === SELECTION_MODE.MULTIPLE && _tableRowService.toggleAllSelectableRows(!checkedState)\n \"\n (keydown.space)=\"\n selectionMode === SELECTION_MODE.MULTIPLE && _tableRowService.toggleAllSelectableRows(!checkedState);\n $event.preventDefault()\n \"\n (cellFocused)=\"_tableRowService.cellFocused($event)\"\n [attr.title]=\"\n !checkedState\n ? ('platformTable.selectAllCheckboxLabel' | fdTranslate)()\n : ('platformTable.deselectAllCheckboxLabel' | fdTranslate)()\n \"\n [attr.aria-description]=\"\n checkedState\n ? ('platformTable.deselectAllCheckboxLongLabel' | fdTranslate)()\n : checkedState === null\n ? ('platformTable.selectAllCheckboxMixedLongLabel' | fdTranslate)()\n : ('platformTable.selectAllCheckboxLongLabel' | fdTranslate)()\n \"\n >\n @if (selectionMode === SELECTION_MODE.MULTIPLE) {\n <fd-checkbox\n tabIndexValue=\"-1\"\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 }\n </th>\n}\n\n@for (column of _fdpTableService.visibleColumns$(); track column.name) {\n <th\n [focusable]=\"true\"\n role=\"columnheader\"\n [fdpTableCellResizable]=\"\n $index\n | columnResizableSide\n : _fdpTableService.visibleColumnsLength()\n : _fdpTableService._isShownNavigationColumn$()\n \"\n [columnName]=\"column.name\"\n [id]=\"rowId + '__' + column.name\"\n [attr.aria-colindex]=\"$index\"\n [attr.aria-sort]=\"_fdpTableService.sortRules$().get(column.key) | fdpTableColumnSortingDirection\"\n [class.fd-table__cell--non-interactive]=\"column.nonInteractive\"\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 $last && !_fdpTableService._isShownNavigationColumn$() ? 'is-last-child' : '',\n (column | isColumnHasHeaderMenu) ? 'fd-table__item--clickable' : ''\n ]\"\n [ngStyle]=\"\n column\n | tableCellStyles\n : isRtl()\n : _fdpTableService._semanticHighlightingColumnWidth$()\n : selectionColumnWidth\n : column._freezed\n : column._endFreezed\n : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n : _tableColumnResizeService.getColumnWidthStyle(column.name)\n : _tableColumnResizeService.getNextColumnsWidth(column.name)\n : noBorders\n : noHorizontalBorders\n : noVerticalBorders\n \"\n [fdPopoverTrigger]=\"(column | isColumnHasHeaderMenu) ? tablePopover.popover : null\"\n (cellFocused)=\"_tableRowService.cellFocused($event)\"\n (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n >\n <fdp-table-header-cell-content [id]=\"rowId\" [column]=\"column\" [attr.title]=\"column.label\">\n <!-- Header menu -->\n <fdp-table-cell-header-popover\n #tablePopover\n [disabled]=\"!(column | isColumnHasHeaderMenu)\"\n [columnFrozen]=\"column._freezed || column._endFreezed\"\n [column]=\"column\"\n [columnIndex]=\"$index\"\n [popoverTemplate]=\"(column | isColumnHasHeaderMenu) ? column.headerCellPopoverTemplate : null\"\n [filteringFromHeaderDisabled]=\"_fdpTableService._isFilteringFromHeaderDisabled$()\"\n ></fdp-table-cell-header-popover>\n </fdp-table-header-cell-content>\n </th>\n}\n\n@if (_fdpTableService._isShownNavigationColumn$()) {\n <th\n [ngClass]=\"{\n 'fd-table__cell--no-horizontal-border': noHorizontalBorders || noBorders,\n 'fd-table__cell--no-vertical-border': noVerticalBorders || noBorders\n }\"\n class=\"fd-table__cell fdp-table__cell--navigation is-last-child\"\n role=\"columnheader\"\n tabindex=\"-1\"\n >\n <span class=\"fd-table__sr-only\">\n {{ ('platformTable.navigationColumnTitle' | fdTranslate)() }}\n </span>\n </th>\n}\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$()\"\n fdkDisabled\n></th>\n", styles: [".fd-table__sr-only{position:absolute;clip:rect(0,0,0,0);height:1px;width:1px;border:0;margin:-1px;padding:0;overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => TableCellDirective), selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "nonInteractive", "key"] }, { kind: "directive", type: i0.forwardRef(() => TableStatusIndicatorDirective), selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: i0.forwardRef(() => DisabledBehaviorDirective), selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "component", type: i0.forwardRef(() => CheckboxComponent), selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$2.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(() => PlatformTableCellResizableDirective), selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => PopoverTriggerDirective), selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: i0.forwardRef(() => TableHeaderCellContentComponent), selector: "fdp-table-header-cell-content", inputs: ["id", "column"] }, { kind: "component", type: i0.forwardRef(() => TableCellHeaderPopoverComponent), selector: "fdp-table-cell-header-popover", inputs: ["column", "popoverTemplate", "disabled", "columnFrozen", "filteringFromHeaderDisabled", "columnIndex"] }, { kind: "pipe", type: i0.forwardRef(() => FdTranslatePipe), name: "fdTranslate" }, { kind: "pipe", type: i0.forwardRef(() => SelectionCellStylesPipe), name: "selectionCellStyles" }, { kind: "pipe", type: i0.forwardRef(() => TableCellStylesPipe), name: "tableCellStyles" }, { kind: "pipe", type: i0.forwardRef(() => ColumnResizableSidePipe), name: "columnResizableSide" }, { kind: "pipe", type: i0.forwardRef(() => TableColumnSortingDirectionPipe), name: "fdpTableColumnSortingDirection" }, { kind: "pipe", type: i0.forwardRef(() => IsColumnHasHeaderMenuPipe), name: "isColumnHasHeaderMenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3353
|
+
], viewQueries: [{ propertyName: "_focusableCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (_fdpTableService._semanticHighlighting$()) {\n <th\n [class.fd-table__cell--fixed]=\"fixed\"\n class=\"fd-table__cell\"\n [ngClass]=\"{\n 'fd-table__cell--no-horizontal-border': noHorizontalBorders || noBorders,\n 'fd-table__cell--no-vertical-border': noVerticalBorders || noBorders\n }\"\n fd-table-status-indicator\n fdkDisabled\n [style.min-width]=\"_fdpTableService._semanticHighlightingColumnWidth$()\"\n [style.max-width]=\"_fdpTableService._semanticHighlightingColumnWidth$()\"\n ></th>\n}\n\n@if (isShownSelectionColumn) {\n <th\n fd-table-cell\n [ngClass]=\"{\n 'fd-table__cell--no-horizontal-border': noHorizontalBorders || noBorders,\n 'fd-table__cell--no-vertical-border': noVerticalBorders || noBorders\n }\"\n [focusable]=\"true\"\n [class.fd-table__cell--fixed]=\"fixed\"\n class=\"fd-table__cell--checkbox\"\n [style]=\"\n _contentDensityObserver.contentDensity$()\n | selectionCellStyles: isRtl() : _fdpTableService._semanticHighlightingColumnWidth$()\n \"\n (keydown.enter)=\"\n selectionMode === SELECTION_MODE.MULTIPLE && _tableRowService.toggleAllSelectableRows(!checkedState)\n \"\n (keydown.space)=\"\n selectionMode === SELECTION_MODE.MULTIPLE && _tableRowService.toggleAllSelectableRows(!checkedState);\n $event.preventDefault()\n \"\n (cellFocused)=\"_tableRowService.cellFocused($event)\"\n (mouseenter)=\"selectionColumnHeaderDisableTitle.set(false)\"\n (mouseleave)=\"selectionColumnHeaderDisableTitle.set(true)\"\n (focusin)=\"selectionColumnHeaderDisableTitle.set(false)\"\n (focusout)=\"selectionColumnHeaderDisableTitle.set(true)\"\n [attr.title]=\"\n selectionMode === SELECTION_MODE.SINGLE || selectionColumnHeaderDisableTitle()\n ? null\n : !checkedState\n ? ('platformTable.selectAllCheckboxLabel' | fdTranslate)()\n : ('platformTable.deselectAllCheckboxLabel' | fdTranslate)()\n \"\n [attr.aria-description]=\"\n selectionMode === SELECTION_MODE.SINGLE\n ? null\n : checkedState\n ? ('platformTable.deselectAllCheckboxLongLabel' | fdTranslate)()\n : checkedState === null\n ? ('platformTable.selectAllCheckboxMixedLongLabel' | fdTranslate)()\n : ('platformTable.selectAllCheckboxLongLabel' | fdTranslate)()\n \"\n >\n @if (selectionMode === SELECTION_MODE.MULTIPLE) {\n <fd-checkbox\n tabIndexValue=\"-1\"\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 }\n </th>\n}\n\n@for (column of _fdpTableService.visibleColumns$(); track column.name) {\n <th\n [focusable]=\"true\"\n role=\"columnheader\"\n [fdpTableCellResizable]=\"\n $index\n | columnResizableSide\n : _fdpTableService.visibleColumnsLength()\n : _fdpTableService._isShownNavigationColumn$()\n \"\n [columnName]=\"column.name\"\n [id]=\"rowId + '__' + column.name\"\n [attr.aria-colindex]=\"$index\"\n [attr.aria-sort]=\"_fdpTableService.sortRules$().get(column.key) | fdpTableColumnSortingDirection\"\n [class.fd-table__cell--non-interactive]=\"column.nonInteractive\"\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 $last && !_fdpTableService._isShownNavigationColumn$() ? 'is-last-child' : '',\n (column | isColumnHasHeaderMenu) ? 'fd-table__item--clickable' : ''\n ]\"\n [ngStyle]=\"\n column\n | tableCellStyles\n : isRtl()\n : _fdpTableService._semanticHighlightingColumnWidth$()\n : selectionColumnWidth\n : column._freezed\n : column._endFreezed\n : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n : _tableColumnResizeService.getColumnWidthStyle(column.name)\n : _tableColumnResizeService.getNextColumnsWidth(column.name)\n : noBorders\n : noHorizontalBorders\n : noVerticalBorders\n \"\n [fdPopoverTrigger]=\"(column | isColumnHasHeaderMenu) ? tablePopover.popover : null\"\n (cellFocused)=\"_tableRowService.cellFocused($event)\"\n (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n >\n <fdp-table-header-cell-content [id]=\"rowId\" [column]=\"column\" [attr.title]=\"column.label\">\n <!-- Header menu -->\n <fdp-table-cell-header-popover\n #tablePopover\n [disabled]=\"!(column | isColumnHasHeaderMenu)\"\n [columnFrozen]=\"column._freezed || column._endFreezed\"\n [column]=\"column\"\n [columnIndex]=\"$index\"\n [popoverTemplate]=\"(column | isColumnHasHeaderMenu) ? column.headerCellPopoverTemplate : null\"\n [filteringFromHeaderDisabled]=\"_fdpTableService._isFilteringFromHeaderDisabled$()\"\n ></fdp-table-cell-header-popover>\n </fdp-table-header-cell-content>\n </th>\n}\n\n@if (_fdpTableService._isShownNavigationColumn$()) {\n <th\n [ngClass]=\"{\n 'fd-table__cell--no-horizontal-border': noHorizontalBorders || noBorders,\n 'fd-table__cell--no-vertical-border': noVerticalBorders || noBorders\n }\"\n class=\"fd-table__cell fdp-table__cell--navigation is-last-child\"\n role=\"columnheader\"\n tabindex=\"-1\"\n >\n <span class=\"fd-table__sr-only\">\n {{ ('platformTable.navigationColumnTitle' | fdTranslate)() }}\n </span>\n </th>\n}\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$()\"\n fdkDisabled\n></th>\n", styles: [".fd-table__sr-only{position:absolute;clip:rect(0,0,0,0);height:1px;width:1px;border:0;margin:-1px;padding:0;overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => TableCellDirective), selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "nonInteractive", "key"] }, { kind: "directive", type: i0.forwardRef(() => TableStatusIndicatorDirective), selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: i0.forwardRef(() => DisabledBehaviorDirective), selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "component", type: i0.forwardRef(() => CheckboxComponent), selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$2.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(() => PlatformTableCellResizableDirective), selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => PopoverTriggerDirective), selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: i0.forwardRef(() => TableHeaderCellContentComponent), selector: "fdp-table-header-cell-content", inputs: ["id", "column"] }, { kind: "component", type: i0.forwardRef(() => TableCellHeaderPopoverComponent), selector: "fdp-table-cell-header-popover", inputs: ["column", "popoverTemplate", "disabled", "columnFrozen", "filteringFromHeaderDisabled", "columnIndex"] }, { kind: "pipe", type: i0.forwardRef(() => FdTranslatePipe), name: "fdTranslate" }, { kind: "pipe", type: i0.forwardRef(() => SelectionCellStylesPipe), name: "selectionCellStyles" }, { kind: "pipe", type: i0.forwardRef(() => TableCellStylesPipe), name: "tableCellStyles" }, { kind: "pipe", type: i0.forwardRef(() => ColumnResizableSidePipe), name: "columnResizableSide" }, { kind: "pipe", type: i0.forwardRef(() => TableColumnSortingDirectionPipe), name: "fdpTableColumnSortingDirection" }, { kind: "pipe", type: i0.forwardRef(() => IsColumnHasHeaderMenuPipe), name: "isColumnHasHeaderMenu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3349
3354
|
}
|
|
3350
3355
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableHeaderRowComponent, decorators: [{
|
|
3351
3356
|
type: Component,
|
|
@@ -3374,7 +3379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
3374
3379
|
ColumnResizableSidePipe,
|
|
3375
3380
|
TableColumnSortingDirectionPipe,
|
|
3376
3381
|
forwardRef(() => IsColumnHasHeaderMenuPipe)
|
|
3377
|
-
], template: "@if (_fdpTableService._semanticHighlighting$()) {\n <th\n [class.fd-table__cell--fixed]=\"fixed\"\n class=\"fd-table__cell\"\n [ngClass]=\"{\n 'fd-table__cell--no-horizontal-border': noHorizontalBorders || noBorders,\n 'fd-table__cell--no-vertical-border': noVerticalBorders || noBorders\n }\"\n fd-table-status-indicator\n fdkDisabled\n [style.min-width]=\"_fdpTableService._semanticHighlightingColumnWidth$()\"\n [style.max-width]=\"_fdpTableService._semanticHighlightingColumnWidth$()\"\n ></th>\n}\n\n@if (isShownSelectionColumn) {\n <th\n fd-table-cell\n [ngClass]=\"{\n 'fd-table__cell--no-horizontal-border': noHorizontalBorders || noBorders,\n 'fd-table__cell--no-vertical-border': noVerticalBorders || noBorders\n }\"\n [focusable]=\"true\"\n [class.fd-table__cell--fixed]=\"fixed\"\n class=\"fd-table__cell--checkbox\"\n [style]=\"\n _contentDensityObserver.contentDensity$()\n | selectionCellStyles: isRtl() : _fdpTableService._semanticHighlightingColumnWidth$()\n \"\n (keydown.enter)=\"\n selectionMode === SELECTION_MODE.MULTIPLE && _tableRowService.toggleAllSelectableRows(!checkedState)\n \"\n (keydown.space)=\"\n selectionMode === SELECTION_MODE.MULTIPLE && _tableRowService.toggleAllSelectableRows(!checkedState);\n $event.preventDefault()\n \"\n (cellFocused)=\"_tableRowService.cellFocused($event)\"\n [attr.title]=\"\n !checkedState\n
|
|
3382
|
+
], template: "@if (_fdpTableService._semanticHighlighting$()) {\n <th\n [class.fd-table__cell--fixed]=\"fixed\"\n class=\"fd-table__cell\"\n [ngClass]=\"{\n 'fd-table__cell--no-horizontal-border': noHorizontalBorders || noBorders,\n 'fd-table__cell--no-vertical-border': noVerticalBorders || noBorders\n }\"\n fd-table-status-indicator\n fdkDisabled\n [style.min-width]=\"_fdpTableService._semanticHighlightingColumnWidth$()\"\n [style.max-width]=\"_fdpTableService._semanticHighlightingColumnWidth$()\"\n ></th>\n}\n\n@if (isShownSelectionColumn) {\n <th\n fd-table-cell\n [ngClass]=\"{\n 'fd-table__cell--no-horizontal-border': noHorizontalBorders || noBorders,\n 'fd-table__cell--no-vertical-border': noVerticalBorders || noBorders\n }\"\n [focusable]=\"true\"\n [class.fd-table__cell--fixed]=\"fixed\"\n class=\"fd-table__cell--checkbox\"\n [style]=\"\n _contentDensityObserver.contentDensity$()\n | selectionCellStyles: isRtl() : _fdpTableService._semanticHighlightingColumnWidth$()\n \"\n (keydown.enter)=\"\n selectionMode === SELECTION_MODE.MULTIPLE && _tableRowService.toggleAllSelectableRows(!checkedState)\n \"\n (keydown.space)=\"\n selectionMode === SELECTION_MODE.MULTIPLE && _tableRowService.toggleAllSelectableRows(!checkedState);\n $event.preventDefault()\n \"\n (cellFocused)=\"_tableRowService.cellFocused($event)\"\n (mouseenter)=\"selectionColumnHeaderDisableTitle.set(false)\"\n (mouseleave)=\"selectionColumnHeaderDisableTitle.set(true)\"\n (focusin)=\"selectionColumnHeaderDisableTitle.set(false)\"\n (focusout)=\"selectionColumnHeaderDisableTitle.set(true)\"\n [attr.title]=\"\n selectionMode === SELECTION_MODE.SINGLE || selectionColumnHeaderDisableTitle()\n ? null\n : !checkedState\n ? ('platformTable.selectAllCheckboxLabel' | fdTranslate)()\n : ('platformTable.deselectAllCheckboxLabel' | fdTranslate)()\n \"\n [attr.aria-description]=\"\n selectionMode === SELECTION_MODE.SINGLE\n ? null\n : checkedState\n ? ('platformTable.deselectAllCheckboxLongLabel' | fdTranslate)()\n : checkedState === null\n ? ('platformTable.selectAllCheckboxMixedLongLabel' | fdTranslate)()\n : ('platformTable.selectAllCheckboxLongLabel' | fdTranslate)()\n \"\n >\n @if (selectionMode === SELECTION_MODE.MULTIPLE) {\n <fd-checkbox\n tabIndexValue=\"-1\"\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 }\n </th>\n}\n\n@for (column of _fdpTableService.visibleColumns$(); track column.name) {\n <th\n [focusable]=\"true\"\n role=\"columnheader\"\n [fdpTableCellResizable]=\"\n $index\n | columnResizableSide\n : _fdpTableService.visibleColumnsLength()\n : _fdpTableService._isShownNavigationColumn$()\n \"\n [columnName]=\"column.name\"\n [id]=\"rowId + '__' + column.name\"\n [attr.aria-colindex]=\"$index\"\n [attr.aria-sort]=\"_fdpTableService.sortRules$().get(column.key) | fdpTableColumnSortingDirection\"\n [class.fd-table__cell--non-interactive]=\"column.nonInteractive\"\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 $last && !_fdpTableService._isShownNavigationColumn$() ? 'is-last-child' : '',\n (column | isColumnHasHeaderMenu) ? 'fd-table__item--clickable' : ''\n ]\"\n [ngStyle]=\"\n column\n | tableCellStyles\n : isRtl()\n : _fdpTableService._semanticHighlightingColumnWidth$()\n : selectionColumnWidth\n : column._freezed\n : column._endFreezed\n : _tableColumnResizeService.getPrevColumnsWidth(column.name)\n : _tableColumnResizeService.getColumnWidthStyle(column.name)\n : _tableColumnResizeService.getNextColumnsWidth(column.name)\n : noBorders\n : noHorizontalBorders\n : noVerticalBorders\n \"\n [fdPopoverTrigger]=\"(column | isColumnHasHeaderMenu) ? tablePopover.popover : null\"\n (cellFocused)=\"_tableRowService.cellFocused($event)\"\n (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n >\n <fdp-table-header-cell-content [id]=\"rowId\" [column]=\"column\" [attr.title]=\"column.label\">\n <!-- Header menu -->\n <fdp-table-cell-header-popover\n #tablePopover\n [disabled]=\"!(column | isColumnHasHeaderMenu)\"\n [columnFrozen]=\"column._freezed || column._endFreezed\"\n [column]=\"column\"\n [columnIndex]=\"$index\"\n [popoverTemplate]=\"(column | isColumnHasHeaderMenu) ? column.headerCellPopoverTemplate : null\"\n [filteringFromHeaderDisabled]=\"_fdpTableService._isFilteringFromHeaderDisabled$()\"\n ></fdp-table-cell-header-popover>\n </fdp-table-header-cell-content>\n </th>\n}\n\n@if (_fdpTableService._isShownNavigationColumn$()) {\n <th\n [ngClass]=\"{\n 'fd-table__cell--no-horizontal-border': noHorizontalBorders || noBorders,\n 'fd-table__cell--no-vertical-border': noVerticalBorders || noBorders\n }\"\n class=\"fd-table__cell fdp-table__cell--navigation is-last-child\"\n role=\"columnheader\"\n tabindex=\"-1\"\n >\n <span class=\"fd-table__sr-only\">\n {{ ('platformTable.navigationColumnTitle' | fdTranslate)() }}\n </span>\n </th>\n}\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$()\"\n fdkDisabled\n></th>\n", styles: [".fd-table__sr-only{position:absolute;clip:rect(0,0,0,0);height:1px;width:1px;border:0;margin:-1px;padding:0;overflow:hidden;white-space:nowrap}\n"] }]
|
|
3378
3383
|
}], propDecorators: { rowId: [{
|
|
3379
3384
|
type: Input
|
|
3380
3385
|
}], fixed: [{
|