@elite.framework/ng.core 1.0.58 → 1.0.61

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

@@ -29,7 +29,7 @@ import { SafeHtmlPipe, MenuModule, Menu } from 'primeng/menu';
 import * as i4 from 'primeng/fileupload';
 import { FileUploadModule } from 'primeng/fileupload';
 import * as i2$1 from '@angular/router';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Router, ActivatedRoute } from '@angular/router';
 import * as i1$4 from 'primeng/colorpicker';
 import { ColorPickerModule } from 'primeng/colorpicker';
 import * as i4$3 from 'primeng/divider';
@@ -3408,7 +3408,7 @@ class GenericCrudTableComponent {
     formFields = []; // <-- هنا
     columns = []; // <-- هنا
     isViewMode = false;
-    displayMode = 'drawer'; // 'drawer' | 'dialog'
+    displayMode = 'drawer';
     isEditMode = false;
     drawerVisible = false;
     dialogVisible = false;
@@ -3631,7 +3631,7 @@ class GenericCrudTableComponent {
         });
     }
     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", displayMode: "displayMode", 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<div class=\"flex items-center gap-2 justify-end flex-wrap\">\r\n       <ng-container *ngIf=\"isSingleItemSelected\">\r\n <ng-container *ngFor=\"let btn of singleActionButtons; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n\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)=\"onSingleItemAction(btn)\"\r\n ></lib-generic-button>\r\n</ng-container>\r\n </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\r\n            </div>\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<!-- Drawer -->\r\n<p-drawer\r\n  *ngIf=\"displayMode == 'drawer' && drawerVisible\"\r\n  [(visible)]=\"drawerVisible\"\r\n  [closable]=\"true\"\r\n  [dismissible]=\"false\"\r\n  [closeOnEscape]=\"true\"\r\n  (visibleChange)=\"visibleChange.emit($event)\"\r\n  styleClass=\"!w-full md:!w-80 lg:!w-[40rem]\">\r\n\r\n  <ng-template pTemplate=\"header\">\r\n    <span class=\"font-bold text-lg\">\r\n      {{ isEditMode ? '\u062A\u0639\u062F\u064A\u0644' : isViewMode == false ? '\u0625\u0636\u0627\u0641\u0629' : '\u0639\u0631\u0636' }}\r\n    </span>\r\n  </ng-template>\r\n\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  <ng-template pTemplate=\"footer\" *ngIf=\"!isViewMode\">\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        type=\"submit\"\r\n        [disabled]=\"loading || form.invalid\"\r\n        [loading]=\"loading\">\r\n      </button>\r\n      <button\r\n        pButton\r\n        label=\"{{ 'CANCEL' | translate }}\"\r\n        severity=\"danger\"\r\n        (click)=\"drawerVisible = false\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-drawer>\r\n\r\n<!-- Dialog -->\r\n<p-dialog\r\n  *ngIf=\"displayMode == 'dialog' && 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]=\"isEditMode ? '\u062A\u0639\u062F\u064A\u0644' : isViewMode == false ? '\u0625\u0636\u0627\u0641\u0629' : viewHeaderTitle\">\r\n\r\n  <div class=\"relative\">\r\n    <div *ngIf=\"isViewMode\" class=\"absolute inset-0 z-10 bg-white/50 pointer-events-auto rounded-md\"></div>\r\n    <form *ngIf=\"form\" [formGroup]=\"form\" class=\"p-4\">\r\n      <formly-form [form]=\"form\" [fields]=\"formFields_\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n    </form>\r\n  </div>\r\n\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end gap-2\">\r\n      <button *ngIf=\"!isViewMode\"\r\n        pButton\r\n        [label]=\"isEditMode ? ('UPDATE' | translate) : ('SAVE' | translate)\"\r\n        type=\"submit\"\r\n        [disabled]=\"loading || form.invalid\"\r\n        [loading]=\"loading\"\r\n        (click)=\"onSubmit()\">\r\n      </button>\r\n      <button\r\n        pButton\r\n        label=\"{{ isViewMode ? ('CLOSE' | translate) : ('CANCEL' | translate) }}\"\r\n        severity=\"secondary\"\r\n        (click)=\"dialogVisible = 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$3.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", displayMode: "displayMode", 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<div class=\"flex items-center gap-2 justify-end flex-wrap\">\r\n       <ng-container *ngIf=\"isSingleItemSelected\">\r\n <ng-container *ngFor=\"let btn of singleActionButtons; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n\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)=\"onSingleItemAction(btn)\"\r\n ></lib-generic-button>\r\n</ng-container>\r\n </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\r\n            </div>\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<!-- Drawer -->\r\n<p-drawer\r\n  *ngIf=\"(typeof displayMode === 'string' ? displayMode : isEditMode ? displayMode['edit'] : isViewMode == false ? displayMode['add'] : displayMode['view']  ) === 'drawer' && drawerVisible\"\r\n  [(visible)]=\"drawerVisible\"\r\n  [closable]=\"true\"\r\n  [dismissible]=\"false\"\r\n  [closeOnEscape]=\"true\"\r\n  (visibleChange)=\"visibleChange.emit($event)\"\r\n  styleClass=\"!w-full md:!w-80 lg:!w-[40rem]\">\r\n\r\n  <ng-template pTemplate=\"header\">\r\n    <span class=\"font-bold text-lg\">\r\n      {{ isEditMode ? '\u062A\u0639\u062F\u064A\u0644' : isViewMode == false ? '\u0625\u0636\u0627\u0641\u0629' : '\u0639\u0631\u0636' }}\r\n    </span>\r\n  </ng-template>\r\n\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  <ng-template pTemplate=\"footer\" *ngIf=\"!isViewMode\">\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        type=\"submit\"\r\n        [disabled]=\"loading || form.invalid\"\r\n        [loading]=\"loading\">\r\n      </button>\r\n      <button\r\n        pButton\r\n        label=\"{{ 'CANCEL' | translate }}\"\r\n        severity=\"danger\"\r\n        (click)=\"drawerVisible = false\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-drawer>\r\n\r\n<!-- Dialog -->\r\n<p-dialog\r\n  *ngIf=\"(typeof displayMode === 'string' ? displayMode : isEditMode ? displayMode['edit'] : isViewMode == false ? displayMode['add'] : displayMode['view']  ) === 'dialog' && 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]=\"isEditMode ? '\u062A\u0639\u062F\u064A\u0644' : isViewMode == false ? '\u0625\u0636\u0627\u0641\u0629' : viewHeaderTitle\">\r\n\r\n  <div class=\"relative\">\r\n    <div *ngIf=\"isViewMode\" class=\"absolute inset-0 z-10 bg-white/50 pointer-events-auto rounded-md\"></div>\r\n    <form *ngIf=\"form\" [formGroup]=\"form\" class=\"p-4\">\r\n      <formly-form [form]=\"form\" [fields]=\"formFields_\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n    </form>\r\n  </div>\r\n\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end gap-2\">\r\n      <button *ngIf=\"!isViewMode\"\r\n        pButton\r\n        [label]=\"isEditMode ? ('UPDATE' | translate) : ('SAVE' | translate)\"\r\n        type=\"submit\"\r\n        [disabled]=\"loading || form.invalid\"\r\n        [loading]=\"loading\"\r\n        (click)=\"onSubmit()\">\r\n      </button>\r\n      <button\r\n        pButton\r\n        label=\"{{ isViewMode ? ('CLOSE' | translate) : ('CANCEL' | translate) }}\"\r\n        severity=\"secondary\"\r\n        (click)=\"dialogVisible = 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$3.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,
