@elite.framework/ng.core 1.0.19 → 1.0.21

package/fesm2022/elite.framework-ng.core.mjs

@@ -25,7 +25,7 @@ import { HttpParams } from '@angular/common/http';
 import * as i1$2 from 'primeng/api';
 import { MessageService } from 'primeng/api';
 import * as i4 from 'primeng/menu';
-import { SafeHtmlPipe, MenuModule } from 'primeng/menu';
+import { SafeHtmlPipe, MenuModule, Menu } from 'primeng/menu';
 import * as i2$1 from 'primeng/fileupload';
 import { FileUploadModule } from 'primeng/fileupload';
 import * as i2$2 from '@angular/router';
@@ -762,6 +762,7 @@ class ConditionExpressionBuilderType extends FieldType {
     /**
      *
      */
+    valueChangeSubscription;
     constructor(svc, cdr) {
         super();
         this.svc = svc;
@@ -772,6 +773,18 @@ class ConditionExpressionBuilderType extends FieldType {
         const to = this.props;
         this.api.apiName = to['serviceName'];
         this.displayMode = to['displayMode'] ?? 'full';
+        this.initTokens();
+        this.valueChangeSubscription = this.formControl.valueChanges
+            .subscribe(() => {
+            this.initTokens();
+        });
+    }
+    ngOnDestroy() {
+        if (this.valueChangeSubscription) {
+            this.valueChangeSubscription.unsubscribe();
+        }
+    }
+    initTokens() {
         const existing = this.formControl.value || '';
         if (existing) {
             const tokens = existing.split(' ').filter((x) => x);
@@ -3004,13 +3017,43 @@ class GenericTable {
     /** فعّل اختيار الصفين single/multiple */
     rowSelectable = true;
     /** يحتفظ بالصف المحدد */
-    selection = null;
+    //@Input() selection: T | T[] | null = null;
+    // هذا سيكون مرتبطًا بـ [(selection)] في p-table
+    _selection = null;
+    get selection() {
+        return this._selection;
+    }
+    set selection(val) {
+        this._selection = val;
+        // لا تُصدر الحدث هنا، بل في onInternalSelectionChange فقط
+    }
     /** يصدر الصف المحدد عند النقر */
     rowSelect = new EventEmitter();
+    /** يصدر الصفوف المحددة عند التغيير (للربط الثنائي) */
+    selectionChange = new EventEmitter();
     /** جديد: التحكم بظهور الـ paginator */
     paginator = true;
     form = new FormGroup({});
     options = {};
+    // **جديد**: يتحكم بإظهار عمود اختيار الصفوف (checkboxes)
+    /** يتحكم في إظهار عمود اختيار الصفوف المتعددة بواسطة checkboxes */
+    showRowSelectionCheckbox = false;
+    onInternalSelectionChange(event) {
+        if ('data' in event) {
+            // Row select/unselect (single أو multiple)
+            if (Array.isArray(this._selection)) {
+                this._selection = [...this._selection]; // تحديث نسخة المصفوفة عند متعدد
+            }
+            else {
+                this._selection = event.data; // اختيار فردي
+            }
+        }
+        else if ('checked' in event) {
+            // Header checkbox toggle
+            this._selection = event.checked ? [...this.data] : [];
+        }
+        this.selectionChange.emit(this._selection);
+    }
     customSort(event) {
         event.data?.sort((data1, data2) => {
             const value1 = this.resolveFieldData(data1, event.field ?? '');
@@ -3095,11 +3138,11 @@ class GenericTable {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GenericTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: GenericTable, isStandalone: true, selector: "lib-generic-table", inputs: { data: "data", columns: "columns", loading: "loading", actions: "actions", actionsMode: "actionsMode", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", globalFilterFields: "globalFilterFields", scrollHeight: "scrollHeight", rowSelectable: "rowSelectable", selection: "selection", paginator: "paginator" }, outputs: { action: "action", pageChange: "pageChange", rowSelect: "rowSelect" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "\n<div class=\"flex-1 last:[&>td]:border-0 rounded-lg border border-surface w-full overflow-auto\">\n  <p-table #dt [value]=\"data\" [columns]=\"columns\" [lazy]=\"true\" [paginator]=\"paginator\" [rows]=\"rows\" [first]=\"first\"\n    [totalRecords]=\"totalRecords\" [sortField]=\"sortField\" [sortOrder]=\"sortOrder\" (onLazyLoad)=\"onLazyLoad($event)\"\n    [globalFilterFields]=\"globalFilterFields\" [loading]=\"loading\" [scrollable]=\"true\" [scrollHeight]=\"scrollHeight\"\n    [selectionMode]=\"rowSelectable ? 'single' : undefined\" [(selection)]=\"selection\"\n    (onRowSelect)=\"onRowSelect($event)\"\n    [customSort]=\"false\"\n    (sortFunction)=\"customSort($event)\"\n    >\n\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr>\n        <!-- <th style=\"width: 1rem\">\n          <p-tableHeaderCheckbox />\n        </th> -->\n\n       <ng-container *ngFor=\"let col of columns\" >\n  <th *ngIf=\"col.props?.table?.props?.width; else templateName\" [pSortableColumn]=\"col.key\"\n      class=\"px-4 py-2 text-sm font-medium text-white text-center\"\n      [style.width]=\"col.props?.table?.props?.width\">\n    {{ col.props?.label | translate }}\n    <p-sortIcon [field]=\"col.key\"></p-sortIcon>\n  </th>\n\n  <ng-template #templateName>\n    <th class=\"px-4 py-2 text-sm font-medium text-white text-center\">\n      {{ col.props?.label | translate }}\n      <p-sortIcon [field]=\"col.key\"></p-sortIcon>\n    </th>\n  </ng-template>\n</ng-container>\n\n\n        <th class=\"px-4 py-2 text-sm font-medium text-white text-center\"> {{ 'OPERATIONS' | translate }}</th>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-i=\"rowIndex\">\n      <tr class=\"even:bg-gray-50 hover:bg-gray-100\" (click)=\"rowSelect.emit(rowData)\">\n        <!-- <td style=\"width: 1rem\">\n          <p-tableCheckbox [value]=\"rowData\" />\n        </td> -->\n        <td *ngFor=\"let col of columns_ ; let colIndex = index\" class=\"border-t border-gray-200 px-4 py-2 text-center text-sm text-gray-700\">\n\n <!-- \u0625\u0630\u0627 \u0627\u0644\u0639\u0645\u0648\u062F \u0642\u0627\u0628\u0644 \u0644\u0644\u0646\u0642\u0631 -->\n\n        <formly-form\n      [model]=\"rowData\"\n      [form]=\"getForm(i, colIndex)\"\n       [fields]=\"[cloneField(col)]\"\n      [options]=\"options\">\n    </formly-form>\n\n        </td>\n        <td class=\"border-t border-gray-200 px-4 py-2 text-center align-middle\">\n          <ng-container [ngSwitch]=\"actionsMode\">\n                  <!-- Render buttons -->\n                  <ng-container *ngSwitchCase=\"'buttons'\">\n                    <ng-container *ngFor=\"let act of actions\">\n                      <button\n                        *ngIf=\"act.icon || act.label\"\n                        pButton\n                        [icon]=\"act.icon || ''\"\n                        [label]=\"(act.label  || '') | translate\"\n                        [class]=\"act.styleClass || ''\"\n                        class=\"p-button-sm mx-1\"\n                        (click)=\"onAction(act, rowData)\"\n                      ></button>\n                    </ng-container>\n                  </ng-container>\n\n                  <!-- Render menu -->\n                  <ng-container *ngSwitchCase=\"'menu'\">\n                     <p-menu #menu [model]=\"getMenuItems(rowData)\" [popup]=\"true\" appendTo=\"body\">\n                    <ng-template let-item pTemplate=\"item\">\n                      <div class=\"flex items-center gap-2 px-2 py-1\">\n                        <i [ngClass]=\"item.icon\" class=\"text-primary-600\" *ngIf=\"item.icon\"></i>\n                        <span class=\"font-medium\">{{ (item.label  || '') | translate }}</span>\n\n                        <span *ngIf=\"item.badge\" class=\"ml-auto text-xs bg-red-500 text-white px-2 py-1 rounded\">\n                          {{ item.badge }}\n                        </span>\n\n                        <!-- <p-inputSwitch *ngIf=\"item.toggle\" [(ngModel)]=\"item.toggleValue\" class=\"ml-auto\" /> -->\n                      </div>\n                    </ng-template>\n                  </p-menu>\n\n                    <p-button\n                    outlined\n                      icon=\"pi pi-ellipsis-v\"\n                      class=\"p-button-text p-button-sm\"\n                      (onClick)=\"menu.toggle($event)\"\n                    ></p-button>\n                  </ng-container>\n                </ng-container>\n\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n\n</div>\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.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: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3$1.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: i4.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: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: GenericTable, isStandalone: true, selector: "lib-generic-table", inputs: { data: "data", columns: "columns", loading: "loading", actions: "actions", actionsMode: "actionsMode", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", globalFilterFields: "globalFilterFields", scrollHeight: "scrollHeight", rowSelectable: "rowSelectable", selection: "selection", paginator: "paginator", showRowSelectionCheckbox: "showRowSelectionCheckbox" }, outputs: { action: "action", pageChange: "pageChange", rowSelect: "rowSelect", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "\r\n<div class=\"flex-1 last:[&>td]:border-0 rounded-lg border border-surface w-full overflow-auto\">\r\n  <p-table #dt\r\n  [value]=\"data\"\r\n  [columns]=\"columns\"\r\n  [lazy]=\"true\"\r\n  [paginator]=\"paginator\"\r\n  [rows]=\"rows\"\r\n  [first]=\"first\"\r\n    [totalRecords]=\"totalRecords\"\r\n    [sortField]=\"sortField\"\r\n    [sortOrder]=\"sortOrder\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n    [globalFilterFields]=\"globalFilterFields\"\r\n    [loading]=\"loading\"\r\n    [scrollable]=\"true\"\r\n    [scrollHeight]=\"scrollHeight\"\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    >\r\n\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n      <tr>\r\n          <th *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n      </th>\r\n        <!-- <th style=\"width: 1rem\">\r\n          <p-tableHeaderCheckbox />\r\n        </th> -->\r\n\r\n       <ng-container *ngFor=\"let col of columns\" >\r\n  <th *ngIf=\"col.props?.table?.props?.width; else templateName\" [pSortableColumn]=\"col.key\"\r\n      class=\"px-4 py-2 text-sm font-medium text-white text-center\"\r\n      [style.width]=\"col.props?.table?.props?.width\">\r\n    {{ col.props?.label | translate }}\r\n    <p-sortIcon [field]=\"col.key\"></p-sortIcon>\r\n  </th>\r\n\r\n  <ng-template #templateName>\r\n    <th class=\"px-4 py-2 text-sm font-medium text-white text-center\">\r\n      {{ col.props?.label | translate }}\r\n      <p-sortIcon [field]=\"col.key\"></p-sortIcon>\r\n    </th>\r\n  </ng-template>\r\n</ng-container>\r\n\r\n\r\n        <th class=\"px-4 py-2 text-sm font-medium text-white text-center\"> {{ 'OPERATIONS' | translate }}</th>\r\n      </tr>\r\n    </ng-template>\r\n\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\" (click)=\"rowSelect.emit(rowData)\">\r\n        <!-- <td style=\"width: 1rem\">\r\n          <p-tableCheckbox [value]=\"rowData\" />\r\n        </td> -->\r\n        <td *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n        <p-tableCheckbox [value]=\"rowData\"></p-tableCheckbox>\r\n      </td>\r\n        <td *ngFor=\"let col of columns_ ; let colIndex = index\"\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 && col.props['table']\r\n     && col.props['table']['props'] && col.props['table']['props']['width']\"\r\n\r\n     >\r\n\r\n\r\n <!-- \u0625\u0630\u0627 \u0627\u0644\u0639\u0645\u0648\u062F \u0642\u0627\u0628\u0644 \u0644\u0644\u0646\u0642\u0631 -->\r\n\r\n      <formly-form\r\n      [model]=\"rowData\"\r\n      [form]=\"getForm(i, colIndex)\"\r\n      [fields]=\"[cloneField(col)]\"\r\n      [options]=\"options\">\r\n    </formly-form>\r\n\r\n        </td>\r\n        <td class=\"border-t border-gray-200 px-4 py-2 text-center align-middle\">\r\n          <ng-container [ngSwitch]=\"actionsMode\">\r\n                  <!-- Render buttons -->\r\n                  <ng-container *ngSwitchCase=\"'buttons'\">\r\n                    <ng-container *ngFor=\"let act of actions\">\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                  <!-- Render menu -->\r\n                  <ng-container *ngSwitchCase=\"'menu'\">\r\n                     <p-menu #menu [model]=\"getMenuItems(rowData)\" [popup]=\"true\" appendTo=\"body\">\r\n                    <ng-template let-item pTemplate=\"item\">\r\n                      <div class=\"flex items-center gap-2 px-2 py-1\">\r\n                        <i [ngClass]=\"item.icon\" class=\"text-primary-600\" *ngIf=\"item.icon\"></i>\r\n                        <span class=\"font-medium\">{{ (item.label  || '') | translate }}</span>\r\n\r\n                        <span *ngIf=\"item.badge\" class=\"ml-auto text-xs bg-red-500 text-white px-2 py-1 rounded\">\r\n                          {{ item.badge }}\r\n                        </span>\r\n\r\n                        <!-- <p-inputSwitch *ngIf=\"item.toggle\" [(ngModel)]=\"item.toggleValue\" class=\"ml-auto\" /> -->\r\n                      </div>\r\n                    </ng-template>\r\n                  </p-menu>\r\n\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                </ng-container>\r\n\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n\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.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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$3.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: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3$1.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: i4.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: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GenericTable, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-generic-table', imports: [CommonModule, TableModule, ButtonModule, MenuModule, NgForOf, TranslateModule, FormlyField, FormlyForm, NgIf], template: "\n<div class=\"flex-1 last:[&>td]:border-0 rounded-lg border border-surface w-full overflow-auto\">\n  <p-table #dt [value]=\"data\" [columns]=\"columns\" [lazy]=\"true\" [paginator]=\"paginator\" [rows]=\"rows\" [first]=\"first\"\n    [totalRecords]=\"totalRecords\" [sortField]=\"sortField\" [sortOrder]=\"sortOrder\" (onLazyLoad)=\"onLazyLoad($event)\"\n    [globalFilterFields]=\"globalFilterFields\" [loading]=\"loading\" [scrollable]=\"true\" [scrollHeight]=\"scrollHeight\"\n    [selectionMode]=\"rowSelectable ? 'single' : undefined\" [(selection)]=\"selection\"\n    (onRowSelect)=\"onRowSelect($event)\"\n    [customSort]=\"false\"\n    (sortFunction)=\"customSort($event)\"\n    >\n\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr>\n        <!-- <th style=\"width: 1rem\">\n          <p-tableHeaderCheckbox />\n        </th> -->\n\n       <ng-container *ngFor=\"let col of columns\" >\n  <th *ngIf=\"col.props?.table?.props?.width; else templateName\" [pSortableColumn]=\"col.key\"\n      class=\"px-4 py-2 text-sm font-medium text-white text-center\"\n      [style.width]=\"col.props?.table?.props?.width\">\n    {{ col.props?.label | translate }}\n    <p-sortIcon [field]=\"col.key\"></p-sortIcon>\n  </th>\n\n  <ng-template #templateName>\n    <th class=\"px-4 py-2 text-sm font-medium text-white text-center\">\n      {{ col.props?.label | translate }}\n      <p-sortIcon [field]=\"col.key\"></p-sortIcon>\n    </th>\n  </ng-template>\n</ng-container>\n\n\n        <th class=\"px-4 py-2 text-sm font-medium text-white text-center\"> {{ 'OPERATIONS' | translate }}</th>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-i=\"rowIndex\">\n      <tr class=\"even:bg-gray-50 hover:bg-gray-100\" (click)=\"rowSelect.emit(rowData)\">\n        <!-- <td style=\"width: 1rem\">\n          <p-tableCheckbox [value]=\"rowData\" />\n        </td> -->\n        <td *ngFor=\"let col of columns_ ; let colIndex = index\" class=\"border-t border-gray-200 px-4 py-2 text-center text-sm text-gray-700\">\n\n <!-- \u0625\u0630\u0627 \u0627\u0644\u0639\u0645\u0648\u062F \u0642\u0627\u0628\u0644 \u0644\u0644\u0646\u0642\u0631 -->\n\n        <formly-form\n      [model]=\"rowData\"\n      [form]=\"getForm(i, colIndex)\"\n       [fields]=\"[cloneField(col)]\"\n      [options]=\"options\">\n    </formly-form>\n\n        </td>\n        <td class=\"border-t border-gray-200 px-4 py-2 text-center align-middle\">\n          <ng-container [ngSwitch]=\"actionsMode\">\n                  <!-- Render buttons -->\n                  <ng-container *ngSwitchCase=\"'buttons'\">\n                    <ng-container *ngFor=\"let act of actions\">\n                      <button\n                        *ngIf=\"act.icon || act.label\"\n                        pButton\n                        [icon]=\"act.icon || ''\"\n                        [label]=\"(act.label  || '') | translate\"\n                        [class]=\"act.styleClass || ''\"\n                        class=\"p-button-sm mx-1\"\n                        (click)=\"onAction(act, rowData)\"\n                      ></button>\n                    </ng-container>\n                  </ng-container>\n\n                  <!-- Render menu -->\n                  <ng-container *ngSwitchCase=\"'menu'\">\n                     <p-menu #menu [model]=\"getMenuItems(rowData)\" [popup]=\"true\" appendTo=\"body\">\n                    <ng-template let-item pTemplate=\"item\">\n                      <div class=\"flex items-center gap-2 px-2 py-1\">\n                        <i [ngClass]=\"item.icon\" class=\"text-primary-600\" *ngIf=\"item.icon\"></i>\n                        <span class=\"font-medium\">{{ (item.label  || '') | translate }}</span>\n\n                        <span *ngIf=\"item.badge\" class=\"ml-auto text-xs bg-red-500 text-white px-2 py-1 rounded\">\n                          {{ item.badge }}\n                        </span>\n\n                        <!-- <p-inputSwitch *ngIf=\"item.toggle\" [(ngModel)]=\"item.toggleValue\" class=\"ml-auto\" /> -->\n                      </div>\n                    </ng-template>\n                  </p-menu>\n\n                    <p-button\n                    outlined\n                      icon=\"pi pi-ellipsis-v\"\n                      class=\"p-button-text p-button-sm\"\n                      (onClick)=\"menu.toggle($event)\"\n                    ></p-button>\n                  </ng-container>\n                </ng-container>\n\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n\n</div>\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, TranslateModule, FormlyField, FormlyForm, NgIf, TranslatePipe, Menu, Button], template: "\r\n<div class=\"flex-1 last:[&>td]:border-0 rounded-lg border border-surface w-full overflow-auto\">\r\n  <p-table #dt\r\n  [value]=\"data\"\r\n  [columns]=\"columns\"\r\n  [lazy]=\"true\"\r\n  [paginator]=\"paginator\"\r\n  [rows]=\"rows\"\r\n  [first]=\"first\"\r\n    [totalRecords]=\"totalRecords\"\r\n    [sortField]=\"sortField\"\r\n    [sortOrder]=\"sortOrder\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n    [globalFilterFields]=\"globalFilterFields\"\r\n    [loading]=\"loading\"\r\n    [scrollable]=\"true\"\r\n    [scrollHeight]=\"scrollHeight\"\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    >\r\n\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n      <tr>\r\n          <th *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n      </th>\r\n        <!-- <th style=\"width: 1rem\">\r\n          <p-tableHeaderCheckbox />\r\n        </th> -->\r\n\r\n       <ng-container *ngFor=\"let col of columns\" >\r\n  <th *ngIf=\"col.props?.table?.props?.width; else templateName\" [pSortableColumn]=\"col.key\"\r\n      class=\"px-4 py-2 text-sm font-medium text-white text-center\"\r\n      [style.width]=\"col.props?.table?.props?.width\">\r\n    {{ col.props?.label | translate }}\r\n    <p-sortIcon [field]=\"col.key\"></p-sortIcon>\r\n  </th>\r\n\r\n  <ng-template #templateName>\r\n    <th class=\"px-4 py-2 text-sm font-medium text-white text-center\">\r\n      {{ col.props?.label | translate }}\r\n      <p-sortIcon [field]=\"col.key\"></p-sortIcon>\r\n    </th>\r\n  </ng-template>\r\n</ng-container>\r\n\r\n\r\n        <th class=\"px-4 py-2 text-sm font-medium text-white text-center\"> {{ 'OPERATIONS' | translate }}</th>\r\n      </tr>\r\n    </ng-template>\r\n\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\" (click)=\"rowSelect.emit(rowData)\">\r\n        <!-- <td style=\"width: 1rem\">\r\n          <p-tableCheckbox [value]=\"rowData\" />\r\n        </td> -->\r\n        <td *ngIf=\"showRowSelectionCheckbox\" style=\"width: 2rem\">\r\n        <p-tableCheckbox [value]=\"rowData\"></p-tableCheckbox>\r\n      </td>\r\n        <td *ngFor=\"let col of columns_ ; let colIndex = index\"\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 && col.props['table']\r\n     && col.props['table']['props'] && col.props['table']['props']['width']\"\r\n\r\n     >\r\n\r\n\r\n <!-- \u0625\u0630\u0627 \u0627\u0644\u0639\u0645\u0648\u062F \u0642\u0627\u0628\u0644 \u0644\u0644\u0646\u0642\u0631 -->\r\n\r\n      <formly-form\r\n      [model]=\"rowData\"\r\n      [form]=\"getForm(i, colIndex)\"\r\n      [fields]=\"[cloneField(col)]\"\r\n      [options]=\"options\">\r\n    </formly-form>\r\n\r\n        </td>\r\n        <td class=\"border-t border-gray-200 px-4 py-2 text-center align-middle\">\r\n          <ng-container [ngSwitch]=\"actionsMode\">\r\n                  <!-- Render buttons -->\r\n                  <ng-container *ngSwitchCase=\"'buttons'\">\r\n                    <ng-container *ngFor=\"let act of actions\">\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                  <!-- Render menu -->\r\n                  <ng-container *ngSwitchCase=\"'menu'\">\r\n                     <p-menu #menu [model]=\"getMenuItems(rowData)\" [popup]=\"true\" appendTo=\"body\">\r\n                    <ng-template let-item pTemplate=\"item\">\r\n                      <div class=\"flex items-center gap-2 px-2 py-1\">\r\n                        <i [ngClass]=\"item.icon\" class=\"text-primary-600\" *ngIf=\"item.icon\"></i>\r\n                        <span class=\"font-medium\">{{ (item.label  || '') | translate }}</span>\r\n\r\n                        <span *ngIf=\"item.badge\" class=\"ml-auto text-xs bg-red-500 text-white px-2 py-1 rounded\">\r\n                          {{ item.badge }}\r\n                        </span>\r\n\r\n                        <!-- <p-inputSwitch *ngIf=\"item.toggle\" [(ngModel)]=\"item.toggleValue\" class=\"ml-auto\" /> -->\r\n                      </div>\r\n                    </ng-template>\r\n                  </p-menu>\r\n\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                </ng-container>\r\n\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n\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"] }]
         }], propDecorators: { dt: [{
                 type: ViewChild,
                 args: ['dt']
@@ -3137,8 +3180,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 type: Input
             }], rowSelect: [{
                 type: Output
+            }], selectionChange: [{
+                type: Output
             }], paginator: [{
                 type: Input
+            }], showRowSelectionCheckbox: [{
+                type: Input
             }] } });
 
 class GenericCrudTableComponent {
@@ -3164,6 +3211,8 @@ class GenericCrudTableComponent {
     /** تحدد طريقة العرض: 'buttons' أو 'menu' */
     actionsMode = 'buttons';
     action = new EventEmitter();
+    bulkAction = new EventEmitter();
+    singleAction = new EventEmitter();
     // البحث
     // Search
     filters;
@@ -3193,6 +3242,19 @@ class GenericCrudTableComponent {
     paginator = true;
     service;
     idField = 'id';
+    showRowSelectionCheckbox = false;
+    bulkActionButtons = [];
+    singleActionButtons = [];
+    _selectedRows = [];
+    get isSingleItemSelected() {
+        return this._selectedRows.length === 1;
+    }
+    get isMultipleItemSelected() {
+        return this._selectedRows.length > 1;
+    }
+    get selectedItems() {
+        return this._selectedRows;
+    }
     /** للتحكم بإظهار زر الإضافة */
     showAddButton = true;
     /** الأيقونة الافتراضية لزر الإضافة */
@@ -3303,8 +3365,25 @@ class GenericCrudTableComponent {
     trackByIdx(index, item) {
         return index;
     }
+    onSingleItemAction(btn) {
+        if (!this.isSingleItemSelected)
+            return;
+        const selectedItem = this._selectedRows[0];
+        this.singleAction.emit({
+            name: btn.actionName ?? 'singleAction',
+            item: selectedItem
+        });
+    }
+    onInternalBulkAction(btn) {
+        if (!this.isMultipleItemSelected)
+            return;
+        this.bulkAction.emit({
+            name: btn.actionName ?? 'bulkAction',
+            items: [...this._selectedRows] // نرسل نسخة من المصفوفة
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GenericCrudTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: GenericCrudTableComponent, isStandalone: true, selector: "app-generic-crud-table", inputs: { data: "data", formFields: "formFields", columns: "columns", isViewMode: "isViewMode", isEditMode: "isEditMode", drawerVisible: "drawerVisible", dialogVisible: "dialogVisible", model: "model", loading: "loading", errorMsg: "errorMsg", errorMessage: "errorMessage", actions: "actions", actionsMode: "actionsMode", filters: "filters", filterModel: "filterModel", showSearch: "showSearch", first: "first", rows: "rows", totalRecords: "totalRecords", rowSelectable: "rowSelectable", scrollHeight: "scrollHeight", paginator: "paginator", service: "service", idField: "idField", showAddButton: "showAddButton", addButtonIcon: "addButtonIcon", addButtonLabel: "addButtonLabel", addButtonPosition: "addButtonPosition", addButtonConfigs: "addButtonConfigs", breadcrumb: "breadcrumb", beforeSave: "beforeSave" }, outputs: { action: "action", search: "search", pageChange: "pageChange", onSearch: "onSearch", visibleChange: "visibleChange", rowSelect: "rowSelect" }, host: { classAttribute: "h-full flex-1 flex flex-col overflow-hidden border border-surface rounded-2xl p-4 bg-white" }, viewQueries: [{ propertyName: "genericTable", first: true, predicate: ["genericTable"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n <div class=\"flex items-start gap-2 justify-between\">\r\n            <div>\r\n               <!-- <div class=\"text-2xl leading-8 font-medium bg-slate-800 p-4 rounded-md\">\r\n            <p-breadcrumb\r\n              [model]=\"breadcrumb_\"\r\n              [home]=\"home\"\r\n              styleClass=\"custom-breadcrumb\"\r\n            ></p-breadcrumb>\r\n          </div> -->\r\n\r\n<app-breadcrumb [breadcrumb]=\"breadcrumb_\"></app-breadcrumb>\r\n\r\n            </div>\r\n\r\n\r\n       <!-- <ng-container *ngIf=\"isSingleItemSelected\">\r\n\u00A0 \u00A0 \u00A0 <ng-container *ngFor=\"let btn of singleActionButtons; trackBy: trackByIdx\">\r\n\u00A0 \u00A0 \u00A0 \u00A0 <lib-generic-button\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [icon]=\"btn.icon\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [label]=\"btn.label | translate\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [variant]=\"btn.variant\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [size]=\"btn.size\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [permission]=\"btn.permission\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 (clicked)=\"onSingleItemAction(btn)\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 ></lib-generic-button>\r\n\u00A0 \u00A0 \u00A0 </ng-container>\r\n\u00A0 \u00A0 </ng-container>\r\n\r\n    <ng-container *ngIf=\"selectedItems.length > 0\">\r\n      <ng-container *ngFor=\"let btn of bulkActionButtons; trackBy: trackByIdx\">\r\n        <lib-generic-button\r\n          [icon]=\"btn.icon\"\r\n          [label]=\"btn.label | translate\"\r\n          [variant]=\"btn.variant\"\r\n          [size]=\"btn.size\"\r\n          [permission]=\"btn.permission\"\r\n          (clicked)=\"onInternalBulkAction(btn)\"\r\n        ></lib-generic-button>\r\n      </ng-container>\r\n    </ng-container> -->\r\n\r\n      <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n      <lib-generic-button\r\n        [icon]=\"btn.icon\"\r\n        [label]=\"btn.label | translate\"\r\n        [variant]=\"btn.variant\"\r\n        [size]=\"btn.size\"\r\n        [permission]=\"btn.permission\"\r\n        (clicked)=\" this.action.emit({ name: btn.actionName ?? 'add', row: null! });\"\r\n      ></lib-generic-button>\r\n    </ng-container>\r\n\r\n            <p-button\r\n            icon=\"pi pi-circle-fill text-green-500\" *ngIf=\"showAddButton && addButtonConfigs.length == 0\"\r\n            [label]=\"(addButtonLabel | translate)\r\n            \"(onClick)=\"action.emit({ name: 'add', row: null! })\"\r\n            outlined severity=\"secondary\" />\r\n        </div>\r\n        <div class=\"mt-2 mb-4 flex items-center justify-between\">\r\n\r\n          <ng-container *ngIf=\"showSearch && filters; else emptySearch\">\r\n           <lib-generic-search\r\n                [model]=\"filterModel\"\r\n                [fields]=\"filters\"\r\n                (search)=\"applySearch($event)\"\r\n                (reset)=\"applySearch('')\"\r\n              ></lib-generic-search>\r\n          </ng-container>\r\n\r\n              <ng-template #emptySearch>\r\n    <!-- Render a dummy div to preserve expected DOM shape -->\r\n    <!-- <div class=\"min-h-[2.5rem] w-[12rem]\"></div> -->\r\n  </ng-template>\r\n\r\n            <div class=\"flex items-center gap-3\">\r\n\r\n              <p-button icon=\"pi pi-refresh\" outlined severity=\"secondary\" (onClick)=\"applySearch('')\" />\r\n              <p-divider layout=\"vertical\" class=\"m-0 p-0\" />\r\n              <p-button icon=\"pi pi-sort\" outlined severity=\"secondary\" />\r\n                <p-button label=\"1 of 15\" outlined severity=\"secondary\" />\r\n                <p-button icon=\"pi pi-chevron-right\" outlined severity=\"secondary\" />\r\n                <p-button icon=\"pi pi-chevron-left\" outlined severity=\"secondary\" />\r\n            </div>\r\n        </div>\r\n\r\n\r\n\r\n<lib-generic-table\r\n  [data]=\"data\"\r\n  [columns]=\"columns\"\r\n  [paginator]=\"paginator\"\r\n  [loading]=\"loading\"\r\n  [actions]=\"actions\"\r\n  [actionsMode]=\"actionsMode\"\r\n  [first]=\"first\"\r\n  [rows]=\"rows\"\r\n  [totalRecords]=\"totalRecords\"\r\n  [sortField]=\"sortField\"\r\n  [sortOrder]=\"sortOrder\"\r\n  [globalFilterFields]=\"globalFilterFields\"\r\n  [scrollHeight]=\"scrollHeight\"\r\n  (action)=\"action.emit($event)\"\r\n  (pageChange)=\"onLazyLoad($event)\"\r\n  [rowSelectable]=\"rowSelectable\"\r\n  (rowSelect)=\"onRowClick($event)\"\r\n  #genericTable\r\n></lib-generic-table>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<p-drawer *ngIf=\"drawerVisible\"\r\n[(visible)]=\"drawerVisible\" [closable]=\"true\"\r\n[dismissible]=\"false\" [closeOnEscape]=\"true\"\r\n(visibleChange)=\"visibleChange.emit($event)\"\r\nstyleClass=\"!w-full md:!w-80 lg:!w-[40rem]\">\r\n  <!-- Header -->\r\n  <ng-template pTemplate=\"header\">\r\n    <div class=\"flex items-center justify-between w-full\">\r\n      <div class=\"flex items-center gap-2\">\r\n        <i class=\"pi pi-arrow-left cursor-pointer text-xl\" (click)=\"visibleChange.emit(false)\"></i>\r\n        <span class=\"font-bold text-lg\">{{ isEditMode ? '\u062A\u0639\u062F\u064A\u0644 ' : '\u0625\u0636\u0627\u0641\u0629' }}</span>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n<form *ngIf=\"form\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" class=\"p-4\">\r\n    <formly-form  [form]=\"form\" [fields]=\"formFields_\"  [model]=\"model\"  [options]=\"options\"></formly-form>\r\n  </form>\r\n\r\n  <!-- Footer -->\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end gap-2\">\r\n      <button\r\n        pButton\r\n        [label]=\"isEditMode ? ('UPDATE' | translate) : ('SAVE' | translate)\"\r\n        [disabled]=\"loading || form.invalid\"\r\n        [loading]=\"loading\"\r\n        size=\"large\"\r\n        [attr.type]=\"'submit'\"\r\n        (click)=\"onSubmit()\">\r\n      </button>\r\n\r\n      <button\r\n        pButton\r\n        label=\"{{ 'CANCEL' | translate }}\"\r\n        severity=\"danger\"\r\n        size=\"large\"\r\n        (click)=\"visibleChange.emit(false)\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-drawer>\r\n\r\n<p-dialog\r\n  *ngIf=\"dialogVisible\"\r\n  [(visible)]=\"dialogVisible\"\r\n  [modal]=\"true\"\r\n  [closable]=\"true\"\r\n  [dismissableMask]=\"true\"\r\n  [closeOnEscape]=\"true\"\r\n  (visibleChange)=\"visibleChange.emit($event)\"\r\n  [style]=\"{ width: '95vw', maxWidth: '40rem' }\"\r\n  [header]=\"viewHeaderTitle\"\r\n>\r\n<!-- backdrop-blur-sm -->\r\n  <div class=\"relative\">\r\n    <!-- Only visible in view mode: disables interaction and adds blur effect -->\r\n    <div\r\n      *ngIf=\"isViewMode\"\r\n      class=\"absolute inset-0 z-10 bg-white/50 pointer-events-auto cursor-not-allowed rounded-md\">\r\n    </div>\r\n\r\n    <!-- Form -->\r\n    <form *ngIf=\"form\" [formGroup]=\"form\" class=\"p-4\">\r\n      <formly-form\r\n        [form]=\"form\"\r\n        [fields]=\"formFields_\"\r\n        [model]=\"model\"\r\n        [options]=\"options\">\r\n      </formly-form>\r\n    </form>\r\n </div>\r\n  <!-- Footer -->\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end\">\r\n      <button\r\n        pButton\r\n        label=\"{{ 'CLOSE' | translate }}\"\r\n        severity=\"secondary\"\r\n        size=\"large\"\r\n        (click)=\"visibleChange.emit(false)\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-dialog>\r\n\r\n\r\n\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: TableModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: ButtonModule }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3$1.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: "component", type: GenericSearch, selector: "lib-generic-search", inputs: ["placeholder", "model", "fields"], outputs: ["search"] }, { kind: "component", type: GenericTable, selector: "lib-generic-table", inputs: ["data", "columns", "loading", "actions", "actionsMode", "first", "rows", "totalRecords", "sortField", "sortOrder", "globalFilterFields", "scrollHeight", "rowSelectable", "selection", "paginator"], outputs: ["action", "pageChange", "rowSelect"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4$2.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i5$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: BreadcrumbComponent, selector: "app-breadcrumb", inputs: ["breadcrumb"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i8.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: GenericCrudTableComponent, isStandalone: true, selector: "app-generic-crud-table", inputs: { data: "data", formFields: "formFields", columns: "columns", isViewMode: "isViewMode", isEditMode: "isEditMode", drawerVisible: "drawerVisible", dialogVisible: "dialogVisible", model: "model", loading: "loading", errorMsg: "errorMsg", errorMessage: "errorMessage", actions: "actions", actionsMode: "actionsMode", filters: "filters", filterModel: "filterModel", showSearch: "showSearch", first: "first", rows: "rows", totalRecords: "totalRecords", rowSelectable: "rowSelectable", scrollHeight: "scrollHeight", paginator: "paginator", service: "service", idField: "idField", showRowSelectionCheckbox: "showRowSelectionCheckbox", bulkActionButtons: "bulkActionButtons", singleActionButtons: "singleActionButtons", showAddButton: "showAddButton", addButtonIcon: "addButtonIcon", addButtonLabel: "addButtonLabel", addButtonPosition: "addButtonPosition", addButtonConfigs: "addButtonConfigs", breadcrumb: "breadcrumb", beforeSave: "beforeSave" }, outputs: { action: "action", bulkAction: "bulkAction", singleAction: "singleAction", search: "search", pageChange: "pageChange", onSearch: "onSearch", visibleChange: "visibleChange", rowSelect: "rowSelect" }, host: { classAttribute: "h-full flex-1 flex flex-col overflow-hidden border border-surface rounded-2xl p-4 bg-white" }, viewQueries: [{ propertyName: "genericTable", first: true, predicate: ["genericTable"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n <div class=\"flex items-start gap-2 justify-between\">\r\n            <div>\r\n               <!-- <div class=\"text-2xl leading-8 font-medium bg-slate-800 p-4 rounded-md\">\r\n            <p-breadcrumb\r\n              [model]=\"breadcrumb_\"\r\n              [home]=\"home\"\r\n              styleClass=\"custom-breadcrumb\"\r\n            ></p-breadcrumb>\r\n          </div> -->\r\n\r\n<app-breadcrumb [breadcrumb]=\"breadcrumb_\"></app-breadcrumb>\r\n\r\n            </div>\r\n\r\n\r\n       <ng-container *ngIf=\"isSingleItemSelected\">\r\n\u00A0 \u00A0 \u00A0 <ng-container *ngFor=\"let btn of singleActionButtons; trackBy: trackByIdx\">\r\n\u00A0 \u00A0 \u00A0 \u00A0 <lib-generic-button\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [icon]=\"btn.icon\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [label]=\"btn.label | translate\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [variant]=\"btn.variant\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [size]=\"btn.size\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [permission]=\"btn.permission\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 (clicked)=\"onSingleItemAction(btn)\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 ></lib-generic-button>\r\n\u00A0 \u00A0 \u00A0 </ng-container>\r\n\u00A0 \u00A0 </ng-container>\r\n\r\n    <ng-container *ngIf=\"selectedItems.length > 0\">\r\n      <ng-container *ngFor=\"let btn of bulkActionButtons; trackBy: trackByIdx\">\r\n        <lib-generic-button\r\n          [icon]=\"btn.icon\"\r\n          [label]=\"btn.label | translate\"\r\n          [variant]=\"btn.variant\"\r\n          [size]=\"btn.size\"\r\n          [permission]=\"btn.permission\"\r\n          (clicked)=\"onInternalBulkAction(btn)\"\r\n        ></lib-generic-button>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n      <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n      <lib-generic-button\r\n        [icon]=\"btn.icon\"\r\n        [label]=\"btn.label | translate\"\r\n        [variant]=\"btn.variant\"\r\n        [size]=\"btn.size\"\r\n        [permission]=\"btn.permission\"\r\n        (clicked)=\" this.action.emit({ name: btn.actionName ?? 'add', row: null! });\"\r\n      ></lib-generic-button>\r\n    </ng-container>\r\n\r\n            <p-button\r\n            icon=\"pi pi-circle-fill text-green-500\" *ngIf=\"showAddButton && addButtonConfigs.length == 0\"\r\n            [label]=\"(addButtonLabel | translate)\r\n            \"(onClick)=\"action.emit({ name: 'add', row: null! })\"\r\n            outlined severity=\"secondary\" />\r\n        </div>\r\n        <div class=\"mt-2 mb-4 flex items-center justify-between\">\r\n\r\n          <ng-container *ngIf=\"showSearch && filters; else emptySearch\">\r\n           <lib-generic-search\r\n                [model]=\"filterModel\"\r\n                [fields]=\"filters\"\r\n                (search)=\"applySearch($event)\"\r\n                (reset)=\"applySearch('')\"\r\n              ></lib-generic-search>\r\n          </ng-container>\r\n\r\n              <ng-template #emptySearch>\r\n    <!-- Render a dummy div to preserve expected DOM shape -->\r\n    <!-- <div class=\"min-h-[2.5rem] w-[12rem]\"></div> -->\r\n  </ng-template>\r\n\r\n            <div class=\"flex items-center gap-3\">\r\n\r\n              <p-button icon=\"pi pi-refresh\" outlined severity=\"secondary\" (onClick)=\"applySearch('')\" />\r\n              <p-divider layout=\"vertical\" class=\"m-0 p-0\" />\r\n              <p-button icon=\"pi pi-sort\" outlined severity=\"secondary\" />\r\n                <p-button label=\"1 of 15\" outlined severity=\"secondary\" />\r\n                <p-button icon=\"pi pi-chevron-right\" outlined severity=\"secondary\" />\r\n                <p-button icon=\"pi pi-chevron-left\" outlined severity=\"secondary\" />\r\n            </div>\r\n        </div>\r\n\r\n\r\n\r\n<lib-generic-table\r\n  [data]=\"data\"\r\n  [columns]=\"columns\"\r\n  [paginator]=\"paginator\"\r\n  [loading]=\"loading\"\r\n  [actions]=\"actions\"\r\n  [actionsMode]=\"actionsMode\"\r\n  [first]=\"first\"\r\n  [rows]=\"rows\"\r\n  [totalRecords]=\"totalRecords\"\r\n  [sortField]=\"sortField\"\r\n  [sortOrder]=\"sortOrder\"\r\n  [globalFilterFields]=\"globalFilterFields\"\r\n  [scrollHeight]=\"scrollHeight\"\r\n  [showRowSelectionCheckbox]=\"showRowSelectionCheckbox\"\r\n  (action)=\"action.emit($event)\"\r\n  (pageChange)=\"onLazyLoad($event)\"\r\n  [rowSelectable]=\"rowSelectable\"\r\n  (rowSelect)=\"onRowClick($event)\"\r\n  [(selection)]=\"_selectedRows\"\r\n  #genericTable\r\n></lib-generic-table>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<p-drawer *ngIf=\"drawerVisible\"\r\n[(visible)]=\"drawerVisible\" [closable]=\"true\"\r\n[dismissible]=\"false\" [closeOnEscape]=\"true\"\r\n(visibleChange)=\"visibleChange.emit($event)\"\r\nstyleClass=\"!w-full md:!w-80 lg:!w-[40rem]\">\r\n  <!-- Header -->\r\n  <ng-template pTemplate=\"header\">\r\n    <div class=\"flex items-center justify-between w-full\">\r\n      <div class=\"flex items-center gap-2\">\r\n        <i class=\"pi pi-arrow-left cursor-pointer text-xl\" (click)=\"visibleChange.emit(false)\"></i>\r\n        <span class=\"font-bold text-lg\">{{ isEditMode ? '\u062A\u0639\u062F\u064A\u0644 ' : '\u0625\u0636\u0627\u0641\u0629' }}</span>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n<form *ngIf=\"form\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" class=\"p-4\">\r\n    <formly-form  [form]=\"form\" [fields]=\"formFields_\"  [model]=\"model\"  [options]=\"options\"></formly-form>\r\n  </form>\r\n\r\n  <!-- Footer -->\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end gap-2\">\r\n      <button\r\n        pButton\r\n        [label]=\"isEditMode ? ('UPDATE' | translate) : ('SAVE' | translate)\"\r\n        [disabled]=\"loading || form.invalid\"\r\n        [loading]=\"loading\"\r\n        size=\"large\"\r\n        [attr.type]=\"'submit'\"\r\n        (click)=\"onSubmit()\">\r\n      </button>\r\n\r\n      <button\r\n        pButton\r\n        label=\"{{ 'CANCEL' | translate }}\"\r\n        severity=\"danger\"\r\n        size=\"large\"\r\n        (click)=\"visibleChange.emit(false)\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-drawer>\r\n\r\n<p-dialog\r\n  *ngIf=\"dialogVisible\"\r\n  [(visible)]=\"dialogVisible\"\r\n  [modal]=\"true\"\r\n  [closable]=\"true\"\r\n  [dismissableMask]=\"true\"\r\n  [closeOnEscape]=\"true\"\r\n  (visibleChange)=\"visibleChange.emit($event)\"\r\n  [style]=\"{ width: '95vw', maxWidth: '40rem' }\"\r\n  [header]=\"viewHeaderTitle\"\r\n>\r\n<!-- backdrop-blur-sm -->\r\n  <div class=\"relative\">\r\n    <!-- Only visible in view mode: disables interaction and adds blur effect -->\r\n    <div\r\n      *ngIf=\"isViewMode\"\r\n      class=\"absolute inset-0 z-10 bg-white/50 pointer-events-auto cursor-not-allowed rounded-md\">\r\n    </div>\r\n\r\n    <!-- Form -->\r\n    <form *ngIf=\"form\" [formGroup]=\"form\" class=\"p-4\">\r\n      <formly-form\r\n        [form]=\"form\"\r\n        [fields]=\"formFields_\"\r\n        [model]=\"model\"\r\n        [options]=\"options\">\r\n      </formly-form>\r\n    </form>\r\n </div>\r\n  <!-- Footer -->\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end\">\r\n      <button\r\n        pButton\r\n        label=\"{{ 'CLOSE' | translate }}\"\r\n        severity=\"secondary\"\r\n        size=\"large\"\r\n        (click)=\"visibleChange.emit(false)\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-dialog>\r\n\r\n\r\n\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: TableModule }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: ButtonModule }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3$1.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: "component", type: GenericSearch, selector: "lib-generic-search", inputs: ["placeholder", "model", "fields"], outputs: ["search"] }, { kind: "component", type: GenericTable, selector: "lib-generic-table", inputs: ["data", "columns", "loading", "actions", "actionsMode", "first", "rows", "totalRecords", "sortField", "sortOrder", "globalFilterFields", "scrollHeight", "rowSelectable", "selection", "paginator", "showRowSelectionCheckbox"], outputs: ["action", "pageChange", "rowSelect", "selectionChange"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4$2.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i5$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: BreadcrumbComponent, selector: "app-breadcrumb", inputs: ["breadcrumb"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i8.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GenericCrudTableComponent, decorators: [{
             type: Component,
@@ -3329,10 +3408,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         BreadcrumbComponent,
                         DialogModule,
                         Button,
-                        Divider
+                        Divider,
+                        Drawer,
+                        TranslatePipe
                     ], host: {
                         class: 'h-full flex-1 flex flex-col overflow-hidden border border-surface rounded-2xl p-4 bg-white'
-                    }, template: "\r\n <div class=\"flex items-start gap-2 justify-between\">\r\n            <div>\r\n               <!-- <div class=\"text-2xl leading-8 font-medium bg-slate-800 p-4 rounded-md\">\r\n            <p-breadcrumb\r\n              [model]=\"breadcrumb_\"\r\n              [home]=\"home\"\r\n              styleClass=\"custom-breadcrumb\"\r\n            ></p-breadcrumb>\r\n          </div> -->\r\n\r\n<app-breadcrumb [breadcrumb]=\"breadcrumb_\"></app-breadcrumb>\r\n\r\n            </div>\r\n\r\n\r\n       <!-- <ng-container *ngIf=\"isSingleItemSelected\">\r\n\u00A0 \u00A0 \u00A0 <ng-container *ngFor=\"let btn of singleActionButtons; trackBy: trackByIdx\">\r\n\u00A0 \u00A0 \u00A0 \u00A0 <lib-generic-button\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [icon]=\"btn.icon\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [label]=\"btn.label | translate\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [variant]=\"btn.variant\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [size]=\"btn.size\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [permission]=\"btn.permission\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 (clicked)=\"onSingleItemAction(btn)\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 ></lib-generic-button>\r\n\u00A0 \u00A0 \u00A0 </ng-container>\r\n\u00A0 \u00A0 </ng-container>\r\n\r\n    <ng-container *ngIf=\"selectedItems.length > 0\">\r\n      <ng-container *ngFor=\"let btn of bulkActionButtons; trackBy: trackByIdx\">\r\n        <lib-generic-button\r\n          [icon]=\"btn.icon\"\r\n          [label]=\"btn.label | translate\"\r\n          [variant]=\"btn.variant\"\r\n          [size]=\"btn.size\"\r\n          [permission]=\"btn.permission\"\r\n          (clicked)=\"onInternalBulkAction(btn)\"\r\n        ></lib-generic-button>\r\n      </ng-container>\r\n    </ng-container> -->\r\n\r\n      <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n      <lib-generic-button\r\n        [icon]=\"btn.icon\"\r\n        [label]=\"btn.label | translate\"\r\n        [variant]=\"btn.variant\"\r\n        [size]=\"btn.size\"\r\n        [permission]=\"btn.permission\"\r\n        (clicked)=\" this.action.emit({ name: btn.actionName ?? 'add', row: null! });\"\r\n      ></lib-generic-button>\r\n    </ng-container>\r\n\r\n            <p-button\r\n            icon=\"pi pi-circle-fill text-green-500\" *ngIf=\"showAddButton && addButtonConfigs.length == 0\"\r\n            [label]=\"(addButtonLabel | translate)\r\n            \"(onClick)=\"action.emit({ name: 'add', row: null! })\"\r\n            outlined severity=\"secondary\" />\r\n        </div>\r\n        <div class=\"mt-2 mb-4 flex items-center justify-between\">\r\n\r\n          <ng-container *ngIf=\"showSearch && filters; else emptySearch\">\r\n           <lib-generic-search\r\n                [model]=\"filterModel\"\r\n                [fields]=\"filters\"\r\n                (search)=\"applySearch($event)\"\r\n                (reset)=\"applySearch('')\"\r\n              ></lib-generic-search>\r\n          </ng-container>\r\n\r\n              <ng-template #emptySearch>\r\n    <!-- Render a dummy div to preserve expected DOM shape -->\r\n    <!-- <div class=\"min-h-[2.5rem] w-[12rem]\"></div> -->\r\n  </ng-template>\r\n\r\n            <div class=\"flex items-center gap-3\">\r\n\r\n              <p-button icon=\"pi pi-refresh\" outlined severity=\"secondary\" (onClick)=\"applySearch('')\" />\r\n              <p-divider layout=\"vertical\" class=\"m-0 p-0\" />\r\n              <p-button icon=\"pi pi-sort\" outlined severity=\"secondary\" />\r\n                <p-button label=\"1 of 15\" outlined severity=\"secondary\" />\r\n                <p-button icon=\"pi pi-chevron-right\" outlined severity=\"secondary\" />\r\n                <p-button icon=\"pi pi-chevron-left\" outlined severity=\"secondary\" />\r\n            </div>\r\n        </div>\r\n\r\n\r\n\r\n<lib-generic-table\r\n  [data]=\"data\"\r\n  [columns]=\"columns\"\r\n  [paginator]=\"paginator\"\r\n  [loading]=\"loading\"\r\n  [actions]=\"actions\"\r\n  [actionsMode]=\"actionsMode\"\r\n  [first]=\"first\"\r\n  [rows]=\"rows\"\r\n  [totalRecords]=\"totalRecords\"\r\n  [sortField]=\"sortField\"\r\n  [sortOrder]=\"sortOrder\"\r\n  [globalFilterFields]=\"globalFilterFields\"\r\n  [scrollHeight]=\"scrollHeight\"\r\n  (action)=\"action.emit($event)\"\r\n  (pageChange)=\"onLazyLoad($event)\"\r\n  [rowSelectable]=\"rowSelectable\"\r\n  (rowSelect)=\"onRowClick($event)\"\r\n  #genericTable\r\n></lib-generic-table>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<p-drawer *ngIf=\"drawerVisible\"\r\n[(visible)]=\"drawerVisible\" [closable]=\"true\"\r\n[dismissible]=\"false\" [closeOnEscape]=\"true\"\r\n(visibleChange)=\"visibleChange.emit($event)\"\r\nstyleClass=\"!w-full md:!w-80 lg:!w-[40rem]\">\r\n  <!-- Header -->\r\n  <ng-template pTemplate=\"header\">\r\n    <div class=\"flex items-center justify-between w-full\">\r\n      <div class=\"flex items-center gap-2\">\r\n        <i class=\"pi pi-arrow-left cursor-pointer text-xl\" (click)=\"visibleChange.emit(false)\"></i>\r\n        <span class=\"font-bold text-lg\">{{ isEditMode ? '\u062A\u0639\u062F\u064A\u0644 ' : '\u0625\u0636\u0627\u0641\u0629' }}</span>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n<form *ngIf=\"form\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" class=\"p-4\">\r\n    <formly-form  [form]=\"form\" [fields]=\"formFields_\"  [model]=\"model\"  [options]=\"options\"></formly-form>\r\n  </form>\r\n\r\n  <!-- Footer -->\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end gap-2\">\r\n      <button\r\n        pButton\r\n        [label]=\"isEditMode ? ('UPDATE' | translate) : ('SAVE' | translate)\"\r\n        [disabled]=\"loading || form.invalid\"\r\n        [loading]=\"loading\"\r\n        size=\"large\"\r\n        [attr.type]=\"'submit'\"\r\n        (click)=\"onSubmit()\">\r\n      </button>\r\n\r\n      <button\r\n        pButton\r\n        label=\"{{ 'CANCEL' | translate }}\"\r\n        severity=\"danger\"\r\n        size=\"large\"\r\n        (click)=\"visibleChange.emit(false)\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-drawer>\r\n\r\n<p-dialog\r\n  *ngIf=\"dialogVisible\"\r\n  [(visible)]=\"dialogVisible\"\r\n  [modal]=\"true\"\r\n  [closable]=\"true\"\r\n  [dismissableMask]=\"true\"\r\n  [closeOnEscape]=\"true\"\r\n  (visibleChange)=\"visibleChange.emit($event)\"\r\n  [style]=\"{ width: '95vw', maxWidth: '40rem' }\"\r\n  [header]=\"viewHeaderTitle\"\r\n>\r\n<!-- backdrop-blur-sm -->\r\n  <div class=\"relative\">\r\n    <!-- Only visible in view mode: disables interaction and adds blur effect -->\r\n    <div\r\n      *ngIf=\"isViewMode\"\r\n      class=\"absolute inset-0 z-10 bg-white/50 pointer-events-auto cursor-not-allowed rounded-md\">\r\n    </div>\r\n\r\n    <!-- Form -->\r\n    <form *ngIf=\"form\" [formGroup]=\"form\" class=\"p-4\">\r\n      <formly-form\r\n        [form]=\"form\"\r\n        [fields]=\"formFields_\"\r\n        [model]=\"model\"\r\n        [options]=\"options\">\r\n      </formly-form>\r\n    </form>\r\n </div>\r\n  <!-- Footer -->\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end\">\r\n      <button\r\n        pButton\r\n        label=\"{{ 'CLOSE' | translate }}\"\r\n        severity=\"secondary\"\r\n        size=\"large\"\r\n        (click)=\"visibleChange.emit(false)\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-dialog>\r\n\r\n\r\n\r\n" }]
+                    }, template: "\r\n <div class=\"flex items-start gap-2 justify-between\">\r\n            <div>\r\n               <!-- <div class=\"text-2xl leading-8 font-medium bg-slate-800 p-4 rounded-md\">\r\n            <p-breadcrumb\r\n              [model]=\"breadcrumb_\"\r\n              [home]=\"home\"\r\n              styleClass=\"custom-breadcrumb\"\r\n            ></p-breadcrumb>\r\n          </div> -->\r\n\r\n<app-breadcrumb [breadcrumb]=\"breadcrumb_\"></app-breadcrumb>\r\n\r\n            </div>\r\n\r\n\r\n       <ng-container *ngIf=\"isSingleItemSelected\">\r\n\u00A0 \u00A0 \u00A0 <ng-container *ngFor=\"let btn of singleActionButtons; trackBy: trackByIdx\">\r\n\u00A0 \u00A0 \u00A0 \u00A0 <lib-generic-button\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [icon]=\"btn.icon\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [label]=\"btn.label | translate\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [variant]=\"btn.variant\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [size]=\"btn.size\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 [permission]=\"btn.permission\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 \u00A0 (clicked)=\"onSingleItemAction(btn)\"\r\n\u00A0 \u00A0 \u00A0 \u00A0 ></lib-generic-button>\r\n\u00A0 \u00A0 \u00A0 </ng-container>\r\n\u00A0 \u00A0 </ng-container>\r\n\r\n    <ng-container *ngIf=\"selectedItems.length > 0\">\r\n      <ng-container *ngFor=\"let btn of bulkActionButtons; trackBy: trackByIdx\">\r\n        <lib-generic-button\r\n          [icon]=\"btn.icon\"\r\n          [label]=\"btn.label | translate\"\r\n          [variant]=\"btn.variant\"\r\n          [size]=\"btn.size\"\r\n          [permission]=\"btn.permission\"\r\n          (clicked)=\"onInternalBulkAction(btn)\"\r\n        ></lib-generic-button>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n      <ng-container *ngFor=\"let btn of addButtonConfigs; trackBy: trackByIdx\">\r\n      <lib-generic-button\r\n        [icon]=\"btn.icon\"\r\n        [label]=\"btn.label | translate\"\r\n        [variant]=\"btn.variant\"\r\n        [size]=\"btn.size\"\r\n        [permission]=\"btn.permission\"\r\n        (clicked)=\" this.action.emit({ name: btn.actionName ?? 'add', row: null! });\"\r\n      ></lib-generic-button>\r\n    </ng-container>\r\n\r\n            <p-button\r\n            icon=\"pi pi-circle-fill text-green-500\" *ngIf=\"showAddButton && addButtonConfigs.length == 0\"\r\n            [label]=\"(addButtonLabel | translate)\r\n            \"(onClick)=\"action.emit({ name: 'add', row: null! })\"\r\n            outlined severity=\"secondary\" />\r\n        </div>\r\n        <div class=\"mt-2 mb-4 flex items-center justify-between\">\r\n\r\n          <ng-container *ngIf=\"showSearch && filters; else emptySearch\">\r\n           <lib-generic-search\r\n                [model]=\"filterModel\"\r\n                [fields]=\"filters\"\r\n                (search)=\"applySearch($event)\"\r\n                (reset)=\"applySearch('')\"\r\n              ></lib-generic-search>\r\n          </ng-container>\r\n\r\n              <ng-template #emptySearch>\r\n    <!-- Render a dummy div to preserve expected DOM shape -->\r\n    <!-- <div class=\"min-h-[2.5rem] w-[12rem]\"></div> -->\r\n  </ng-template>\r\n\r\n            <div class=\"flex items-center gap-3\">\r\n\r\n              <p-button icon=\"pi pi-refresh\" outlined severity=\"secondary\" (onClick)=\"applySearch('')\" />\r\n              <p-divider layout=\"vertical\" class=\"m-0 p-0\" />\r\n              <p-button icon=\"pi pi-sort\" outlined severity=\"secondary\" />\r\n                <p-button label=\"1 of 15\" outlined severity=\"secondary\" />\r\n                <p-button icon=\"pi pi-chevron-right\" outlined severity=\"secondary\" />\r\n                <p-button icon=\"pi pi-chevron-left\" outlined severity=\"secondary\" />\r\n            </div>\r\n        </div>\r\n\r\n\r\n\r\n<lib-generic-table\r\n  [data]=\"data\"\r\n  [columns]=\"columns\"\r\n  [paginator]=\"paginator\"\r\n  [loading]=\"loading\"\r\n  [actions]=\"actions\"\r\n  [actionsMode]=\"actionsMode\"\r\n  [first]=\"first\"\r\n  [rows]=\"rows\"\r\n  [totalRecords]=\"totalRecords\"\r\n  [sortField]=\"sortField\"\r\n  [sortOrder]=\"sortOrder\"\r\n  [globalFilterFields]=\"globalFilterFields\"\r\n  [scrollHeight]=\"scrollHeight\"\r\n  [showRowSelectionCheckbox]=\"showRowSelectionCheckbox\"\r\n  (action)=\"action.emit($event)\"\r\n  (pageChange)=\"onLazyLoad($event)\"\r\n  [rowSelectable]=\"rowSelectable\"\r\n  (rowSelect)=\"onRowClick($event)\"\r\n  [(selection)]=\"_selectedRows\"\r\n  #genericTable\r\n></lib-generic-table>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<p-drawer *ngIf=\"drawerVisible\"\r\n[(visible)]=\"drawerVisible\" [closable]=\"true\"\r\n[dismissible]=\"false\" [closeOnEscape]=\"true\"\r\n(visibleChange)=\"visibleChange.emit($event)\"\r\nstyleClass=\"!w-full md:!w-80 lg:!w-[40rem]\">\r\n  <!-- Header -->\r\n  <ng-template pTemplate=\"header\">\r\n    <div class=\"flex items-center justify-between w-full\">\r\n      <div class=\"flex items-center gap-2\">\r\n        <i class=\"pi pi-arrow-left cursor-pointer text-xl\" (click)=\"visibleChange.emit(false)\"></i>\r\n        <span class=\"font-bold text-lg\">{{ isEditMode ? '\u062A\u0639\u062F\u064A\u0644 ' : '\u0625\u0636\u0627\u0641\u0629' }}</span>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n<form *ngIf=\"form\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" class=\"p-4\">\r\n    <formly-form  [form]=\"form\" [fields]=\"formFields_\"  [model]=\"model\"  [options]=\"options\"></formly-form>\r\n  </form>\r\n\r\n  <!-- Footer -->\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end gap-2\">\r\n      <button\r\n        pButton\r\n        [label]=\"isEditMode ? ('UPDATE' | translate) : ('SAVE' | translate)\"\r\n        [disabled]=\"loading || form.invalid\"\r\n        [loading]=\"loading\"\r\n        size=\"large\"\r\n        [attr.type]=\"'submit'\"\r\n        (click)=\"onSubmit()\">\r\n      </button>\r\n\r\n      <button\r\n        pButton\r\n        label=\"{{ 'CANCEL' | translate }}\"\r\n        severity=\"danger\"\r\n        size=\"large\"\r\n        (click)=\"visibleChange.emit(false)\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-drawer>\r\n\r\n<p-dialog\r\n  *ngIf=\"dialogVisible\"\r\n  [(visible)]=\"dialogVisible\"\r\n  [modal]=\"true\"\r\n  [closable]=\"true\"\r\n  [dismissableMask]=\"true\"\r\n  [closeOnEscape]=\"true\"\r\n  (visibleChange)=\"visibleChange.emit($event)\"\r\n  [style]=\"{ width: '95vw', maxWidth: '40rem' }\"\r\n  [header]=\"viewHeaderTitle\"\r\n>\r\n<!-- backdrop-blur-sm -->\r\n  <div class=\"relative\">\r\n    <!-- Only visible in view mode: disables interaction and adds blur effect -->\r\n    <div\r\n      *ngIf=\"isViewMode\"\r\n      class=\"absolute inset-0 z-10 bg-white/50 pointer-events-auto cursor-not-allowed rounded-md\">\r\n    </div>\r\n\r\n    <!-- Form -->\r\n    <form *ngIf=\"form\" [formGroup]=\"form\" class=\"p-4\">\r\n      <formly-form\r\n        [form]=\"form\"\r\n        [fields]=\"formFields_\"\r\n        [model]=\"model\"\r\n        [options]=\"options\">\r\n      </formly-form>\r\n    </form>\r\n </div>\r\n  <!-- Footer -->\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end\">\r\n      <button\r\n        pButton\r\n        label=\"{{ 'CLOSE' | translate }}\"\r\n        severity=\"secondary\"\r\n        size=\"large\"\r\n        (click)=\"visibleChange.emit(false)\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-dialog>\r\n\r\n\r\n\r\n" }]
         }], propDecorators: { genericTable: [{
                 type: ViewChild,
                 args: ['genericTable']
@@ -3364,6 +3445,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 type: Input
             }], action: [{
                 type: Output
+            }], bulkAction: [{
+                type: Output
+            }], singleAction: [{
+                type: Output
             }], filters: [{
                 type: Input
             }], filterModel: [{
@@ -3396,6 +3481,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 type: Input
             }], idField: [{
                 type: Input
+            }], showRowSelectionCheckbox: [{
+                type: Input
+            }], bulkActionButtons: [{
+                type: Input
+            }], singleActionButtons: [{
+                type: Input
             }], showAddButton: [{
                 type: Input
             }], addButtonIcon: [{
@@ -5358,9 +5449,7 @@ class ClickableLabelTypeComponent extends FieldType {
     }
     handleCellClick(col, model, event) {
         event.stopPropagation();
-        if (col.clickAction) {
-            col.clickAction(model, event); // <--- تمرير الـ event
-        }
+        col?.clickAction?.(model, event);
     }
     getCellValue(col, model) {
         const field = this.key;
@@ -5368,22 +5457,22 @@ class ClickableLabelTypeComponent extends FieldType {
         return pipeFn ? pipeFn(model[col.key]) : model[field];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ClickableLabelTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ClickableLabelTypeComponent, isStandalone: true, selector: "formly-clickable-label-type", usesInheritance: true, ngImport: i0, template: `
-
-<span  class="cursor-pointer hover:underline hover:text-blue-600 font-bold"
-            (click)="handleCellClick(to,model, $event)"
-            (mouseenter)="props['hoverable'] && onCellHover(props, model, $event)"
-            (mouseleave)="props['hoverable'] && onCellLeave(props, model, $event)"
-          >
-          @if(props['formatter']){
-           <span  [innerHTML]="props['formatter'](model)"></span>
-          }
-          @else{
-  {{ getCellValue(props, model) }}
-          }
-
-
-          </span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ClickableLabelTypeComponent, isStandalone: true, selector: "formly-clickable-label-type", usesInheritance: true, ngImport: i0, template: `
+
+<span  class="cursor-pointer hover:underline hover:text-blue-600 font-bold"
+            (click)="handleCellClick(props,model, $event)"
+            (mouseenter)="props['hoverable'] && onCellHover(props, model, $event)"
+            (mouseleave)="props['hoverable'] && onCellLeave(props, model, $event)"
+          >
+          @if(props['formatter']){
+           <span  [innerHTML]="props['formatter'](model)"></span>
+          }
+          @else{
+  {{ getCellValue(props, model) }}
+          }
+
+
+          </span>
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ClickableLabelTypeComponent, decorators: [{
@@ -5392,22 +5481,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                     selector: 'formly-clickable-label-type',
                     standalone: true,
                     // imports:[NgIf],
-                    template: `
-
-<span  class="cursor-pointer hover:underline hover:text-blue-600 font-bold"
-            (click)="handleCellClick(to,model, $event)"
-            (mouseenter)="props['hoverable'] && onCellHover(props, model, $event)"
-            (mouseleave)="props['hoverable'] && onCellLeave(props, model, $event)"
-          >
-          @if(props['formatter']){
-           <span  [innerHTML]="props['formatter'](model)"></span>
-          }
-          @else{
-  {{ getCellValue(props, model) }}
-          }
-
-
-          </span>
+                    template: `
+
+<span  class="cursor-pointer hover:underline hover:text-blue-600 font-bold"
+            (click)="handleCellClick(props,model, $event)"
+            (mouseenter)="props['hoverable'] && onCellHover(props, model, $event)"
+            (mouseleave)="props['hoverable'] && onCellLeave(props, model, $event)"
+          >
+          @if(props['formatter']){
+           <span  [innerHTML]="props['formatter'](model)"></span>
+          }
+          @else{
+  {{ getCellValue(props, model) }}
+          }
+
+
+          </span>
   `,
                 }]
         }] });