@elite.framework/ng.ui.core 2.0.6 → 2.0.33

package/fesm2022/elite.framework-ng.ui.core-generic-table.mjs

@@ -7,8 +7,7 @@ import { TableModule } from 'primeng/table';
 import * as i4 from 'primeng/button';
 import { ButtonModule, Button } from 'primeng/button';
 import { MenuModule, Menu } from 'primeng/menu';
-import * as i5 from '@ngx-translate/core';
-import { TranslateService, TranslateModule, TranslatePipe } from '@ngx-translate/core';
+import { TranslatePipe } from '@elite.framework/ng.core/pipes';
 import { FormlyForm, FormlyField } from '@ngx-formly/core';
 import { FormGroup } from '@angular/forms';
 import { cloneDeep } from 'lodash';
@@ -16,7 +15,7 @@ import { GenericButton } from '@elite.framework/ng.ui.core/generic-button';
 import { PaginatorModule } from 'primeng/paginator';
 import * as i2 from 'primeng/overlay';
 import { OverlayModule } from 'primeng/overlay';
-import { PermissionCheckerService } from '@elite.framework/ng.core/services';
+import { LocalizationService, PermissionCheckerService } from '@elite.framework/ng.core/services';
 import * as i3 from 'primeng/api';
 
 class GenericTableModule {
@@ -122,7 +121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
             }] } });
 
 class GenericTable {
-    translateService = inject(TranslateService);
+    translateService = inject(LocalizationService);
     permissionsService = inject(PermissionCheckerService);
     dt;
     data = [];
@@ -335,11 +334,11 @@ class GenericTable {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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", rowStyleFn: "rowStyleFn", rowClassFn: "rowClassFn", disableRowCheckboxFn: "disableRowCheckboxFn", 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      (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      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.props.entityKey || 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.props.entityKey || 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\"\r\n        (click)=\"rowSelect.emit(rowData)\"\r\n        [ngClass]=\"rowClassFn ? rowClassFn(rowData) : null\"\r\n        [ngStyle]=\"rowStyleFn ? rowStyleFn(rowData) : null\">\r\n          <td *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n            <p-tableCheckbox\r\n            [value]=\"rowData\"\r\n            [disabled]=\"disableRowCheckboxFn ? disableRowCheckboxFn(rowData) : false\"\r\n            ></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\">\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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" }] });
+    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", rowStyleFn: "rowStyleFn", rowClassFn: "rowClassFn", disableRowCheckboxFn: "disableRowCheckboxFn", 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      (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      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.props.entityKey || 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.props.entityKey || 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\"\r\n        (click)=\"rowSelect.emit(rowData)\"\r\n        [ngClass]=\"rowClassFn ? rowClassFn(rowData) : null\"\r\n        [ngStyle]=\"rowStyleFn ? rowStyleFn(rowData) : null\">\r\n          <td *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n            <p-tableCheckbox\r\n            [value]=\"rowData\"\r\n            [disabled]=\"disableRowCheckboxFn ? disableRowCheckboxFn(rowData) : false\"\r\n            ></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\">\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "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: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericTable, decorators: [{
             type: Component,
-            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      (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      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.props.entityKey || 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.props.entityKey || 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\"\r\n        (click)=\"rowSelect.emit(rowData)\"\r\n        [ngClass]=\"rowClassFn ? rowClassFn(rowData) : null\"\r\n        [ngStyle]=\"rowStyleFn ? rowStyleFn(rowData) : null\">\r\n          <td *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n            <p-tableCheckbox\r\n            [value]=\"rowData\"\r\n            [disabled]=\"disableRowCheckboxFn ? disableRowCheckboxFn(rowData) : false\"\r\n            ></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\">\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"] }]
+            args: [{ selector: 'lib-generic-table', imports: [CommonModule, TableModule, ButtonModule, MenuModule, NgForOf, TranslatePipe, 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      (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      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.props.entityKey || 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.props.entityKey || 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\"\r\n        (click)=\"rowSelect.emit(rowData)\"\r\n        [ngClass]=\"rowClassFn ? rowClassFn(rowData) : null\"\r\n        [ngStyle]=\"rowStyleFn ? rowStyleFn(rowData) : null\">\r\n          <td *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n            <p-tableCheckbox\r\n            [value]=\"rowData\"\r\n            [disabled]=\"disableRowCheckboxFn ? disableRowCheckboxFn(rowData) : false\"\r\n            ></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\">\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"] }]
         }], propDecorators: { dt: [{
                 type: ViewChild,
                 args: ['dt']