@@ -3655,7 +3655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         DialogModule,
                     ], 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<div class=\"flex items-center gap-2 justify-end flex-wrap\">\r\n       <ng-container *ngIf=\"isSingleItemSelected\">\r\n <ng-container *ngFor=\"let btn of singleActionButtons; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n\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)=\"onSingleItemAction(btn)\"\r\n ></lib-generic-button>\r\n</ng-container>\r\n </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\r\n            </div>\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<!-- Drawer -->\r\n<p-drawer\r\n  *ngIf=\"displayMode == 'drawer' && drawerVisible\"\r\n  [(visible)]=\"drawerVisible\"\r\n  [closable]=\"true\"\r\n  [dismissible]=\"false\"\r\n  [closeOnEscape]=\"true\"\r\n  (visibleChange)=\"visibleChange.emit($event)\"\r\n  styleClass=\"!w-full md:!w-80 lg:!w-[40rem]\">\r\n\r\n  <ng-template pTemplate=\"header\">\r\n    <span class=\"font-bold text-lg\">\r\n      {{ isEditMode ? '\u062A\u0639\u062F\u064A\u0644' : isViewMode == false ? '\u0625\u0636\u0627\u0641\u0629' : '\u0639\u0631\u0636' }}\r\n    </span>\r\n  </ng-template>\r\n\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  <ng-template pTemplate=\"footer\" *ngIf=\"!isViewMode\">\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        type=\"submit\"\r\n        [disabled]=\"loading || form.invalid\"\r\n        [loading]=\"loading\">\r\n      </button>\r\n      <button\r\n        pButton\r\n        label=\"{{ 'CANCEL' | translate }}\"\r\n        severity=\"danger\"\r\n        (click)=\"drawerVisible = false\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-drawer>\r\n\r\n<!-- Dialog -->\r\n<p-dialog\r\n  *ngIf=\"displayMode == 'dialog' && 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]=\"isEditMode ? '\u062A\u0639\u062F\u064A\u0644' : isViewMode == false ? '\u0625\u0636\u0627\u0641\u0629' : viewHeaderTitle\">\r\n\r\n  <div class=\"relative\">\r\n    <div *ngIf=\"isViewMode\" class=\"absolute inset-0 z-10 bg-white/50 pointer-events-auto rounded-md\"></div>\r\n    <form *ngIf=\"form\" [formGroup]=\"form\" class=\"p-4\">\r\n      <formly-form [form]=\"form\" [fields]=\"formFields_\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n    </form>\r\n  </div>\r\n\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end gap-2\">\r\n      <button *ngIf=\"!isViewMode\"\r\n        pButton\r\n        [label]=\"isEditMode ? ('UPDATE' | translate) : ('SAVE' | translate)\"\r\n        type=\"submit\"\r\n        [disabled]=\"loading || form.invalid\"\r\n        [loading]=\"loading\"\r\n        (click)=\"onSubmit()\">\r\n      </button>\r\n      <button\r\n        pButton\r\n        label=\"{{ isViewMode ? ('CLOSE' | translate) : ('CANCEL' | translate) }}\"\r\n        severity=\"secondary\"\r\n        (click)=\"dialogVisible = 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<div class=\"flex items-center gap-2 justify-end flex-wrap\">\r\n       <ng-container *ngIf=\"isSingleItemSelected\">\r\n <ng-container *ngFor=\"let btn of singleActionButtons; trackBy: trackByIdx\">\r\n <lib-generic-button\r\n\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)=\"onSingleItemAction(btn)\"\r\n ></lib-generic-button>\r\n</ng-container>\r\n </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\r\n            </div>\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<!-- Drawer -->\r\n<p-drawer\r\n  *ngIf=\"(typeof displayMode === 'string' ? displayMode : isEditMode ? displayMode['edit'] : isViewMode == false ? displayMode['add'] : displayMode['view']  ) === 'drawer' && drawerVisible\"\r\n  [(visible)]=\"drawerVisible\"\r\n  [closable]=\"true\"\r\n  [dismissible]=\"false\"\r\n  [closeOnEscape]=\"true\"\r\n  (visibleChange)=\"visibleChange.emit($event)\"\r\n  styleClass=\"!w-full md:!w-80 lg:!w-[40rem]\">\r\n\r\n  <ng-template pTemplate=\"header\">\r\n    <span class=\"font-bold text-lg\">\r\n      {{ isEditMode ? '\u062A\u0639\u062F\u064A\u0644' : isViewMode == false ? '\u0625\u0636\u0627\u0641\u0629' : '\u0639\u0631\u0636' }}\r\n    </span>\r\n  </ng-template>\r\n\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  <ng-template pTemplate=\"footer\" *ngIf=\"!isViewMode\">\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        type=\"submit\"\r\n        [disabled]=\"loading || form.invalid\"\r\n        [loading]=\"loading\">\r\n      </button>\r\n      <button\r\n        pButton\r\n        label=\"{{ 'CANCEL' | translate }}\"\r\n        severity=\"danger\"\r\n        (click)=\"drawerVisible = false\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-drawer>\r\n\r\n<!-- Dialog -->\r\n<p-dialog\r\n  *ngIf=\"(typeof displayMode === 'string' ? displayMode : isEditMode ? displayMode['edit'] : isViewMode == false ? displayMode['add'] : displayMode['view']  ) === 'dialog' && 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]=\"isEditMode ? '\u062A\u0639\u062F\u064A\u0644' : isViewMode == false ? '\u0625\u0636\u0627\u0641\u0629' : viewHeaderTitle\">\r\n\r\n  <div class=\"relative\">\r\n    <div *ngIf=\"isViewMode\" class=\"absolute inset-0 z-10 bg-white/50 pointer-events-auto rounded-md\"></div>\r\n    <form *ngIf=\"form\" [formGroup]=\"form\" class=\"p-4\">\r\n      <formly-form [form]=\"form\" [fields]=\"formFields_\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n    </form>\r\n  </div>\r\n\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"flex justify-end gap-2\">\r\n      <button *ngIf=\"!isViewMode\"\r\n        pButton\r\n        [label]=\"isEditMode ? ('UPDATE' | translate) : ('SAVE' | translate)\"\r\n        type=\"submit\"\r\n        [disabled]=\"loading || form.invalid\"\r\n        [loading]=\"loading\"\r\n        (click)=\"onSubmit()\">\r\n      </button>\r\n      <button\r\n        pButton\r\n        label=\"{{ isViewMode ? ('CLOSE' | translate) : ('CANCEL' | translate) }}\"\r\n        severity=\"secondary\"\r\n        (click)=\"dialogVisible = 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']
