@acontplus/ng-components 1.1.0 → 1.2.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.
- package/README.md +274 -48
- package/fesm2022/acontplus-ng-components.mjs +44 -11
- package/fesm2022/acontplus-ng-components.mjs.map +1 -1
- package/index.d.ts +13 -4
- package/package.json +8 -6
|
@@ -416,6 +416,7 @@ class TabulatorTableComponent {
|
|
|
416
416
|
theme = input({ name: 'default' }, ...(ngDevMode ? [{ debugName: "theme" }] : []));
|
|
417
417
|
// Custom styling
|
|
418
418
|
customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : []));
|
|
419
|
+
rowFormatter = input(...(ngDevMode ? [undefined, { debugName: "rowFormatter" }] : []));
|
|
419
420
|
// Custom options
|
|
420
421
|
options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
421
422
|
// Events
|
|
@@ -425,7 +426,7 @@ class TabulatorTableComponent {
|
|
|
425
426
|
tableReady = output();
|
|
426
427
|
_tabulator;
|
|
427
428
|
// Made public for template access
|
|
428
|
-
containerId = `acp-tabulator-${Math.random().toString(36).substr(2, 9)}`;
|
|
429
|
+
containerId = `acp-tabulator-table-${Math.random().toString(36).substr(2, 9)}`;
|
|
429
430
|
ngAfterViewInit() {
|
|
430
431
|
this.initializeTable();
|
|
431
432
|
}
|
|
@@ -442,6 +443,9 @@ class TabulatorTableComponent {
|
|
|
442
443
|
if (changes['customClass'] && !changes['customClass'].isFirstChange()) {
|
|
443
444
|
this.applyCustomClass(changes['customClass'].previousValue, this.customClass());
|
|
444
445
|
}
|
|
446
|
+
if (changes['rowFormatter'] && !changes['rowFormatter'].isFirstChange()) {
|
|
447
|
+
this.updateRowFormatter();
|
|
448
|
+
}
|
|
445
449
|
}
|
|
446
450
|
ngOnDestroy() {
|
|
447
451
|
this.destroyTable();
|
|
@@ -470,6 +474,7 @@ class TabulatorTableComponent {
|
|
|
470
474
|
selectable: this.selectable(),
|
|
471
475
|
renderVertical: 'virtual',
|
|
472
476
|
renderVerticalBuffer: 300,
|
|
477
|
+
rowFormatter: this.getRowFormatter(),
|
|
473
478
|
...this.options(),
|
|
474
479
|
};
|
|
475
480
|
try {
|
|
@@ -538,6 +543,11 @@ class TabulatorTableComponent {
|
|
|
538
543
|
this._tabulator.destroy();
|
|
539
544
|
}
|
|
540
545
|
}
|
|
546
|
+
updateRowFormatter() {
|
|
547
|
+
if (this._tabulator) {
|
|
548
|
+
this._tabulator.redraw(true);
|
|
549
|
+
}
|
|
550
|
+
}
|
|
541
551
|
// Public API methods
|
|
542
552
|
getInstance() {
|
|
543
553
|
return this._tabulator;
|
|
@@ -547,12 +557,28 @@ class TabulatorTableComponent {
|
|
|
547
557
|
this._tabulator.redraw();
|
|
548
558
|
}
|
|
549
559
|
}
|
|
560
|
+
getRowFormatter() {
|
|
561
|
+
return (row) => {
|
|
562
|
+
const data = row.getData();
|
|
563
|
+
const element = row.getElement();
|
|
564
|
+
// Apply custom row formatter if provided
|
|
565
|
+
const customFormatter = this.rowFormatter();
|
|
566
|
+
if (customFormatter) {
|
|
567
|
+
customFormatter(row);
|
|
568
|
+
return;
|
|
569
|
+
}
|
|
570
|
+
// Apply rowStyle if present in data
|
|
571
|
+
if (data.rowStyle) {
|
|
572
|
+
Object.assign(element.style, data.rowStyle);
|
|
573
|
+
}
|
|
574
|
+
};
|
|
575
|
+
}
|
|
550
576
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TabulatorTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
551
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", type: TabulatorTableComponent, isStandalone: true, selector: "acp-tabulator", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, dataTree: { classPropertyName: "dataTree", publicName: "dataTree", isSignal: true, isRequired: false, transformFunction: null }, dataTreeChildField: { classPropertyName: "dataTreeChildField", publicName: "dataTreeChildField", isSignal: true, isRequired: false, transformFunction: null }, dataTreeStartExpanded: { classPropertyName: "dataTreeStartExpanded", publicName: "dataTreeStartExpanded", isSignal: true, isRequired: false, transformFunction: null }, dataTreeSelectPropagate: { classPropertyName: "dataTreeSelectPropagate", publicName: "dataTreeSelectPropagate", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, reactiveData: { classPropertyName: "reactiveData", publicName: "reactiveData", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellEdited: "cellEdited", rowClick: "rowClick", rowSelected: "rowSelected", tableReady: "tableReady" }, usesOnChanges: true, ngImport: i0, template: "<div [id]=\"containerId\" class=\"acp-tabulator-container\"></div>\n", styles: [".acp-tabulator-table{display:block}.acp-tabulator-container{width:100%}.acp-tabulator-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-container .tabulator-row.tabulator-selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .12))}@media (max-width: 768px){.acp-tabulator-container .tabulator-header{font-size:.875rem}.acp-tabulator-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-container .tabulator-loader{background:var(--mat-sys-surface-container, rgba(255, 255, 255, .8));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
577
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", type: TabulatorTableComponent, isStandalone: true, selector: "acp-tabulator-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, dataTree: { classPropertyName: "dataTree", publicName: "dataTree", isSignal: true, isRequired: false, transformFunction: null }, dataTreeChildField: { classPropertyName: "dataTreeChildField", publicName: "dataTreeChildField", isSignal: true, isRequired: false, transformFunction: null }, dataTreeStartExpanded: { classPropertyName: "dataTreeStartExpanded", publicName: "dataTreeStartExpanded", isSignal: true, isRequired: false, transformFunction: null }, dataTreeSelectPropagate: { classPropertyName: "dataTreeSelectPropagate", publicName: "dataTreeSelectPropagate", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, reactiveData: { classPropertyName: "reactiveData", publicName: "reactiveData", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, rowFormatter: { classPropertyName: "rowFormatter", publicName: "rowFormatter", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellEdited: "cellEdited", rowClick: "rowClick", rowSelected: "rowSelected", tableReady: "tableReady" }, usesOnChanges: true, ngImport: i0, template: "<div [id]=\"containerId\" class=\"acp-tabulator-table-container\"></div>\n", styles: [".acp-tabulator-table{display:block}.acp-tabulator-table-container{width:100%}.acp-tabulator-table-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-table-container .tabulator-row.tabulator-selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .12))}@media (max-width: 768px){.acp-tabulator-table-container .tabulator-header{font-size:.875rem}.acp-tabulator-table-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-table-container .tabulator-loader{background:var(--mat-sys-surface-container, rgba(255, 255, 255, .8));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
552
578
|
}
|
|
553
579
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TabulatorTableComponent, decorators: [{
|
|
554
580
|
type: Component,
|
|
555
|
-
args: [{ selector: 'acp-tabulator', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<div [id]=\"containerId\" class=\"acp-tabulator-container\"></div>\n", styles: [".acp-tabulator-table{display:block}.acp-tabulator-container{width:100%}.acp-tabulator-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-container .tabulator-row.tabulator-selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .12))}@media (max-width: 768px){.acp-tabulator-container .tabulator-header{font-size:.875rem}.acp-tabulator-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-container .tabulator-loader{background:var(--mat-sys-surface-container, rgba(255, 255, 255, .8));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:4px}.acp-tabulator-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}\n"] }]
|
|
581
|
+
args: [{ selector: 'acp-tabulator-table', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<div [id]=\"containerId\" class=\"acp-tabulator-table-container\"></div>\n", styles: [".acp-tabulator-table{display:block}.acp-tabulator-table-container{width:100%}.acp-tabulator-table-container .tabulator-row.tabulator-selectable:hover{background-color:#0000000a;cursor:pointer;transition:background-color .2s ease}.acp-tabulator-table-container .tabulator-row.tabulator-selected{background-color:var(--mat-sys-primary-container, rgba(25, 118, 210, .12))}@media (max-width: 768px){.acp-tabulator-table-container .tabulator-header{font-size:.875rem}.acp-tabulator-table-container .tabulator-cell{font-size:.875rem;padding:8px 6px}}.acp-tabulator-table-container .tabulator-loader{background:var(--mat-sys-surface-container, rgba(255, 255, 255, .8));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar{width:8px;height:8px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:4px}.acp-tabulator-table-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}\n"] }]
|
|
556
582
|
}] });
|
|
557
583
|
|
|
558
584
|
class GetTotalPipe {
|
|
@@ -647,6 +673,7 @@ class DynamicTableComponent {
|
|
|
647
673
|
visibleColumns = [];
|
|
648
674
|
columnDefinitions = [];
|
|
649
675
|
showSelectBox = input(false, ...(ngDevMode ? [{ debugName: "showSelectBox" }] : []));
|
|
676
|
+
multipleSelection = input(true, ...(ngDevMode ? [{ debugName: "multipleSelection" }] : []));
|
|
650
677
|
tableData = input([], ...(ngDevMode ? [{ debugName: "tableData" }] : []));
|
|
651
678
|
rowTemplate = input(null, ...(ngDevMode ? [{ debugName: "rowTemplate" }] : []));
|
|
652
679
|
expandedDetail = null;
|
|
@@ -732,7 +759,7 @@ class DynamicTableComponent {
|
|
|
732
759
|
this.columnsToDisplayWithExpand = newColumns;
|
|
733
760
|
}
|
|
734
761
|
initializeSelection() {
|
|
735
|
-
this.selection = new SelectionModel(
|
|
762
|
+
this.selection = new SelectionModel(this.multipleSelection(), []);
|
|
736
763
|
}
|
|
737
764
|
registerTableContent() {
|
|
738
765
|
this.columnDefs().forEach(columnDef => this.table().addColumnDef(columnDef));
|
|
@@ -754,15 +781,19 @@ class DynamicTableComponent {
|
|
|
754
781
|
}
|
|
755
782
|
isAllSelected() {
|
|
756
783
|
const numSelected = this.selection.selected.length;
|
|
757
|
-
const
|
|
758
|
-
return numSelected ===
|
|
784
|
+
const selectableRows = this.dataSource.data.filter(row => !row.disableSelection);
|
|
785
|
+
return numSelected === selectableRows.length && selectableRows.length > 0;
|
|
759
786
|
}
|
|
760
787
|
masterToggle() {
|
|
788
|
+
if (!this.multipleSelection())
|
|
789
|
+
return;
|
|
761
790
|
if (this.isAllSelected()) {
|
|
762
791
|
this.selection.clear();
|
|
763
792
|
}
|
|
764
793
|
else {
|
|
765
|
-
this.dataSource.data
|
|
794
|
+
this.dataSource.data
|
|
795
|
+
.filter(row => !row.disableSelection)
|
|
796
|
+
.forEach(row => this.selection.select(row));
|
|
766
797
|
}
|
|
767
798
|
this.rowSelected.emit(this.selection.selected);
|
|
768
799
|
this.cdr.markForCheck();
|
|
@@ -774,6 +805,8 @@ class DynamicTableComponent {
|
|
|
774
805
|
return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row`;
|
|
775
806
|
}
|
|
776
807
|
selectRow(row) {
|
|
808
|
+
if (row.disableSelection)
|
|
809
|
+
return;
|
|
777
810
|
this.selection.toggle(row);
|
|
778
811
|
this.rowSelected.emit(this.selection.selected);
|
|
779
812
|
this.cdr.markForCheck();
|
|
@@ -789,14 +822,14 @@ class DynamicTableComponent {
|
|
|
789
822
|
}
|
|
790
823
|
this.cdr.markForCheck();
|
|
791
824
|
}
|
|
792
|
-
|
|
793
|
-
return element.
|
|
825
|
+
getRowStyle(element) {
|
|
826
|
+
return element.rowStyle || {};
|
|
794
827
|
}
|
|
795
828
|
handlePageEvent(e) {
|
|
796
829
|
this.pageEvent.emit(e);
|
|
797
830
|
}
|
|
798
831
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DynamicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
799
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DynamicTableComponent, isStandalone: true, selector: "acp-dynamic-table", inputs: { showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, highlightRowIndex: { classPropertyName: "highlightRowIndex", publicName: "highlightRowIndex", isSignal: true, isRequired: false, transformFunction: null }, visibleColumns: { classPropertyName: "visibleColumns", publicName: "visibleColumns", isSignal: false, isRequired: false, transformFunction: null }, columnDefinitions: { classPropertyName: "columnDefinitions", publicName: "columnDefinitions", isSignal: false, isRequired: false, transformFunction: null }, showSelectBox: { classPropertyName: "showSelectBox", publicName: "showSelectBox", isSignal: true, isRequired: false, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: false, transformFunction: null }, rowTemplate: { classPropertyName: "rowTemplate", publicName: "rowTemplate", isSignal: true, isRequired: false, transformFunction: null }, expandedDetail: { classPropertyName: "expandedDetail", publicName: "expandedDetail", isSignal: false, isRequired: false, transformFunction: null }, enablePagination: { classPropertyName: "enablePagination", publicName: "enablePagination", isSignal: true, isRequired: false, transformFunction: null }, paginationConfig: { classPropertyName: "paginationConfig", publicName: "paginationConfig", isSignal: false, isRequired: false, transformFunction: null }, isLoadingData: { classPropertyName: "isLoadingData", publicName: "isLoadingData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowSelected: "rowSelected", copyRow: "copyRow", showExpanded: "showExpanded", hideExpanded: "hideExpanded", pageEvent: "pageEvent" }, queries: [{ propertyName: "headerRowDefs", predicate: MatHeaderRowDef, isSignal: true }, { propertyName: "rowDefs", predicate: MatRowDef, isSignal: true }, { propertyName: "footerRowDefs", predicate: MatFooterRowDef, isSignal: true }, { propertyName: "columnDefs", predicate: MatColumnDef, isSignal: true }, { propertyName: "rows", predicate: ViewContainerRef, isSignal: true }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"acp-dynamic-table\">\n <div class=\"acp-table-container small-table\">\n <table #sort=\"matSort\" [dataSource]=\"dataSource.data\" mat-table matSort>\n @if (columnDefinitions) {\n <!-- Checkbox Column -->\n @if (showSelectBox()) {\n <ng-container matColumnDef=\"select\">\n <th *matHeaderCellDef mat-header-cell>\n <mat-checkbox\n (change)=\"$event ? masterToggle() : null\"\n (click)=\"$event.stopPropagation()\"\n [aria-label]=\"checkboxLabel()\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n />\n </th>\n <td *matCellDef=\"let row\" mat-cell>\n <mat-checkbox\n (change)=\"$event ? selection.toggle(row) : null\"\n (click)=\"$event.stopPropagation()\"\n [aria-label]=\"checkboxLabel(row)\"\n [checked]=\"selection.isSelected(row)\"\n />\n </td>\n <td *matFooterCellDef mat-footer-cell></td>\n </ng-container>\n }\n\n <!-- Dynamic Columns -->\n @for (col of columnDefinitions; track col.key) {\n <ng-container [matColumnDef]=\"col.key\">\n <th *matHeaderCellDef mat-header-cell>\n {{ col.label }}\n </th>\n\n <td\n mat-cell\n *matCellDef=\"let element; let i = index\"\n [ngClass]=\"{ highlighted: highlightRowIndex() === i }\"\n >\n @if (col.key === 'op') {\n <div class=\"d-flex flex-row gap-1\">\n @if (col.templateOutlet) {\n <ng-container\n *ngTemplateOutlet=\"\n col.templateOutlet;\n context: { $implicit: element, index: i }\n \"\n />\n } @else if (rowTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: element, index: i }\"\n />\n }\n </div>\n } @else {\n @switch (col.type) {\n @case ('image') {\n <img\n [src]=\"element[col.key]\"\n class=\"img-fluid img-thumbnail my-1\"\n width=\"50\"\n alt=\"\"\n />\n }\n @case ('number') {\n <div>{{ element[col.key] | number: '1.2' : locale() }}</div>\n }\n @case ('date') {\n <div>{{ element[col.key] | date: 'dd.MM.yyyy' }}</div>\n }\n @case ('expand') {\n <button\n mat-icon-button\n aria-label=\"expand row\"\n (click)=\"onExpand($event, element)\"\n >\n @if (expandedElement === element) {\n <mat-icon>keyboard_arrow_up</mat-icon>\n } @else {\n <mat-icon>keyboard_arrow_down</mat-icon>\n }\n </button>\n }\n @case ('template') {\n <ng-container\n *ngTemplateOutlet=\"\n col.templateOutlet;\n context: { $implicit: element, index: i }\n \"\n />\n }\n @case ('custom') {\n <ng-container #dynamicContent />\n }\n @default {\n <div>{{ element[col.key] }}</div>\n }\n }\n }\n </td>\n\n <td *matFooterCellDef mat-footer-cell>\n @if (col.index === 0) {\n <div>Total</div>\n }\n @if (col.hasFooter) {\n <div>{{ col.key | getTotal: dataSource.data }}</div>\n }\n </td>\n </ng-container>\n }\n\n <!-- Expanded Detail Row -->\n @if (showExpand() && expandedDetail) {\n <ng-container matColumnDef=\"expandedDetail\">\n <td\n mat-cell\n *matCellDef=\"let element; let i = index\"\n [attr.colspan]=\"columnsToDisplayWithExpand.length\"\n >\n <div\n class=\"m-0 p-0 acp-detail-expand\"\n [class.acp-expanded]=\"element === expandedElement\"\n >\n <ng-container\n *ngTemplateOutlet=\"expandedDetail; context: { $implicit: element, index: i }\"\n />\n </div>\n </td>\n </ng-container>\n }\n\n <!-- Header Row -->\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplayWithExpand\"></tr>\n\n <!-- Data Rows -->\n @if (showExpand() && expandedDetail) {\n <!-- Regular Row -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnsToDisplayWithExpand; when: isNormalRow\"\n class=\"acp-dynamic-table-row\"\n [class.acp-dynamic-table-expanded-row]=\"expandedElement === row\"\n [ngStyle]=\"getRowColor(row)\"\n (click)=\"expandedElement = expandedElement === row ? null : row\"\n ></tr>\n\n <!-- Expanded Row -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\"\n class=\"acp-dynamic-table-detail-row\"\n ></tr>\n } @else {\n <!-- Regular Row without expansion -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnsToDisplayWithExpand\"\n [ngStyle]=\"getRowColor(row)\"\n ></tr>\n }\n\n <!-- No Data Row -->\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell text-center\" [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n No records found\n </td>\n </tr>\n\n <!-- Footer -->\n @if (showFooter() && dataSource.data.length > 0) {\n <tr mat-footer-row *matFooterRowDef=\"columnsToDisplayWithExpand\"></tr>\n }\n }\n </table>\n </div>\n\n @if (enablePagination() && paginationConfig) {\n <mat-paginator\n #paginator\n [disabled]=\"isLoadingData()\"\n (page)=\"handlePageEvent($event)\"\n [length]=\"paginationConfig.totalRecords\"\n [pageSize]=\"paginationConfig.pageSize\"\n [pageSizeOptions]=\"paginationConfig.pageSizeOptions || []\"\n [showFirstLastButtons]=\"true\"\n [pageIndex]=\"paginationConfig.pageIndex\"\n aria-label=\"Select page\"\n />\n }\n</div>\n", styles: [".acp-dynamic-table{display:block}.acp-dynamic-table .acp-table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}.acp-dynamic-table table{width:100%}.acp-dynamic-table tr.acp-dynamic-table-detail-row{height:0}.acp-dynamic-table tr.acp-dynamic-table-row:not(.acp-dynamic-table-expanded-row):hover{background:var(--mat-sys-surface-variant, whitesmoke)}.acp-dynamic-table tr.acp-dynamic-table-row:not(.acp-dynamic-table-expanded-row):active{background:var(--mat-sys-surface-container, #efefef)}.acp-dynamic-table .acp-dynamic-table-row td{border-bottom-width:0}.acp-dynamic-table .acp-detail-expand{height:0;overflow:hidden;transition:height .15s ease-in-out}.acp-dynamic-table .acp-detail-expand.acp-expanded{height:auto;overflow:visible}@starting-style{.acp-dynamic-table .acp-detail-expand.acp-expanded{height:0}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$2.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: GetTotalPipe, name: "getTotal" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
832
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DynamicTableComponent, isStandalone: true, selector: "acp-dynamic-table", inputs: { showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, highlightRowIndex: { classPropertyName: "highlightRowIndex", publicName: "highlightRowIndex", isSignal: true, isRequired: false, transformFunction: null }, visibleColumns: { classPropertyName: "visibleColumns", publicName: "visibleColumns", isSignal: false, isRequired: false, transformFunction: null }, columnDefinitions: { classPropertyName: "columnDefinitions", publicName: "columnDefinitions", isSignal: false, isRequired: false, transformFunction: null }, showSelectBox: { classPropertyName: "showSelectBox", publicName: "showSelectBox", isSignal: true, isRequired: false, transformFunction: null }, multipleSelection: { classPropertyName: "multipleSelection", publicName: "multipleSelection", isSignal: true, isRequired: false, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: false, transformFunction: null }, rowTemplate: { classPropertyName: "rowTemplate", publicName: "rowTemplate", isSignal: true, isRequired: false, transformFunction: null }, expandedDetail: { classPropertyName: "expandedDetail", publicName: "expandedDetail", isSignal: false, isRequired: false, transformFunction: null }, enablePagination: { classPropertyName: "enablePagination", publicName: "enablePagination", isSignal: true, isRequired: false, transformFunction: null }, paginationConfig: { classPropertyName: "paginationConfig", publicName: "paginationConfig", isSignal: false, isRequired: false, transformFunction: null }, isLoadingData: { classPropertyName: "isLoadingData", publicName: "isLoadingData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowSelected: "rowSelected", copyRow: "copyRow", showExpanded: "showExpanded", hideExpanded: "hideExpanded", pageEvent: "pageEvent" }, queries: [{ propertyName: "headerRowDefs", predicate: MatHeaderRowDef, isSignal: true }, { propertyName: "rowDefs", predicate: MatRowDef, isSignal: true }, { propertyName: "footerRowDefs", predicate: MatFooterRowDef, isSignal: true }, { propertyName: "columnDefs", predicate: MatColumnDef, isSignal: true }, { propertyName: "rows", predicate: ViewContainerRef, isSignal: true }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"acp-dynamic-table\">\n <div class=\"acp-table-container small-table\">\n <table #sort=\"matSort\" [dataSource]=\"dataSource.data\" mat-table matSort>\n @if (columnDefinitions) {\n <!-- Checkbox Column -->\n @if (showSelectBox()) {\n <ng-container matColumnDef=\"select\">\n <th *matHeaderCellDef mat-header-cell>\n @if (multipleSelection()) {\n <mat-checkbox\n (change)=\"$event ? masterToggle() : null\"\n (click)=\"$event.stopPropagation()\"\n [aria-label]=\"checkboxLabel()\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n />\n }\n </th>\n <td *matCellDef=\"let row\" mat-cell>\n <mat-checkbox\n (change)=\"$event ? selectRow(row) : null\"\n (click)=\"$event.stopPropagation()\"\n [aria-label]=\"checkboxLabel(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"row.disableSelection\"\n />\n </td>\n <td *matFooterCellDef mat-footer-cell></td>\n </ng-container>\n }\n\n <!-- Dynamic Columns -->\n @for (col of columnDefinitions; track col.key) {\n <ng-container [matColumnDef]=\"col.key\">\n <th *matHeaderCellDef mat-header-cell>\n {{ col.label }}\n </th>\n\n <td\n mat-cell\n *matCellDef=\"let element; let i = index\"\n [ngClass]=\"{ highlighted: highlightRowIndex() === i }\"\n >\n @if (col.key === 'op') {\n <div class=\"d-flex flex-row gap-1\">\n @if (col.templateOutlet) {\n <ng-container\n *ngTemplateOutlet=\"\n col.templateOutlet;\n context: { $implicit: element, index: i }\n \"\n />\n } @else if (rowTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: element, index: i }\"\n />\n }\n </div>\n } @else {\n @switch (col.type) {\n @case ('image') {\n <img\n [src]=\"element[col.key]\"\n class=\"img-fluid img-thumbnail my-1\"\n width=\"50\"\n alt=\"\"\n />\n }\n @case ('number') {\n <div>{{ element[col.key] | number: '1.2' : locale() }}</div>\n }\n @case ('date') {\n <div>{{ element[col.key] | date: 'dd.MM.yyyy' }}</div>\n }\n @case ('expand') {\n <button\n mat-icon-button\n aria-label=\"expand row\"\n (click)=\"onExpand($event, element)\"\n >\n @if (expandedElement === element) {\n <mat-icon>keyboard_arrow_up</mat-icon>\n } @else {\n <mat-icon>keyboard_arrow_down</mat-icon>\n }\n </button>\n }\n @case ('template') {\n <ng-container\n *ngTemplateOutlet=\"\n col.templateOutlet;\n context: { $implicit: element, index: i }\n \"\n />\n }\n @case ('custom') {\n <ng-container #dynamicContent />\n }\n @default {\n <div>{{ element[col.key] }}</div>\n }\n }\n }\n </td>\n\n <td *matFooterCellDef mat-footer-cell>\n @if (col.index === 0) {\n <div>Total</div>\n }\n @if (col.hasFooter) {\n <div>{{ col.key | getTotal: dataSource.data }}</div>\n }\n </td>\n </ng-container>\n }\n\n <!-- Expanded Detail Row -->\n @if (showExpand() && expandedDetail) {\n <ng-container matColumnDef=\"expandedDetail\">\n <td\n mat-cell\n *matCellDef=\"let element; let i = index\"\n [attr.colspan]=\"columnsToDisplayWithExpand.length\"\n >\n <div\n class=\"m-0 p-0 acp-detail-expand\"\n [class.acp-expanded]=\"element === expandedElement\"\n >\n <ng-container\n *ngTemplateOutlet=\"expandedDetail; context: { $implicit: element, index: i }\"\n />\n </div>\n </td>\n </ng-container>\n }\n\n <!-- Header Row -->\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplayWithExpand\"></tr>\n\n <!-- Data Rows -->\n @if (showExpand() && expandedDetail) {\n <!-- Regular Row -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnsToDisplayWithExpand; when: isNormalRow\"\n class=\"acp-dynamic-table-row\"\n [class.acp-dynamic-table-expanded-row]=\"expandedElement === row\"\n [ngStyle]=\"getRowStyle(row)\"\n (click)=\"expandedElement = expandedElement === row ? null : row\"\n ></tr>\n\n <!-- Expanded Row -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\"\n class=\"acp-dynamic-table-detail-row\"\n ></tr>\n } @else {\n <!-- Regular Row without expansion -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnsToDisplayWithExpand\"\n [ngStyle]=\"getRowStyle(row)\"\n ></tr>\n }\n\n <!-- No Data Row -->\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell text-center\" [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n No records found\n </td>\n </tr>\n\n <!-- Footer -->\n @if (showFooter() && dataSource.data.length > 0) {\n <tr mat-footer-row *matFooterRowDef=\"columnsToDisplayWithExpand\"></tr>\n }\n }\n </table>\n </div>\n\n @if (enablePagination() && paginationConfig) {\n <mat-paginator\n #paginator\n [disabled]=\"isLoadingData()\"\n (page)=\"handlePageEvent($event)\"\n [length]=\"paginationConfig.totalRecords\"\n [pageSize]=\"paginationConfig.pageSize\"\n [pageSizeOptions]=\"paginationConfig.pageSizeOptions || []\"\n [showFirstLastButtons]=\"true\"\n [pageIndex]=\"paginationConfig.pageIndex\"\n aria-label=\"Select page\"\n />\n }\n</div>\n", styles: [".acp-dynamic-table{display:block}.acp-dynamic-table .acp-table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}.acp-dynamic-table table{width:100%}.acp-dynamic-table tr.acp-dynamic-table-detail-row{height:0}.acp-dynamic-table tr.acp-dynamic-table-row:not(.acp-dynamic-table-expanded-row):hover{background:var(--mat-sys-surface-variant, whitesmoke)}.acp-dynamic-table tr.acp-dynamic-table-row:not(.acp-dynamic-table-expanded-row):active{background:var(--mat-sys-surface-container, #efefef)}.acp-dynamic-table .acp-dynamic-table-row td{border-bottom-width:0}.acp-dynamic-table .acp-detail-expand{height:0;overflow:hidden;transition:height .15s ease-in-out}.acp-dynamic-table .acp-detail-expand.acp-expanded{height:auto;overflow:visible}@starting-style{.acp-dynamic-table .acp-detail-expand.acp-expanded{height:0}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i1$2.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: GetTotalPipe, name: "getTotal" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
800
833
|
}
|
|
801
834
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DynamicTableComponent, decorators: [{
|
|
802
835
|
type: Component,
|
|
@@ -813,7 +846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
|
|
|
813
846
|
DatePipe,
|
|
814
847
|
DecimalPipe,
|
|
815
848
|
NgTemplateOutlet,
|
|
816
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"acp-dynamic-table\">\n <div class=\"acp-table-container small-table\">\n <table #sort=\"matSort\" [dataSource]=\"dataSource.data\" mat-table matSort>\n @if (columnDefinitions) {\n <!-- Checkbox Column -->\n @if (showSelectBox()) {\n <ng-container matColumnDef=\"select\">\n <th *matHeaderCellDef mat-header-cell>\n <mat-checkbox\n
|
|
849
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"acp-dynamic-table\">\n <div class=\"acp-table-container small-table\">\n <table #sort=\"matSort\" [dataSource]=\"dataSource.data\" mat-table matSort>\n @if (columnDefinitions) {\n <!-- Checkbox Column -->\n @if (showSelectBox()) {\n <ng-container matColumnDef=\"select\">\n <th *matHeaderCellDef mat-header-cell>\n @if (multipleSelection()) {\n <mat-checkbox\n (change)=\"$event ? masterToggle() : null\"\n (click)=\"$event.stopPropagation()\"\n [aria-label]=\"checkboxLabel()\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n />\n }\n </th>\n <td *matCellDef=\"let row\" mat-cell>\n <mat-checkbox\n (change)=\"$event ? selectRow(row) : null\"\n (click)=\"$event.stopPropagation()\"\n [aria-label]=\"checkboxLabel(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"row.disableSelection\"\n />\n </td>\n <td *matFooterCellDef mat-footer-cell></td>\n </ng-container>\n }\n\n <!-- Dynamic Columns -->\n @for (col of columnDefinitions; track col.key) {\n <ng-container [matColumnDef]=\"col.key\">\n <th *matHeaderCellDef mat-header-cell>\n {{ col.label }}\n </th>\n\n <td\n mat-cell\n *matCellDef=\"let element; let i = index\"\n [ngClass]=\"{ highlighted: highlightRowIndex() === i }\"\n >\n @if (col.key === 'op') {\n <div class=\"d-flex flex-row gap-1\">\n @if (col.templateOutlet) {\n <ng-container\n *ngTemplateOutlet=\"\n col.templateOutlet;\n context: { $implicit: element, index: i }\n \"\n />\n } @else if (rowTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"rowTemplate(); context: { $implicit: element, index: i }\"\n />\n }\n </div>\n } @else {\n @switch (col.type) {\n @case ('image') {\n <img\n [src]=\"element[col.key]\"\n class=\"img-fluid img-thumbnail my-1\"\n width=\"50\"\n alt=\"\"\n />\n }\n @case ('number') {\n <div>{{ element[col.key] | number: '1.2' : locale() }}</div>\n }\n @case ('date') {\n <div>{{ element[col.key] | date: 'dd.MM.yyyy' }}</div>\n }\n @case ('expand') {\n <button\n mat-icon-button\n aria-label=\"expand row\"\n (click)=\"onExpand($event, element)\"\n >\n @if (expandedElement === element) {\n <mat-icon>keyboard_arrow_up</mat-icon>\n } @else {\n <mat-icon>keyboard_arrow_down</mat-icon>\n }\n </button>\n }\n @case ('template') {\n <ng-container\n *ngTemplateOutlet=\"\n col.templateOutlet;\n context: { $implicit: element, index: i }\n \"\n />\n }\n @case ('custom') {\n <ng-container #dynamicContent />\n }\n @default {\n <div>{{ element[col.key] }}</div>\n }\n }\n }\n </td>\n\n <td *matFooterCellDef mat-footer-cell>\n @if (col.index === 0) {\n <div>Total</div>\n }\n @if (col.hasFooter) {\n <div>{{ col.key | getTotal: dataSource.data }}</div>\n }\n </td>\n </ng-container>\n }\n\n <!-- Expanded Detail Row -->\n @if (showExpand() && expandedDetail) {\n <ng-container matColumnDef=\"expandedDetail\">\n <td\n mat-cell\n *matCellDef=\"let element; let i = index\"\n [attr.colspan]=\"columnsToDisplayWithExpand.length\"\n >\n <div\n class=\"m-0 p-0 acp-detail-expand\"\n [class.acp-expanded]=\"element === expandedElement\"\n >\n <ng-container\n *ngTemplateOutlet=\"expandedDetail; context: { $implicit: element, index: i }\"\n />\n </div>\n </td>\n </ng-container>\n }\n\n <!-- Header Row -->\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplayWithExpand\"></tr>\n\n <!-- Data Rows -->\n @if (showExpand() && expandedDetail) {\n <!-- Regular Row -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnsToDisplayWithExpand; when: isNormalRow\"\n class=\"acp-dynamic-table-row\"\n [class.acp-dynamic-table-expanded-row]=\"expandedElement === row\"\n [ngStyle]=\"getRowStyle(row)\"\n (click)=\"expandedElement = expandedElement === row ? null : row\"\n ></tr>\n\n <!-- Expanded Row -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\"\n class=\"acp-dynamic-table-detail-row\"\n ></tr>\n } @else {\n <!-- Regular Row without expansion -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: columnsToDisplayWithExpand\"\n [ngStyle]=\"getRowStyle(row)\"\n ></tr>\n }\n\n <!-- No Data Row -->\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell text-center\" [attr.colspan]=\"columnsToDisplayWithExpand.length\">\n No records found\n </td>\n </tr>\n\n <!-- Footer -->\n @if (showFooter() && dataSource.data.length > 0) {\n <tr mat-footer-row *matFooterRowDef=\"columnsToDisplayWithExpand\"></tr>\n }\n }\n </table>\n </div>\n\n @if (enablePagination() && paginationConfig) {\n <mat-paginator\n #paginator\n [disabled]=\"isLoadingData()\"\n (page)=\"handlePageEvent($event)\"\n [length]=\"paginationConfig.totalRecords\"\n [pageSize]=\"paginationConfig.pageSize\"\n [pageSizeOptions]=\"paginationConfig.pageSizeOptions || []\"\n [showFirstLastButtons]=\"true\"\n [pageIndex]=\"paginationConfig.pageIndex\"\n aria-label=\"Select page\"\n />\n }\n</div>\n", styles: [".acp-dynamic-table{display:block}.acp-dynamic-table .acp-table-container{position:relative;min-height:200px;max-height:400px;overflow:auto}.acp-dynamic-table table{width:100%}.acp-dynamic-table tr.acp-dynamic-table-detail-row{height:0}.acp-dynamic-table tr.acp-dynamic-table-row:not(.acp-dynamic-table-expanded-row):hover{background:var(--mat-sys-surface-variant, whitesmoke)}.acp-dynamic-table tr.acp-dynamic-table-row:not(.acp-dynamic-table-expanded-row):active{background:var(--mat-sys-surface-container, #efefef)}.acp-dynamic-table .acp-dynamic-table-row td{border-bottom-width:0}.acp-dynamic-table .acp-detail-expand{height:0;overflow:hidden;transition:height .15s ease-in-out}.acp-dynamic-table .acp-detail-expand.acp-expanded{height:auto;overflow:visible}@starting-style{.acp-dynamic-table .acp-detail-expand.acp-expanded{height:0}}\n"] }]
|
|
817
850
|
}], propDecorators: { visibleColumns: [{
|
|
818
851
|
type: Input
|
|
819
852
|
}], columnDefinitions: [{
|