@3kles/kles-material-table-v2 21.4.1 → 21.4.2
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.
|
@@ -1967,9 +1967,9 @@ class TableComponent {
|
|
|
1967
1967
|
this.rowService = rowService;
|
|
1968
1968
|
this.cellService = cellService;
|
|
1969
1969
|
this.emptyStateService = emptyStateService;
|
|
1970
|
-
this.headerHeightPx = 56;
|
|
1971
|
-
this.scrollHeightPx = 0;
|
|
1972
|
-
this.footerHeightPx = 0;
|
|
1970
|
+
this.headerHeightPx = signal(56, ...(ngDevMode ? [{ debugName: "headerHeightPx" }] : /* istanbul ignore next */ []));
|
|
1971
|
+
this.scrollHeightPx = signal(0, ...(ngDevMode ? [{ debugName: "scrollHeightPx" }] : /* istanbul ignore next */ []));
|
|
1972
|
+
this.footerHeightPx = signal(0, ...(ngDevMode ? [{ debugName: "footerHeightPx" }] : /* istanbul ignore next */ []));
|
|
1973
1973
|
this.destroyRef = inject(DestroyRef);
|
|
1974
1974
|
this.emptyStateComponent = KlesTableEmptyStateComponent;
|
|
1975
1975
|
this.columns = this.columnsService.columns;
|
|
@@ -2187,9 +2187,9 @@ class TableComponent {
|
|
|
2187
2187
|
const header = this.host.nativeElement.querySelector('.mat-mdc-header-row');
|
|
2188
2188
|
const footer = this.host.nativeElement.querySelector('.mat-mdc-footer-row');
|
|
2189
2189
|
const compute = () => {
|
|
2190
|
-
this.scrollHeightPx
|
|
2191
|
-
this.headerHeightPx
|
|
2192
|
-
this.footerHeightPx
|
|
2190
|
+
this.scrollHeightPx.set(Math.max(0, (formNativeElem?.offsetHeight ?? 0) - (formNativeElem?.clientHeight ?? 0)));
|
|
2191
|
+
this.headerHeightPx.set(Math.ceil(header?.getBoundingClientRect().height ?? 0));
|
|
2192
|
+
this.footerHeightPx.set(Math.max(0, footer?.getBoundingClientRect().height ?? 0));
|
|
2193
2193
|
};
|
|
2194
2194
|
const scheduleCompute = () => {
|
|
2195
2195
|
if (this.rafId) {
|
|
@@ -2225,7 +2225,7 @@ class TableComponent {
|
|
|
2225
2225
|
}
|
|
2226
2226
|
}
|
|
2227
2227
|
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: 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 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2228
|
-
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 [formGroup]=\"tableService.form\" (ngSubmit)=\"submit()\">\n <!-- [fixedLayout]=\"true\" -->\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n [trackBy]=\"multiTemplateDataRows() ? null : tableService.trackBy\"\n formArrayName=\"rows\"\n cdkDropList\n [cdkDropListData]=\"tableService.form.controls.rows\"\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 [style.width]=\"column.width ?? null\" [style.minWidth]=\"column.minWidth ?? null\" [style.maxWidth]=\"column.maxWidth ?? null\" />\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 [header]=\"column | header\" [group]=\"tableService.form.controls.header\">\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 [group]=\"row\" [ui]=\"row | uiField\" [column]=\"column\">\n <ng-container klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\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 (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 @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 *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 *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}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn]{position:relative}th[appResizableColumn] .resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}.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{transition:background-color .12s ease}:host .mat-mdc-row:hover{background:var(--kles-table-row-hover-background)}: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: i16.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i16.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i17.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i17.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i17.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i17.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: i19.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i19.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i19.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i19.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i19.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i19.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i19.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i19.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i19.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i19.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i19.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i19.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: i20.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i20.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "ngmodule", type: KlesMaterialDynamicformsModule }, { kind: "directive", type: i21.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i22.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: i22.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: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i23.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"] }, { kind: "component", type: KlesHeaderComponent, selector: "kles-header", inputs: ["header", "group"] }, { 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" }] }); }
|
|
2228
|
+
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 [formGroup]=\"tableService.form\" (ngSubmit)=\"submit()\">\n <!-- [fixedLayout]=\"true\" -->\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n [trackBy]=\"multiTemplateDataRows() ? null : tableService.trackBy\"\n formArrayName=\"rows\"\n cdkDropList\n [cdkDropListData]=\"tableService.form.controls.rows\"\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 [style.width]=\"column.width ?? null\" [style.minWidth]=\"column.minWidth ?? null\" [style.maxWidth]=\"column.maxWidth ?? null\" />\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 [header]=\"column | header\" [group]=\"tableService.form.controls.header\">\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 [group]=\"row\" [ui]=\"row | uiField\" [column]=\"column\">\n <ng-container klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\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 (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 @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 *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 *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}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn]{position:relative}th[appResizableColumn] .resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}.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{transition:background-color .12s ease}:host .mat-mdc-row:hover{background:var(--kles-table-row-hover-background)}: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: i16.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i16.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i17.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i17.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i17.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i17.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: i19.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i19.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i19.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i19.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i19.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i19.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i19.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i19.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i19.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i19.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i19.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i19.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: i20.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i20.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "ngmodule", type: KlesMaterialDynamicformsModule }, { kind: "directive", type: i21.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i22.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: i22.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: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i23.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"] }, { kind: "component", type: KlesHeaderComponent, selector: "kles-header", inputs: ["header", "group"] }, { 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" }] }); }
|
|
2229
2229
|
}
|
|
2230
2230
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: TableComponent, decorators: [{
|
|
2231
2231
|
type: Component,
|
|
@@ -2254,8 +2254,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
2254
2254
|
KlesCellComponent,
|
|
2255
2255
|
KlesHeaderComponent,
|
|
2256
2256
|
HeaderPipe,
|
|
2257
|
-
RowContextPipe
|
|
2258
|
-
], template: "<form #form [formGroup]=\"tableService.form\" (ngSubmit)=\"submit()\">\n <!-- [fixedLayout]=\"true\" -->\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n [trackBy]=\"multiTemplateDataRows() ? null : tableService.trackBy\"\n formArrayName=\"rows\"\n cdkDropList\n [cdkDropListData]=\"tableService.form.controls.rows\"\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 [style.width]=\"column.width ?? null\" [style.minWidth]=\"column.minWidth ?? null\" [style.maxWidth]=\"column.maxWidth ?? null\" />\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 [header]=\"column | header\" [group]=\"tableService.form.controls.header\">\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 [group]=\"row\" [ui]=\"row | uiField\" [column]=\"column\">\n <ng-container klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\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 (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 @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 *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 *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}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn]{position:relative}th[appResizableColumn] .resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}.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{transition:background-color .12s ease}:host .mat-mdc-row:hover{background:var(--kles-table-row-hover-background)}: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"] }]
|
|
2257
|
+
RowContextPipe,
|
|
2258
|
+
], template: "<form #form [formGroup]=\"tableService.form\" (ngSubmit)=\"submit()\">\n <!-- [fixedLayout]=\"true\" -->\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n [trackBy]=\"multiTemplateDataRows() ? null : tableService.trackBy\"\n formArrayName=\"rows\"\n cdkDropList\n [cdkDropListData]=\"tableService.form.controls.rows\"\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 [style.width]=\"column.width ?? null\" [style.minWidth]=\"column.minWidth ?? null\" [style.maxWidth]=\"column.maxWidth ?? null\" />\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 [header]=\"column | header\" [group]=\"tableService.form.controls.header\">\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 [group]=\"row\" [ui]=\"row | uiField\" [column]=\"column\">\n <ng-container klesDynamicField [field]=\"column | cellField\" [group]=\"row\" [ui]=\"row | uiField\" [context]=\"row | rowContext\"></ng-container>\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 (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 @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 *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 *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}th .cell,td .cell{display:flex;flex-direction:column;justify-content:var(--align, center)}th[appResizableColumn]{position:relative}th[appResizableColumn] .resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}.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{transition:background-color .12s ease}:host .mat-mdc-row:hover{background:var(--kles-table-row-hover-background)}: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"] }]
|
|
2259
2259
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: KlesTableConnectorService }, { type: undefined, decorators: [{
|
|
2260
2260
|
type: Inject,
|
|
2261
2261
|
args: [LOADER_SERVICE]
|