@3kles/kles-material-table-v2 21.8.0 → 21.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as i18 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { Pipe, InjectionToken, Injectable, computed, Inject, input, HostBinding, Directive, inject, signal, DestroyRef, Component, ChangeDetectorRef, ChangeDetectionStrategy, Optional, EventEmitter, Injector, ViewChild, effect, Output, NgModule } from '@angular/core';
|
|
5
|
-
import * as
|
|
5
|
+
import * as i19 from '@angular/forms';
|
|
6
6
|
import { FormControl, FormGroup, FormArray, ReactiveFormsModule } from '@angular/forms';
|
|
7
7
|
import * as i2 from '@angular/material/button';
|
|
8
8
|
import { MatButtonModule } from '@angular/material/button';
|
|
@@ -10,19 +10,19 @@ import { MatFormFieldModule } from '@angular/material/form-field';
|
|
|
10
10
|
import * as i1 from '@angular/material/icon';
|
|
11
11
|
import { MatIconModule } from '@angular/material/icon';
|
|
12
12
|
import { MatInputModule } from '@angular/material/input';
|
|
13
|
-
import * as
|
|
13
|
+
import * as i21 from '@angular/material/table';
|
|
14
14
|
import { MatTableDataSource, MatTableModule, MatTable } from '@angular/material/table';
|
|
15
|
-
import * as
|
|
15
|
+
import * as i22 from '@angular/cdk/table';
|
|
16
16
|
import { CdkTableModule } from '@angular/cdk/table';
|
|
17
|
-
import * as
|
|
17
|
+
import * as i23 from '@angular/cdk/scrolling';
|
|
18
18
|
import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
19
|
-
import * as
|
|
19
|
+
import * as i24 from '@3kles/kles-material-dynamicforms';
|
|
20
20
|
import { componentMapper, klesFieldControlFactory, klesFieldUiFactory, GroupUiState, ArrayUiState, KlesMaterialDynamicformsModule } from '@3kles/kles-material-dynamicforms';
|
|
21
21
|
import * as i4 from '@angular/material/sort';
|
|
22
22
|
import { MatSortModule, MatSort } from '@angular/material/sort';
|
|
23
|
-
import * as
|
|
23
|
+
import * as i25 from '@angular/cdk/drag-drop';
|
|
24
24
|
import { CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
|
|
25
|
-
import * as
|
|
25
|
+
import * as i26 from '@angular/material/progress-spinner';
|
|
26
26
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
27
27
|
import { Subject, BehaviorSubject, combineLatest, startWith, of, auditTime, switchMap, concat, catchError, map, filter, take, defer, defaultIfEmpty, fromEvent, skip, merge, debounceTime, distinctUntilChanged, scan, concatMap, withLatestFrom, shareReplay } from 'rxjs';
|
|
28
28
|
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
|
|
@@ -706,10 +706,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
706
706
|
}] });
|
|
707
707
|
|
|
708
708
|
class ResolveRowStylePipe {
|
|
709
|
-
transform(style, row, status, index) {
|
|
709
|
+
transform(style, row, status, index, context) {
|
|
710
710
|
if (!style)
|
|
711
711
|
return {};
|
|
712
|
-
return typeof style === 'function' ? style(row, status, index) : style;
|
|
712
|
+
return typeof style === 'function' ? style(row, status, index, context) : style;
|
|
713
713
|
}
|
|
714
714
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ResolveRowStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
715
715
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: ResolveRowStylePipe, isStandalone: true, name: "resolveRowStyle" }); }
|
|
@@ -722,10 +722,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
722
722
|
}]
|
|
723
723
|
}] });
|
|
724
724
|
class ResolveRowClassPipe {
|
|
725
|
-
transform(classes, row, status, index) {
|
|
725
|
+
transform(classes, row, status, index, context) {
|
|
726
726
|
if (!classes)
|
|
727
727
|
return [];
|
|
728
|
-
return typeof classes === 'function' ? classes(row, status, index) : classes;
|
|
728
|
+
return typeof classes === 'function' ? classes(row, status, index, context) : classes;
|
|
729
729
|
}
|
|
730
730
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ResolveRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
731
731
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: ResolveRowClassPipe, isStandalone: true, name: "resolveRowClass" }); }
|
|
@@ -2630,7 +2630,7 @@ DragDropLazyService = __decorate([
|
|
|
2630
2630
|
], DragDropLazyService);
|
|
2631
2631
|
|
|
2632
2632
|
class TableComponent {
|
|
2633
|
-
constructor(host, connectorService, loader, datasourceService, tableService, dragDropRowService, rowAppearance, selectionService, columnsService, loadingService, paginatorService, scrollbarService, footerService, extraRowService, renderService, sortService, filterService, expandedRowStore, rowFactory, eventsService, rowService, cellService, emptyStateService, treeService) {
|
|
2633
|
+
constructor(host, connectorService, loader, datasourceService, tableService, dragDropRowService, rowAppearance, selectionService, columnsService, loadingService, paginatorService, scrollbarService, footerService, extraRowService, renderService, sortService, filterService, expandedRowStore, rowFactory, eventsService, rowService, cellService, emptyStateService, treeService, rowContextStore) {
|
|
2634
2634
|
this.host = host;
|
|
2635
2635
|
this.connectorService = connectorService;
|
|
2636
2636
|
this.loader = loader;
|
|
@@ -2655,6 +2655,7 @@ class TableComponent {
|
|
|
2655
2655
|
this.cellService = cellService;
|
|
2656
2656
|
this.emptyStateService = emptyStateService;
|
|
2657
2657
|
this.treeService = treeService;
|
|
2658
|
+
this.rowContextStore = rowContextStore;
|
|
2658
2659
|
this.headerHeightPx = signal(56, ...(ngDevMode ? [{ debugName: "headerHeightPx" }] : /* istanbul ignore next */ []));
|
|
2659
2660
|
this.scrollHeightPx = signal(0, ...(ngDevMode ? [{ debugName: "scrollHeightPx" }] : /* istanbul ignore next */ []));
|
|
2660
2661
|
this.footerHeightPx = signal(0, ...(ngDevMode ? [{ debugName: "footerHeightPx" }] : /* istanbul ignore next */ []));
|
|
@@ -2670,6 +2671,13 @@ class TableComponent {
|
|
|
2670
2671
|
this.connectorService.connect(this);
|
|
2671
2672
|
this.filterService?.register();
|
|
2672
2673
|
}
|
|
2674
|
+
getRowContext(row) {
|
|
2675
|
+
const context = this.rowContextStore.get(row)?.();
|
|
2676
|
+
if (!context) {
|
|
2677
|
+
throw new Error('KlesMaterialTable: missing row context.');
|
|
2678
|
+
}
|
|
2679
|
+
return context;
|
|
2680
|
+
}
|
|
2673
2681
|
get isLoadingClass() {
|
|
2674
2682
|
return this.loadingService.loading();
|
|
2675
2683
|
}
|
|
@@ -2956,8 +2964,8 @@ class TableComponent {
|
|
|
2956
2964
|
};
|
|
2957
2965
|
}
|
|
2958
2966
|
}
|
|
2959
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: KlesTableConnectorService }, { token: LOADER_SERVICE }, { token: DATASOURCE_SERVICE }, { token: TABLE_SERVICE }, { token: ROW_DRAG_DROP }, { token: ROW_APPEARANCE_CONFIG }, { token: SELECTION_SERVICE }, { token: ColumnsService }, { token: LoadingService }, { token: PaginatorService }, { token: ScrollbarService }, { token: FooterService }, { token: ExtraRowService }, { token: RenderService }, { token: SORT_SERVICE }, { token: FilterService, optional: true }, { token: ExpandedRowStore }, { token: RowFormFactory }, { token: EventsService }, { token: RowService }, { token: CellService }, { token: EmptyStateService }, { token: TreeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2960
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: TableComponent, isStandalone: true, selector: "kles-table", host: { properties: { "class.loading": "this.isLoadingClass", "class.empty": "this.isEmptyClass" } }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "formElemRef", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "<form #form cdkScrollable [formGroup]=\"tableService.form\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n [trackBy]=\"multiTemplateDataRows() ? null : tableService.trackBy\"\n formArrayName=\"rows\"\n cdkDropList\n [id]=\"dragDropRowService.dropListId\"\n [cdkDropListData]=\"tableService.klesForm\"\n (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo\"\n [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n >\n <colgroup>\n @for (column of columns(); track column.columnDef) {\n <col\n [attr.data-column-def]=\"column.columnDef\"\n [style.width]=\"column.width ?? null\"\n [style.minWidth]=\"column.minWidth ?? null\"\n [style.maxWidth]=\"column.maxWidth ?? null\"\n />\n }\n </colgroup>\n\n @for (column of columns(); track column.columnDef) {\n <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n <th\n mat-header-cell\n *matHeaderCellDef\n [appResizableColumn]=\"column\"\n [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n [ngStyle]=\"\n column.headerCell?.style?.ngStyle\n | resolveNgStyle\n : tableService.form.get(['header', column.columnDef])?.value\n : tableService.form.get(['header', column.columnDef])?.status\n : tableService.form.controls.header.value\n : tableService.form.controls.header.status\n \"\n >\n <div class=\"cell\">\n <kles-header\n [header]=\"column | header\"\n [group]=\"tableService.form.controls.header\"\n [dragHandleSpacer]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n >\n <ng-container\n klesDynamicField\n [field]=\"column | headerField\"\n [group]=\"tableService.form.controls.header\"\n [ui]=\"tableService.ui.states.header\"\n ></ng-container>\n </kles-header>\n </div>\n </th>\n\n <td\n mat-cell\n *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n [ngStyle]=\"\n column.cell?.style?.ngStyle\n | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n \"\n (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n >\n <div class=\"cell\" [style.--align]=\"column.align\">\n <kles-cell\n [group]=\"row\"\n [ui]=\"row | uiField\"\n [column]=\"column\"\n [rowIndex]=\"dataIndex ?? index\"\n [dragHandle]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n >\n @if (column.columnDef === selectionService.key && selectionService.isLoading(row)) {\n <mat-spinner class=\"selection-row-spinner\" [diameter]=\"20\"></mat-spinner>\n } @else {\n <ng-container klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\n }\n </kles-cell>\n </div>\n </td>\n\n <td\n mat-footer-cell\n *matFooterCellDef\n [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n [ngStyle]=\"\n column.footerCell?.style?.ngStyle\n | resolveNgStyle\n : tableService.form.get(['footer', column.columnDef])?.value\n : tableService.form.get(['footer', column.columnDef])?.status\n : tableService.form.controls.footer.value\n : tableService.form.controls.footer.status\n \"\n >\n @if (column.footerCell) {\n <ng-container\n klesDynamicField\n [field]=\"column | footerField\"\n [group]=\"tableService.form.controls.footer\"\n [ui]=\"tableService.ui.states.footer\"\n >\n </ng-container>\n }\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n\n <tr\n mat-row\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n cdkDrag\n [cdkDragData]=\"row\"\n [cdkDragDisabled]=\"dragDropRowService.isDragDisabled(row)\"\n [ngStyle]=\"rowAppearance.rowStyle | resolveRowStyle: row.value : row.status : (dataIndex ?? index)\"\n [ngClass]=\"rowAppearance.rowClass | resolveRowClass: row.value : row.status : (dataIndex ?? index)\"\n (cdkDragStarted)=\"dragDropRowService.rowDragStarted(row, dataIndex ?? index)\"\n (cdkDragMoved)=\"dragDropRowService.rowDragMoved(row, dataIndex ?? index)\"\n (cdkDragEnded)=\"dragDropRowService.rowDragEnded(row, dataIndex ?? index)\"\n (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n >\n @if (dragDropRowService.previewComponent; as previewComponent) {\n <ng-template cdkDragPreview [matchSize]=\"dragDropRowService.previewMatchSize\">\n <div class=\"kles-row-drag-preview\">\n <ng-container\n *ngComponentOutlet=\"previewComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n ></ng-container>\n </div>\n </ng-template>\n }\n\n @if (dragDropRowService.placeholderComponent; as placeholderComponent) {\n <ng-template cdkDragPlaceholder>\n <tr class=\"kles-row-drag-placeholder\">\n <td [attr.colspan]=\"displayedColumns()?.length ?? 1\">\n <ng-container\n *ngComponentOutlet=\"placeholderComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n }\n </tr>\n\n @if (multiTemplateDataRows()) {\n @for (extraRow of extraRows(); track extraRow) {\n @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n <td\n mat-cell\n class=\"kles-extra-row-cell\"\n *cdkCellDef=\"let row\"\n [attr.colspan]=\"extraColumn.colspan | spanPipe: displayedColumns().length\"\n [attr.rowspan]=\"extraColumn.rowspan\"\n [ngStyle]=\"\n extraColumn?.style?.ngStyle\n | resolveNgStyle\n : row.controls[extraColumn.columnDef].value\n : row.controls[extraColumn.columnDef].status\n : row.value\n : row.status\n \"\n >\n <ng-container klesDynamicField [field]=\"extraColumn | extraCellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\n </td>\n </ng-container>\n }\n <tr\n mat-row\n class=\"kles-extra-row\"\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n ></tr>\n }\n }\n\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n </table>\n</form>\n\n@if (loadingService.loading()) {\n <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx()\" [style.--scroll-h.px]=\"scrollHeightPx()\" [style.--footer-h.px]=\"footerHeightPx()\">\n <mat-spinner></mat-spinner>\n </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n <div\n class=\"table-empty-state-overlay\"\n [style.--header-h.px]=\"headerHeightPx()\"\n [style.--scroll-h.px]=\"scrollHeightPx()\"\n [style.--footer-h.px]=\"footerHeightPx()\"\n >\n <div class=\"table-empty-state-content\">\n <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n </div>\n </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}:host td.kles-extra-row-cell{padding:0}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn].resizable-column{position:relative}th[appResizableColumn]>.resize-handle{position:absolute;top:0;inset-inline-end:-7px;z-index:20;width:14px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;outline:none}th[appResizableColumn]>.resize-handle:before{content:\"\";position:absolute;top:15%;bottom:15%;inset-inline-start:6px;width:2px;border-radius:2px;background:var(--mat-sys-outline);opacity:0;transition:opacity .12s ease,background-color .12s ease,transform .12s ease}th[appResizableColumn].resizable-column:hover>.resize-handle:before,th[appResizableColumn]>.resize-handle:focus-visible:before{opacity:.65}th[appResizableColumn].column-resizing>.resize-handle:before{top:0;bottom:0;background:var(--mat-sys-primary);opacity:1;transform:scaleX(1.25)}th[appResizableColumn].column-resizing>.resize-handle:after{content:\"\";position:absolute;top:100%;inset-inline-start:6px;width:2px;height:100vh;background:color-mix(in srgb,var(--mat-sys-primary) 70%,transparent);pointer-events:none}th[appResizableColumn]>.resize-handle>.resize-width-label{position:absolute;top:calc(100% + 8px);inset-inline-start:50%;z-index:30;display:none;padding:3px 7px;color:var(--mat-sys-on-primary);font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;background:var(--mat-sys-primary);border-radius:var(--mat-sys-corner-extra-small);box-shadow:var(--mat-sys-level2);transform:translate(-50%);pointer-events:none}th[appResizableColumn].column-resizing>.resize-handle>.resize-width-label{display:block}:host .column-resizing-cell{width:var(--kles-column-resize-width)!important;min-width:var(--kles-column-resize-width)!important;max-width:var(--kles-column-resize-width)!important;flex:0 0 var(--kles-column-resize-width)!important;background-image:linear-gradient(color-mix(in srgb,var(--mat-sys-primary) 5%,transparent),color-mix(in srgb,var(--mat-sys-primary) 5%,transparent))}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row:not(.kles-extra-row){transition:background-color .12s ease}:host .mat-mdc-row:not(.kles-extra-row):hover{background:var(--kles-table-row-hover-background)}:host tr.mat-mdc-row.cdk-drag-placeholder{opacity:1;background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))!important}:host tr.mat-mdc-row.cdk-drag-placeholder td{border-block:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td>*{visibility:hidden}:host tr.mat-mdc-row.cdk-drag-placeholder td:first-child{border-inline-start:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td:last-child{border-inline-end:2px dashed var(--mat-sys-primary)}:host .cdk-drop-list-dragging tr.mat-mdc-row:not(.cdk-drag-placeholder),:host tr.mat-mdc-row.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}.kles-row-drag-preview{overflow:hidden;border-radius:var(--mat-sys-corner-small);background:var(--mat-sys-surface-container);box-shadow:var(--mat-sys-level3)}.selection-row-spinner{margin-inline:auto}:host tr.kles-row-drag-placeholder td{padding:0;border:2px dashed var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow:hidden;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{width:100%;height:100%}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i17.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i17.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i17.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i18.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i18.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i18.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i18.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i20.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i20.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i20.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i20.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i20.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i20.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i20.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i20.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i20.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i20.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i20.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i20.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i21.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i21.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i22.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: KlesMaterialDynamicformsModule }, { kind: "directive", type: i23.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i24.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i24.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i24.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i24.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i25.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ResizableColumnDirective, selector: "th[appResizableColumn]", inputs: ["appResizableColumn"] }, { kind: "component", type: KlesCellComponent, selector: "kles-cell", inputs: ["ui", "group", "column", "rowIndex", "dragHandle"] }, { kind: "component", type: KlesHeaderComponent, selector: "kles-header", inputs: ["header", "group", "dragHandleSpacer"] }, { kind: "pipe", type: HeaderFieldPipe, name: "headerField" }, { kind: "pipe", type: CellFieldPipe, name: "cellField" }, { kind: "pipe", type: UiFieldPipe, name: "uiField" }, { kind: "pipe", type: FooterFieldPipe, name: "footerField" }, { kind: "pipe", type: SpanPipe, name: "spanPipe" }, { kind: "pipe", type: ExtraCellFieldPipe, name: "extraCellField" }, { kind: "pipe", type: ResolveNgStylePipe, name: "resolveNgStyle" }, { kind: "pipe", type: HeaderPipe, name: "header" }, { kind: "pipe", type: RowContextPipe, name: "rowContext" }, { kind: "pipe", type: ResolveRowStylePipe, name: "resolveRowStyle" }, { kind: "pipe", type: ResolveRowClassPipe, name: "resolveRowClass" }] }); }
|
|
2967
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: KlesTableConnectorService }, { token: LOADER_SERVICE }, { token: DATASOURCE_SERVICE }, { token: TABLE_SERVICE }, { token: ROW_DRAG_DROP }, { token: ROW_APPEARANCE_CONFIG }, { token: SELECTION_SERVICE }, { token: ColumnsService }, { token: LoadingService }, { token: PaginatorService }, { token: ScrollbarService }, { token: FooterService }, { token: ExtraRowService }, { token: RenderService }, { token: SORT_SERVICE }, { token: FilterService, optional: true }, { token: ExpandedRowStore }, { token: RowFormFactory }, { token: EventsService }, { token: RowService }, { token: CellService }, { token: EmptyStateService }, { token: TreeService }, { token: RowContextStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2968
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: TableComponent, isStandalone: true, selector: "kles-table", host: { properties: { "class.loading": "this.isLoadingClass", "class.empty": "this.isEmptyClass" } }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "formElemRef", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "<form #form cdkScrollable [formGroup]=\"tableService.form\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n [trackBy]=\"multiTemplateDataRows() ? null : tableService.trackBy\"\n formArrayName=\"rows\"\n cdkDropList\n [id]=\"dragDropRowService.dropListId\"\n [cdkDropListData]=\"tableService.klesForm\"\n (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo\"\n [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n >\n <colgroup>\n @for (column of columns(); track column.columnDef) {\n <col\n [attr.data-column-def]=\"column.columnDef\"\n [style.width]=\"column.width ?? null\"\n [style.minWidth]=\"column.minWidth ?? null\"\n [style.maxWidth]=\"column.maxWidth ?? null\"\n />\n }\n </colgroup>\n\n @for (column of columns(); track column.columnDef) {\n <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n <th\n mat-header-cell\n *matHeaderCellDef\n [appResizableColumn]=\"column\"\n [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n [ngStyle]=\"\n column.headerCell?.style?.ngStyle\n | resolveNgStyle\n : tableService.form.get(['header', column.columnDef])?.value\n : tableService.form.get(['header', column.columnDef])?.status\n : tableService.form.controls.header.value\n : tableService.form.controls.header.status\n \"\n >\n <div class=\"cell\">\n <kles-header\n [header]=\"column | header\"\n [group]=\"tableService.form.controls.header\"\n [dragHandleSpacer]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n >\n <ng-container\n klesDynamicField\n [field]=\"column | headerField\"\n [group]=\"tableService.form.controls.header\"\n [ui]=\"tableService.ui.states.header\"\n ></ng-container>\n </kles-header>\n </div>\n </th>\n\n <td\n mat-cell\n *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n [ngStyle]=\"\n column.cell?.style?.ngStyle\n | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n \"\n (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n >\n <div class=\"cell\" [style.--align]=\"column.align\">\n <kles-cell\n [group]=\"row\"\n [ui]=\"row | uiField\"\n [column]=\"column\"\n [rowIndex]=\"dataIndex ?? index\"\n [dragHandle]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n >\n @if (column.columnDef === selectionService.key && selectionService.isLoading(row)) {\n <mat-spinner class=\"selection-row-spinner\" [diameter]=\"20\"></mat-spinner>\n } @else {\n <ng-container klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\n }\n </kles-cell>\n </div>\n </td>\n\n <td\n mat-footer-cell\n *matFooterCellDef\n [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n [ngStyle]=\"\n column.footerCell?.style?.ngStyle\n | resolveNgStyle\n : tableService.form.get(['footer', column.columnDef])?.value\n : tableService.form.get(['footer', column.columnDef])?.status\n : tableService.form.controls.footer.value\n : tableService.form.controls.footer.status\n \"\n >\n @if (column.footerCell) {\n <ng-container\n klesDynamicField\n [field]=\"column | footerField\"\n [group]=\"tableService.form.controls.footer\"\n [ui]=\"tableService.ui.states.footer\"\n >\n </ng-container>\n }\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n\n <tr\n mat-row\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n cdkDrag\n [cdkDragData]=\"row\"\n [cdkDragDisabled]=\"dragDropRowService.isDragDisabled(row)\"\n [ngStyle]=\"rowAppearance.rowStyle | resolveRowStyle: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n [ngClass]=\"rowAppearance.rowClass | resolveRowClass: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n (cdkDragStarted)=\"dragDropRowService.rowDragStarted(row, dataIndex ?? index)\"\n (cdkDragMoved)=\"dragDropRowService.rowDragMoved(row, dataIndex ?? index)\"\n (cdkDragEnded)=\"dragDropRowService.rowDragEnded(row, dataIndex ?? index)\"\n (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n >\n @if (dragDropRowService.previewComponent; as previewComponent) {\n <ng-template cdkDragPreview [matchSize]=\"dragDropRowService.previewMatchSize\">\n <div class=\"kles-row-drag-preview\">\n <ng-container\n *ngComponentOutlet=\"previewComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n ></ng-container>\n </div>\n </ng-template>\n }\n\n @if (dragDropRowService.placeholderComponent; as placeholderComponent) {\n <ng-template cdkDragPlaceholder>\n <tr class=\"kles-row-drag-placeholder\">\n <td [attr.colspan]=\"displayedColumns()?.length ?? 1\">\n <ng-container\n *ngComponentOutlet=\"placeholderComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n }\n </tr>\n\n @if (multiTemplateDataRows()) {\n @for (extraRow of extraRows(); track extraRow) {\n @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n <td\n mat-cell\n class=\"kles-extra-row-cell\"\n *cdkCellDef=\"let row\"\n [attr.colspan]=\"extraColumn.colspan | spanPipe: displayedColumns().length\"\n [attr.rowspan]=\"extraColumn.rowspan\"\n [ngStyle]=\"\n extraColumn?.style?.ngStyle\n | resolveNgStyle\n : row.controls[extraColumn.columnDef].value\n : row.controls[extraColumn.columnDef].status\n : row.value\n : row.status\n \"\n >\n <ng-container klesDynamicField [field]=\"extraColumn | extraCellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\n </td>\n </ng-container>\n }\n <tr\n mat-row\n class=\"kles-extra-row\"\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n ></tr>\n }\n }\n\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n </table>\n</form>\n\n@if (loadingService.loading()) {\n <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx()\" [style.--scroll-h.px]=\"scrollHeightPx()\" [style.--footer-h.px]=\"footerHeightPx()\">\n <mat-spinner></mat-spinner>\n </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n <div\n class=\"table-empty-state-overlay\"\n [style.--header-h.px]=\"headerHeightPx()\"\n [style.--scroll-h.px]=\"scrollHeightPx()\"\n [style.--footer-h.px]=\"footerHeightPx()\"\n >\n <div class=\"table-empty-state-content\">\n <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n </div>\n </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}:host td.kles-extra-row-cell{padding:0}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn].resizable-column{position:relative}th[appResizableColumn]>.resize-handle{position:absolute;top:0;inset-inline-end:-7px;z-index:20;width:14px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;outline:none}th[appResizableColumn]>.resize-handle:before{content:\"\";position:absolute;top:15%;bottom:15%;inset-inline-start:6px;width:2px;border-radius:2px;background:var(--mat-sys-outline);opacity:0;transition:opacity .12s ease,background-color .12s ease,transform .12s ease}th[appResizableColumn].resizable-column:hover>.resize-handle:before,th[appResizableColumn]>.resize-handle:focus-visible:before{opacity:.65}th[appResizableColumn].column-resizing>.resize-handle:before{top:0;bottom:0;background:var(--mat-sys-primary);opacity:1;transform:scaleX(1.25)}th[appResizableColumn].column-resizing>.resize-handle:after{content:\"\";position:absolute;top:100%;inset-inline-start:6px;width:2px;height:100vh;background:color-mix(in srgb,var(--mat-sys-primary) 70%,transparent);pointer-events:none}th[appResizableColumn]>.resize-handle>.resize-width-label{position:absolute;top:calc(100% + 8px);inset-inline-start:50%;z-index:30;display:none;padding:3px 7px;color:var(--mat-sys-on-primary);font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;background:var(--mat-sys-primary);border-radius:var(--mat-sys-corner-extra-small);box-shadow:var(--mat-sys-level2);transform:translate(-50%);pointer-events:none}th[appResizableColumn].column-resizing>.resize-handle>.resize-width-label{display:block}:host .column-resizing-cell{width:var(--kles-column-resize-width)!important;min-width:var(--kles-column-resize-width)!important;max-width:var(--kles-column-resize-width)!important;flex:0 0 var(--kles-column-resize-width)!important;background-image:linear-gradient(color-mix(in srgb,var(--mat-sys-primary) 5%,transparent),color-mix(in srgb,var(--mat-sys-primary) 5%,transparent))}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row:not(.kles-extra-row){transition:background-color .12s ease}:host .mat-mdc-row:not(.kles-extra-row):hover{background:var(--kles-table-row-hover-background)}:host tr.mat-mdc-row.cdk-drag-placeholder{opacity:1;background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))!important}:host tr.mat-mdc-row.cdk-drag-placeholder td{border-block:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td>*{visibility:hidden}:host tr.mat-mdc-row.cdk-drag-placeholder td:first-child{border-inline-start:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td:last-child{border-inline-end:2px dashed var(--mat-sys-primary)}:host .cdk-drop-list-dragging tr.mat-mdc-row:not(.cdk-drag-placeholder),:host tr.mat-mdc-row.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}.kles-row-drag-preview{overflow:hidden;border-radius:var(--mat-sys-corner-small);background:var(--mat-sys-surface-container);box-shadow:var(--mat-sys-level3)}.selection-row-spinner{margin-inline:auto}:host tr.kles-row-drag-placeholder td{padding:0;border:2px dashed var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow:hidden;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{width:100%;height:100%}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i18.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i18.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i18.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i19.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i19.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i19.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i19.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i21.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i21.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i21.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i21.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i21.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i21.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i21.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i21.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i21.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i21.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i21.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i21.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i22.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i22.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i23.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: KlesMaterialDynamicformsModule }, { kind: "directive", type: i24.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i25.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i25.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i25.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i25.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i26.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ResizableColumnDirective, selector: "th[appResizableColumn]", inputs: ["appResizableColumn"] }, { kind: "component", type: KlesCellComponent, selector: "kles-cell", inputs: ["ui", "group", "column", "rowIndex", "dragHandle"] }, { kind: "component", type: KlesHeaderComponent, selector: "kles-header", inputs: ["header", "group", "dragHandleSpacer"] }, { kind: "pipe", type: HeaderFieldPipe, name: "headerField" }, { kind: "pipe", type: CellFieldPipe, name: "cellField" }, { kind: "pipe", type: UiFieldPipe, name: "uiField" }, { kind: "pipe", type: FooterFieldPipe, name: "footerField" }, { kind: "pipe", type: SpanPipe, name: "spanPipe" }, { kind: "pipe", type: ExtraCellFieldPipe, name: "extraCellField" }, { kind: "pipe", type: ResolveNgStylePipe, name: "resolveNgStyle" }, { kind: "pipe", type: HeaderPipe, name: "header" }, { kind: "pipe", type: RowContextPipe, name: "rowContext" }, { kind: "pipe", type: ResolveRowStylePipe, name: "resolveRowStyle" }, { kind: "pipe", type: ResolveRowClassPipe, name: "resolveRowClass" }] }); }
|
|
2961
2969
|
}
|
|
2962
2970
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableComponent, decorators: [{
|
|
2963
2971
|
type: Component,
|
|
@@ -2990,7 +2998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
2990
2998
|
RowContextPipe,
|
|
2991
2999
|
ResolveRowStylePipe,
|
|
2992
3000
|
ResolveRowClassPipe,
|
|
2993
|
-
], template: "<form #form cdkScrollable [formGroup]=\"tableService.form\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n [trackBy]=\"multiTemplateDataRows() ? null : tableService.trackBy\"\n formArrayName=\"rows\"\n cdkDropList\n [id]=\"dragDropRowService.dropListId\"\n [cdkDropListData]=\"tableService.klesForm\"\n (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo\"\n [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n >\n <colgroup>\n @for (column of columns(); track column.columnDef) {\n <col\n [attr.data-column-def]=\"column.columnDef\"\n [style.width]=\"column.width ?? null\"\n [style.minWidth]=\"column.minWidth ?? null\"\n [style.maxWidth]=\"column.maxWidth ?? null\"\n />\n }\n </colgroup>\n\n @for (column of columns(); track column.columnDef) {\n <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n <th\n mat-header-cell\n *matHeaderCellDef\n [appResizableColumn]=\"column\"\n [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n [ngStyle]=\"\n column.headerCell?.style?.ngStyle\n | resolveNgStyle\n : tableService.form.get(['header', column.columnDef])?.value\n : tableService.form.get(['header', column.columnDef])?.status\n : tableService.form.controls.header.value\n : tableService.form.controls.header.status\n \"\n >\n <div class=\"cell\">\n <kles-header\n [header]=\"column | header\"\n [group]=\"tableService.form.controls.header\"\n [dragHandleSpacer]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n >\n <ng-container\n klesDynamicField\n [field]=\"column | headerField\"\n [group]=\"tableService.form.controls.header\"\n [ui]=\"tableService.ui.states.header\"\n ></ng-container>\n </kles-header>\n </div>\n </th>\n\n <td\n mat-cell\n *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n [ngStyle]=\"\n column.cell?.style?.ngStyle\n | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n \"\n (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n >\n <div class=\"cell\" [style.--align]=\"column.align\">\n <kles-cell\n [group]=\"row\"\n [ui]=\"row | uiField\"\n [column]=\"column\"\n [rowIndex]=\"dataIndex ?? index\"\n [dragHandle]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n >\n @if (column.columnDef === selectionService.key && selectionService.isLoading(row)) {\n <mat-spinner class=\"selection-row-spinner\" [diameter]=\"20\"></mat-spinner>\n } @else {\n <ng-container klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\n }\n </kles-cell>\n </div>\n </td>\n\n <td\n mat-footer-cell\n *matFooterCellDef\n [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n [ngStyle]=\"\n column.footerCell?.style?.ngStyle\n | resolveNgStyle\n : tableService.form.get(['footer', column.columnDef])?.value\n : tableService.form.get(['footer', column.columnDef])?.status\n : tableService.form.controls.footer.value\n : tableService.form.controls.footer.status\n \"\n >\n @if (column.footerCell) {\n <ng-container\n klesDynamicField\n [field]=\"column | footerField\"\n [group]=\"tableService.form.controls.footer\"\n [ui]=\"tableService.ui.states.footer\"\n >\n </ng-container>\n }\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n\n <tr\n mat-row\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n cdkDrag\n [cdkDragData]=\"row\"\n [cdkDragDisabled]=\"dragDropRowService.isDragDisabled(row)\"\n [ngStyle]=\"rowAppearance.rowStyle | resolveRowStyle: row.value : row.status : (dataIndex ?? index)\"\n [ngClass]=\"rowAppearance.rowClass | resolveRowClass: row.value : row.status : (dataIndex ?? index)\"\n (cdkDragStarted)=\"dragDropRowService.rowDragStarted(row, dataIndex ?? index)\"\n (cdkDragMoved)=\"dragDropRowService.rowDragMoved(row, dataIndex ?? index)\"\n (cdkDragEnded)=\"dragDropRowService.rowDragEnded(row, dataIndex ?? index)\"\n (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n >\n @if (dragDropRowService.previewComponent; as previewComponent) {\n <ng-template cdkDragPreview [matchSize]=\"dragDropRowService.previewMatchSize\">\n <div class=\"kles-row-drag-preview\">\n <ng-container\n *ngComponentOutlet=\"previewComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n ></ng-container>\n </div>\n </ng-template>\n }\n\n @if (dragDropRowService.placeholderComponent; as placeholderComponent) {\n <ng-template cdkDragPlaceholder>\n <tr class=\"kles-row-drag-placeholder\">\n <td [attr.colspan]=\"displayedColumns()?.length ?? 1\">\n <ng-container\n *ngComponentOutlet=\"placeholderComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n }\n </tr>\n\n @if (multiTemplateDataRows()) {\n @for (extraRow of extraRows(); track extraRow) {\n @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n <td\n mat-cell\n class=\"kles-extra-row-cell\"\n *cdkCellDef=\"let row\"\n [attr.colspan]=\"extraColumn.colspan | spanPipe: displayedColumns().length\"\n [attr.rowspan]=\"extraColumn.rowspan\"\n [ngStyle]=\"\n extraColumn?.style?.ngStyle\n | resolveNgStyle\n : row.controls[extraColumn.columnDef].value\n : row.controls[extraColumn.columnDef].status\n : row.value\n : row.status\n \"\n >\n <ng-container klesDynamicField [field]=\"extraColumn | extraCellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\n </td>\n </ng-container>\n }\n <tr\n mat-row\n class=\"kles-extra-row\"\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n ></tr>\n }\n }\n\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n </table>\n</form>\n\n@if (loadingService.loading()) {\n <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx()\" [style.--scroll-h.px]=\"scrollHeightPx()\" [style.--footer-h.px]=\"footerHeightPx()\">\n <mat-spinner></mat-spinner>\n </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n <div\n class=\"table-empty-state-overlay\"\n [style.--header-h.px]=\"headerHeightPx()\"\n [style.--scroll-h.px]=\"scrollHeightPx()\"\n [style.--footer-h.px]=\"footerHeightPx()\"\n >\n <div class=\"table-empty-state-content\">\n <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n </div>\n </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}:host td.kles-extra-row-cell{padding:0}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn].resizable-column{position:relative}th[appResizableColumn]>.resize-handle{position:absolute;top:0;inset-inline-end:-7px;z-index:20;width:14px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;outline:none}th[appResizableColumn]>.resize-handle:before{content:\"\";position:absolute;top:15%;bottom:15%;inset-inline-start:6px;width:2px;border-radius:2px;background:var(--mat-sys-outline);opacity:0;transition:opacity .12s ease,background-color .12s ease,transform .12s ease}th[appResizableColumn].resizable-column:hover>.resize-handle:before,th[appResizableColumn]>.resize-handle:focus-visible:before{opacity:.65}th[appResizableColumn].column-resizing>.resize-handle:before{top:0;bottom:0;background:var(--mat-sys-primary);opacity:1;transform:scaleX(1.25)}th[appResizableColumn].column-resizing>.resize-handle:after{content:\"\";position:absolute;top:100%;inset-inline-start:6px;width:2px;height:100vh;background:color-mix(in srgb,var(--mat-sys-primary) 70%,transparent);pointer-events:none}th[appResizableColumn]>.resize-handle>.resize-width-label{position:absolute;top:calc(100% + 8px);inset-inline-start:50%;z-index:30;display:none;padding:3px 7px;color:var(--mat-sys-on-primary);font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;background:var(--mat-sys-primary);border-radius:var(--mat-sys-corner-extra-small);box-shadow:var(--mat-sys-level2);transform:translate(-50%);pointer-events:none}th[appResizableColumn].column-resizing>.resize-handle>.resize-width-label{display:block}:host .column-resizing-cell{width:var(--kles-column-resize-width)!important;min-width:var(--kles-column-resize-width)!important;max-width:var(--kles-column-resize-width)!important;flex:0 0 var(--kles-column-resize-width)!important;background-image:linear-gradient(color-mix(in srgb,var(--mat-sys-primary) 5%,transparent),color-mix(in srgb,var(--mat-sys-primary) 5%,transparent))}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row:not(.kles-extra-row){transition:background-color .12s ease}:host .mat-mdc-row:not(.kles-extra-row):hover{background:var(--kles-table-row-hover-background)}:host tr.mat-mdc-row.cdk-drag-placeholder{opacity:1;background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))!important}:host tr.mat-mdc-row.cdk-drag-placeholder td{border-block:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td>*{visibility:hidden}:host tr.mat-mdc-row.cdk-drag-placeholder td:first-child{border-inline-start:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td:last-child{border-inline-end:2px dashed var(--mat-sys-primary)}:host .cdk-drop-list-dragging tr.mat-mdc-row:not(.cdk-drag-placeholder),:host tr.mat-mdc-row.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}.kles-row-drag-preview{overflow:hidden;border-radius:var(--mat-sys-corner-small);background:var(--mat-sys-surface-container);box-shadow:var(--mat-sys-level3)}.selection-row-spinner{margin-inline:auto}:host tr.kles-row-drag-placeholder td{padding:0;border:2px dashed var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow:hidden;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{width:100%;height:100%}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"] }]
|
|
3001
|
+
], template: "<form #form cdkScrollable [formGroup]=\"tableService.form\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n [trackBy]=\"multiTemplateDataRows() ? null : tableService.trackBy\"\n formArrayName=\"rows\"\n cdkDropList\n [id]=\"dragDropRowService.dropListId\"\n [cdkDropListData]=\"tableService.klesForm\"\n (cdkDropListDropped)=\"dragDropRowService.listDropped($event)\"\n [cdkDropListDisabled]=\"!dragDropRowService.enable\"\n [cdkDropListAutoScrollStep]=\"dragDropRowService.autoScrollStep\"\n [cdkDropListSortPredicate]=\"dragDropRowService.sortPredicate\"\n [cdkDropListConnectedTo]=\"dragDropRowService.connectedTo\"\n [multiTemplateDataRows]=\"multiTemplateDataRows()\"\n >\n <colgroup>\n @for (column of columns(); track column.columnDef) {\n <col\n [attr.data-column-def]=\"column.columnDef\"\n [style.width]=\"column.width ?? null\"\n [style.minWidth]=\"column.minWidth ?? null\"\n [style.maxWidth]=\"column.maxWidth ?? null\"\n />\n }\n </colgroup>\n\n @for (column of columns(); track column.columnDef) {\n <ng-container [cdkColumnDef]=\"column.columnDef\" [sticky]=\"column.sticky ?? false\" [stickyEnd]=\"column.stickyEnd ?? false\">\n <th\n mat-header-cell\n *matHeaderCellDef\n [appResizableColumn]=\"column\"\n [style.border-inline-end]=\"getColumnSeparator(column, 'header') ?? getStickyStartSeparator(column, 'header')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'header')\"\n [ngStyle]=\"\n column.headerCell?.style?.ngStyle\n | resolveNgStyle\n : tableService.form.get(['header', column.columnDef])?.value\n : tableService.form.get(['header', column.columnDef])?.status\n : tableService.form.controls.header.value\n : tableService.form.controls.header.status\n \"\n >\n <div class=\"cell\">\n <kles-header\n [header]=\"column | header\"\n [group]=\"tableService.form.controls.header\"\n [dragHandleSpacer]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n >\n <ng-container\n klesDynamicField\n [field]=\"column | headerField\"\n [group]=\"tableService.form.controls.header\"\n [ui]=\"tableService.ui.states.header\"\n ></ng-container>\n </kles-header>\n </div>\n </th>\n\n <td\n mat-cell\n *cdkCellDef=\"let row; let index = index; let dataIndex = dataIndex\"\n [style.border-inline-end]=\"getColumnSeparator(column, 'body') ?? getStickyStartSeparator(column, 'body')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'body')\"\n [ngStyle]=\"\n column.cell?.style?.ngStyle\n | resolveNgStyle: row.controls[column.columnDef].value : row.controls[column.columnDef].status : row.value : row.status\n \"\n (click)=\"cellService.onClick($event, row, dataIndex ?? index, column.columnDef)\"\n (dblclick)=\"cellService.onDoubleClick($event, row, dataIndex ?? index, column.columnDef)\"\n (contextmenu)=\"cellService.onContextMenu($event, row, dataIndex ?? index, column.columnDef)\"\n >\n <div class=\"cell\" [style.--align]=\"column.align\">\n <kles-cell\n [group]=\"row\"\n [ui]=\"row | uiField\"\n [column]=\"column\"\n [rowIndex]=\"dataIndex ?? index\"\n [dragHandle]=\"dragDropRowService.handleOnly && column.columnDef === displayedColumns()?.[0]\"\n >\n @if (column.columnDef === selectionService.key && selectionService.isLoading(row)) {\n <mat-spinner class=\"selection-row-spinner\" [diameter]=\"20\"></mat-spinner>\n } @else {\n <ng-container klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\n }\n </kles-cell>\n </div>\n </td>\n\n <td\n mat-footer-cell\n *matFooterCellDef\n [style.border-inline-end]=\"getColumnSeparator(column, 'footer') ?? getStickyStartSeparator(column, 'footer')\"\n [style.border-inline-start]=\"getStickyEndSeparator(column, 'footer')\"\n [ngStyle]=\"\n column.footerCell?.style?.ngStyle\n | resolveNgStyle\n : tableService.form.get(['footer', column.columnDef])?.value\n : tableService.form.get(['footer', column.columnDef])?.status\n : tableService.form.controls.footer.value\n : tableService.form.controls.footer.status\n \"\n >\n @if (column.footerCell) {\n <ng-container\n klesDynamicField\n [field]=\"column | footerField\"\n [group]=\"tableService.form.controls.footer\"\n [ui]=\"tableService.ui.states.footer\"\n >\n </ng-container>\n }\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns(); sticky: true\"></tr>\n\n <tr\n mat-row\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: displayedColumns()\"\n cdkDrag\n [cdkDragData]=\"row\"\n [cdkDragDisabled]=\"dragDropRowService.isDragDisabled(row)\"\n [ngStyle]=\"rowAppearance.rowStyle | resolveRowStyle: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n [ngClass]=\"rowAppearance.rowClass | resolveRowClass: row.value : row.status : (dataIndex ?? index) : getRowContext(row)\"\n (cdkDragStarted)=\"dragDropRowService.rowDragStarted(row, dataIndex ?? index)\"\n (cdkDragMoved)=\"dragDropRowService.rowDragMoved(row, dataIndex ?? index)\"\n (cdkDragEnded)=\"dragDropRowService.rowDragEnded(row, dataIndex ?? index)\"\n (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n >\n @if (dragDropRowService.previewComponent; as previewComponent) {\n <ng-template cdkDragPreview [matchSize]=\"dragDropRowService.previewMatchSize\">\n <div class=\"kles-row-drag-preview\">\n <ng-container\n *ngComponentOutlet=\"previewComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n ></ng-container>\n </div>\n </ng-template>\n }\n\n @if (dragDropRowService.placeholderComponent; as placeholderComponent) {\n <ng-template cdkDragPlaceholder>\n <tr class=\"kles-row-drag-placeholder\">\n <td [attr.colspan]=\"displayedColumns()?.length ?? 1\">\n <ng-container\n *ngComponentOutlet=\"placeholderComponent; injector: dragDropRowService.componentInjector(row, dataIndex ?? index)\"\n ></ng-container>\n </td>\n </tr>\n </ng-template>\n }\n </tr>\n\n @if (multiTemplateDataRows()) {\n @for (extraRow of extraRows(); track extraRow) {\n @for (extraColumn of extraRow.cells; track extraColumn.columnDef) {\n <ng-container [cdkColumnDef]=\"extraColumn.columnDef\">\n <td\n mat-cell\n class=\"kles-extra-row-cell\"\n *cdkCellDef=\"let row\"\n [attr.colspan]=\"extraColumn.colspan | spanPipe: displayedColumns().length\"\n [attr.rowspan]=\"extraColumn.rowspan\"\n [ngStyle]=\"\n extraColumn?.style?.ngStyle\n | resolveNgStyle\n : row.controls[extraColumn.columnDef].value\n : row.controls[extraColumn.columnDef].status\n : row.value\n : row.status\n \"\n >\n <ng-container klesDynamicField [field]=\"extraColumn | extraCellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\n </td>\n </ng-container>\n }\n <tr\n mat-row\n class=\"kles-extra-row\"\n *matRowDef=\"let row; let index = index; let dataIndex = dataIndex; columns: extraRow.displayedColumns; when: extraRow.when\"\n (click)=\"rowService.onClick($event, row, dataIndex ?? index)\"\n (dblclick)=\"rowService.onDoubleClick($event, row, dataIndex ?? index)\"\n (contextmenu)=\"rowService.onContextMenu($event, row, dataIndex ?? index)\"\n (mouseenter)=\"rowService.onMouseEnter($event, row, dataIndex ?? index)\"\n (mouseleave)=\"rowService.onMouseLeave($event, row, dataIndex ?? index)\"\n ></tr>\n }\n }\n\n <tr mat-footer-row *matFooterRowDef=\"displayedColumns(); sticky: true\" [style.display]=\"showFooter() ? '' : 'none'\"></tr>\n </table>\n</form>\n\n@if (loadingService.loading()) {\n <div class=\"table-overlay\" [style.--header-h.px]=\"headerHeightPx()\" [style.--scroll-h.px]=\"scrollHeightPx()\" [style.--footer-h.px]=\"footerHeightPx()\">\n <mat-spinner></mat-spinner>\n </div>\n}\n\n@if (emptyStateService.enabled() && !loadingService.loading() && isEmpty()) {\n <div\n class=\"table-empty-state-overlay\"\n [style.--header-h.px]=\"headerHeightPx()\"\n [style.--scroll-h.px]=\"scrollHeightPx()\"\n [style.--footer-h.px]=\"footerHeightPx()\"\n >\n <div class=\"table-empty-state-content\">\n <ng-container *ngComponentOutlet=\"emptyStateService.component\"></ng-container>\n </div>\n </div>\n}\n", styles: [":host{--kles-table-divider-color: color-mix(in srgb, var(--mat-sys-outline-variant) 65%, transparent);--kles-table-divider-strong-color: var(--mat-sys-outline-variant);--kles-table-header-background: var(--mat-sys-surface-container);--kles-table-header-color: var(--mat-sys-on-surface);--kles-table-header-divider-color: var(--mat-sys-outline-variant);--kles-table-row-hover-background: color-mix(in srgb, var(--mat-sys-primary) 7%, var(--mat-sys-surface));overflow:auto;display:flex;flex-direction:column;position:relative;height:100%;--mat-form-field-filled-container-color: transparent;--mat-form-field-hover-state-layer-opacity: 0;--mat-form-field-focus-state-layer-opacity: 0;--mat-form-field-state-layer-color: transparent}:host(.loading),:host(.empty){min-height:280px}form{display:flex;flex-direction:column;flex-grow:1;position:relative;overflow:auto}table{width:100%;flex-grow:1}th,td{text-wrap:pretty;white-space:normal;padding-top:2px;padding-bottom:2px;box-sizing:border-box}td{word-break:normal}:host td.kles-extra-row-cell{padding:0}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn].resizable-column{position:relative}th[appResizableColumn]>.resize-handle{position:absolute;top:0;inset-inline-end:-7px;z-index:20;width:14px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;outline:none}th[appResizableColumn]>.resize-handle:before{content:\"\";position:absolute;top:15%;bottom:15%;inset-inline-start:6px;width:2px;border-radius:2px;background:var(--mat-sys-outline);opacity:0;transition:opacity .12s ease,background-color .12s ease,transform .12s ease}th[appResizableColumn].resizable-column:hover>.resize-handle:before,th[appResizableColumn]>.resize-handle:focus-visible:before{opacity:.65}th[appResizableColumn].column-resizing>.resize-handle:before{top:0;bottom:0;background:var(--mat-sys-primary);opacity:1;transform:scaleX(1.25)}th[appResizableColumn].column-resizing>.resize-handle:after{content:\"\";position:absolute;top:100%;inset-inline-start:6px;width:2px;height:100vh;background:color-mix(in srgb,var(--mat-sys-primary) 70%,transparent);pointer-events:none}th[appResizableColumn]>.resize-handle>.resize-width-label{position:absolute;top:calc(100% + 8px);inset-inline-start:50%;z-index:30;display:none;padding:3px 7px;color:var(--mat-sys-on-primary);font-size:11px;font-weight:600;line-height:16px;white-space:nowrap;background:var(--mat-sys-primary);border-radius:var(--mat-sys-corner-extra-small);box-shadow:var(--mat-sys-level2);transform:translate(-50%);pointer-events:none}th[appResizableColumn].column-resizing>.resize-handle>.resize-width-label{display:block}:host .column-resizing-cell{width:var(--kles-column-resize-width)!important;min-width:var(--kles-column-resize-width)!important;max-width:var(--kles-column-resize-width)!important;flex:0 0 var(--kles-column-resize-width)!important;background-image:linear-gradient(color-mix(in srgb,var(--mat-sys-primary) 5%,transparent),color-mix(in srgb,var(--mat-sys-primary) 5%,transparent))}.table-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));display:grid;place-items:center;background:color-mix(in srgb,var(--mat-sys-surface-container-highest) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mat-sys-outline-variant) 30%,transparent);z-index:500}:host .mat-mdc-row:not(.kles-extra-row){transition:background-color .12s ease}:host .mat-mdc-row:not(.kles-extra-row):hover{background:var(--kles-table-row-hover-background)}:host tr.mat-mdc-row.cdk-drag-placeholder{opacity:1;background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))!important}:host tr.mat-mdc-row.cdk-drag-placeholder td{border-block:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td>*{visibility:hidden}:host tr.mat-mdc-row.cdk-drag-placeholder td:first-child{border-inline-start:2px dashed var(--mat-sys-primary)}:host tr.mat-mdc-row.cdk-drag-placeholder td:last-child{border-inline-end:2px dashed var(--mat-sys-primary)}:host .cdk-drop-list-dragging tr.mat-mdc-row:not(.cdk-drag-placeholder),:host tr.mat-mdc-row.cdk-drag-animating{transition:transform .18s cubic-bezier(0,0,.2,1)}.kles-row-drag-preview{overflow:hidden;border-radius:var(--mat-sys-corner-small);background:var(--mat-sys-surface-container);box-shadow:var(--mat-sys-level3)}.selection-row-spinner{margin-inline:auto}:host tr.kles-row-drag-placeholder td{padding:0;border:2px dashed var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 12%,var(--mat-sys-surface))}:host .mat-mdc-table .mat-mdc-cell,:host .mat-mdc-table .mat-mdc-header-cell{border-bottom-color:var(--mat-sys-outline-variant)}:host .mat-mdc-table .mat-mdc-cell:last-child,:host .mat-mdc-table .mat-mdc-header-cell:last-child{border-right:none}:host tr.mat-mdc-footer-row td.mat-mdc-footer-cell{border-top:1px solid var(--kles-table-divider-strong-color)}:host tr.mat-mdc-row:last-of-type td.mat-mdc-cell{border-bottom:1px solid var(--kles-table-divider-color)}:host tr.mat-mdc-footer-row{font-weight:500}:host .mat-mdc-header-row,:host .mat-mdc-header-cell{background-color:var(--kles-table-header-background);color:var(--kles-table-header-color)}:host .mat-mdc-header-cell{border-bottom-color:var(--kles-table-header-divider-color)}.table-empty-state-overlay{position:absolute;inset-inline:0;top:var(--header-h, 56px);bottom:calc(var(--scroll-h, 0px) + var(--footer-h, 0px));z-index:400;overflow:hidden;background:var(--mat-sys-surface);display:grid;place-items:center}.table-empty-state-content{width:100%;height:100%}.scrollbar-hidden{scrollbar-width:none;-ms-overflow-style:none;overflow-y:hidden}.scrollbar-hidden::-webkit-scrollbar{display:none;overflow-y:hidden}\n"] }]
|
|
2994
3002
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: KlesTableConnectorService }, { type: undefined, decorators: [{
|
|
2995
3003
|
type: Inject,
|
|
2996
3004
|
args: [LOADER_SERVICE]
|
|
@@ -3014,7 +3022,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
3014
3022
|
args: [SORT_SERVICE]
|
|
3015
3023
|
}] }, { type: FilterService, decorators: [{
|
|
3016
3024
|
type: Optional
|
|
3017
|
-
}] }, { type: ExpandedRowStore }, { type: RowFormFactory }, { type: EventsService }, { type: RowService }, { type: CellService }, { type: EmptyStateService }, { type: TreeService }], propDecorators: { table: [{
|
|
3025
|
+
}] }, { type: ExpandedRowStore }, { type: RowFormFactory }, { type: EventsService }, { type: RowService }, { type: CellService }, { type: EmptyStateService }, { type: TreeService }, { type: RowContextStore }], propDecorators: { table: [{
|
|
3018
3026
|
type: ViewChild,
|
|
3019
3027
|
args: [MatTable]
|
|
3020
3028
|
}], matSort: [{
|
|
@@ -3385,7 +3393,7 @@ class InfiniteScrollTableComponent {
|
|
|
3385
3393
|
this.infiniteScrollService.register(this.table.formElemRef.nativeElement);
|
|
3386
3394
|
}
|
|
3387
3395
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponent, deps: [{ token: InfiniteScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3388
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InfiniteScrollTableComponent, isStandalone: true, selector: "kles-infinite-scroll-table", viewQueries: [{ propertyName: "table", first: true, predicate: TableComponent, descendants: true, static: true }], ngImport: i0, template: "<kles-table></kles-table>\n\n@if (loadingMore()) {\n <div class=\"loading-more-indicator\" role=\"status\" aria-label=\"Loading more rows\">\n <mat-spinner [diameter]=\"24\"></mat-spinner>\n </div>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;height:100%;overflow:hidden}kles-table{min-height:0;flex:1 1 auto}.loading-more-indicator{position:absolute;inset-inline-start:50%;bottom:24px;z-index:600;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--mat-sys-outline-variant);border-radius:50%;background:var(--mat-sys-surface-container-high);box-shadow:var(--mat-sys-level3);transform:translate(-50%);pointer-events:none}\n"], dependencies: [{ kind: "component", type: TableComponent, selector: "kles-table" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type:
|
|
3396
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InfiniteScrollTableComponent, isStandalone: true, selector: "kles-infinite-scroll-table", viewQueries: [{ propertyName: "table", first: true, predicate: TableComponent, descendants: true, static: true }], ngImport: i0, template: "<kles-table></kles-table>\n\n@if (loadingMore()) {\n <div class=\"loading-more-indicator\" role=\"status\" aria-label=\"Loading more rows\">\n <mat-spinner [diameter]=\"24\"></mat-spinner>\n </div>\n}\n", styles: [":host{display:flex;flex-direction:column;position:relative;height:100%;overflow:hidden}kles-table{min-height:0;flex:1 1 auto}.loading-more-indicator{position:absolute;inset-inline-start:50%;bottom:24px;z-index:600;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--mat-sys-outline-variant);border-radius:50%;background:var(--mat-sys-surface-container-high);box-shadow:var(--mat-sys-level3);transform:translate(-50%);pointer-events:none}\n"], dependencies: [{ kind: "component", type: TableComponent, selector: "kles-table" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i26.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
3389
3397
|
}
|
|
3390
3398
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InfiniteScrollTableComponent, decorators: [{
|
|
3391
3399
|
type: Component,
|