@elite.framework/ng.ui.core 1.0.64 → 1.0.67
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/fesm2022/elite.framework-ng.ui.core-generic-crud-table.mjs +17 -12
- package/fesm2022/elite.framework-ng.ui.core-generic-crud-table.mjs.map +1 -1
- package/fesm2022/elite.framework-ng.ui.core-generic-selector.mjs +55 -13
- package/fesm2022/elite.framework-ng.ui.core-generic-selector.mjs.map +1 -1
- package/fesm2022/elite.framework-ng.ui.core-generic-table.mjs +97 -6
- package/fesm2022/elite.framework-ng.ui.core-generic-table.mjs.map +1 -1
- package/generic-crud-table/index.d.ts +2 -1
- package/generic-selector/index.d.ts +7 -0
- package/package.json +17 -17
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { NgModule, inject, EventEmitter,
|
|
2
|
+
import { NgModule, ViewChildren, Input, Component, inject, EventEmitter, Output, ViewChild } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgForOf, NgIf } from '@angular/common';
|
|
5
|
-
import * as i2 from 'primeng/table';
|
|
5
|
+
import * as i2$1 from 'primeng/table';
|
|
6
6
|
import { TableModule } from 'primeng/table';
|
|
7
7
|
import * as i4 from 'primeng/button';
|
|
8
8
|
import { ButtonModule, Button } from 'primeng/button';
|
|
9
|
-
import * as i5 from 'primeng/menu';
|
|
10
9
|
import { MenuModule, Menu } from 'primeng/menu';
|
|
11
|
-
import * as
|
|
10
|
+
import * as i5 from '@ngx-translate/core';
|
|
12
11
|
import { TranslateService, TranslateModule, TranslatePipe } from '@ngx-translate/core';
|
|
13
12
|
import { FormlyForm, FormlyField } from '@ngx-formly/core';
|
|
14
13
|
import { FormGroup } from '@angular/forms';
|
|
@@ -16,6 +15,8 @@ import { cloneDeep } from 'lodash';
|
|
|
16
15
|
import { GenericButton } from '@elite.framework/ng.ui.core/generic-button';
|
|
17
16
|
import { PermissionsService } from '@elite.framework/ng.core/services';
|
|
18
17
|
import { PaginatorModule } from 'primeng/paginator';
|
|
18
|
+
import * as i2 from 'primeng/overlay';
|
|
19
|
+
import { OverlayModule } from 'primeng/overlay';
|
|
19
20
|
import * as i3 from 'primeng/api';
|
|
20
21
|
|
|
21
22
|
class GenericTableModule {
|
|
@@ -30,6 +31,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
|
|
|
30
31
|
}]
|
|
31
32
|
}] });
|
|
32
33
|
|
|
34
|
+
class ActionMenuComponent {
|
|
35
|
+
items = [];
|
|
36
|
+
open = false;
|
|
37
|
+
menuItems;
|
|
38
|
+
menuPositionClass = 'right-0';
|
|
39
|
+
toggle() {
|
|
40
|
+
this.open = !this.open;
|
|
41
|
+
// Optional: adjust position when opening
|
|
42
|
+
// if (this.open) setTimeout(() => this.adjustMenuPosition());
|
|
43
|
+
}
|
|
44
|
+
adjustMenuPosition() {
|
|
45
|
+
const menu = document.querySelector('.absolute.mt-2');
|
|
46
|
+
if (!menu)
|
|
47
|
+
return;
|
|
48
|
+
const rect = menu.getBoundingClientRect();
|
|
49
|
+
const viewportWidth = window.innerWidth;
|
|
50
|
+
this.menuPositionClass = rect.right > viewportWidth ? 'left-0' : 'right-0';
|
|
51
|
+
}
|
|
52
|
+
onClick(item, event) {
|
|
53
|
+
this.open = false;
|
|
54
|
+
if (item.command) {
|
|
55
|
+
item.command({ originalEvent: event, item });
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
onOutsideClick(event) {
|
|
59
|
+
const target = event.target;
|
|
60
|
+
if (!target.closest('.inline-block')) {
|
|
61
|
+
this.open = false;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
// ========================
|
|
65
|
+
// Focus & Keyboard navigation
|
|
66
|
+
// ========================
|
|
67
|
+
focusFirst() {
|
|
68
|
+
// Delay needed because overlay content is rendered asynchronously
|
|
69
|
+
setTimeout(() => {
|
|
70
|
+
this.menuItems.first?.nativeElement.focus();
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
// -------------------
|
|
74
|
+
// Keyboard on menu container
|
|
75
|
+
// -------------------
|
|
76
|
+
onMenuKeydown(event) {
|
|
77
|
+
// Convert QueryList to array of HTMLButtonElement
|
|
78
|
+
const items = this.menuItems.toArray().map(i => i.nativeElement);
|
|
79
|
+
let index = items.indexOf(document.activeElement);
|
|
80
|
+
if (index === -1)
|
|
81
|
+
return;
|
|
82
|
+
switch (event.key) {
|
|
83
|
+
case 'ArrowDown':
|
|
84
|
+
event.preventDefault();
|
|
85
|
+
index = (index + 1) % items.length;
|
|
86
|
+
items[index].focus();
|
|
87
|
+
break;
|
|
88
|
+
case 'ArrowUp':
|
|
89
|
+
event.preventDefault();
|
|
90
|
+
index = (index - 1 + items.length) % items.length;
|
|
91
|
+
items[index].focus();
|
|
92
|
+
break;
|
|
93
|
+
case 'Enter':
|
|
94
|
+
case ' ':
|
|
95
|
+
event.preventDefault();
|
|
96
|
+
items[index].click();
|
|
97
|
+
break;
|
|
98
|
+
case 'Escape':
|
|
99
|
+
this.open = false;
|
|
100
|
+
break;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
onTriggerKeydown(event) {
|
|
104
|
+
// Open overlay via keyboard
|
|
105
|
+
if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
|
|
106
|
+
event.preventDefault();
|
|
107
|
+
this.open = true;
|
|
108
|
+
this.focusFirst();
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ActionMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
112
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: ActionMenuComponent, isStandalone: true, selector: "app-action-menu", inputs: { items: "items" }, viewQueries: [{ propertyName: "menuItems", predicate: ["menuItem"], descendants: true }], ngImport: i0, template: "<div class=\"inline-block relative\">\r\n <button type=\"button\"\r\n class=\"p-ripple p-button p-button-icon-only p-button-outlined p-component\"\r\n #trigger\r\n (click)=\"toggle()\">\r\n <span class=\"pi pi-ellipsis-v\"></span>\r\n </button>\r\n\r\n <p-overlay [(visible)]=\"open\" [appendTo]=\"'body'\" (onShow)=\"focusFirst()\">\r\n <div class=\"w-48 rounded-lg shadow-lg bg-white border border-gray-200\"\r\n tabindex=\"0\"\r\n (keydown)=\"onMenuKeydown($event)\">\r\n <button #menuItem\r\n *ngFor=\"let item of items\"\r\n (click)=\"onClick(item, $event)\"\r\n class=\"flex items-center w-full text-left px-4 py-2 text-sm hover:bg-gray-100 focus:bg-gray-100 focus:outline-none\">\r\n <i *ngIf=\"item.icon\" [class]=\"item.icon + ' ml-2 mr-2 text-gray-500'\"></i>\r\n <span>{{ item.label }}</span>\r\n </button>\r\n </div>\r\n </p-overlay>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "component", type: i2.Overlay, selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options", "appendTo", "hostAttrSelector"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "ngmodule", type: ButtonModule }] });
|
|
113
|
+
}
|
|
114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: ActionMenuComponent, decorators: [{
|
|
115
|
+
type: Component,
|
|
116
|
+
args: [{ selector: 'app-action-menu', imports: [CommonModule, OverlayModule, ButtonModule], template: "<div class=\"inline-block relative\">\r\n <button type=\"button\"\r\n class=\"p-ripple p-button p-button-icon-only p-button-outlined p-component\"\r\n #trigger\r\n (click)=\"toggle()\">\r\n <span class=\"pi pi-ellipsis-v\"></span>\r\n </button>\r\n\r\n <p-overlay [(visible)]=\"open\" [appendTo]=\"'body'\" (onShow)=\"focusFirst()\">\r\n <div class=\"w-48 rounded-lg shadow-lg bg-white border border-gray-200\"\r\n tabindex=\"0\"\r\n (keydown)=\"onMenuKeydown($event)\">\r\n <button #menuItem\r\n *ngFor=\"let item of items\"\r\n (click)=\"onClick(item, $event)\"\r\n class=\"flex items-center w-full text-left px-4 py-2 text-sm hover:bg-gray-100 focus:bg-gray-100 focus:outline-none\">\r\n <i *ngIf=\"item.icon\" [class]=\"item.icon + ' ml-2 mr-2 text-gray-500'\"></i>\r\n <span>{{ item.label }}</span>\r\n </button>\r\n </div>\r\n </p-overlay>\r\n</div>\r\n" }]
|
|
117
|
+
}], propDecorators: { items: [{
|
|
118
|
+
type: Input
|
|
119
|
+
}], menuItems: [{
|
|
120
|
+
type: ViewChildren,
|
|
121
|
+
args: ['menuItem']
|
|
122
|
+
}] } });
|
|
123
|
+
|
|
33
124
|
class GenericTable {
|
|
34
125
|
translateService = inject(TranslateService);
|
|
35
126
|
permissionsService = inject(PermissionsService);
|
|
@@ -227,11 +318,11 @@ class GenericTable {
|
|
|
227
318
|
}
|
|
228
319
|
}
|
|
229
320
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
230
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: GenericTable, isStandalone: true, selector: "lib-generic-table", inputs: { data: "data", columns: "columns", loading: "loading", actions: "actions", actionsPosition: "actionsPosition", actionsMode: "actionsMode", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", globalFilterFields: "globalFilterFields", addButtonConfigs: "addButtonConfigs", scrollHeight: "scrollHeight", rowSelectable: "rowSelectable", selection: "selection", paginator: "paginator", showRowSelectionCheckbox: "showRowSelectionCheckbox" }, outputs: { action: "action", pageChange: "pageChange", onAddNew: "onAddNew", rowSelect: "rowSelect", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col h-screen\" style=\" height: 60vh;\">\r\n <div class=\"flex-1 border rounded-lg overflow-hidden flex flex-col\">\r\n\r\n <!-- PrimeNG Table -->\r\n <p-table #dt\r\n [value]=\"data_\"\r\n [columns]=\"columns\"\r\n [lazy]=\"true\"\r\n [paginator]=\"false\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [totalRecords]=\"totalRecords\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n (onLazyLoad)=\"onLazyLoad($event)\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n [loading]=\"loading\"\r\n [scrollable]=\"true\"\r\n scrollHeight=\"flex\"\r\n [selectionMode]=\"showRowSelectionCheckbox ? 'multiple' : (rowSelectable ? 'single' : undefined)\"\r\n [(selection)]=\"_selection\"\r\n (onRowSelect)=\"onInternalSelectionChange($event)\"\r\n (onRowUnselect)=\"onInternalSelectionChange($event)\"\r\n (onHeaderCheckboxToggle)=\"onInternalSelectionChange($event)\"\r\n tableLayout=\"fixed\"\r\n [customSort]=\"false\"\r\n (sortFunction)=\"customSort($event)\"\r\n class=\"flex-1 overflow-auto\"\r\n >\r\n\r\n <!-- Empty message -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td colspan=\"10\">\r\n <div class=\"flex flex-col items-center justify-center py-10 text-center w-full\">\r\n <i class=\"pi pi-inbox text-4xl text-gray-400 mb-4\"></i>\r\n <p class=\"text-gray-500 mb-4\">{{ 'NO_DATA_FOUND' | translate }}</p>\r\n\r\n <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n *ngIf=\"!btn.visible || btn.visible === true\"\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [size]=\"btn.size\"\r\n [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"onAddNew.emit()\"\r\n class=\"mb-2\"\r\n ></lib-generic-button>\r\n </ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Table header -->\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr class=\"bg-gray-200 sticky top-0 z-10\">\r\n <th *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n </th>\r\n\r\n <ng-container *ngFor=\"let col of columns; trackBy: trackByFn\">\r\n <th\r\n [pSortableColumn]=\"col.key\"\r\n class=\"px-4 py-2 text-sm font-medium text-center\"\r\n [style.min-width]=\"col.props?.table?.props?.width || '150px'\"\r\n >\r\n {{ col.props?.label | translate }}\r\n <p-sortIcon [field]=\"col.key\"></p-sortIcon>\r\n </th>\r\n </ng-container>\r\n\r\n <th *ngIf=\"actions.length > 0\" class=\"px-4 py-2 text-sm font-medium text-center sticky left-0\">\r\n {{ '*' | translate }}\r\n </th>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Table body -->\r\n <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-i=\"rowIndex\">\r\n <tr class=\"even:bg-gray-50 hover:bg-gray-100 cursor-pointer\" (click)=\"rowSelect.emit(rowData)\">\r\n <td *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableCheckbox [value]=\"rowData\"></p-tableCheckbox>\r\n </td>\r\n\r\n <td\r\n *ngFor=\"let col of rowData.rowFields; let colIndex = index; trackBy: trackByFn\"\r\n class=\"border-t border-gray-200 px-4 py-2 text-center text-sm text-gray-700\"\r\n [style.width]=\"col.props?.table?.props?.width\"\r\n >\r\n <formly-form\r\n [model]=\"rowData\"\r\n [form]=\"getForm(i, colIndex)\"\r\n [fields]=\"[col]\"\r\n [options]=\"options\"\r\n ></formly-form>\r\n </td>\r\n\r\n <td *ngIf=\"actions.length > 0\" class=\"border-t border-gray-200 px-4 py-2 text-center sticky left-0 bg-gray-50\">\r\n <ng-container [ngSwitch]=\"actionsMode\">\r\n\r\n <!-- Buttons -->\r\n <ng-container *ngSwitchCase=\"'buttons'\">\r\n <ng-container *ngFor=\"let act of sortedActions\">\r\n <button\r\n *ngIf=\"act.icon || act.label\"\r\n pButton\r\n [icon]=\"act.icon || ''\"\r\n [label]=\"(act.label ?? '') | translate\"\r\n [class]=\"act.styleClass || ''\"\r\n class=\"p-button-sm mx-1\"\r\n (click)=\"onAction(act, rowData)\"\r\n ></button>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Menu -->\r\n <ng-container *ngSwitchCase=\"'menu'\">\r\n <p-menu #menu [model]=\"getMenuItems(rowData)\" [popup]=\"true\" appendTo=\"body\"></p-menu>\r\n <p-button\r\n outlined\r\n icon=\"pi pi-ellipsis-v\"\r\n class=\"p-button-text p-button-sm\"\r\n (onClick)=\"menu.toggle($event)\"\r\n ></p-button>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </td>\r\n </tr>\r\n\r\n </ng-template>\r\n\r\n <!-- Table footer -->\r\n\r\n\r\n <!-- <ng-template pTemplate=\"footer\">\r\n <tr class=\"bg-gray-200 sticky bottom-0 z-10\">\r\n <p-paginator [rows]=\"rows\" [totalRecords]=\"totalRecords\" [first]=\"first\"\r\n (onPageChange)=\"onLazyLoad($event)\">\r\n </p-paginator>\r\n </tr>\r\n </ng-template> -->\r\n\r\n </p-table>\r\n </div>\r\n</div>\r\n", styles: [".custom-button-medium{font-size:1.1rem;width:2.5rem;height:2.5rem;line-height:2.5rem;padding:0}.custom-button-gray{color:#333;background-color:transparent;border:none}.custom-button-gray:hover{background-color:#eee;color:#000}.icon-delete{color:red!important}.icon-edit{color:#333}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i5.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: GenericButton, selector: "lib-generic-button", inputs: ["model", "type", "icon", "label", "variant", "severity", "size", "iconPosition", "disabled", "loading", "ariaLabel", "extraClasses", "permission"], outputs: ["clicked", "itemClick"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
|
|
321
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: GenericTable, isStandalone: true, selector: "lib-generic-table", inputs: { data: "data", columns: "columns", loading: "loading", actions: "actions", actionsPosition: "actionsPosition", actionsMode: "actionsMode", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", globalFilterFields: "globalFilterFields", addButtonConfigs: "addButtonConfigs", scrollHeight: "scrollHeight", rowSelectable: "rowSelectable", selection: "selection", paginator: "paginator", showRowSelectionCheckbox: "showRowSelectionCheckbox" }, outputs: { action: "action", pageChange: "pageChange", onAddNew: "onAddNew", rowSelect: "rowSelect", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col h-screen\" style=\" height: 60vh;\">\r\n <div class=\"flex-1 border rounded-lg overflow-hidden flex flex-col\">\r\n\r\n <!-- PrimeNG Table -->\r\n <p-table #dt\r\n [value]=\"data_\"\r\n [columns]=\"columns\"\r\n [lazy]=\"true\"\r\n [paginator]=\"false\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [totalRecords]=\"totalRecords\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n (onLazyLoad)=\"onLazyLoad($event)\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n [loading]=\"loading\"\r\n [scrollable]=\"true\"\r\n scrollHeight=\"flex\"\r\n [selectionMode]=\"showRowSelectionCheckbox ? 'multiple' : (rowSelectable ? 'single' : undefined)\"\r\n [(selection)]=\"_selection\"\r\n (onRowSelect)=\"onInternalSelectionChange($event)\"\r\n (onRowUnselect)=\"onInternalSelectionChange($event)\"\r\n (onHeaderCheckboxToggle)=\"onInternalSelectionChange($event)\"\r\n tableLayout=\"fixed\"\r\n [customSort]=\"false\"\r\n (sortFunction)=\"customSort($event)\"\r\n class=\"flex-1 overflow-auto\"\r\n >\r\n\r\n <!-- Empty message -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td colspan=\"10\">\r\n <div class=\"flex flex-col items-center justify-center py-10 text-center w-full\">\r\n <i class=\"pi pi-inbox text-4xl text-gray-400 mb-4\"></i>\r\n <p class=\"text-gray-500 mb-4\">{{ 'NO_DATA_FOUND' | translate }}</p>\r\n\r\n <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n *ngIf=\"!btn.visible || btn.visible === true\"\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [size]=\"btn.size\"\r\n [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"onAddNew.emit()\"\r\n class=\"mb-2\"\r\n ></lib-generic-button>\r\n </ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Table header -->\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr class=\"bg-gray-200 sticky top-0 z-10\">\r\n <th *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n </th>\r\n <th *ngIf=\"actions.length > 0 && actionsPosition === 'start'\" class=\"px-4 py-2 text-sm font-medium text-center sticky right-0\">\r\n {{ '*' | translate }}\r\n </th>\r\n <ng-container *ngFor=\"let col of columns; trackBy: trackByFn\">\r\n <th\r\n [pSortableColumn]=\"col.key\"\r\n class=\"px-4 py-2 text-sm font-medium text-center\"\r\n [style.min-width]=\"col.props?.table?.props?.width || '150px'\"\r\n >\r\n {{ col.props?.label | translate }}\r\n <p-sortIcon [field]=\"col.key\"></p-sortIcon>\r\n </th>\r\n </ng-container>\r\n\r\n <th *ngIf=\"actions.length > 0 && actionsPosition === 'end'\" class=\"px-4 py-2 text-sm font-medium text-center sticky left-0\">\r\n {{ '*' | translate }}\r\n </th>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Table body -->\r\n <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-i=\"rowIndex\">\r\n <tr class=\"even:bg-gray-50 hover:bg-gray-100 cursor-pointer\" (click)=\"rowSelect.emit(rowData)\">\r\n <td *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableCheckbox [value]=\"rowData\"></p-tableCheckbox>\r\n </td>\r\n <td *ngIf=\"actions.length > 0 && actionsPosition === 'start'\" class=\"border-t border-gray-200 px-4 py-2 text-center sticky right-0 bg-gray-50\">\r\n <ng-container\r\n *ngTemplateOutlet=\"actionsTemplate; context: {$implicit: rowData}\">\r\n </ng-container>\r\n\r\n </td>\r\n\r\n <td\r\n *ngFor=\"let col of rowData.rowFields; let colIndex = index; trackBy: trackByFn\"\r\n class=\"border-t border-gray-200 px-4 py-2 text-center text-sm text-gray-700\"\r\n [style.width]=\"col.props?.table?.props?.width\"\r\n >\r\n <formly-form\r\n [model]=\"rowData\"\r\n [form]=\"getForm(i, colIndex)\"\r\n [fields]=\"[col]\"\r\n [options]=\"options\"\r\n ></formly-form>\r\n </td>\r\n\r\n <td *ngIf=\"actions.length > 0 && actionsPosition === 'end'\" class=\"border-t border-gray-200 px-4 py-2 text-center sticky left-0 bg-gray-50\">\r\n <ng-container\r\n *ngTemplateOutlet=\"actionsTemplate; context: {$implicit: rowData}\">\r\n </ng-container>\r\n\r\n </td>\r\n </tr>\r\n\r\n </ng-template>\r\n\r\n\r\n </p-table>\r\n </div>\r\n</div>\r\n\r\n<ng-template #actionsTemplate let-rowData>\r\n <ng-container [ngSwitch]=\"actionsMode\">\r\n\r\n <ng-container *ngSwitchCase=\"'buttons'\">\r\n <ng-container *ngFor=\"let act of sortedActions\">\r\n <button\r\n *ngIf=\"act.icon || act.label\"\r\n pButton\r\n [icon]=\"act.icon || ''\"\r\n [label]=\"(act.label ?? '') | translate\"\r\n [class]=\"act.styleClass || ''\"\r\n class=\"p-button-sm mx-1\"\r\n (click)=\"onAction(act, rowData)\" ></button>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'menu'\">\r\n <app-action-menu [items]=\"getMenuItems(rowData) || []\"></app-action-menu>\r\n <!-- <p-menu #menu [model]=\"getMenuItems(rowData)\" [popup]=\"true\" appendTo=\"body\"></p-menu>\r\n <p-button\r\n outlined\r\n icon=\"pi pi-ellipsis-v\"\r\n class=\"p-button-text p-button-sm\"\r\n (onClick)=\"menu.toggle($event)\"\r\n ></p-button> -->\r\n </ng-container>\r\n\r\n </ng-container>\r\n</ng-template>\r\n\r\n", styles: [".custom-button-medium{font-size:1.1rem;width:2.5rem;height:2.5rem;line-height:2.5rem;padding:0}.custom-button-gray{color:#333;background-color:transparent;border:none}.custom-button-gray:hover{background-color:#eee;color:#000}.icon-delete{color:red!important}.icon-edit{color:#333}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: GenericButton, selector: "lib-generic-button", inputs: ["model", "type", "icon", "label", "variant", "severity", "size", "iconPosition", "disabled", "loading", "ariaLabel", "extraClasses", "permission"], outputs: ["clicked", "itemClick"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: ActionMenuComponent, selector: "app-action-menu", inputs: ["items"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
|
|
231
322
|
}
|
|
232
323
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericTable, decorators: [{
|
|
233
324
|
type: Component,
|
|
234
|
-
args: [{ selector: 'lib-generic-table', imports: [CommonModule, TableModule, ButtonModule, MenuModule, NgForOf, TranslateModule, FormlyField, FormlyForm, NgIf, TranslatePipe, Menu, Button, GenericButton, PaginatorModule], template: "<div class=\"flex flex-col h-screen\" style=\" height: 60vh;\">\r\n <div class=\"flex-1 border rounded-lg overflow-hidden flex flex-col\">\r\n\r\n <!-- PrimeNG Table -->\r\n <p-table #dt\r\n [value]=\"data_\"\r\n [columns]=\"columns\"\r\n [lazy]=\"true\"\r\n [paginator]=\"false\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [totalRecords]=\"totalRecords\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n (onLazyLoad)=\"onLazyLoad($event)\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n [loading]=\"loading\"\r\n [scrollable]=\"true\"\r\n scrollHeight=\"flex\"\r\n [selectionMode]=\"showRowSelectionCheckbox ? 'multiple' : (rowSelectable ? 'single' : undefined)\"\r\n [(selection)]=\"_selection\"\r\n (onRowSelect)=\"onInternalSelectionChange($event)\"\r\n (onRowUnselect)=\"onInternalSelectionChange($event)\"\r\n (onHeaderCheckboxToggle)=\"onInternalSelectionChange($event)\"\r\n tableLayout=\"fixed\"\r\n [customSort]=\"false\"\r\n (sortFunction)=\"customSort($event)\"\r\n class=\"flex-1 overflow-auto\"\r\n >\r\n\r\n <!-- Empty message -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td colspan=\"10\">\r\n <div class=\"flex flex-col items-center justify-center py-10 text-center w-full\">\r\n <i class=\"pi pi-inbox text-4xl text-gray-400 mb-4\"></i>\r\n <p class=\"text-gray-500 mb-4\">{{ 'NO_DATA_FOUND' | translate }}</p>\r\n\r\n <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n *ngIf=\"!btn.visible || btn.visible === true\"\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [size]=\"btn.size\"\r\n [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"onAddNew.emit()\"\r\n class=\"mb-2\"\r\n ></lib-generic-button>\r\n </ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Table header -->\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr class=\"bg-gray-200 sticky top-0 z-10\">\r\n <th *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n </th>\r\n\r\n <ng-container *ngFor=\"let col of columns; trackBy: trackByFn\">\r\n <th\r\n [pSortableColumn]=\"col.key\"\r\n class=\"px-4 py-2 text-sm font-medium text-center\"\r\n [style.min-width]=\"col.props?.table?.props?.width || '150px'\"\r\n >\r\n {{ col.props?.label | translate }}\r\n <p-sortIcon [field]=\"col.key\"></p-sortIcon>\r\n </th>\r\n </ng-container>\r\n\r\n <th *ngIf=\"actions.length > 0\" class=\"px-4 py-2 text-sm font-medium text-center sticky left-0\">\r\n {{ '*' | translate }}\r\n </th>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Table body -->\r\n <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-i=\"rowIndex\">\r\n <tr class=\"even:bg-gray-50 hover:bg-gray-100 cursor-pointer\" (click)=\"rowSelect.emit(rowData)\">\r\n <td *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableCheckbox [value]=\"rowData\"></p-tableCheckbox>\r\n </td>\r\n\r\n <td\r\n *ngFor=\"let col of rowData.rowFields; let colIndex = index; trackBy: trackByFn\"\r\n class=\"border-t border-gray-200 px-4 py-2 text-center text-sm text-gray-700\"\r\n [style.width]=\"col.props?.table?.props?.width\"\r\n >\r\n <formly-form\r\n [model]=\"rowData\"\r\n [form]=\"getForm(i, colIndex)\"\r\n [fields]=\"[col]\"\r\n [options]=\"options\"\r\n ></formly-form>\r\n </td>\r\n\r\n <td *ngIf=\"actions.length > 0\" class=\"border-t border-gray-200 px-4 py-2 text-center sticky left-0 bg-gray-50\">\r\n
|
|
325
|
+
args: [{ selector: 'lib-generic-table', imports: [CommonModule, TableModule, ButtonModule, MenuModule, NgForOf, TranslateModule, FormlyField, FormlyForm, NgIf, TranslatePipe, Menu, Button, GenericButton, PaginatorModule, ActionMenuComponent], template: "<div class=\"flex flex-col h-screen\" style=\" height: 60vh;\">\r\n <div class=\"flex-1 border rounded-lg overflow-hidden flex flex-col\">\r\n\r\n <!-- PrimeNG Table -->\r\n <p-table #dt\r\n [value]=\"data_\"\r\n [columns]=\"columns\"\r\n [lazy]=\"true\"\r\n [paginator]=\"false\"\r\n [rows]=\"rows\"\r\n [first]=\"first\"\r\n [totalRecords]=\"totalRecords\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n (onLazyLoad)=\"onLazyLoad($event)\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n [loading]=\"loading\"\r\n [scrollable]=\"true\"\r\n scrollHeight=\"flex\"\r\n [selectionMode]=\"showRowSelectionCheckbox ? 'multiple' : (rowSelectable ? 'single' : undefined)\"\r\n [(selection)]=\"_selection\"\r\n (onRowSelect)=\"onInternalSelectionChange($event)\"\r\n (onRowUnselect)=\"onInternalSelectionChange($event)\"\r\n (onHeaderCheckboxToggle)=\"onInternalSelectionChange($event)\"\r\n tableLayout=\"fixed\"\r\n [customSort]=\"false\"\r\n (sortFunction)=\"customSort($event)\"\r\n class=\"flex-1 overflow-auto\"\r\n >\r\n\r\n <!-- Empty message -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td colspan=\"10\">\r\n <div class=\"flex flex-col items-center justify-center py-10 text-center w-full\">\r\n <i class=\"pi pi-inbox text-4xl text-gray-400 mb-4\"></i>\r\n <p class=\"text-gray-500 mb-4\">{{ 'NO_DATA_FOUND' | translate }}</p>\r\n\r\n <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n *ngIf=\"!btn.visible || btn.visible === true\"\r\n [icon]=\"btn.icon\"\r\n [label]=\"btn.label | translate\"\r\n [variant]=\"btn.variant\"\r\n [size]=\"btn.size\"\r\n [model]=\"btn.splitActions\"\r\n [permission]=\"btn.permission\"\r\n (clicked)=\"onAddNew.emit()\"\r\n class=\"mb-2\"\r\n ></lib-generic-button>\r\n </ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Table header -->\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr class=\"bg-gray-200 sticky top-0 z-10\">\r\n <th *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n </th>\r\n <th *ngIf=\"actions.length > 0 && actionsPosition === 'start'\" class=\"px-4 py-2 text-sm font-medium text-center sticky right-0\">\r\n {{ '*' | translate }}\r\n </th>\r\n <ng-container *ngFor=\"let col of columns; trackBy: trackByFn\">\r\n <th\r\n [pSortableColumn]=\"col.key\"\r\n class=\"px-4 py-2 text-sm font-medium text-center\"\r\n [style.min-width]=\"col.props?.table?.props?.width || '150px'\"\r\n >\r\n {{ col.props?.label | translate }}\r\n <p-sortIcon [field]=\"col.key\"></p-sortIcon>\r\n </th>\r\n </ng-container>\r\n\r\n <th *ngIf=\"actions.length > 0 && actionsPosition === 'end'\" class=\"px-4 py-2 text-sm font-medium text-center sticky left-0\">\r\n {{ '*' | translate }}\r\n </th>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Table body -->\r\n <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-i=\"rowIndex\">\r\n <tr class=\"even:bg-gray-50 hover:bg-gray-100 cursor-pointer\" (click)=\"rowSelect.emit(rowData)\">\r\n <td *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n <p-tableCheckbox [value]=\"rowData\"></p-tableCheckbox>\r\n </td>\r\n <td *ngIf=\"actions.length > 0 && actionsPosition === 'start'\" class=\"border-t border-gray-200 px-4 py-2 text-center sticky right-0 bg-gray-50\">\r\n <ng-container\r\n *ngTemplateOutlet=\"actionsTemplate; context: {$implicit: rowData}\">\r\n </ng-container>\r\n\r\n </td>\r\n\r\n <td\r\n *ngFor=\"let col of rowData.rowFields; let colIndex = index; trackBy: trackByFn\"\r\n class=\"border-t border-gray-200 px-4 py-2 text-center text-sm text-gray-700\"\r\n [style.width]=\"col.props?.table?.props?.width\"\r\n >\r\n <formly-form\r\n [model]=\"rowData\"\r\n [form]=\"getForm(i, colIndex)\"\r\n [fields]=\"[col]\"\r\n [options]=\"options\"\r\n ></formly-form>\r\n </td>\r\n\r\n <td *ngIf=\"actions.length > 0 && actionsPosition === 'end'\" class=\"border-t border-gray-200 px-4 py-2 text-center sticky left-0 bg-gray-50\">\r\n <ng-container\r\n *ngTemplateOutlet=\"actionsTemplate; context: {$implicit: rowData}\">\r\n </ng-container>\r\n\r\n </td>\r\n </tr>\r\n\r\n </ng-template>\r\n\r\n\r\n </p-table>\r\n </div>\r\n</div>\r\n\r\n<ng-template #actionsTemplate let-rowData>\r\n <ng-container [ngSwitch]=\"actionsMode\">\r\n\r\n <ng-container *ngSwitchCase=\"'buttons'\">\r\n <ng-container *ngFor=\"let act of sortedActions\">\r\n <button\r\n *ngIf=\"act.icon || act.label\"\r\n pButton\r\n [icon]=\"act.icon || ''\"\r\n [label]=\"(act.label ?? '') | translate\"\r\n [class]=\"act.styleClass || ''\"\r\n class=\"p-button-sm mx-1\"\r\n (click)=\"onAction(act, rowData)\" ></button>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'menu'\">\r\n <app-action-menu [items]=\"getMenuItems(rowData) || []\"></app-action-menu>\r\n <!-- <p-menu #menu [model]=\"getMenuItems(rowData)\" [popup]=\"true\" appendTo=\"body\"></p-menu>\r\n <p-button\r\n outlined\r\n icon=\"pi pi-ellipsis-v\"\r\n class=\"p-button-text p-button-sm\"\r\n (onClick)=\"menu.toggle($event)\"\r\n ></p-button> -->\r\n </ng-container>\r\n\r\n </ng-container>\r\n</ng-template>\r\n\r\n", styles: [".custom-button-medium{font-size:1.1rem;width:2.5rem;height:2.5rem;line-height:2.5rem;padding:0}.custom-button-gray{color:#333;background-color:transparent;border:none}.custom-button-gray:hover{background-color:#eee;color:#000}.icon-delete{color:red!important}.icon-edit{color:#333}\n"] }]
|
|
235
326
|
}], propDecorators: { dt: [{
|
|
236
327
|
type: ViewChild,
|
|
237
328
|
args: ['dt']
|