@fundamental-ngx/platform 0.57.4-rc.29 → 0.57.4-rc.30
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.
- package/fesm2022/fundamental-ngx-platform-smart-filter-bar.mjs +1 -1
- package/fesm2022/fundamental-ngx-platform-smart-filter-bar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-table-helpers.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-table.mjs +30 -5
- package/fesm2022/fundamental-ngx-platform-table.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-platform-variant-management.mjs +1 -1
- package/fesm2022/fundamental-ngx-platform-variant-management.mjs.map +1 -1
- package/package.json +15 -15
- package/schematics/ng-add/index.js +1 -1
- package/table/index.d.ts +9 -1
- package/table-helpers/index.d.ts +6 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DOWN_ARROW, UP_ARROW, SPACE } from '@angular/cdk/keycodes';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, Inject, signal, inject, DestroyRef, ViewChild, ViewChildren, Input, computed, DOCUMENT, Optional, ContentChild, Host, EventEmitter, Output, forwardRef, Pipe, TemplateRef, Directive,
|
|
3
|
+
import { ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, Inject, signal, inject, DestroyRef, ViewChild, ViewChildren, Input, computed, DOCUMENT, Optional, input, ContentChild, Host, EventEmitter, Output, forwardRef, Pipe, TemplateRef, Directive, output, ContentChildren, HostBinding, ChangeDetectorRef, NgZone, ElementRef, booleanAttribute, NgModule } from '@angular/core';
|
|
4
4
|
import { NgTemplateOutlet, NgStyle, AsyncPipe, NgClass } from '@angular/common';
|
|
5
5
|
import * as i2 from '@fundamental-ngx/cdk/utils';
|
|
6
6
|
import { TemplateDirective, InitialFocusDirective, DisabledBehaviorDirective, FocusableItemDirective, FDK_FOCUSABLE_ITEM_DIRECTIVE, FDK_FOCUSABLE_LIST_DIRECTIVE, RtlService, ValueByPathPipe, uuidv4, destroyObservable, KeyUtil, RangeSelector, resizeObservable, DragAndDropModule, RepeatDirective, IntersectionSpyDirective, FDK_FOCUSABLE_GRID_DIRECTIVE, DndListDirective, FocusableGridDirective } from '@fundamental-ngx/cdk/utils';
|
|
@@ -15,7 +15,7 @@ import * as i1 from '@fundamental-ngx/platform/table-helpers';
|
|
|
15
15
|
import { SortDirection, TableService, Table, ColumnAlign, FILTER_STRING_STRATEGY, FilterableColumnDataType, TableColumn, FdpCellDef, FdpEditableCellDef, FdpHeaderCellDef, TableCellHeaderPopoverDirective, getFilterStrategiesBasedOnDataType, FILTER_STRATEGY, FILTER_STRATEGY_LABEL, getUniqueListValuesByKey, FdpViewSettingsFilterCustomDef, FilterType, TableDataSourceDirective, SelectionMode, TableColumnResizeService, TableRowService, PlatformTableCellResizableDirective, SelectionCellStylesPipe, TableCellStylesPipe, ColumnResizableSidePipe, TableColumnSortingDirectionPipe, isTreeRow, isTreeRowFirstCell, EditableTableCell, TableDraggableDirective, DEFAULT_HIGHLIGHTING_KEY, SEMANTIC_HIGHLIGHTING_COLUMN_WIDTH, ROW_HEIGHT, TABLE_COLUMN_MIN_WIDTH, FDP_TABLE_STATE_DIRECTIVE, FDP_TABLE_VIRTUAL_SCROLL_DIRECTIVE, FDP_TABLE_DRAGGABLE_DIRECTIVE, TableHeaderResizerDirective, isRowNavigatable, TableRowType, buildNewRowSkeleton, EDITABLE_ROW_SEMANTIC_STATE, SaveRowsEvent, getSelectableRows, TableCellActivateEvent, TableRowActivateEvent, TableRowToggleOpenStateEvent, findRowChildren, getRowParents, TableSortChangeEvent, TablePageChangeEvent, TableGroupChangeEvent, TableColumnFreezeEvent, TableFilterChangeEvent, TableColumnsChangeEvent, convertObjectsToTableRows, isTableRow, convertTreeTableRowToFlatList, convertTreeObjectsToTableRows, getFreezableColumns, getFreezableEndColumns, applySelectionToChildren, SELECTION_COLUMN_WIDTH, TableScrollableDirective, RowClassesPipe, TableScrollDispatcherService, TableResponsiveService, TableHelpersModule } from '@fundamental-ngx/platform/table-helpers';
|
|
16
16
|
export * from '@fundamental-ngx/platform/table-helpers';
|
|
17
17
|
import equal$1 from 'fast-deep-equal';
|
|
18
|
-
import { set, uniq } from 'lodash-es';
|
|
18
|
+
import { set, get, uniq } from 'lodash-es';
|
|
19
19
|
import { fromEvent, BehaviorSubject, Subscription, combineLatest, Subject, merge, of } from 'rxjs';
|
|
20
20
|
import { startWith, take, debounceTime, skip, filter, switchMap, takeUntil, map, distinctUntilChanged, tap } from 'rxjs/operators';
|
|
21
21
|
import { ButtonComponent } from '@fundamental-ngx/core/button';
|
|
@@ -416,6 +416,8 @@ class TableColumnComponent extends TableColumn {
|
|
|
416
416
|
this.applyText = true;
|
|
417
417
|
/** Column role attribute. */
|
|
418
418
|
this.role = 'gridcell';
|
|
419
|
+
/** Whether to announce empty cells to screen readers. Default is true. */
|
|
420
|
+
this.announceEmptyCell = input(true, ...(ngDevMode ? [{ debugName: "announceEmptyCell" }] : []));
|
|
419
421
|
/** Label change event */
|
|
420
422
|
this.labelValueChanges$ = new BehaviorSubject('');
|
|
421
423
|
/** Stores information for the header cell if the ellipsis are visible after the column resize */
|
|
@@ -445,7 +447,7 @@ class TableColumnComponent extends TableColumn {
|
|
|
445
447
|
}
|
|
446
448
|
}
|
|
447
449
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableColumnComponent, deps: [{ token: i1.TableColumnResizeService }, { token: i1.TableService, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
448
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
450
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: TableColumnComponent, isStandalone: true, selector: "fdp-column", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, footerLabel: { classPropertyName: "footerLabel", publicName: "footerLabel", isSignal: false, isRequired: false, transformFunction: null }, footerCellTemplate: { classPropertyName: "footerCellTemplate", publicName: "footerCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: false, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: false, isRequired: false, transformFunction: null }, filterSelectOptions: { classPropertyName: "filterSelectOptions", publicName: "filterSelectOptions", isSignal: false, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: false, isRequired: false, transformFunction: null }, freezable: { classPropertyName: "freezable", publicName: "freezable", isSignal: false, isRequired: false, transformFunction: null }, endFreezable: { classPropertyName: "endFreezable", publicName: "endFreezable", isSignal: false, isRequired: false, transformFunction: null }, nonInteractive: { classPropertyName: "nonInteractive", publicName: "nonInteractive", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, noWrap: { classPropertyName: "noWrap", publicName: "noWrap", isSignal: false, isRequired: false, transformFunction: null }, applyText: { classPropertyName: "applyText", publicName: "applyText", isSignal: false, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: false, isRequired: false, transformFunction: null }, announceEmptyCell: { classPropertyName: "announceEmptyCell", publicName: "announceEmptyCell", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: TableColumn, useExisting: TableColumnComponent }], queries: [{ propertyName: "fdpCellDef", first: true, predicate: FdpCellDef, descendants: true }, { propertyName: "fdpEditableCellDef", first: true, predicate: FdpEditableCellDef, descendants: true }, { propertyName: "fdpHeaderCellDef", first: true, predicate: FdpHeaderCellDef, descendants: true }, { propertyName: "fdpHeaderCellPopover", first: true, predicate: TableCellHeaderPopoverDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
449
451
|
}
|
|
450
452
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableColumnComponent, decorators: [{
|
|
451
453
|
type: Component,
|
|
@@ -3468,6 +3470,8 @@ class TableRowComponent extends TableRowDirective {
|
|
|
3468
3470
|
/** @hidden */
|
|
3469
3471
|
this._rowSelectionHelperTextId = `rowSelectionHelper-${uuidv4()}`;
|
|
3470
3472
|
/** @hidden */
|
|
3473
|
+
this._announceEmptyCell = signal(false, ...(ngDevMode ? [{ debugName: "_announceEmptyCell" }] : []));
|
|
3474
|
+
/** @hidden */
|
|
3471
3475
|
this._isTreeRowFirstCell = isTreeRowFirstCell;
|
|
3472
3476
|
/** @hidden */
|
|
3473
3477
|
this.SELECTION_MODE = SelectionMode;
|
|
@@ -3580,6 +3584,12 @@ class TableRowComponent extends TableRowDirective {
|
|
|
3580
3584
|
return column.name;
|
|
3581
3585
|
}
|
|
3582
3586
|
/** @hidden */
|
|
3587
|
+
_handleCellFocused(event, index, row, column, tableTextContainer) {
|
|
3588
|
+
this._setAnnounceEmptyCell(row, column, tableTextContainer);
|
|
3589
|
+
this._tableRowService.cellFocused(event);
|
|
3590
|
+
this._tableRowService.cellActivate(index, row);
|
|
3591
|
+
}
|
|
3592
|
+
/** @hidden */
|
|
3583
3593
|
_handleCellSpaceKey(colIdx, tableCellElement, $event) {
|
|
3584
3594
|
if ($event.target === tableCellElement && isTreeRowFirstCell(colIdx, this.row, $event)) {
|
|
3585
3595
|
$event.preventDefault();
|
|
@@ -3609,13 +3619,28 @@ class TableRowComponent extends TableRowDirective {
|
|
|
3609
3619
|
}
|
|
3610
3620
|
this._dndTableDirective?.dragRowFromKeyboard(isArrowDown ? 'down' : 'up', event, this.index, event.shiftKey ? 'group' : 'shift');
|
|
3611
3621
|
}
|
|
3622
|
+
/** @hidden */
|
|
3623
|
+
_setAnnounceEmptyCell(row, column, tableTextContainer) {
|
|
3624
|
+
if (row.state !== 'readonly') {
|
|
3625
|
+
this._announceEmptyCell.set(false);
|
|
3626
|
+
return;
|
|
3627
|
+
}
|
|
3628
|
+
let value;
|
|
3629
|
+
// For non-column templates (data-driven), always check for empty content.
|
|
3630
|
+
const isCellEmptyInNonColumnTemplate = !column.columnCellTemplate &&
|
|
3631
|
+
(!(value = get(row.value, column.key)) || (typeof value === 'string' && value.trim() === ''));
|
|
3632
|
+
// For column templates (consumer-provided), check text content by default.
|
|
3633
|
+
// Otherwise, determined by consumer by disabling default checking.
|
|
3634
|
+
const isCellEmptyInColumnTemplate = column.columnCellTemplate && column.announceEmptyCell() && tableTextContainer?.innerText?.trim() === '';
|
|
3635
|
+
this._announceEmptyCell.set(isCellEmptyInColumnTemplate || isCellEmptyInNonColumnTemplate);
|
|
3636
|
+
}
|
|
3612
3637
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3613
3638
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TableRowComponent, isStandalone: true, selector: "[fdp-table-row]", inputs: { rowId: "rowId", row: "row", index: "index", selectionMode: "selectionMode", selectableKey: "selectableKey", enableTristateMode: "enableTristateMode", fixed: "fixed", selectionColumnWidth: "selectionColumnWidth", freezeColumnsTo: "freezeColumnsTo", freezeEndColumnsTo: "freezeEndColumnsTo" }, outputs: { keyboardDrag: "keyboardDrag" }, host: { attributes: { "role": "row" }, properties: { "attr.aria-expanded": "_isTreeRow(row) ? row.expanded : null", "attr.aria-selected": "this._ariaSelected" } }, providers: [
|
|
3614
3639
|
{
|
|
3615
3640
|
provide: FDK_FOCUSABLE_LIST_DIRECTIVE,
|
|
3616
3641
|
useExisting: TableRowComponent
|
|
3617
3642
|
}
|
|
3618
|
-
], viewQueries: [{ propertyName: "_focusableViewCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }, { propertyName: "_editableCells", predicate: EditableTableCell, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (_fdpTableService._semanticHighlighting$(); as semanticHighlighting) {\n <td\n fd-table-cell\n fd-table-status-indicator\n fdkDisabled\n [addDisabledClass]=\"false\"\n [status]=\"row.value[semanticHighlighting]\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n ></td>\n}\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n <span\n aria-hidden=\"true\"\n [attr.id]=\"_rowSelectionHelperTextId\"\n [ngStyle]=\"{\n position: 'absolute !important',\n height: '1px',\n width: '1px',\n overflow: 'hidden',\n clip: 'rect(1px, 1px, 1px, 1px)',\n color: 'transparent',\n display: 'block'\n }\"\n >\n {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n </span>\n</ng-template>\n<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n @if (row.value[selectableKey] !== false) {\n <td\n class=\"fd-table__cell--checkbox\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [attr.role]=\"_hasRowHeaderColumn$() ? 'rowheader' : 'gridcell'\"\n fd-table-cell\n [focusable]=\"true\"\n [style]=\"\n _contentDensityObserver.contentDensity$()\n | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n \"\n [attr.aria-selected]=\"row.checked\"\n [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n (click)=\"_toggleSingleSelectableRow()\"\n (keydown.enter)=\"_toggleSingleSelectableRow($event)\"\n (keydown.space)=\"_toggleSingleSelectableRow($event)\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n >\n <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n </td>\n } @else {\n <td\n class=\"fd-table__cell--checkbox\"\n role=\"gridcell\"\n fd-table-cell\n fdkDisabled\n [addDisabledClass]=\"false\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n ></td>\n }\n} @else if (selectionMode === SELECTION_MODE.MULTIPLE) {\n @if (row.value[selectableKey] !== false) {\n <td\n class=\"fd-table__cell--checkbox\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n role=\"cell\"\n fd-table-cell\n [focusable]=\"true\"\n (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n [attr.aria-selected]=\"row.checked\"\n [style]=\"\n _contentDensityObserver.contentDensity$()\n | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n \"\n >\n <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n <fd-checkbox\n tabIndexValue=\"-1\"\n labelClass=\"fd-table__checkbox-label\"\n [tristate]=\"enableTristateMode\"\n [tristateSelectable]=\"false\"\n [ngModel]=\"row.checked$ | async\"\n (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n ></fd-checkbox>\n </td>\n } @else {\n <td\n class=\"fd-table__cell--checkbox\"\n role=\"gridcell\"\n fd-table-cell\n fdkDisabled\n [addDisabledClass]=\"false\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n ></td>\n }\n}\n@for (column of _fdpTableService.visibleColumns$(); track column.name) {\n <td\n #tableCellElement\n [fdpTableCellResizable]=\"\n $index\n | columnResizableSide\n : _fdpTableService.visibleColumnsLength()\n : _fdpTableService._isShownNavigationColumn$()\n \"\n [columnName]=\"column.name\"\n [focusable]=\"true\"\n [attr.role]=\"column.role\"\n [headers]=\"rowId + '__' + column.name\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n [ngClass]=\"[\n 'fdp-table__col--' + column.name,\n column._freezed ? 'fd-table__cell--fixed' : '',\n column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n row.isTree && $index === 0 ? 'fd-table__cell--expand' : '',\n $last && !_fdpTableService._isShownNavigationColumn$() ? 'is-last-child' : ''\n ]\"\n [ngStyle]=\"\n column\n | tableCellStyles\n : _rtl$()\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 \"\n [attr.aria-expanded]=\"_isTreeRowFirstCell($index, row) ? row.expanded : null\"\n [attr.data-nesting-level]=\"$index === 0 ? row.level + 1 : null\"\n (cellFocused)=\"_tableRowService.cellFocused($event); _tableRowService.cellActivate($index, row)\"\n (click)=\"_tableRowService.cellClicked({ index: $index, row })\"\n (keydown.enter)=\"_isTreeRowFirstCell($index, row, $event) && _toggleGroupRow()\"\n (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n (keydown.space)=\"_handleCellSpaceKey($index, tableCellElement, $event)\"\n [attr.title]=\"\n _isTreeRowFirstCell($index, row) && row.expanded\n ? ('platformTable.collapseRowButtonTitle' | fdTranslate)\n : _isTreeRowFirstCell($index, row) && !row.expanded\n ? ('platformTable.expandRowButtonTitle' | fdTranslate)\n : null\n \"\n >\n <div\n [class.fd-table__text]=\"column.applyText\"\n [class.fd-table__text--no-wrap]=\"column.noWrap\"\n #tableTextContainer\n >\n @if (_isTreeRowFirstCell($index, row)) {\n <span\n class=\"fd-table__expand\"\n [class.fd-table__expand--open]=\"row.expanded$ | async\"\n aria-hidden=\"true\"\n ></span>\n }\n @if (row.state === 'readonly') {\n @if (tableTextContainer.innerText?.trim() === '') {\n <span\n [ngStyle]=\"{\n position: 'absolute',\n height: '1px',\n width: '1px',\n overflow: 'hidden',\n clip: 'rect(1px, 1px, 1px, 1px)',\n color: 'transparent',\n display: 'block'\n }\"\n >\n {{ 'platformTable.emptyCell' | fdTranslate }}\n </span>\n }\n @if (column?.columnCellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"column.columnCellTemplate!\"\n [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n ></ng-template>\n } @else {\n {{ row.value | valueByPath: column.key }}\n }\n } @else {\n @if (column?.editableColumnCellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"column.editableColumnCellTemplate!\"\n [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n ></ng-template>\n } @else {\n <fdp-table-editable-cell\n [row]=\"row\"\n [column]=\"column\"\n [columnValue]=\"row.value | valueByPath: column.key\"\n ></fdp-table-editable-cell>\n }\n }\n </div>\n </td>\n}\n<ng-content></ng-content>\n@if (_fdpTableService._isShownNavigationColumn$()) {\n <td fd-table-cell class=\"fdp-table__cell--navigation is-last-child\" fdkDisabled [addDisabledClass]=\"false\">\n @if (row.navigatable) {\n <fd-icon\n fd-table-icon\n [navigation]=\"true\"\n [glyph]=\"_rtl$() ? 'slim-arrow-left' : 'slim-arrow-right'\"\n class=\"fdp-table__navigation-indicator\"\n [attr.title]=\"'platformTable.rowNavigateButtonTitle' | fdTranslate\"\n ></fd-icon>\n }\n </td>\n}\n<td\n aria-hidden=\"true\"\n class=\"fd-table__cell fd-table__cell--mock\"\n [class.fd-table__cell--mock-borderless]=\"!_tableColumnResizeService.cellMockVisible$()\"\n fdkDisabled\n [addDisabledClass]=\"false\"\n></td>\n", dependencies: [{ kind: "directive", type: TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "nonInteractive", "key"] }, { kind: "directive", type: TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TableEditableCellComponent, selector: "fdp-table-editable-cell", inputs: ["row", "column", "columnValue"] }, { kind: "directive", type: TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "glyphFont", "navigation"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ValueByPathPipe, name: "valueByPath" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: ColumnResizableSidePipe, name: "columnResizableSide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3643
|
+
], viewQueries: [{ propertyName: "_focusableViewCellItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }, { propertyName: "_editableCells", predicate: EditableTableCell, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (_fdpTableService._semanticHighlighting$(); as semanticHighlighting) {\n <td\n fd-table-cell\n fd-table-status-indicator\n fdkDisabled\n [addDisabledClass]=\"false\"\n [status]=\"row.value[semanticHighlighting]\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n ></td>\n}\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n <span\n aria-hidden=\"true\"\n [attr.id]=\"_rowSelectionHelperTextId\"\n [ngStyle]=\"{\n position: 'absolute !important',\n height: '1px',\n width: '1px',\n overflow: 'hidden',\n clip: 'rect(1px, 1px, 1px, 1px)',\n color: 'transparent',\n display: 'block'\n }\"\n >\n {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n </span>\n</ng-template>\n<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n @if (row.value[selectableKey] !== false) {\n <td\n class=\"fd-table__cell--checkbox\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [attr.role]=\"_hasRowHeaderColumn$() ? 'rowheader' : 'gridcell'\"\n fd-table-cell\n [focusable]=\"true\"\n [style]=\"\n _contentDensityObserver.contentDensity$()\n | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n \"\n [attr.aria-selected]=\"row.checked\"\n [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n (click)=\"_toggleSingleSelectableRow()\"\n (keydown.enter)=\"_toggleSingleSelectableRow($event)\"\n (keydown.space)=\"_toggleSingleSelectableRow($event)\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n >\n <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n </td>\n } @else {\n <td\n class=\"fd-table__cell--checkbox\"\n role=\"gridcell\"\n fd-table-cell\n fdkDisabled\n [addDisabledClass]=\"false\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n ></td>\n }\n} @else if (selectionMode === SELECTION_MODE.MULTIPLE) {\n @if (row.value[selectableKey] !== false) {\n <td\n class=\"fd-table__cell--checkbox\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n role=\"cell\"\n fd-table-cell\n [focusable]=\"true\"\n (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n [attr.aria-selected]=\"row.checked\"\n [style]=\"\n _contentDensityObserver.contentDensity$()\n | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n \"\n >\n <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n <fd-checkbox\n tabIndexValue=\"-1\"\n labelClass=\"fd-table__checkbox-label\"\n [tristate]=\"enableTristateMode\"\n [tristateSelectable]=\"false\"\n [ngModel]=\"row.checked$ | async\"\n (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n ></fd-checkbox>\n </td>\n } @else {\n <td\n class=\"fd-table__cell--checkbox\"\n role=\"gridcell\"\n fd-table-cell\n fdkDisabled\n [addDisabledClass]=\"false\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n ></td>\n }\n}\n@for (column of _fdpTableService.visibleColumns$(); track column.name) {\n <td\n #tableCellElement\n [fdpTableCellResizable]=\"\n $index\n | columnResizableSide\n : _fdpTableService.visibleColumnsLength()\n : _fdpTableService._isShownNavigationColumn$()\n \"\n [columnName]=\"column.name\"\n [focusable]=\"true\"\n [attr.role]=\"column.role\"\n [headers]=\"rowId + '__' + column.name\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n [ngClass]=\"[\n 'fdp-table__col--' + column.name,\n column._freezed ? 'fd-table__cell--fixed' : '',\n column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n row.isTree && $index === 0 ? 'fd-table__cell--expand' : '',\n $last && !_fdpTableService._isShownNavigationColumn$() ? 'is-last-child' : ''\n ]\"\n [ngStyle]=\"\n column\n | tableCellStyles\n : _rtl$()\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 \"\n [attr.aria-expanded]=\"_isTreeRowFirstCell($index, row) ? row.expanded : null\"\n [attr.data-nesting-level]=\"$index === 0 ? row.level + 1 : null\"\n (cellFocused)=\"_handleCellFocused($event, $index, row, column, tableTextContainer)\"\n (focusout)=\"_announceEmptyCell.set(false)\"\n (click)=\"_tableRowService.cellClicked({ index: $index, row })\"\n (keydown.enter)=\"_isTreeRowFirstCell($index, row, $event) && _toggleGroupRow()\"\n (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n (keydown.space)=\"_handleCellSpaceKey($index, tableCellElement, $event)\"\n [attr.title]=\"\n _isTreeRowFirstCell($index, row) && row.expanded\n ? ('platformTable.collapseRowButtonTitle' | fdTranslate)\n : _isTreeRowFirstCell($index, row) && !row.expanded\n ? ('platformTable.expandRowButtonTitle' | fdTranslate)\n : null\n \"\n >\n <div\n [class.fd-table__text]=\"column.applyText\"\n [class.fd-table__text--no-wrap]=\"column.noWrap\"\n #tableTextContainer\n >\n @if (_isTreeRowFirstCell($index, row)) {\n <span\n class=\"fd-table__expand\"\n [class.fd-table__expand--open]=\"row.expanded$ | async\"\n aria-hidden=\"true\"\n ></span>\n }\n @if (row.state === 'readonly') {\n @if (_announceEmptyCell()) {\n <span\n [ngStyle]=\"{\n position: 'absolute',\n height: '1px',\n width: '1px',\n overflow: 'hidden',\n clip: 'rect(1px, 1px, 1px, 1px)',\n color: 'transparent',\n display: 'block'\n }\"\n >\n {{ 'platformTable.emptyCell' | fdTranslate }}\n </span>\n }\n @if (column?.columnCellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"column.columnCellTemplate!\"\n [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n ></ng-template>\n } @else {\n {{ row.value | valueByPath: column.key }}\n }\n } @else {\n @if (column?.editableColumnCellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"column.editableColumnCellTemplate!\"\n [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n ></ng-template>\n } @else {\n <fdp-table-editable-cell\n [row]=\"row\"\n [column]=\"column\"\n [columnValue]=\"row.value | valueByPath: column.key\"\n ></fdp-table-editable-cell>\n }\n }\n </div>\n </td>\n}\n<ng-content></ng-content>\n@if (_fdpTableService._isShownNavigationColumn$()) {\n <td fd-table-cell class=\"fdp-table__cell--navigation is-last-child\" fdkDisabled [addDisabledClass]=\"false\">\n @if (row.navigatable) {\n <fd-icon\n fd-table-icon\n [navigation]=\"true\"\n [glyph]=\"_rtl$() ? 'slim-arrow-left' : 'slim-arrow-right'\"\n class=\"fdp-table__navigation-indicator\"\n [attr.title]=\"'platformTable.rowNavigateButtonTitle' | fdTranslate\"\n ></fd-icon>\n }\n </td>\n}\n<td\n aria-hidden=\"true\"\n class=\"fd-table__cell fd-table__cell--mock\"\n [class.fd-table__cell--mock-borderless]=\"!_tableColumnResizeService.cellMockVisible$()\"\n fdkDisabled\n [addDisabledClass]=\"false\"\n></td>\n", dependencies: [{ kind: "directive", type: TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "nonInteractive", "key"] }, { kind: "directive", type: TableStatusIndicatorDirective, selector: "[fdTableStatusIndicator], [fd-table-status-indicator]", inputs: ["status"] }, { kind: "directive", type: DisabledBehaviorDirective, selector: "[fdkDisabled]", inputs: ["fdkDisabled", "addDisabledClass", "disabledClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: PlatformTableCellResizableDirective, selector: "[fdpTableCellResizable]", inputs: ["fdpTableCellResizable", "columnName"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TableEditableCellComponent, selector: "fdp-table-editable-cell", inputs: ["row", "column", "columnValue"] }, { kind: "directive", type: TableIconDirective, selector: "[fdTableIcon], [fd-table-icon]", inputs: ["class", "glyph", "glyphFont", "navigation"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ValueByPathPipe, name: "valueByPath" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: SelectionCellStylesPipe, name: "selectionCellStyles" }, { kind: "pipe", type: TableCellStylesPipe, name: "tableCellStyles" }, { kind: "pipe", type: ColumnResizableSidePipe, name: "columnResizableSide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3619
3644
|
}
|
|
3620
3645
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableRowComponent, decorators: [{
|
|
3621
3646
|
type: Component,
|
|
@@ -3646,7 +3671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
3646
3671
|
TableCellStylesPipe,
|
|
3647
3672
|
ColumnResizableSidePipe,
|
|
3648
3673
|
IconComponent
|
|
3649
|
-
], template: "@if (_fdpTableService._semanticHighlighting$(); as semanticHighlighting) {\n <td\n fd-table-cell\n fd-table-status-indicator\n fdkDisabled\n [addDisabledClass]=\"false\"\n [status]=\"row.value[semanticHighlighting]\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n ></td>\n}\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n <span\n aria-hidden=\"true\"\n [attr.id]=\"_rowSelectionHelperTextId\"\n [ngStyle]=\"{\n position: 'absolute !important',\n height: '1px',\n width: '1px',\n overflow: 'hidden',\n clip: 'rect(1px, 1px, 1px, 1px)',\n color: 'transparent',\n display: 'block'\n }\"\n >\n {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n </span>\n</ng-template>\n<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n @if (row.value[selectableKey] !== false) {\n <td\n class=\"fd-table__cell--checkbox\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [attr.role]=\"_hasRowHeaderColumn$() ? 'rowheader' : 'gridcell'\"\n fd-table-cell\n [focusable]=\"true\"\n [style]=\"\n _contentDensityObserver.contentDensity$()\n | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n \"\n [attr.aria-selected]=\"row.checked\"\n [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n (click)=\"_toggleSingleSelectableRow()\"\n (keydown.enter)=\"_toggleSingleSelectableRow($event)\"\n (keydown.space)=\"_toggleSingleSelectableRow($event)\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n >\n <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n </td>\n } @else {\n <td\n class=\"fd-table__cell--checkbox\"\n role=\"gridcell\"\n fd-table-cell\n fdkDisabled\n [addDisabledClass]=\"false\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n ></td>\n }\n} @else if (selectionMode === SELECTION_MODE.MULTIPLE) {\n @if (row.value[selectableKey] !== false) {\n <td\n class=\"fd-table__cell--checkbox\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n role=\"cell\"\n fd-table-cell\n [focusable]=\"true\"\n (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n [attr.aria-selected]=\"row.checked\"\n [style]=\"\n _contentDensityObserver.contentDensity$()\n | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n \"\n >\n <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n <fd-checkbox\n tabIndexValue=\"-1\"\n labelClass=\"fd-table__checkbox-label\"\n [tristate]=\"enableTristateMode\"\n [tristateSelectable]=\"false\"\n [ngModel]=\"row.checked$ | async\"\n (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n ></fd-checkbox>\n </td>\n } @else {\n <td\n class=\"fd-table__cell--checkbox\"\n role=\"gridcell\"\n fd-table-cell\n fdkDisabled\n [addDisabledClass]=\"false\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n ></td>\n }\n}\n@for (column of _fdpTableService.visibleColumns$(); track column.name) {\n <td\n #tableCellElement\n [fdpTableCellResizable]=\"\n $index\n | columnResizableSide\n : _fdpTableService.visibleColumnsLength()\n : _fdpTableService._isShownNavigationColumn$()\n \"\n [columnName]=\"column.name\"\n [focusable]=\"true\"\n [attr.role]=\"column.role\"\n [headers]=\"rowId + '__' + column.name\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n [ngClass]=\"[\n 'fdp-table__col--' + column.name,\n column._freezed ? 'fd-table__cell--fixed' : '',\n column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n row.isTree && $index === 0 ? 'fd-table__cell--expand' : '',\n $last && !_fdpTableService._isShownNavigationColumn$() ? 'is-last-child' : ''\n ]\"\n [ngStyle]=\"\n column\n | tableCellStyles\n : _rtl$()\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 \"\n [attr.aria-expanded]=\"_isTreeRowFirstCell($index, row) ? row.expanded : null\"\n [attr.data-nesting-level]=\"$index === 0 ? row.level + 1 : null\"\n (cellFocused)=\"
|
|
3674
|
+
], template: "@if (_fdpTableService._semanticHighlighting$(); as semanticHighlighting) {\n <td\n fd-table-cell\n fd-table-status-indicator\n fdkDisabled\n [addDisabledClass]=\"false\"\n [status]=\"row.value[semanticHighlighting]\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n ></td>\n}\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n <span\n aria-hidden=\"true\"\n [attr.id]=\"_rowSelectionHelperTextId\"\n [ngStyle]=\"{\n position: 'absolute !important',\n height: '1px',\n width: '1px',\n overflow: 'hidden',\n clip: 'rect(1px, 1px, 1px, 1px)',\n color: 'transparent',\n display: 'block'\n }\"\n >\n {{ (row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate }}\n </span>\n</ng-template>\n<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n @if (row.value[selectableKey] !== false) {\n <td\n class=\"fd-table__cell--checkbox\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [attr.role]=\"_hasRowHeaderColumn$() ? 'rowheader' : 'gridcell'\"\n fd-table-cell\n [focusable]=\"true\"\n [style]=\"\n _contentDensityObserver.contentDensity$()\n | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n \"\n [attr.aria-selected]=\"row.checked\"\n [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n (click)=\"_toggleSingleSelectableRow()\"\n (keydown.enter)=\"_toggleSingleSelectableRow($event)\"\n (keydown.space)=\"_toggleSingleSelectableRow($event)\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n >\n <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n </td>\n } @else {\n <td\n class=\"fd-table__cell--checkbox\"\n role=\"gridcell\"\n fd-table-cell\n fdkDisabled\n [addDisabledClass]=\"false\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n ></td>\n }\n} @else if (selectionMode === SELECTION_MODE.MULTIPLE) {\n @if (row.value[selectableKey] !== false) {\n <td\n class=\"fd-table__cell--checkbox\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n role=\"cell\"\n fd-table-cell\n [focusable]=\"true\"\n (keydown.enter)=\"_toggleMultiSelectRow(row, $event)\"\n (keydown.space)=\"_toggleMultiSelectRow(row, $event)\"\n [attr.aria-labelledby]=\"_rowSelectionHelperTextId\"\n [attr.aria-selected]=\"row.checked\"\n [style]=\"\n _contentDensityObserver.contentDensity$()\n | selectionCellStyles: _rtl$() : _fdpTableService._semanticHighlightingColumnWidth$()\n \"\n >\n <ng-template [ngTemplateOutlet]=\"selectionScreenReaderText\"></ng-template>\n <fd-checkbox\n tabIndexValue=\"-1\"\n labelClass=\"fd-table__checkbox-label\"\n [tristate]=\"enableTristateMode\"\n [tristateSelectable]=\"false\"\n [ngModel]=\"row.checked$ | async\"\n (ngModelChange)=\"_toggleMultiSelectRow(row)\"\n ></fd-checkbox>\n </td>\n } @else {\n <td\n class=\"fd-table__cell--checkbox\"\n role=\"gridcell\"\n fd-table-cell\n fdkDisabled\n [addDisabledClass]=\"false\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n ></td>\n }\n}\n@for (column of _fdpTableService.visibleColumns$(); track column.name) {\n <td\n #tableCellElement\n [fdpTableCellResizable]=\"\n $index\n | columnResizableSide\n : _fdpTableService.visibleColumnsLength()\n : _fdpTableService._isShownNavigationColumn$()\n \"\n [columnName]=\"column.name\"\n [focusable]=\"true\"\n [attr.role]=\"column.role\"\n [headers]=\"rowId + '__' + column.name\"\n [cellFocusedEventAnnouncer]=\"_itemFocusedEventAnnouncer\"\n [ngClass]=\"[\n 'fdp-table__col--' + column.name,\n column._freezed ? 'fd-table__cell--fixed' : '',\n column.name === freezeColumnsTo ? 'fd-table__cell--fixed-last' : '',\n column._endFreezed ? 'fd-table__cell--fixed-end' : '',\n column.name === freezeEndColumnsTo ? 'fd-table__cell--fixed-end-last' : '',\n row.isTree && $index === 0 ? 'fd-table__cell--expand' : '',\n $last && !_fdpTableService._isShownNavigationColumn$() ? 'is-last-child' : ''\n ]\"\n [ngStyle]=\"\n column\n | tableCellStyles\n : _rtl$()\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 \"\n [attr.aria-expanded]=\"_isTreeRowFirstCell($index, row) ? row.expanded : null\"\n [attr.data-nesting-level]=\"$index === 0 ? row.level + 1 : null\"\n (cellFocused)=\"_handleCellFocused($event, $index, row, column, tableTextContainer)\"\n (focusout)=\"_announceEmptyCell.set(false)\"\n (click)=\"_tableRowService.cellClicked({ index: $index, row })\"\n (keydown.enter)=\"_isTreeRowFirstCell($index, row, $event) && _toggleGroupRow()\"\n (keydown.arrowLeft)=\"_tableRowService.scrollToOverlappedCell()\"\n (keydown.arrowRight)=\"_tableRowService.scrollToOverlappedCell()\"\n (keydown.space)=\"_handleCellSpaceKey($index, tableCellElement, $event)\"\n [attr.title]=\"\n _isTreeRowFirstCell($index, row) && row.expanded\n ? ('platformTable.collapseRowButtonTitle' | fdTranslate)\n : _isTreeRowFirstCell($index, row) && !row.expanded\n ? ('platformTable.expandRowButtonTitle' | fdTranslate)\n : null\n \"\n >\n <div\n [class.fd-table__text]=\"column.applyText\"\n [class.fd-table__text--no-wrap]=\"column.noWrap\"\n #tableTextContainer\n >\n @if (_isTreeRowFirstCell($index, row)) {\n <span\n class=\"fd-table__expand\"\n [class.fd-table__expand--open]=\"row.expanded$ | async\"\n aria-hidden=\"true\"\n ></span>\n }\n @if (row.state === 'readonly') {\n @if (_announceEmptyCell()) {\n <span\n [ngStyle]=\"{\n position: 'absolute',\n height: '1px',\n width: '1px',\n overflow: 'hidden',\n clip: 'rect(1px, 1px, 1px, 1px)',\n color: 'transparent',\n display: 'block'\n }\"\n >\n {{ 'platformTable.emptyCell' | fdTranslate }}\n </span>\n }\n @if (column?.columnCellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"column.columnCellTemplate!\"\n [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n ></ng-template>\n } @else {\n {{ row.value | valueByPath: column.key }}\n }\n } @else {\n @if (column?.editableColumnCellTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"column.editableColumnCellTemplate!\"\n [ngTemplateOutletContext]=\"{ $implicit: row.value, popping: false, rowIndex: row.index }\"\n ></ng-template>\n } @else {\n <fdp-table-editable-cell\n [row]=\"row\"\n [column]=\"column\"\n [columnValue]=\"row.value | valueByPath: column.key\"\n ></fdp-table-editable-cell>\n }\n }\n </div>\n </td>\n}\n<ng-content></ng-content>\n@if (_fdpTableService._isShownNavigationColumn$()) {\n <td fd-table-cell class=\"fdp-table__cell--navigation is-last-child\" fdkDisabled [addDisabledClass]=\"false\">\n @if (row.navigatable) {\n <fd-icon\n fd-table-icon\n [navigation]=\"true\"\n [glyph]=\"_rtl$() ? 'slim-arrow-left' : 'slim-arrow-right'\"\n class=\"fdp-table__navigation-indicator\"\n [attr.title]=\"'platformTable.rowNavigateButtonTitle' | fdTranslate\"\n ></fd-icon>\n }\n </td>\n}\n<td\n aria-hidden=\"true\"\n class=\"fd-table__cell fd-table__cell--mock\"\n [class.fd-table__cell--mock-borderless]=\"!_tableColumnResizeService.cellMockVisible$()\"\n fdkDisabled\n [addDisabledClass]=\"false\"\n></td>\n" }]
|
|
3650
3675
|
}], ctorParameters: () => [], propDecorators: { rowId: [{
|
|
3651
3676
|
type: Input
|
|
3652
3677
|
}], row: [{
|