@fundamental-ngx/platform 0.65.0-rc.25 → 0.65.0-rc.27
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.
|
@@ -2,7 +2,7 @@ import * as i4 from '@angular/cdk/a11y';
|
|
|
2
2
|
import { LiveAnnouncer } from '@angular/cdk/a11y';
|
|
3
3
|
import { DOWN_ARROW, UP_ARROW, SPACE } from '@angular/cdk/keycodes';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, Inject, signal, inject, DestroyRef, ViewChild, ViewChildren, Input, computed, DOCUMENT, input, ContentChild, Optional, Host, EventEmitter, Output, forwardRef, Pipe, TemplateRef, Directive, ChangeDetectorRef, ElementRef, Injector, afterEveryRender, afterNextRender, viewChildren, effect, output, linkedSignal, untracked, ContentChildren, HostBinding, booleanAttribute, NgModule } from '@angular/core';
|
|
5
|
+
import { ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, Inject, signal, inject, DestroyRef, ViewChild, ViewChildren, Input, computed, DOCUMENT, input, ContentChild, Optional, Host, EventEmitter, Output, forwardRef, Pipe, TemplateRef, Directive, ChangeDetectorRef, ElementRef, Injector, afterEveryRender, afterNextRender, viewChildren, effect, output, linkedSignal, untracked, ContentChildren, HostBinding, Renderer2, booleanAttribute, NgModule } from '@angular/core';
|
|
6
6
|
import { NgTemplateOutlet, NgStyle, AsyncPipe, NgClass } from '@angular/common';
|
|
7
7
|
import * as i3 from '@fundamental-ngx/cdk/utils';
|
|
8
8
|
import { TemplateDirective, RtlService, InitialFocusDirective, DisabledBehaviorDirective, FDK_FOCUSABLE_ITEM_DIRECTIVE, FDK_FOCUSABLE_LIST_DIRECTIVE, ValueByPathPipe, set, uuidv4, destroyObservable, KeyUtil, get, range, RangeSelector, resizeObservable, uniq, DragAndDropModule, IntersectionSpyDirective, FDK_FOCUSABLE_GRID_DIRECTIVE, DndListDirective, FocusableGridDirective } from '@fundamental-ngx/cdk/utils';
|
|
@@ -4725,6 +4725,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4725
4725
|
args: [FDK_FOCUSABLE_ITEM_DIRECTIVE]
|
|
4726
4726
|
}] } });
|
|
4727
4727
|
|
|
4728
|
+
/**
|
|
4729
|
+
* Directive that sets the title attribute on an element when its text content overflows.
|
|
4730
|
+
* Uses ResizeObserver to detect overflow without forcing layout reflows during change detection.
|
|
4731
|
+
* Uses MutationObserver to detect text content changes and update the title accordingly.
|
|
4732
|
+
*/
|
|
4733
|
+
class TableCellOverflowDirective {
|
|
4734
|
+
/** @hidden */
|
|
4735
|
+
constructor() {
|
|
4736
|
+
/** Whether the directive is enabled. */
|
|
4737
|
+
this.fdpTableCellOverflow = input(false, /* @ts-ignore */
|
|
4738
|
+
...(ngDevMode ? [{ debugName: "fdpTableCellOverflow" }] : /* istanbul ignore next */ []));
|
|
4739
|
+
this._elementRef = inject((ElementRef));
|
|
4740
|
+
this._renderer = inject(Renderer2);
|
|
4741
|
+
this._destroyRef = inject(DestroyRef);
|
|
4742
|
+
effect(() => {
|
|
4743
|
+
const enabled = this.fdpTableCellOverflow();
|
|
4744
|
+
if (!enabled) {
|
|
4745
|
+
this._resizeObserver?.disconnect();
|
|
4746
|
+
this._mutationObserver?.disconnect();
|
|
4747
|
+
this._renderer.removeAttribute(this._elementRef.nativeElement, 'title');
|
|
4748
|
+
}
|
|
4749
|
+
});
|
|
4750
|
+
afterNextRender(() => {
|
|
4751
|
+
if (this.fdpTableCellOverflow()) {
|
|
4752
|
+
this._setupObservers();
|
|
4753
|
+
}
|
|
4754
|
+
});
|
|
4755
|
+
this._destroyRef.onDestroy(() => {
|
|
4756
|
+
this._resizeObserver?.disconnect();
|
|
4757
|
+
this._mutationObserver?.disconnect();
|
|
4758
|
+
});
|
|
4759
|
+
}
|
|
4760
|
+
/** @hidden */
|
|
4761
|
+
_setupObservers() {
|
|
4762
|
+
const element = this._elementRef.nativeElement;
|
|
4763
|
+
// Setup ResizeObserver for size changes
|
|
4764
|
+
this._resizeObserver = new ResizeObserver(() => {
|
|
4765
|
+
this._updateTitle();
|
|
4766
|
+
});
|
|
4767
|
+
this._resizeObserver.observe(element);
|
|
4768
|
+
// Setup MutationObserver for text content changes
|
|
4769
|
+
this._mutationObserver = new MutationObserver(() => {
|
|
4770
|
+
this._updateTitle();
|
|
4771
|
+
});
|
|
4772
|
+
this._mutationObserver.observe(element, {
|
|
4773
|
+
characterData: true,
|
|
4774
|
+
subtree: true,
|
|
4775
|
+
childList: true
|
|
4776
|
+
});
|
|
4777
|
+
// Initial check
|
|
4778
|
+
this._updateTitle();
|
|
4779
|
+
}
|
|
4780
|
+
/** @hidden */
|
|
4781
|
+
_updateTitle() {
|
|
4782
|
+
const element = this._elementRef.nativeElement;
|
|
4783
|
+
const isOverflowing = element.offsetWidth < element.scrollWidth;
|
|
4784
|
+
if (isOverflowing) {
|
|
4785
|
+
this._renderer.setAttribute(element, 'title', element.textContent?.trim() || '');
|
|
4786
|
+
}
|
|
4787
|
+
else {
|
|
4788
|
+
this._renderer.removeAttribute(element, 'title');
|
|
4789
|
+
}
|
|
4790
|
+
}
|
|
4791
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TableCellOverflowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4792
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: TableCellOverflowDirective, isStandalone: true, selector: "[fdpTableCellOverflow]", inputs: { fdpTableCellOverflow: { classPropertyName: "fdpTableCellOverflow", publicName: "fdpTableCellOverflow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
4793
|
+
}
|
|
4794
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TableCellOverflowDirective, decorators: [{
|
|
4795
|
+
type: Directive,
|
|
4796
|
+
args: [{
|
|
4797
|
+
selector: '[fdpTableCellOverflow]'
|
|
4798
|
+
}]
|
|
4799
|
+
}], ctorParameters: () => [], propDecorators: { fdpTableCellOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "fdpTableCellOverflow", required: false }] }] } });
|
|
4800
|
+
|
|
4728
4801
|
let controlUniqId = 0;
|
|
4729
4802
|
class TableEditableCellComponent {
|
|
4730
4803
|
constructor() {
|
|
@@ -4961,7 +5034,7 @@ class TableRowComponent extends TableRowDirective {
|
|
|
4961
5034
|
provide: FDK_FOCUSABLE_LIST_DIRECTIVE,
|
|
4962
5035
|
useExisting: TableRowComponent
|
|
4963
5036
|
}
|
|
4964
|
-
], 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 class=\"fd-table__cell\"\n fd-table-status-indicator\n fdkDisabled\n [addDisabledClass]=\"false\"\n [status]=\"row.value[semanticHighlighting]\"\n ></td>\n}\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n <span\n aria-hidden=\"true\"\n [attr.id]=\"_rowSelectionHelperTextId\"\n [ngStyle]=\"{\n position: 'absolute !important',\n height: '1px',\n width: '1px',\n overflow: 'hidden',\n clip: 'rect(1px, 1px, 1px, 1px)',\n color: 'transparent',\n display: 'block'\n }\"\n >\n {{ ((row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate)() }}\n </span>\n</ng-template>\n<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n @if (row.value[selectableKey] !== false) {\n <td\n class=\"fd-table__cell--checkbox\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [attr.role]=\"_hasRowHeaderColumn$() ? 'rowheader' : 'gridcell'\"\n fd-table-cell\n [focusable]=\"true\"\n [style]=\"\n _contentDensityObserver.contentDensity$()\n | selectionCellStyles: isRtl() : _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: isRtl() : _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 fd-table-cell\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 : 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 \"\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 [class.fd-table__cell--truncate-txt]=\"column.applyText\"\n [attr.title]=\"\n tableTextContainer.offsetWidth < tableTextContainer.scrollWidth ? tableTextContainer.textContent : null\n \"\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]=\"navigationIcon()\"\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: ["role", "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: ["glyph", "glyphFont", "navigation"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "size", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { 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 }); }
|
|
5037
|
+
], 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 class=\"fd-table__cell\"\n fd-table-status-indicator\n fdkDisabled\n [addDisabledClass]=\"false\"\n [status]=\"row.value[semanticHighlighting]\"\n ></td>\n}\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n <span\n aria-hidden=\"true\"\n [attr.id]=\"_rowSelectionHelperTextId\"\n [ngStyle]=\"{\n position: 'absolute !important',\n height: '1px',\n width: '1px',\n overflow: 'hidden',\n clip: 'rect(1px, 1px, 1px, 1px)',\n color: 'transparent',\n display: 'block'\n }\"\n >\n {{ ((row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate)() }}\n </span>\n</ng-template>\n<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n @if (row.value[selectableKey] !== false) {\n <td\n class=\"fd-table__cell--checkbox\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [attr.role]=\"_hasRowHeaderColumn$() ? 'rowheader' : 'gridcell'\"\n fd-table-cell\n [focusable]=\"true\"\n [style]=\"\n _contentDensityObserver.contentDensity$()\n | selectionCellStyles: isRtl() : _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: isRtl() : _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 fd-table-cell\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 : 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 \"\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 [class.fd-table__cell--truncate-txt]=\"column.applyText\"\n [fdpTableCellOverflow]=\"column.noWrap || column.applyText\"\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]=\"navigationIcon()\"\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: ["role", "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: ["glyph", "glyphFont", "navigation"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "size", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "directive", type: TableCellOverflowDirective, selector: "[fdpTableCellOverflow]", inputs: ["fdpTableCellOverflow"] }, { 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 }); }
|
|
4965
5038
|
}
|
|
4966
5039
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TableRowComponent, decorators: [{
|
|
4967
5040
|
type: Component,
|
|
@@ -4991,8 +5064,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4991
5064
|
SelectionCellStylesPipe,
|
|
4992
5065
|
TableCellStylesPipe,
|
|
4993
5066
|
ColumnResizableSidePipe,
|
|
4994
|
-
IconComponent
|
|
4995
|
-
], template: "@if (_fdpTableService._semanticHighlighting$(); as semanticHighlighting) {\n <td\n class=\"fd-table__cell\"\n fd-table-status-indicator\n fdkDisabled\n [addDisabledClass]=\"false\"\n [status]=\"row.value[semanticHighlighting]\"\n ></td>\n}\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n <span\n aria-hidden=\"true\"\n [attr.id]=\"_rowSelectionHelperTextId\"\n [ngStyle]=\"{\n position: 'absolute !important',\n height: '1px',\n width: '1px',\n overflow: 'hidden',\n clip: 'rect(1px, 1px, 1px, 1px)',\n color: 'transparent',\n display: 'block'\n }\"\n >\n {{ ((row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate)() }}\n </span>\n</ng-template>\n<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n @if (row.value[selectableKey] !== false) {\n <td\n class=\"fd-table__cell--checkbox\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [attr.role]=\"_hasRowHeaderColumn$() ? 'rowheader' : 'gridcell'\"\n fd-table-cell\n [focusable]=\"true\"\n [style]=\"\n _contentDensityObserver.contentDensity$()\n | selectionCellStyles: isRtl() : _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: isRtl() : _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 fd-table-cell\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 : 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 \"\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 [class.fd-table__cell--truncate-txt]=\"column.applyText\"\n [attr.title]=\"\n tableTextContainer.offsetWidth < tableTextContainer.scrollWidth ? tableTextContainer.textContent : null\n \"\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]=\"navigationIcon()\"\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" }]
|
|
5067
|
+
IconComponent,
|
|
5068
|
+
TableCellOverflowDirective
|
|
5069
|
+
], template: "@if (_fdpTableService._semanticHighlighting$(); as semanticHighlighting) {\n <td\n class=\"fd-table__cell\"\n fd-table-status-indicator\n fdkDisabled\n [addDisabledClass]=\"false\"\n [status]=\"row.value[semanticHighlighting]\"\n ></td>\n}\n<!-- hidden text for screenreader -->\n<ng-template #selectionScreenReaderText>\n <span\n aria-hidden=\"true\"\n [attr.id]=\"_rowSelectionHelperTextId\"\n [ngStyle]=\"{\n position: 'absolute !important',\n height: '1px',\n width: '1px',\n overflow: 'hidden',\n clip: 'rect(1px, 1px, 1px, 1px)',\n color: 'transparent',\n display: 'block'\n }\"\n >\n {{ ((row.checked ? 'platformTable.deselectSingleRow' : 'platformTable.selectSingleRow') | fdTranslate)() }}\n </span>\n</ng-template>\n<!-- Row Selection Cell -->\n@if (selectionMode === SELECTION_MODE.SINGLE) {\n @if (row.value[selectableKey] !== false) {\n <td\n class=\"fd-table__cell--checkbox\"\n [class.fd-table__cell--fixed]=\"fixed\"\n [attr.role]=\"_hasRowHeaderColumn$() ? 'rowheader' : 'gridcell'\"\n fd-table-cell\n [focusable]=\"true\"\n [style]=\"\n _contentDensityObserver.contentDensity$()\n | selectionCellStyles: isRtl() : _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: isRtl() : _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 fd-table-cell\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 : 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 \"\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 [class.fd-table__cell--truncate-txt]=\"column.applyText\"\n [fdpTableCellOverflow]=\"column.noWrap || column.applyText\"\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]=\"navigationIcon()\"\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" }]
|
|
4996
5070
|
}], ctorParameters: () => [], propDecorators: { rowId: [{
|
|
4997
5071
|
type: Input
|
|
4998
5072
|
}], row: [{
|
|
@@ -7201,5 +7275,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
7201
7275
|
* Generated bundle index. Do not edit.
|
|
7202
7276
|
*/
|
|
7203
7277
|
|
|
7204
|
-
export { FILTERS_VIEW_STEP_TOKEN, FilterCustomComponent, FilterMultiSelectComponent, FilterRule, FilterRuleComponent, FilterSingleSelectComponent, FilterStepComponent, FiltersComponent, FiltersListStepComponent, GetAvailableSortColumnsPipe, GroupingComponent, IncludeExcludeFiltersComponent, IsColumnHasHeaderMenuPipe, NOT_FILTERED_OPTION_VALUE, NoDataWrapperComponent, P13ColumnsDialogComponent, P13FilteringDialogComponent, P13GroupingDialogComponent, P13SortingDialogComponent, PlatformTableColumnResizerComponent, PlatformTableModule, RESETTABLE_TOKEN, ResetButtonComponent, SortingComponent, TABLE_TOOLBAR, TableCellHeaderPopoverComponent, TableColumnComponent, TableComponent, TableEditableCellComponent, TableFooterRowComponent, TableGroupRowComponent, TableGrowingButtonComponent, TableHeaderCellContentComponent, TableHeaderRowComponent, TableP13ColumnsComponent, TableP13DialogComponent, TableP13FilterComponent, TableP13GroupComponent, TableP13SortComponent, TablePoppingRowComponent, TableRowComponent, TableToolbarActionsComponent, TableToolbarComponent, TableToolbarLeftActionsComponent, TableToolbarTemplateDirective, TableViewSettingsDialogComponent, TableViewSettingsFilterComponent, dialogConfig };
|
|
7278
|
+
export { FILTERS_VIEW_STEP_TOKEN, FilterCustomComponent, FilterMultiSelectComponent, FilterRule, FilterRuleComponent, FilterSingleSelectComponent, FilterStepComponent, FiltersComponent, FiltersListStepComponent, GetAvailableSortColumnsPipe, GroupingComponent, IncludeExcludeFiltersComponent, IsColumnHasHeaderMenuPipe, NOT_FILTERED_OPTION_VALUE, NoDataWrapperComponent, P13ColumnsDialogComponent, P13FilteringDialogComponent, P13GroupingDialogComponent, P13SortingDialogComponent, PlatformTableColumnResizerComponent, PlatformTableModule, RESETTABLE_TOKEN, ResetButtonComponent, SortingComponent, TABLE_TOOLBAR, TableCellHeaderPopoverComponent, TableCellOverflowDirective, TableColumnComponent, TableComponent, TableEditableCellComponent, TableFooterRowComponent, TableGroupRowComponent, TableGrowingButtonComponent, TableHeaderCellContentComponent, TableHeaderRowComponent, TableP13ColumnsComponent, TableP13DialogComponent, TableP13FilterComponent, TableP13GroupComponent, TableP13SortComponent, TablePoppingRowComponent, TableRowComponent, TableToolbarActionsComponent, TableToolbarComponent, TableToolbarLeftActionsComponent, TableToolbarTemplateDirective, TableViewSettingsDialogComponent, TableViewSettingsFilterComponent, dialogConfig };
|
|
7205
7279
|
//# sourceMappingURL=fundamental-ngx-platform-table.mjs.map
|