@@ -4398,18 +4398,12 @@ class GenericSelectorTypeComponent extends FieldType {
 
   <!-- 🔘 Custom dropdown addon -->
   <p-inputGroupAddon>
-    <button
-      type="button"
-      pButton
-      icon="pi pi-chevron-down"
-      class="p-button-outlined p-button-secondary"
-      (click)="onDropdownButtonClick()">
-    </button>
+     <p-button icon="pi pi-chevron-down" (click)="onDropdownButtonClick()" severity="secondary" />
   </p-inputGroupAddon>
 </p-inputGroup>
 
 
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i3.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i4$4.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i5$3.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "directive", type: FormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i3.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i4$4.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i5$3.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "directive", type: FormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: ButtonModule }, { 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: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GenericSelectorTypeComponent, decorators: [{
             type: Component,
@@ -4442,13 +4436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
 
   <!-- 🔘 Custom dropdown addon -->
   <p-inputGroupAddon>
-    <button
-      type="button"
-      pButton
-      icon="pi pi-chevron-down"
-      class="p-button-outlined p-button-secondary"
-      (click)="onDropdownButtonClick()">
-    </button>
+     <p-button icon="pi pi-chevron-down" (click)="onDropdownButtonClick()" severity="secondary" />
   </p-inputGroupAddon>
 </p-inputGroup>
 
@@ -4465,7 +4453,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         FormlyAttributes,
                         TranslateModule,
                         AutoComplete,
-                        CheckboxModule
+                        CheckboxModule,
+                        ButtonModule
                     ]
                 }]
         }], ctorParameters: () => [{ type: BaseService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { autoComp: [{
@@ -6280,8 +6269,9 @@ class BaseCrud {
     // selectedItem: T | any = {};
     isViewMode = false;
     isEditMode = false;
-    displayMode = 'drawer'; // 'drawer' | 'dialog'
-    // @Input() displayMode: 'drawer' | 'dialog' = 'drawer';
+    displayMode = 'drawer';
+    router = inject(Router);
+    route = inject(ActivatedRoute);
     loadPage(pageIndex, pageSize) {
         if (this.canLoad) {
             this.loading = true;
@@ -6340,29 +6330,38 @@ class BaseCrud {
     openEditor(item, mode) {
         this.mode = mode;
         this.selectedItem = item ?? this.defaultModel ?? {};
-        this.isEditMode = mode == 'edit';
-        this.isViewMode = mode == 'view';
-        if (this.displayMode == 'drawer') {
-            this.drawerVisible = true;
-        }
-        else {
-            this.dialogVisible = true;
+        this.isEditMode = mode === 'edit';
+        this.isViewMode = mode === 'view';
+        // resolve displayMode (string or map)
+        const modeConfig = typeof this.displayMode === 'string'
+            ? this.displayMode
+            : this.displayMode[mode] ?? 'drawer';
+        switch (modeConfig) {
+            case 'drawer':
+                this.drawerVisible = true;
+                break;
+            case 'dialog':
+                this.dialogVisible = true;
+                break;
+            case 'route':
+                const id = item ? item[this.idField] : 'new';
+                this.router.navigate([id, mode], { relativeTo: this.route });
+                break;
         }
     }
     visibleChange(value) {
-        // let modeConfig: string; // 'drawer' | 'dialog'
-        // if (typeof this.displayMode === 'string') {
-        //   modeConfig = this.displayMode;
-        // } else {
-        //   // Per-action override if displayMode is an object
-        //   modeConfig = this.displayMode[this.mode as string] ?? 'drawer';
-        // }
-        if (this.displayMode == 'dialog') {
+        const modeConfig = typeof this.displayMode === 'string'
+            ? this.displayMode
+            : this.displayMode[this.mode] ?? 'drawer';
+        if (modeConfig === 'dialog') {
             this.dialogVisible = value;
         }
-        else {
+        else if (modeConfig === 'drawer') {
             this.drawerVisible = value;
         }
+        else {
+            // route mode does not use drawer/dialog
+        }
     }
     // onTableAction(event: { name: string; row: T | null }): void {
     //     switch (event.name) {