@elderbyte/ngx-starter 22.3.1 → 22.4.0
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.
|
@@ -54,7 +54,7 @@ import * as i1$a from '@angular/material/checkbox';
|
|
|
54
54
|
import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
|
|
55
55
|
import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
|
|
56
56
|
import { MatSelect, MatOption as MatOption$1, MatSelectModule } from '@angular/material/select';
|
|
57
|
-
import { MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRowDef, MatFooterRow, MatTableModule } from '@angular/material/table';
|
|
57
|
+
import { MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatNoDataRow, MatFooterRowDef, MatFooterRow, MatTableModule } from '@angular/material/table';
|
|
58
58
|
import * as i1$7 from '@angular/cdk/table';
|
|
59
59
|
import { CdkTableModule } from '@angular/cdk/table';
|
|
60
60
|
import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
|
|
@@ -18076,6 +18076,11 @@ class ElderTableDropListConnectorDirective {
|
|
|
18076
18076
|
this.dndController.register(cdkDropList);
|
|
18077
18077
|
}
|
|
18078
18078
|
}
|
|
18079
|
+
/***************************************************************************
|
|
18080
|
+
* *
|
|
18081
|
+
* Life Cycle *
|
|
18082
|
+
* *
|
|
18083
|
+
**************************************************************************/
|
|
18079
18084
|
ngOnInit() {
|
|
18080
18085
|
// Explicitly set the ID for drag-drop connection.
|
|
18081
18086
|
// cdkDropList uses the HTML id as fallback if not provided.
|
|
@@ -18084,6 +18089,14 @@ class ElderTableDropListConnectorDirective {
|
|
|
18084
18089
|
this.cdkDropList.id = id;
|
|
18085
18090
|
}
|
|
18086
18091
|
}
|
|
18092
|
+
/***************************************************************************
|
|
18093
|
+
* *
|
|
18094
|
+
* Properties *
|
|
18095
|
+
* *
|
|
18096
|
+
**************************************************************************/
|
|
18097
|
+
get hasDragAndDropSupport() {
|
|
18098
|
+
return this.dndController != null;
|
|
18099
|
+
}
|
|
18087
18100
|
/***************************************************************************
|
|
18088
18101
|
* *
|
|
18089
18102
|
* Private Methods *
|
|
@@ -18259,6 +18272,8 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
|
|
|
18259
18272
|
* *
|
|
18260
18273
|
**************************************************************************/
|
|
18261
18274
|
this.log = LoggerFactory.getLogger(this.constructor.name);
|
|
18275
|
+
this.dropListConnector = viewChild(ElderTableDropListConnectorDirective, /* @ts-ignore */
|
|
18276
|
+
...(ngDevMode ? [{ debugName: "dropListConnector" }] : /* istanbul ignore next */ []));
|
|
18262
18277
|
/**
|
|
18263
18278
|
* Load next chunk after current is done
|
|
18264
18279
|
*/
|
|
@@ -18333,6 +18348,9 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
|
|
|
18333
18348
|
* Properties *
|
|
18334
18349
|
* *
|
|
18335
18350
|
**************************************************************************/
|
|
18351
|
+
get hasDragAndDropSupport() {
|
|
18352
|
+
return untracked(this.dropListConnector)?.hasDragAndDropSupport ?? false;
|
|
18353
|
+
}
|
|
18336
18354
|
set data(data) {
|
|
18337
18355
|
this.autoCleanUp();
|
|
18338
18356
|
let dc;
|
|
@@ -18450,7 +18468,7 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
|
|
|
18450
18468
|
provide: ELDER_DATA_VIEW,
|
|
18451
18469
|
useExisting: forwardRef(() => ElderTableComponent),
|
|
18452
18470
|
},
|
|
18453
|
-
], queries: [{ propertyName: "navigationBar", first: true, predicate: ElderTableNavigationBarDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "elderColumns", predicate: ElderTableColumnDirective }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "toolbarRowTemplateQuery", predicate: ElderTableToolbarDirective, read: TemplateRef }], viewQueries: [{ propertyName: "matTable", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], exportAs: ["elderTable"], usesInheritance: true, hostDirectives: [{ directive: DataViewInteractionControllerDirective }], ngImport: i0, template: "<div class=\"full\" style=\"overflow: hidden\">\n <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n <!-- Toolbar Rows -->\n @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n <!-- Scrollable Table -->\n <div\n class=\"elder-table-inner layout-col {{\n isDataValid(viewData()) ? 'flex' : ''\n }} scrollable elder-table-scroll\"\n elderInfiniteScroll\n [eventThrottle]=\"150\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <table\n mat-table\n [id]=\"id()\"\n class=\"elder-mat-inner-table\"\n [trackBy]=\"trackByFn\"\n [dataSource]=\"$any(dc())\"\n [elderDataContextSelection]=\"dc()\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n elderTableDropListConnector\n [tableDropListConntectorId]=\"id()\"\n >\n <!-- selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef style=\"width: 0%\">\n <elder-selection-master-checkbox></elder-selection-master-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let entity\">\n <elder-table-selection-cell\n [entity]=\"entity\"\n class=\"elder-table-checkbox\"\n [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n ></elder-table-selection-cell>\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n </ng-container>\n\n @if (!hideHeaderRow()) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n }\n <tr\n mat-row\n class=\"elder-table-row\"\n *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n [elderDataViewItemDrag]=\"entity\"\n [elderTableRow]=\"entity\"\n [highlightSelection]=\"interactionMode === 'selection'\"\n [class.dense]=\"dense()\"\n [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n [class.elder-row-removing]=\"removingField && entity[removingField]\"\n (click)=\"onItemClick(entity, $event)\"\n (dblclick)=\"onItemDoubleClick(entity)\"\n ></tr>\n @if (showFooterRow()) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n }\n </table>\n </div>\n\n @if (!isDataValid(viewData())) {\n <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n </elder-data-context-state-indicator>\n }\n\n <mat-progress-bar\n class=\"flex-none mt-auto\"\n [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n >\n </mat-progress-bar>\n\n <ng-template\n *ngTemplateOutlet=\"navigationBar() ?? defaultNavigationBar; context: { $implicit: this }\"\n ></ng-template>\n </div>\n</div>\n\n<ng-template #defaultNavigationBar>\n <elder-data-navigation></elder-data-navigation>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow", "highlightSelection"], exportAs: ["elderTableRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: ElderDataViewItemDragDirective, selector: "[elderDataViewItemDrag]", inputs: ["elderDataViewItemDrag", "canDragItem"] }, { kind: "directive", type: ElderTableDropListConnectorDirective, selector: "[elderTableDropListConnector]", inputs: ["tableDropListConntectorId"] }, { kind: "component", type: ElderTableSelectionCellComponent, selector: "elder-table-selection-cell", inputs: ["entity"] }, { kind: "component", type: ElderDataNavigationComponent, selector: "elder-data-navigation" }] }); }
|
|
18471
|
+
], queries: [{ propertyName: "navigationBar", first: true, predicate: ElderTableNavigationBarDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "elderColumns", predicate: ElderTableColumnDirective }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "toolbarRowTemplateQuery", predicate: ElderTableToolbarDirective, read: TemplateRef }], viewQueries: [{ propertyName: "dropListConnector", first: true, predicate: ElderTableDropListConnectorDirective, descendants: true, isSignal: true }, { propertyName: "matTable", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], exportAs: ["elderTable"], usesInheritance: true, hostDirectives: [{ directive: DataViewInteractionControllerDirective }], ngImport: i0, template: "<div class=\"full\" style=\"overflow: hidden\">\n <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n <!-- Toolbar Rows -->\n @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n <!-- Scrollable Table -->\n <div\n class=\"elder-table-inner layout-col {{\n isDataValid(viewData()) ? 'flex' : ''\n }} scrollable elder-table-scroll\"\n elderInfiniteScroll\n [eventThrottle]=\"150\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <table\n mat-table\n [id]=\"id()\"\n class=\"elder-mat-inner-table\"\n [trackBy]=\"trackByFn\"\n [dataSource]=\"$any(dc())\"\n [elderDataContextSelection]=\"dc()\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n elderTableDropListConnector\n [tableDropListConntectorId]=\"id()\"\n >\n <!-- selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef style=\"width: 0%\">\n <elder-selection-master-checkbox></elder-selection-master-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let entity\">\n <elder-table-selection-cell\n [entity]=\"entity\"\n class=\"elder-table-checkbox\"\n [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n ></elder-table-selection-cell>\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n </ng-container>\n\n @if (!hideHeaderRow()) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n }\n <tr\n mat-row\n class=\"elder-table-row\"\n *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n [elderDataViewItemDrag]=\"entity\"\n [elderTableRow]=\"entity\"\n [highlightSelection]=\"interactionMode === 'selection'\"\n [class.dense]=\"dense()\"\n [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n [class.elder-row-removing]=\"removingField && entity[removingField]\"\n (click)=\"onItemClick(entity, $event)\"\n (dblclick)=\"onItemDoubleClick(entity)\"\n ></tr>\n <!-- Dummy row is needed as drop target (dnd) in case no data is available and no table header is displayed -->\n <ng-template matNoDataRow>\n @if (hasDragAndDropSupport) {\n <tr class=\"elder-empty-drop-row\">\n <td [attr.colspan]=\"displayedColumnsInner()?.length || 1\"></td>\n </tr>\n }\n </ng-template>\n @if (showFooterRow()) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n }\n </table>\n </div>\n\n @if (!isDataValid(viewData())) {\n <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n </elder-data-context-state-indicator>\n }\n\n <mat-progress-bar\n class=\"flex-none mt-auto\"\n [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n >\n </mat-progress-bar>\n\n <ng-template\n *ngTemplateOutlet=\"navigationBar() ?? defaultNavigationBar; context: { $implicit: this }\"\n ></ng-template>\n </div>\n</div>\n\n<ng-template #defaultNavigationBar>\n <elder-data-navigation></elder-data-navigation>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}.elder-empty-drop-row{height:48px}.elder-empty-drop-row td{padding:0;border:0}.elder-mat-inner-table:has(.cdk-drag-placeholder) .elder-empty-drop-row{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow", "highlightSelection"], exportAs: ["elderTableRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: ElderDataViewItemDragDirective, selector: "[elderDataViewItemDrag]", inputs: ["elderDataViewItemDrag", "canDragItem"] }, { kind: "directive", type: ElderTableDropListConnectorDirective, selector: "[elderTableDropListConnector]", inputs: ["tableDropListConntectorId"] }, { kind: "component", type: ElderTableSelectionCellComponent, selector: "elder-table-selection-cell", inputs: ["entity"] }, { kind: "component", type: ElderDataNavigationComponent, selector: "elder-data-navigation" }] }); }
|
|
18454
18472
|
}
|
|
18455
18473
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ElderTableComponent, decorators: [{
|
|
18456
18474
|
type: Component,
|
|
@@ -18477,6 +18495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImpor
|
|
|
18477
18495
|
MatHeaderRow,
|
|
18478
18496
|
MatRowDef,
|
|
18479
18497
|
MatRow,
|
|
18498
|
+
MatNoDataRow,
|
|
18480
18499
|
ElderTableRowDirective,
|
|
18481
18500
|
MatFooterRowDef,
|
|
18482
18501
|
MatFooterRow,
|
|
@@ -18486,7 +18505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImpor
|
|
|
18486
18505
|
ElderTableDropListConnectorDirective,
|
|
18487
18506
|
ElderTableSelectionCellComponent,
|
|
18488
18507
|
ElderDataNavigationComponent,
|
|
18489
|
-
], template: "<div class=\"full\" style=\"overflow: hidden\">\n <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n <!-- Toolbar Rows -->\n @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n <!-- Scrollable Table -->\n <div\n class=\"elder-table-inner layout-col {{\n isDataValid(viewData()) ? 'flex' : ''\n }} scrollable elder-table-scroll\"\n elderInfiniteScroll\n [eventThrottle]=\"150\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <table\n mat-table\n [id]=\"id()\"\n class=\"elder-mat-inner-table\"\n [trackBy]=\"trackByFn\"\n [dataSource]=\"$any(dc())\"\n [elderDataContextSelection]=\"dc()\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n elderTableDropListConnector\n [tableDropListConntectorId]=\"id()\"\n >\n <!-- selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef style=\"width: 0%\">\n <elder-selection-master-checkbox></elder-selection-master-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let entity\">\n <elder-table-selection-cell\n [entity]=\"entity\"\n class=\"elder-table-checkbox\"\n [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n ></elder-table-selection-cell>\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n </ng-container>\n\n @if (!hideHeaderRow()) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n }\n <tr\n mat-row\n class=\"elder-table-row\"\n *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n [elderDataViewItemDrag]=\"entity\"\n [elderTableRow]=\"entity\"\n [highlightSelection]=\"interactionMode === 'selection'\"\n [class.dense]=\"dense()\"\n [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n [class.elder-row-removing]=\"removingField && entity[removingField]\"\n (click)=\"onItemClick(entity, $event)\"\n (dblclick)=\"onItemDoubleClick(entity)\"\n ></tr>\n @if (showFooterRow()) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n }\n </table>\n </div>\n\n @if (!isDataValid(viewData())) {\n <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n </elder-data-context-state-indicator>\n }\n\n <mat-progress-bar\n class=\"flex-none mt-auto\"\n [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n >\n </mat-progress-bar>\n\n <ng-template\n *ngTemplateOutlet=\"navigationBar() ?? defaultNavigationBar; context: { $implicit: this }\"\n ></ng-template>\n </div>\n</div>\n\n<ng-template #defaultNavigationBar>\n <elder-data-navigation></elder-data-navigation>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}\n"] }]
|
|
18508
|
+
], template: "<div class=\"full\" style=\"overflow: hidden\">\n <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n <!-- Toolbar Rows -->\n @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n <!-- Scrollable Table -->\n <div\n class=\"elder-table-inner layout-col {{\n isDataValid(viewData()) ? 'flex' : ''\n }} scrollable elder-table-scroll\"\n elderInfiniteScroll\n [eventThrottle]=\"150\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <table\n mat-table\n [id]=\"id()\"\n class=\"elder-mat-inner-table\"\n [trackBy]=\"trackByFn\"\n [dataSource]=\"$any(dc())\"\n [elderDataContextSelection]=\"dc()\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n elderTableDropListConnector\n [tableDropListConntectorId]=\"id()\"\n >\n <!-- selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef style=\"width: 0%\">\n <elder-selection-master-checkbox></elder-selection-master-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let entity\">\n <elder-table-selection-cell\n [entity]=\"entity\"\n class=\"elder-table-checkbox\"\n [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n ></elder-table-selection-cell>\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n </ng-container>\n\n @if (!hideHeaderRow()) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n }\n <tr\n mat-row\n class=\"elder-table-row\"\n *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n [elderDataViewItemDrag]=\"entity\"\n [elderTableRow]=\"entity\"\n [highlightSelection]=\"interactionMode === 'selection'\"\n [class.dense]=\"dense()\"\n [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n [class.elder-row-removing]=\"removingField && entity[removingField]\"\n (click)=\"onItemClick(entity, $event)\"\n (dblclick)=\"onItemDoubleClick(entity)\"\n ></tr>\n <!-- Dummy row is needed as drop target (dnd) in case no data is available and no table header is displayed -->\n <ng-template matNoDataRow>\n @if (hasDragAndDropSupport) {\n <tr class=\"elder-empty-drop-row\">\n <td [attr.colspan]=\"displayedColumnsInner()?.length || 1\"></td>\n </tr>\n }\n </ng-template>\n @if (showFooterRow()) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n }\n </table>\n </div>\n\n @if (!isDataValid(viewData())) {\n <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n </elder-data-context-state-indicator>\n }\n\n <mat-progress-bar\n class=\"flex-none mt-auto\"\n [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n >\n </mat-progress-bar>\n\n <ng-template\n *ngTemplateOutlet=\"navigationBar() ?? defaultNavigationBar; context: { $implicit: this }\"\n ></ng-template>\n </div>\n</div>\n\n<ng-template #defaultNavigationBar>\n <elder-data-navigation></elder-data-navigation>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}.elder-empty-drop-row{height:48px}.elder-empty-drop-row td{padding:0;border:0}.elder-mat-inner-table:has(.cdk-drag-placeholder) .elder-empty-drop-row{display:none}\n"] }]
|
|
18490
18509
|
}], ctorParameters: () => [{ type: ElderTableModel }, { type: SelectionModel, decorators: [{
|
|
18491
18510
|
type: Optional
|
|
18492
18511
|
}] }, { type: ElderDataViewOptionsProvider, decorators: [{
|
|
@@ -18495,7 +18514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImpor
|
|
|
18495
18514
|
type: SkipSelf
|
|
18496
18515
|
}] }, { type: i4.MatSort, decorators: [{
|
|
18497
18516
|
type: Optional
|
|
18498
|
-
}] }, { type: i0.NgZone }, { type: DataViewInteractionControllerDirective }], propDecorators: { matTable: [{
|
|
18517
|
+
}] }, { type: i0.NgZone }, { type: DataViewInteractionControllerDirective }], propDecorators: { dropListConnector: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ElderTableDropListConnectorDirective), { isSignal: true }] }], matTable: [{
|
|
18499
18518
|
type: ViewChild,
|
|
18500
18519
|
args: [MatTable, { static: true }]
|
|
18501
18520
|
}], columnDefs: [{
|