@es.framework/ng.ui.core 2.0.58

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

@@ -0,0 +1,929 @@
+import * as i0 from '@angular/core';
+import { NgModule, inject, EventEmitter, Output, Input, Component, ViewChild } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { GenericButtonModule, GenericButton } from '@es.framework/ng.ui.core/generic-button';
+import * as i4 from 'primeng/divider';
+import { DividerModule } from 'primeng/divider';
+import { MessageModule } from 'primeng/message';
+import * as i2 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import { TableModule } from 'primeng/table';
+import { ToolbarModule } from 'primeng/toolbar';
+import { TranslatePipe } from '@es.framework/ng.core/pipes';
+import { IconFieldModule } from 'primeng/iconfield';
+import { DrawerModule } from 'primeng/drawer';
+import { DialogModule } from 'primeng/dialog';
+import * as i5 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { LocalizationService, SwalService, BaseService } from '@es.framework/ng.core/services';
+import * as i6 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import { Menu } from 'primeng/menu';
+import { DialogService } from 'primeng/dynamicdialog';
+import { BreadcrumbComponent } from '@es.framework/ng.ui.core/breadcrumb';
+import { GenericSearchAdvanced, QueryBuilderService } from '@es.framework/ng.ui.core/generic-search-advanced';
+import { GenericReportComponent } from '@es.framework/ng.ui.core/generic-report';
+import * as i7 from 'primeng/selectbutton';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import { TabbedSearchComponent } from '@es.framework/ng.ui.core/generic-report-tabs';
+import * as i3 from 'primeng/api';
+import { ActivatedRoute, Router } from '@angular/router';
+import { GenericTable } from '@es.framework/ng.ui.core/generic-table';
+import { GenericDialogComponent } from '@es.framework/ng.ui.core/generic-dialog';
+import { GenericViewComponent } from '@es.framework/ng.ui.core/generic-view';
+
+class GenericCrudTableModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericCrudTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: GenericCrudTableModule, imports: [CommonModule, GenericButtonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericCrudTableModule, imports: [CommonModule, GenericButtonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericCrudTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, GenericButtonModule],
+                }]
+        }] });
+
+class GenericCrudHeaderComponent {
+    translate = inject(LocalizationService);
+    dialogService = inject(DialogService);
+    // 🟢 Inputs
+    mode = 'full';
+    breadcrumb;
+    isSingleItemSelected = false;
+    selectedItems = [];
+    singleActionButtons = [];
+    bulkActionButtons = [];
+    addButtonConfigs = [];
+    mergedButtonConfigs = [];
+    filters;
+    filterModel = {};
+    showSearch = true;
+    first = 0; // Add input for current 'first' index
+    rows = 10; // Add input for current 'rows' per page
+    totalRecords = 0; // Add input for total records
+    moduleName = '';
+    apiName = '';
+    actions = [
+        {
+            label: this.translate.instant('REPORT'),
+            icon: 'pi pi-file-export',
+            command: (e) => {
+                this.openReportDialog();
+            }
+        }
+    ];
+    // 🟢 Outputs
+    singleItemAction = new EventEmitter();
+    bulkAction = new EventEmitter();
+    search = new EventEmitter();
+    resetSearch = new EventEmitter();
+    action = new EventEmitter();
+    paginateChange = new EventEmitter(); // NEW OUTPUT
+    // 🟢 Inputs الجديدة
+    showAdvancedFilter = false; // متغير للتحكم في ظهور الزر
+    advancedFilterIcon = 'pi pi-filter-fill'; // أيقونة اختيارية
+    // 🟢 الحالة الخاصة بالفلتر المتقدم
+    isAdvancedFilterVisible = false; // لإخفاء وإظهار المكون عند الضغط
+    // أضف هذا الـ Input
+    searchTabs = []; // مصفوفة التبويبات
+    // 🟢 ميزة تبديل العرض
+    showViewMode = false;
+    viewMode = 'table';
+    viewModeChange = new EventEmitter();
+    // تعريف الخيارات
+    viewOptions = [
+        { icon: 'pi pi-list', value: 'table', title: 'TABLE_VIEW' },
+        { icon: 'pi pi-th-large', value: 'grid', title: 'GRID_VIEW' }
+    ];
+    onViewChange(event) {
+        // PrimeNG SelectButton event.value يحتوي على القيمة المختارة
+        if (event.value) {
+            this.viewModeChange.emit(event.value);
+        }
+    }
+    // 🟢 Actions
+    toggleAdvancedFilter() {
+        this.isAdvancedFilterVisible = !this.isAdvancedFilterVisible;
+    }
+    // 🟢 Helpers
+    trackByIdx = (index) => index;
+    // 🟢 Actions
+    onSingleItemAction(btn) {
+        this.singleItemAction.emit(btn);
+    }
+    onInternalBulkAction(btn) {
+        this.bulkAction.emit(btn);
+    }
+    paginationChange(value) {
+        this.rows = value.top;
+    }
+    applySearch(value) {
+        this.search.emit(value);
+    }
+    reset() {
+        this.resetSearch.emit();
+    }
+    // Go to previous page
+    // 🟢 Actions (Keep or adapt your existing pagination logic)
+    totalPages() {
+        if (this.totalRecords === 0 || this.rows === 0)
+            return 0;
+        return Math.ceil(this.totalRecords / this.rows);
+    }
+    pageInput = null;
+    showPageMenu = false;
+    // Get current page number (1-based)
+    get currentPage() {
+        return Math.floor(this.first / this.rows) + 1;
+    }
+    // Go to specific page from menu
+    goToPageMenu() {
+        if (this.pageInput && this.pageInput >= 1 && this.pageInput <= this.totalPages()) {
+            const newFirst = (this.pageInput - 1) * this.rows;
+            this.paginateChange.emit({ first: newFirst, rows: this.rows });
+            this.pageInput = null;
+            this.showPageMenu = false; // Close menu after navigation
+        }
+    }
+    // Go to specific page (original method)
+    goToPage() {
+        this.goToPageMenu(); // Reuse the same logic
+    }
+    // Go to first page
+    goFirst() {
+        this.paginateChange.emit({ first: 0, rows: this.rows }); // EMIT EVENT
+    }
+    // Go to last page
+    goLast() {
+        const maxFirst = Math.max(0, (this.totalPages() - 1) * this.rows);
+        this.paginateChange.emit({ first: maxFirst, rows: this.rows }); // EMIT EVENT
+    }
+    // Go to previous page
+    goPrev() {
+        const newFirst = Math.max(this.first - this.rows, 0);
+        this.paginateChange.emit({ first: newFirst, rows: this.rows }); // EMIT EVENT
+    }
+    // Go to next page
+    goNext() {
+        const maxFirst = Math.max(0, (this.totalPages() - 1) * this.rows);
+        const newFirst = Math.min(this.first + this.rows, maxFirst);
+        this.paginateChange.emit({ first: newFirst, rows: this.rows }); // EMIT EVENT
+    }
+    // Check first/last page
+    isFirstPage() {
+        return this.first === 0;
+    }
+    isLastPage() {
+        return this.first + this.rows >= this.totalRecords;
+    }
+    // Detect RTL direction
+    get isRTL() {
+        return document.documentElement.dir === 'rtl' ||
+            document.body.dir === 'rtl' ||
+            //  this.translateService?.currentLang === 'ar' || // if using translation
+            false; // default to LTR
+    }
+    /**
+    * Handles button click in a unified way.
+    * - If btn.action is defined, execute it.
+    * - Otherwise, emit event with actionName or default 'add'.
+    */
+    async handleButtonClick(btn) {
+        try {
+            if (btn.action) {
+                // Execute the provided action
+                await btn.action(null); // You can pass row or context here
+            }
+            else {
+                // Fallback to emitting event
+                this.action.emit({
+                    name: btn.actionName ?? 'add',
+                    row: null, // provide row if available
+                });
+            }
+        }
+        catch (err) {
+            console.error('Button action error', err);
+        }
+    }
+    openReportDialog() {
+        const ref = this.dialogService.open(GenericReportComponent, {
+            header: this.translate.instant('REPORT'),
+            showHeader: false,
+            width: '90%',
+            height: 'auto',
+            modal: true,
+            focusOnShow: false,
+            data: {
+                apiName: this.apiName,
+                moduleName: this.moduleName,
+                filterFields: this.filters,
+                filterModel: { /* status: 'Active'  */},
+                defaultFileName: this.translate.instant('REPORT') + ' ' + this.translate.instant(this.breadcrumb?.length ? this.breadcrumb[this.breadcrumb.length - 1].label ?? '' : '')
+            }
+        });
+        ref?.onClose.subscribe((exportConfig) => {
+            if (exportConfig) {
+                console.log('Export configuration:', exportConfig);
+                // Handle the export - call your API service here
+                this.handleExport(exportConfig);
+            }
+        });
+    }
+    handleExport(config) {
+        // Your export logic here
+        // if (config.exportType === 'EXCEL') {
+        //   this.exportToExcel(config);
+        // } else if (config.exportType === 'PDF') {
+        //   this.exportToPdf(config);
+        // }
+        // etc.
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericCrudHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: GenericCrudHeaderComponent, isStandalone: true, selector: "app-generic-crud-header", inputs: { mode: "mode", breadcrumb: "breadcrumb", isSingleItemSelected: "isSingleItemSelected", selectedItems: "selectedItems", singleActionButtons: "singleActionButtons", bulkActionButtons: "bulkActionButtons", addButtonConfigs: "addButtonConfigs", mergedButtonConfigs: "mergedButtonConfigs", filters: "filters", filterModel: "filterModel", showSearch: "showSearch", first: "first", rows: "rows", totalRecords: "totalRecords", moduleName: "moduleName", apiName: "apiName", actions: "actions", showAdvancedFilter: "showAdvancedFilter", advancedFilterIcon: "advancedFilterIcon", searchTabs: "searchTabs", showViewMode: "showViewMode", viewMode: "viewMode" }, outputs: { singleItemAction: "singleItemAction", bulkAction: "bulkAction", search: "search", resetSearch: "resetSearch", action: "action", paginateChange: "paginateChange", viewModeChange: "viewModeChange" }, providers: [DialogService], ngImport: i0, template: "@if (mode !== 'form-only' && mode !== 'detail') {\r\n<div class=\"flex items-start gap-2 justify-between\">\r\n  <div>\r\n    <app-breadcrumb\r\n      class=\"xs:block hidden\"\r\n      [breadcrumb]=\"breadcrumb\"\r\n    ></app-breadcrumb>\r\n  </div>\r\n\r\n  <div class=\"flex items-center gap-2 justify-end flex-wrap\">\r\n    @if (mode === 'full') {\r\n      <!-- \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0645\u0641\u0631\u062F\u0629 -->\r\n      @if (isSingleItemSelected) {\r\n        @for (btn of singleActionButtons; track trackByIdx($index)) {\r\n          @if (!btn.visible || (btn.visible && btn.visible === true)) {\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              [severity]=\"btn.severity\"\r\n              [model]=\"btn.splitActions\"\r\n              [permission]=\"btn.permission\"\r\n              (clicked)=\"onSingleItemAction(btn)\"\r\n            ></lib-generic-button>\r\n          }\r\n        }\r\n      }\r\n\r\n      <!-- \u0623\u0632\u0631\u0627\u0631 \u0645\u062A\u0639\u062F\u062F\u0629 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 -->\r\n      @if (selectedItems.length > 0) {\r\n        @for (btn of bulkActionButtons; track trackByIdx($index)) {\r\n          @if (!btn.visible || (btn.visible && btn.visible === true)) {\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              [severity]=\"btn.severity\"\r\n              [model]=\"btn.splitActions\"\r\n              [permission]=\"btn.permission\"\r\n              (clicked)=\"onInternalBulkAction(btn)\"\r\n            ></lib-generic-button>\r\n          }\r\n        }\r\n      }\r\n\r\n      <!-- \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0625\u0636\u0627\u0641\u0629 -->\r\n      @for (btn of mergedButtonConfigs; track trackByIdx($index)) {\r\n        @if (!btn.visible || (btn.visible && btn.visible === true)) {\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            [severity]=\"btn.severity\"\r\n            [model]=\"btn.splitActions\"\r\n            [permission]=\"btn.permission\"\r\n            (clicked)=\"handleButtonClick(btn)\"\r\n          ></lib-generic-button>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n\r\n@if (mode !== 'form-only' && mode !== 'detail') {\r\n<div class=\"mt-2 mb-4 flex items-center justify-between\">\r\n  <!-- \u0627\u0644\u0628\u062D\u062B -->\r\n  @if (showSearch && filters) {\r\n    <lib-generic-search-advanced\r\n    [model]=\"filterModel\"\r\n  [fields]=\"filters\"\r\n  (search)=\"applySearch($event)\"\r\n  (paginationChange)=\"paginationChange($event)\"\r\n  >\r\n</lib-generic-search-advanced>\r\n  } @else {\r\n    <div></div>\r\n  }\r\n\r\n  <!-- \u0623\u062F\u0648\u0627\u062A \u0625\u0636\u0627\u0641\u064A\u0629 -->\r\n  <div class=\"flex items-center gap-3 rtl:space-x-reverse\">\r\n\r\n          @if (showAdvancedFilter && searchTabs.length > 0) {\r\n  <p-button\r\n    [icon]=\"advancedFilterIcon\"\r\n    [outlined]=\"!isAdvancedFilterVisible\"\r\n    severity=\"secondary\"\r\n    [pTooltip]=\"'ADVANCED_FILTER' | translate\"\r\n    tooltipPosition=\"top\"\r\n    (onClick)=\"toggleAdvancedFilter()\"\r\n    class=\"hidden sm:inline-flex\"\r\n  />\r\n}\r\n    <!-- Refresh Button -->\r\n    <p-button\r\n      icon=\"pi pi-refresh\"\r\n      outlined\r\n      severity=\"secondary\"\r\n      class=\"hidden xs:block\"\r\n      (onClick)=\"reset()\"\r\n    />\r\n\r\n    <p-divider layout=\"vertical\" class=\"m-0 p-0 hidden xs:block\" />\r\n\r\n\r\n    <!-- <p-button (click)=\"menu.toggle($event)\"  class=\"xs:block\"  severity=\"secondary\" outlined icon=\"pi pi-ellipsis-v\"/>\r\n    <p-menu #menu [model]=\"actions\" [popup]=\"true\" /> -->\r\n\r\n\r\n    <!-- Pagination Controls -->\r\n    <div class=\"flex items-center gap-1 rtl:space-x-reverse\">\r\n\r\n          @if ( showViewMode ) {\r\n<p-selectButton\r\n  [options]=\"viewOptions\"\r\n  [(ngModel)]=\"viewMode\"\r\n  (onChange)=\"onViewChange($event)\"\r\n  [unselectable]=\"false\"\r\n  optionLabel=\"icon\"\r\n  optionValue=\"value\"\r\n\r\n  styleClass=\"inline-flex bg-slate-100 dark:bg-slate-800 p-1 rounded-xl border border-slate-200 dark:border-slate-700 shadow-inner\"\r\n>\r\n\r\n  <ng-template let-item pTemplate=\"item\">\r\n    <div\r\n      class=\"flex items-center justify-center rounded-lg transition-all duration-200\"\r\n      [ngClass]=\"{\r\n        ' dark:bg-slate-600  shadow-sm': viewMode === item.value,\r\n        'text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700': viewMode !== item.value\r\n      }\"\r\n      [pTooltip]=\"item.title | translate\"\r\n      tooltipPosition=\"top\"\r\n    >\r\n      <i [class]=\"item.icon\" class=\"text-base\"></i>\r\n    </div>\r\n  </ng-template>\r\n\r\n</p-selectButton>\r\n      }\r\n  <p-divider layout=\"vertical\" class=\"m-0 p-0 hidden xs:block\" />\r\n\r\n      <!-- First Page Button -->\r\n      <p-button\r\n        [icon]=\"isRTL ? 'pi pi-angle-double-right' : 'pi pi-angle-double-left'\"\r\n        outlined\r\n        severity=\"secondary\"\r\n        class=\"hidden xs:block\"\r\n        (click)=\"goFirst()\"\r\n        [disabled]=\"isFirstPage()\"\r\n      ></p-button>\r\n\r\n      <!-- Previous Page Button -->\r\n      <p-button\r\n        [icon]=\"isRTL ? 'pi pi-chevron-right' : 'pi pi-chevron-left'\"\r\n        outlined\r\n        severity=\"secondary\"\r\n        class=\"xs:block\"\r\n        (click)=\"goPrev()\"\r\n        [disabled]=\"isFirstPage()\"\r\n      ></p-button>\r\n\r\n\r\n       <!-- Current Page Display with Dropdown -->\r\n  <div class=\"relative\">\r\n\r\n    <p-button\r\n      [label]=\"currentPage + ' / ' + totalPages()\"\r\n      outlined\r\n      severity=\"secondary\"\r\n      class=\"hidden xs:block\"\r\n      (click)=\"showPageMenu = !showPageMenu\"\r\n        pTooltip=\"{{totalRecords}}\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n\r\n\r\n  </div>\r\n      <!-- Next Page Button -->\r\n      <p-button\r\n        [icon]=\"isRTL ? 'pi pi-chevron-left' : 'pi pi-chevron-right'\"\r\n        outlined\r\n        severity=\"secondary\"\r\n        class=\"xs:block\"\r\n        (click)=\"goNext()\"\r\n        [disabled]=\"isLastPage()\"\r\n      ></p-button>\r\n\r\n      <!-- Last Page Button -->\r\n      <p-button\r\n        [icon]=\"isRTL ? 'pi pi-angle-double-left' : 'pi pi-angle-double-right'\"\r\n        outlined\r\n        severity=\"secondary\"\r\n        class=\"hidden xs:block\"\r\n        (click)=\"goLast()\"\r\n        [disabled]=\"isLastPage()\"\r\n      ></p-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n  @if (showSearch && showAdvancedFilter && searchTabs.length > 0) {\r\n  <div\r\n    [ngClass]=\"{\r\n      'block': true,\r\n      'sm:hidden': !isAdvancedFilterVisible,\r\n      'sm:block': isAdvancedFilterVisible\r\n    }\"\r\n    class=\"animate-fade-in\"\r\n  >\r\n    <app-tabbed-search\r\n      [fields]=\"searchTabs\"\r\n      [model]=\"filterModel\"\r\n      (onSearch)=\"applySearch($event)\"\r\n      (onReset)=\"reset()\"\r\n      (paginationChange)=\"paginationChange($event)\">\r\n    </app-tabbed-search>\r\n  </div>\r\n}\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: BreadcrumbComponent, selector: "app-breadcrumb", inputs: ["breadcrumb"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i4.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "component", type: GenericSearchAdvanced, selector: "lib-generic-search-advanced", inputs: ["model", "fields", "enableSelect", "enableGroup", "odataConfig"], outputs: ["search", "paginationChange", "odataSearch"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i7.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: TabbedSearchComponent, selector: "app-tabbed-search", inputs: ["fields", "model", "form"], outputs: ["onSearch", "onReset", "paginationChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericCrudHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-generic-crud-header', standalone: true, imports: [
+                        CommonModule,
+                        GenericButton,
+                        TranslatePipe,
+                        BreadcrumbComponent,
+                        ButtonModule,
+                        DividerModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TooltipModule,
+                        Menu,
+                        GenericSearchAdvanced,
+                        SelectButtonModule,
+                        TabbedSearchComponent,
+                    ], providers: [DialogService], template: "@if (mode !== 'form-only' && mode !== 'detail') {\r\n<div class=\"flex items-start gap-2 justify-between\">\r\n  <div>\r\n    <app-breadcrumb\r\n      class=\"xs:block hidden\"\r\n      [breadcrumb]=\"breadcrumb\"\r\n    ></app-breadcrumb>\r\n  </div>\r\n\r\n  <div class=\"flex items-center gap-2 justify-end flex-wrap\">\r\n    @if (mode === 'full') {\r\n      <!-- \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0645\u0641\u0631\u062F\u0629 -->\r\n      @if (isSingleItemSelected) {\r\n        @for (btn of singleActionButtons; track trackByIdx($index)) {\r\n          @if (!btn.visible || (btn.visible && btn.visible === true)) {\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              [severity]=\"btn.severity\"\r\n              [model]=\"btn.splitActions\"\r\n              [permission]=\"btn.permission\"\r\n              (clicked)=\"onSingleItemAction(btn)\"\r\n            ></lib-generic-button>\r\n          }\r\n        }\r\n      }\r\n\r\n      <!-- \u0623\u0632\u0631\u0627\u0631 \u0645\u062A\u0639\u062F\u062F\u0629 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 -->\r\n      @if (selectedItems.length > 0) {\r\n        @for (btn of bulkActionButtons; track trackByIdx($index)) {\r\n          @if (!btn.visible || (btn.visible && btn.visible === true)) {\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              [severity]=\"btn.severity\"\r\n              [model]=\"btn.splitActions\"\r\n              [permission]=\"btn.permission\"\r\n              (clicked)=\"onInternalBulkAction(btn)\"\r\n            ></lib-generic-button>\r\n          }\r\n        }\r\n      }\r\n\r\n      <!-- \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0625\u0636\u0627\u0641\u0629 -->\r\n      @for (btn of mergedButtonConfigs; track trackByIdx($index)) {\r\n        @if (!btn.visible || (btn.visible && btn.visible === true)) {\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            [severity]=\"btn.severity\"\r\n            [model]=\"btn.splitActions\"\r\n            [permission]=\"btn.permission\"\r\n            (clicked)=\"handleButtonClick(btn)\"\r\n          ></lib-generic-button>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n\r\n@if (mode !== 'form-only' && mode !== 'detail') {\r\n<div class=\"mt-2 mb-4 flex items-center justify-between\">\r\n  <!-- \u0627\u0644\u0628\u062D\u062B -->\r\n  @if (showSearch && filters) {\r\n    <lib-generic-search-advanced\r\n    [model]=\"filterModel\"\r\n  [fields]=\"filters\"\r\n  (search)=\"applySearch($event)\"\r\n  (paginationChange)=\"paginationChange($event)\"\r\n  >\r\n</lib-generic-search-advanced>\r\n  } @else {\r\n    <div></div>\r\n  }\r\n\r\n  <!-- \u0623\u062F\u0648\u0627\u062A \u0625\u0636\u0627\u0641\u064A\u0629 -->\r\n  <div class=\"flex items-center gap-3 rtl:space-x-reverse\">\r\n\r\n          @if (showAdvancedFilter && searchTabs.length > 0) {\r\n  <p-button\r\n    [icon]=\"advancedFilterIcon\"\r\n    [outlined]=\"!isAdvancedFilterVisible\"\r\n    severity=\"secondary\"\r\n    [pTooltip]=\"'ADVANCED_FILTER' | translate\"\r\n    tooltipPosition=\"top\"\r\n    (onClick)=\"toggleAdvancedFilter()\"\r\n    class=\"hidden sm:inline-flex\"\r\n  />\r\n}\r\n    <!-- Refresh Button -->\r\n    <p-button\r\n      icon=\"pi pi-refresh\"\r\n      outlined\r\n      severity=\"secondary\"\r\n      class=\"hidden xs:block\"\r\n      (onClick)=\"reset()\"\r\n    />\r\n\r\n    <p-divider layout=\"vertical\" class=\"m-0 p-0 hidden xs:block\" />\r\n\r\n\r\n    <!-- <p-button (click)=\"menu.toggle($event)\"  class=\"xs:block\"  severity=\"secondary\" outlined icon=\"pi pi-ellipsis-v\"/>\r\n    <p-menu #menu [model]=\"actions\" [popup]=\"true\" /> -->\r\n\r\n\r\n    <!-- Pagination Controls -->\r\n    <div class=\"flex items-center gap-1 rtl:space-x-reverse\">\r\n\r\n          @if ( showViewMode ) {\r\n<p-selectButton\r\n  [options]=\"viewOptions\"\r\n  [(ngModel)]=\"viewMode\"\r\n  (onChange)=\"onViewChange($event)\"\r\n  [unselectable]=\"false\"\r\n  optionLabel=\"icon\"\r\n  optionValue=\"value\"\r\n\r\n  styleClass=\"inline-flex bg-slate-100 dark:bg-slate-800 p-1 rounded-xl border border-slate-200 dark:border-slate-700 shadow-inner\"\r\n>\r\n\r\n  <ng-template let-item pTemplate=\"item\">\r\n    <div\r\n      class=\"flex items-center justify-center rounded-lg transition-all duration-200\"\r\n      [ngClass]=\"{\r\n        ' dark:bg-slate-600  shadow-sm': viewMode === item.value,\r\n        'text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700': viewMode !== item.value\r\n      }\"\r\n      [pTooltip]=\"item.title | translate\"\r\n      tooltipPosition=\"top\"\r\n    >\r\n      <i [class]=\"item.icon\" class=\"text-base\"></i>\r\n    </div>\r\n  </ng-template>\r\n\r\n</p-selectButton>\r\n      }\r\n  <p-divider layout=\"vertical\" class=\"m-0 p-0 hidden xs:block\" />\r\n\r\n      <!-- First Page Button -->\r\n      <p-button\r\n        [icon]=\"isRTL ? 'pi pi-angle-double-right' : 'pi pi-angle-double-left'\"\r\n        outlined\r\n        severity=\"secondary\"\r\n        class=\"hidden xs:block\"\r\n        (click)=\"goFirst()\"\r\n        [disabled]=\"isFirstPage()\"\r\n      ></p-button>\r\n\r\n      <!-- Previous Page Button -->\r\n      <p-button\r\n        [icon]=\"isRTL ? 'pi pi-chevron-right' : 'pi pi-chevron-left'\"\r\n        outlined\r\n        severity=\"secondary\"\r\n        class=\"xs:block\"\r\n        (click)=\"goPrev()\"\r\n        [disabled]=\"isFirstPage()\"\r\n      ></p-button>\r\n\r\n\r\n       <!-- Current Page Display with Dropdown -->\r\n  <div class=\"relative\">\r\n\r\n    <p-button\r\n      [label]=\"currentPage + ' / ' + totalPages()\"\r\n      outlined\r\n      severity=\"secondary\"\r\n      class=\"hidden xs:block\"\r\n      (click)=\"showPageMenu = !showPageMenu\"\r\n        pTooltip=\"{{totalRecords}}\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n\r\n\r\n  </div>\r\n      <!-- Next Page Button -->\r\n      <p-button\r\n        [icon]=\"isRTL ? 'pi pi-chevron-left' : 'pi pi-chevron-right'\"\r\n        outlined\r\n        severity=\"secondary\"\r\n        class=\"xs:block\"\r\n        (click)=\"goNext()\"\r\n        [disabled]=\"isLastPage()\"\r\n      ></p-button>\r\n\r\n      <!-- Last Page Button -->\r\n      <p-button\r\n        [icon]=\"isRTL ? 'pi pi-angle-double-left' : 'pi pi-angle-double-right'\"\r\n        outlined\r\n        severity=\"secondary\"\r\n        class=\"hidden xs:block\"\r\n        (click)=\"goLast()\"\r\n        [disabled]=\"isLastPage()\"\r\n      ></p-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n  @if (showSearch && showAdvancedFilter && searchTabs.length > 0) {\r\n  <div\r\n    [ngClass]=\"{\r\n      'block': true,\r\n      'sm:hidden': !isAdvancedFilterVisible,\r\n      'sm:block': isAdvancedFilterVisible\r\n    }\"\r\n    class=\"animate-fade-in\"\r\n  >\r\n    <app-tabbed-search\r\n      [fields]=\"searchTabs\"\r\n      [model]=\"filterModel\"\r\n      (onSearch)=\"applySearch($event)\"\r\n      (onReset)=\"reset()\"\r\n      (paginationChange)=\"paginationChange($event)\">\r\n    </app-tabbed-search>\r\n  </div>\r\n}\r\n}\r\n" }]
+        }], propDecorators: { mode: [{
+                type: Input
+            }], breadcrumb: [{
+                type: Input
+            }], isSingleItemSelected: [{
+                type: Input
+            }], selectedItems: [{
+                type: Input
+            }], singleActionButtons: [{
+                type: Input
+            }], bulkActionButtons: [{
+                type: Input
+            }], addButtonConfigs: [{
+                type: Input
+            }], mergedButtonConfigs: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], filterModel: [{
+                type: Input
+            }], showSearch: [{
+                type: Input
+            }], first: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], totalRecords: [{
+                type: Input
+            }], moduleName: [{
+                type: Input
+            }], apiName: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], singleItemAction: [{
+                type: Output
+            }], bulkAction: [{
+                type: Output
+            }], search: [{
+                type: Output
+            }], resetSearch: [{
+                type: Output
+            }], action: [{
+                type: Output
+            }], paginateChange: [{
+                type: Output
+            }], showAdvancedFilter: [{
+                type: Input
+            }], advancedFilterIcon: [{
+                type: Input
+            }], searchTabs: [{
+                type: Input
+            }], showViewMode: [{
+                type: Input
+            }], viewMode: [{
+                type: Input
+            }], viewModeChange: [{
+                type: Output
+            }] } });
+
+/* eslint-disable @angular-eslint/no-output-on-prefix */
+/* eslint-disable @angular-eslint/no-output-native */
+/**
+ * مكون جدول CRUD عام يمكن إعادة استخدامه
+ * يدعم العمليات الأساسية: إنشاء، قراءة، تحديث، حذف
+ * مع إمكانية التخصيص عبر عدة أوضاع وعرض
+ */
+class GenericCrudTableComponent {
+    genericTable;
+    dialog;
+    translate = inject(LocalizationService);
+    swalService = inject(SwalService);
+    queryBuilder = inject(QueryBuilderService);
+    dialogService = inject(DialogService);
+    home = { icon: 'pi pi-home', routerLink: '/' };
+    data = [];
+    formFields_ = []; // <-- هنا
+    formFields = []; // <-- هنا
+    columnFormFields = [];
+    columns = []; // <-- هنا
+    dialogMaxWidth = '40rem'; // unset , fit-content
+    isViewMode = false;
+    displayMode = 'drawer';
+    useConfirmOnSave = false;
+    isEditMode = false;
+    drawerVisible = false;
+    dialogVisible = false;
+    form = new UntypedFormGroup({});
+    model;
+    model_ = {};
+    loading = false;
+    errorMsg = '';
+    errorMessage = '';
+    options = {};
+    actions = [];
+    /** تحدد طريقة العرض: 'buttons' أو 'menu' */
+    actionsMode = 'buttons';
+    action = new EventEmitter();
+    bulkAction = new EventEmitter();
+    singleAction = new EventEmitter();
+    beforeSaveTransform; // ⚡ دوال مخصصة قبل الحفظ
+    afterSave = new EventEmitter();
+    afterDelete = new EventEmitter();
+    beforeSave = new EventEmitter();
+    beforeDelete = new EventEmitter();
+    formCancel = new EventEmitter();
+    formInit = new EventEmitter();
+    dataLoaded = new EventEmitter();
+    selectionChange = new EventEmitter();
+    error = new EventEmitter();
+    // البحث
+    // Search
+    filters;
+    filterModel = {};
+    search = new EventEmitter();
+    /** للتحكم بإظهار/إخفاء قسم البحث */
+    showSearch = true;
+    /** Pagination Inputs */
+    first = 0;
+    rows = 10;
+    totalRecords = 0;
+    pageChange = new EventEmitter();
+    onSearch = new EventEmitter();
+    visibleChange = new EventEmitter();
+    ;
+    // @Output() visibleChange = new EventEmitter<boolean>();
+    /** لجعل الجدول قابل لتعديل الصفوف (افتراضي false) */
+    rowEditable = false;
+    // @Output() visibleChange = new EventEmitter<boolean>();
+    /** لجعل الجدول قابل لاختيار الصفوف (افتراضي false) */
+    rowSelectable = false;
+    /** حدث يخرج الصف المحدّد */
+    rowSelect = new EventEmitter();
+    selection = null;
+    // الفرز
+    sortField;
+    sortOrder = 1;
+    scrollHeight = '400px';
+    paginator = true;
+    service = inject(BaseService);
+    apiName = '';
+    moduleName = '';
+    idField = 'id';
+    showRowSelectionCheckbox = false;
+    showAddButton = true;
+    showPrintButton = true;
+    PermissionName;
+    mergedButtonConfigs = [];
+    addButtonConfigs = [];
+    buildButtons() {
+        const fixedButtons = [
+            {
+                icon: 'pi pi-plus',
+                label: 'ADD',
+                variant: 'raised',
+                severity: 'primary',
+                size: 'small',
+                actionName: 'add',
+                visible: this.showAddButton,
+                permission: `${this.PermissionName}:AD`,
+            },
+            {
+                icon: 'pi pi-print',
+                label: 'PRINT',
+                variant: 'raised',
+                severity: 'secondary',
+                size: 'small',
+                actionName: 'print',
+                visible: this.showPrintButton,
+                permission: `${this.PermissionName}:PR`,
+                action: async () => {
+                    this.openReportDialog();
+                },
+            },
+        ];
+        this.mergedButtonConfigs = [
+            ...fixedButtons,
+            ...(this.addButtonConfigs || []),
+        ];
+    }
+    createEditActions = [
+        {
+            icon: 'pi pi-check',
+            label: 'SAVE',
+            variant: 'raised',
+            severity: 'primary',
+            size: 'small',
+            actionName: 'save',
+            type: 'submit',
+            splitActions: [
+                {
+                    label: this.translate.instant('SAVE_AND_ADD'),
+                    icon: 'pi pi-save',
+                    actionName: 'saveAndAdd'
+                }
+            ]
+        },
+        {
+            icon: 'pi pi-times',
+            label: 'CANCEL',
+            variant: 'raised',
+            severity: 'danger',
+            size: 'small',
+            actionName: 'cancel',
+            type: 'button',
+        },
+    ];
+    supportSubPage = true;
+    tabs = [];
+    bulkActionButtons = [];
+    singleActionButtons = [];
+    _selectedRows = [];
+    get isSingleItemSelected() {
+        return this._selectedRows.length === 1;
+    }
+    get isMultipleItemSelected() {
+        return this._selectedRows.length > 1;
+    }
+    get selectedItems() {
+        return this._selectedRows;
+    }
+    breadcrumb;
+    get breadcrumb_() {
+        return this.breadcrumb?.map(v => ({
+            ...v,
+            label: this.translate.instant(v.label ?? '')
+        }));
+    }
+    get rtl() {
+        try {
+            return document?.documentElement?.dir === 'rtl';
+        }
+        catch (error) {
+            return true;
+        }
+    }
+    /**
+      * Modes to control what parts of the component are visible
+      * - 'full': Table + CRUD operations (default)
+      * - 'form-only': Only show form (for create/edit/view)
+      * - 'table-only': Only show table (read-only mode)
+      */
+    mode = 'full';
+    /** Force the component to show specific state */
+    forceState = null;
+    /** Hide table completely when in form-only mode */
+    get hideTable() {
+        return (this.mode === 'form-only' || this.mode === 'detail' || (this.forceState && this.mode !== 'table-only')) ?? false;
+    }
+    /** Auto-show form when in form-only mode with forceState */
+    get autoShowForm() {
+        return this.mode === 'form-only' && !!this.forceState;
+    }
+    //لتغيير لون صف معيّن
+    rowStyleFn;
+    // ✅ لتعيين كلاس CSS أو Tailwind على الصف
+    rowClassFn;
+    //آخر لتجميد / تعطيل checkbox الاختيار
+    disableRowCheckboxFn;
+    tableClass = 'h-full flex-1 flex flex-col overflow-y-auto border border-surface rounded-2xl xs:rounded-2xl p-4 bg-white';
+    // 🟢 Inputs الجديدة
+    showAdvancedFilter = false; // متغير للتحكم في ظهور الزر
+    advancedFilterIcon = 'pi pi-filter-fill'; // أيقونة اختيارية
+    // 🟢 الحالة الخاصة بالفلتر المتقدم
+    // أضف هذا الـ Input
+    searchTabs = []; // مصفوفة التبويبات
+    // 🟢 ميزة تبديل العرض
+    showViewMode = false;
+    viewMode = 'table';
+    viewModeChange = new EventEmitter();
+    // 🟢 Outputs
+    templateSelected = new EventEmitter();
+    templateDrawerVisible = false;
+    templateDrawerVisibleChange = new EventEmitter();
+    category = '';
+    feature = '';
+    onViewModeChange(mode) {
+        this.viewMode = mode;
+        this.viewModeChange.emit(mode);
+        // هنا يمكنك إضافة منطق إضافي إذا أردت تغيير طريقة عرض البيانات فوراً
+    }
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    currentId;
+    ngOnInit() {
+        if (this.moduleName) {
+            this.service.moduleName = this.moduleName;
+        }
+        if (this.apiName && this.apiName != '') {
+            this.service.apiName = this.apiName;
+        }
+        if (this.tabs.length == 0) {
+            this.formFields_ = this.formFields;
+            this.tabs.push({ header: 'التفاصيل', icon: 'pi pi-info-circle', fields: this.formFields_, model: this.model });
+        }
+        if (this.supportSubPage) {
+            this.route.paramMap.subscribe(params => {
+                const id = params.get(this.idField);
+                if (id && id !== 'new' && id !== 'create' && id !== 'add') {
+                    this.currentId = id;
+                    this.mode = 'detail';
+                    this.loadDetail(id);
+                }
+                else if (id == 'new' || id == 'create' || id == 'add') {
+                    this.mode = 'detail';
+                }
+                else {
+                    this.currentId = undefined;
+                }
+            });
+        }
+        this.buildButtons();
+    }
+    // 3. Handle Header's Paginate Change Event
+    onHeaderPaginateChange(event) {
+        this.first = event.first; // Update the 'first' index
+        this.rows = event.rows;
+        const lazyLoadEvent = {
+            first: this.first,
+            rows: this.rows,
+            // You'd typically include current sorting and filtering state here
+            sortField: this.sortField,
+            sortOrder: 1,
+            filters: this.filters,
+            globalFilter: null, // or your current global filter value
+        };
+        this.onLazyLoad(lazyLoadEvent);
+    }
+    loadDetail(id) {
+        this.service.get(id).subscribe({
+            next: res => {
+                this.model = res;
+            }
+        });
+    }
+    // Helper method to open form programmatically
+    openForm(mode, model) {
+        this.dialog.openForm(mode, model);
+    }
+    //  private destroy$ = new Subject<void>();
+    /** الآن يتلقّى pagination + sort في حدث واحد */
+    onLazyLoad(event) {
+        // this.model_= this.model ?? {};
+        this.model = this.model ?? {};
+        this.formFields_ = this.formFields;
+        const first = event.first ?? this.first;
+        const rows = event.rows ?? this.rows;
+        const sortField = typeof event.sortField === 'string'
+            ? event.sortField
+            : this.sortField;
+        const sortOrder = event.sortOrder === -1 ? -1 : 1;
+        const filters = {};
+        if (event.filters) {
+            Object.entries(event.filters).forEach(([field, meta]) => {
+                const value = meta.value;
+                if (value != null && value !== '') {
+                    filters[field] = value;
+                }
+            });
+        }
+        var queryString = '';
+        // Default query
+        if (!filters['query']) {
+            // Use the new QueryBuilderService methods
+            const odataParams = this.queryBuilder.buildODataFromQueryModel(this.filterModel, this.formFields_);
+            // this.odataSearch.emit(odataParams);
+            // Generate query string using the unified method
+            queryString = this.queryBuilder.toODataQueryString(odataParams);
+            // console.log('OData Query String:', queryString);
+        }
+        this.first = first;
+        this.rows = rows;
+        this.sortField = sortField;
+        this.sortOrder = sortOrder;
+        const dir = sortOrder === 1 ? 'asc' : 'desc';
+        const sort = sortField ? `${sortField} ${dir}` : undefined;
+        // this.pageChange.emit({ first, rows ,sort, filters });
+        this.applySearch({
+            filter: this.model['filter'],
+            query: queryString,
+            sorting: sort,
+            skipCount: first,
+            maxResultCount: rows,
+        });
+        // يبني النص وإرساله
+    }
+    /** تصيير البيانات حسب الصفحة */
+    get pagedData() {
+        // return this.data ? this.data.slice(this.first, this.first + this.rows) : [];
+        return this.data;
+    }
+    get globalFilterFields() {
+        return this.columns.map(c => String(c.key));
+    }
+    /** أرسل إلى الأب لأتمتة شكل البحث إذا يحتاج */
+    // from generic-crud-table.component.ts
+    /** بدّل applySearch لتبث pageChange مباشرةً */
+    resetPage(filters) {
+        // this.genericTable.applyFilter(global);
+        this.first = 0;
+        this.rows = 10;
+    }
+    /** بدّل applySearch لتبث pageChange مباشرةً */
+    applySearch(filters) {
+        // this.genericTable.applyFilter(global);
+        this.onSearch.emit(filters);
+    }
+    /** دالة تنفّذ عند النقر على صف */
+    onRowClick(row) {
+        if (this.rowSelectable) {
+            this.rowSelect.emit(row);
+        }
+    }
+    onSubmit() {
+        if (this.mode != 'form-only') {
+            this.applySearch('');
+        }
+    }
+    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] // نرسل نسخة من المصفوفة
+        });
+    }
+    openReportDialog() {
+        const ref = this.dialogService.open(GenericReportComponent, {
+            header: this.translate.instant('REPORT'),
+            showHeader: false,
+            width: '90%',
+            height: 'auto',
+            modal: true,
+            focusOnShow: false,
+            data: {
+                apiName: this.apiName,
+                moduleName: this.moduleName,
+                filterFields: this.filters,
+                filterModel: { /* status: 'Active'  */},
+                defaultFileName: this.translate.instant('REPORT') + ' ' + this.translate.instant(this.breadcrumb?.length ? this.breadcrumb[this.breadcrumb.length - 1].label ?? '' : '')
+            }
+        });
+        ref?.onClose.subscribe((exportConfig) => {
+            if (exportConfig) {
+                console.log('Export configuration:', exportConfig);
+                // Handle the export - call your API service here
+                this.handleExport(exportConfig);
+            }
+        });
+    }
+    handleExport(config) {
+        // Your export logic here
+        // if (config.exportType === 'EXCEL') {
+        //   this.exportToExcel(config);
+        // } else if (config.exportType === 'PDF') {
+        //   this.exportToPdf(config);
+        // }
+        // etc.
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericCrudTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: GenericCrudTableComponent, isStandalone: true, selector: "app-generic-crud-table", inputs: { data: "data", formFields: "formFields", columnFormFields: "columnFormFields", columns: "columns", dialogMaxWidth: "dialogMaxWidth", isViewMode: "isViewMode", displayMode: "displayMode", useConfirmOnSave: "useConfirmOnSave", isEditMode: "isEditMode", drawerVisible: "drawerVisible", dialogVisible: "dialogVisible", model: "model", loading: "loading", errorMsg: "errorMsg", errorMessage: "errorMessage", actions: "actions", actionsMode: "actionsMode", beforeSaveTransform: "beforeSaveTransform", filters: "filters", filterModel: "filterModel", showSearch: "showSearch", first: "first", rows: "rows", totalRecords: "totalRecords", rowEditable: "rowEditable", rowSelectable: "rowSelectable", scrollHeight: "scrollHeight", paginator: "paginator", service: "service", apiName: "apiName", moduleName: "moduleName", idField: "idField", showRowSelectionCheckbox: "showRowSelectionCheckbox", showAddButton: "showAddButton", showPrintButton: "showPrintButton", PermissionName: "PermissionName", addButtonConfigs: "addButtonConfigs", createEditActions: "createEditActions", supportSubPage: "supportSubPage", tabs: "tabs", bulkActionButtons: "bulkActionButtons", singleActionButtons: "singleActionButtons", breadcrumb: "breadcrumb", mode: "mode", forceState: "forceState", hideTable: "hideTable", autoShowForm: "autoShowForm", rowStyleFn: "rowStyleFn", rowClassFn: "rowClassFn", disableRowCheckboxFn: "disableRowCheckboxFn", showAdvancedFilter: "showAdvancedFilter", advancedFilterIcon: "advancedFilterIcon", searchTabs: "searchTabs", showViewMode: "showViewMode", viewMode: "viewMode", templateDrawerVisible: "templateDrawerVisible", category: "category", feature: "feature" }, outputs: { action: "action", bulkAction: "bulkAction", singleAction: "singleAction", afterSave: "afterSave", afterDelete: "afterDelete", beforeSave: "beforeSave", beforeDelete: "beforeDelete", formCancel: "formCancel", formInit: "formInit", dataLoaded: "dataLoaded", selectionChange: "selectionChange", error: "error", search: "search", pageChange: "pageChange", onSearch: "onSearch", visibleChange: "visibleChange", rowSelect: "rowSelect", viewModeChange: "viewModeChange", templateSelected: "templateSelected", templateDrawerVisibleChange: "templateDrawerVisibleChange" }, viewQueries: [{ propertyName: "genericTable", first: true, predicate: ["genericTable"], descendants: true }, { propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<div\r\n  [class]=\"mode !== 'form-only' && mode !== 'detail'  ? tableClass : ''\"\r\n>\r\n <app-generic-crud-header\r\n  [mode]=\"mode\"\r\n  [breadcrumb]=\"breadcrumb_\"\r\n  [isSingleItemSelected]=\"isSingleItemSelected\"\r\n  [selectedItems]=\"_selectedRows\"\r\n  [singleActionButtons]=\"singleActionButtons\"\r\n  [bulkActionButtons]=\"bulkActionButtons\"\r\n  [addButtonConfigs]=\"addButtonConfigs\"\r\n  [mergedButtonConfigs]=\"mergedButtonConfigs\"\r\n  [apiName]=\"service.apiName\"\r\n  [moduleName]=\"service.moduleName\"\r\n  [filters]=\"filters\"\r\n  [filterModel]=\"filterModel\"\r\n  [showSearch]=\"showSearch\"\r\n  (singleItemAction)=\"onSingleItemAction($event)\"\r\n  (bulkAction)=\"onInternalBulkAction($event)\"\r\n  (action)=\"action.emit($event)\"\r\n  (search)=\"resetPage($event);applySearch($event);\"\r\n  (resetSearch)=\"resetPage($event);applySearch('');\"\r\n  (paginateChange)=\"onHeaderPaginateChange($event)\"\r\n  [first]=\"first\"\r\n  [rows]=\"rows\"\r\n  [totalRecords]=\"totalRecords\"\r\n  [searchTabs]=\"searchTabs\"\r\n  [showAdvancedFilter]=\"showAdvancedFilter\"\r\n  [advancedFilterIcon]=\"advancedFilterIcon\"\r\n  [showViewMode]=\"showViewMode\"\r\n  [viewMode]=\"viewMode\"\r\n  (viewModeChange)=\"onViewModeChange($event)\"\r\n/>\r\n\r\n   @if (!hideTable) {\r\n  <lib-generic-table\r\n    [data]=\"data\"\r\n    [columns]=\"columns\"\r\n     [columnFormFields]=\"columnFormFields\"\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    [addButtonConfigs]=\"addButtonConfigs\"\r\n    [globalFilterFields]=\"globalFilterFields\"\r\n    [scrollHeight]=\"scrollHeight\"\r\n    [showRowSelectionCheckbox]=\"showRowSelectionCheckbox\"\r\n    (action)=\"action.emit($event)\"\r\n    (onAddNew)=\"action.emit($event)\"\r\n    (pageChange)=\"onLazyLoad($event)\"\r\n    [rowSelectable]=\"rowSelectable\"\r\n    [rowEditable]=\"rowEditable\"\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  <app-generic-dialog\r\n    #dialog\r\n     [service]=\"service\"\r\n    [formFields]=\"formFields\"\r\n    [model]=\"model\"\r\n    [apiName]=\"service.apiName\"\r\n    [moduleName]=\"service.moduleName\"\r\n    [idField]=\"idField\"\r\n    [dialogMaxWidth]=\"dialogMaxWidth\"\r\n    [displayMode]=\"displayMode\"\r\n    [mode]=\"mode\"\r\n    [forceState]=\"forceState\"\r\n    [drawerVisible]=\"drawerVisible\"\r\n    [dialogVisible]=\"dialogVisible\"\r\n    [isViewMode]=\"isViewMode\"\r\n    [isEditMode]=\"isEditMode\"\r\n    [useConfirmOnSave]=\"useConfirmOnSave\"\r\n    [loading]=\"loading\"\r\n    [errorMsg]=\"errorMsg\"\r\n    [errorMessage]=\"errorMessage\"\r\n    [beforeSaveTransform]=\"beforeSaveTransform\"\r\n    (action)=\"action.emit($event)\"\r\n    (afterSave)=\"afterSave.emit($event);onSubmit();\"\r\n    (afterDelete)=\"afterDelete.emit($event)\"\r\n    (beforeSave)=\"beforeSave.emit($event)\"\r\n    (beforeDelete)=\"beforeDelete.emit($event)\"\r\n    (formCancel)=\"formCancel.emit()\"\r\n    (formInit)=\"formInit.emit($event)\"\r\n    (dataLoaded)=\"dataLoaded.emit($event)\"\r\n    (selectionChange)=\"selectionChange.emit($event)\"\r\n    (error)=\"error.emit($event)\"\r\n    (visibleChange)=\"visibleChange.emit($event)\"\r\n  >\r\n  </app-generic-dialog>\r\n\r\n   <app-detail-view\r\n    [displayMode]=\"displayMode\"\r\n    [mode]=\"mode\"\r\n    [title]=\"breadcrumb_?.[0]?.label || 'Detail'\"\r\n    [service]=\"service\"\r\n    [apiName]=\"service.apiName\"\r\n    [moduleName]=\"service.moduleName\"\r\n    [idField]=\"idField\"\r\n    [actions]=\"actions\"\r\n    [formFields]=\"formFields\"\r\n    [model]=\"model\"\r\n    [tabs]=\"tabs\"\r\n    [loading]=\"loading\"\r\n    [breadcrumb]=\"breadcrumb_\"\r\n    [createEditActions]=\"createEditActions\"\r\n     (action)=\"action.emit($event)\"\r\n    >\r\n  </app-detail-view>\r\n\r\n    <!-- \uD83D\uDFE2 \u0645\u0643\u0648\u0646 \u062F\u0631\u062C \u0627\u0644\u0642\u0648\u0627\u0644\u0628 \u0627\u0644\u0645\u062D\u0641\u0648\u0638\u0629 -->\r\n<!-- <saved-report-templates-drawer\r\n  [(visible)]=\"templateDrawerVisible\"\r\n  (visibleChange)=\"templateDrawerVisibleChange.emit($event)\"\r\n  [filterFields]=\"filters\"\r\n  [service]=\"service.moduleName\"\r\n  [category]=\"category\"\r\n  [feature]=\"feature\"\r\n  (templateSelected)=\"templateSelected.emit($event)\">\r\n</saved-report-templates-drawer> -->\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: GenericTable, selector: "lib-generic-table", inputs: ["data", "columns", "columnFormFields", "loading", "actions", "actionsPosition", "actionsMode", "first", "rows", "totalRecords", "sortField", "sortOrder", "globalFilterFields", "addButtonConfigs", "scrollHeight", "rowEditable", "rowSelectable", "selection", "dataKey", "paginator", "showRowSelectionCheckbox"], outputs: ["action", "pageChange", "onAddNew", "rowSelect", "selectionChange"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: IconFieldModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MessageModule }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: GenericDialogComponent, selector: "app-generic-dialog", inputs: ["form", "service", "formFields", "model", "apiName", "moduleName", "idField", "dialogMaxWidth", "displayMode", "mode", "forceState", "drawerVisible", "dialogVisible", "isViewMode", "isEditMode", "useConfirmOnSave", "loading", "errorMsg", "errorMessage", "beforeSaveTransform", "hideTable", "autoShowForm"], outputs: ["action", "afterSave", "afterDelete", "beforeSave", "beforeDelete", "formCancel", "formInit", "dataLoaded", "selectionChange", "error", "visibleChange"] }, { kind: "component", type: GenericCrudHeaderComponent, selector: "app-generic-crud-header", inputs: ["mode", "breadcrumb", "isSingleItemSelected", "selectedItems", "singleActionButtons", "bulkActionButtons", "addButtonConfigs", "mergedButtonConfigs", "filters", "filterModel", "showSearch", "first", "rows", "totalRecords", "moduleName", "apiName", "actions", "showAdvancedFilter", "advancedFilterIcon", "searchTabs", "showViewMode", "viewMode"], outputs: ["singleItemAction", "bulkAction", "search", "resetSearch", "action", "paginateChange", "viewModeChange"] }, { kind: "component", type: GenericViewComponent, selector: "app-detail-view", inputs: ["title", "actions", "createEditActions", "tabs", "viewMode", "breadcrumb", "service", "formFields", "apiName", "moduleName", "idField", "standaloneMode", "isViewMode", "isCreateMode", "isEditMode", "model", "displayMode", "mode", "loading"], outputs: ["action", "afterDelete"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: GenericCrudTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-generic-crud-table', standalone: true, imports: [
+                        TableModule,
+                        ButtonModule,
+                        GenericTable,
+                        ToolbarModule,
+                        TranslatePipe,
+                        DividerModule,
+                        IconFieldModule,
+                        DrawerModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        MessageModule,
+                        DialogModule,
+                        GenericDialogComponent,
+                        GenericCrudHeaderComponent,
+                        GenericViewComponent,
+                        // SavedReportTemplatesDrawerComponent
+                    ], host: {
+                        class: ''
+                    }, template: "<div\r\n  [class]=\"mode !== 'form-only' && mode !== 'detail'  ? tableClass : ''\"\r\n>\r\n <app-generic-crud-header\r\n  [mode]=\"mode\"\r\n  [breadcrumb]=\"breadcrumb_\"\r\n  [isSingleItemSelected]=\"isSingleItemSelected\"\r\n  [selectedItems]=\"_selectedRows\"\r\n  [singleActionButtons]=\"singleActionButtons\"\r\n  [bulkActionButtons]=\"bulkActionButtons\"\r\n  [addButtonConfigs]=\"addButtonConfigs\"\r\n  [mergedButtonConfigs]=\"mergedButtonConfigs\"\r\n  [apiName]=\"service.apiName\"\r\n  [moduleName]=\"service.moduleName\"\r\n  [filters]=\"filters\"\r\n  [filterModel]=\"filterModel\"\r\n  [showSearch]=\"showSearch\"\r\n  (singleItemAction)=\"onSingleItemAction($event)\"\r\n  (bulkAction)=\"onInternalBulkAction($event)\"\r\n  (action)=\"action.emit($event)\"\r\n  (search)=\"resetPage($event);applySearch($event);\"\r\n  (resetSearch)=\"resetPage($event);applySearch('');\"\r\n  (paginateChange)=\"onHeaderPaginateChange($event)\"\r\n  [first]=\"first\"\r\n  [rows]=\"rows\"\r\n  [totalRecords]=\"totalRecords\"\r\n  [searchTabs]=\"searchTabs\"\r\n  [showAdvancedFilter]=\"showAdvancedFilter\"\r\n  [advancedFilterIcon]=\"advancedFilterIcon\"\r\n  [showViewMode]=\"showViewMode\"\r\n  [viewMode]=\"viewMode\"\r\n  (viewModeChange)=\"onViewModeChange($event)\"\r\n/>\r\n\r\n   @if (!hideTable) {\r\n  <lib-generic-table\r\n    [data]=\"data\"\r\n    [columns]=\"columns\"\r\n     [columnFormFields]=\"columnFormFields\"\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    [addButtonConfigs]=\"addButtonConfigs\"\r\n    [globalFilterFields]=\"globalFilterFields\"\r\n    [scrollHeight]=\"scrollHeight\"\r\n    [showRowSelectionCheckbox]=\"showRowSelectionCheckbox\"\r\n    (action)=\"action.emit($event)\"\r\n    (onAddNew)=\"action.emit($event)\"\r\n    (pageChange)=\"onLazyLoad($event)\"\r\n    [rowSelectable]=\"rowSelectable\"\r\n    [rowEditable]=\"rowEditable\"\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  <app-generic-dialog\r\n    #dialog\r\n     [service]=\"service\"\r\n    [formFields]=\"formFields\"\r\n    [model]=\"model\"\r\n    [apiName]=\"service.apiName\"\r\n    [moduleName]=\"service.moduleName\"\r\n    [idField]=\"idField\"\r\n    [dialogMaxWidth]=\"dialogMaxWidth\"\r\n    [displayMode]=\"displayMode\"\r\n    [mode]=\"mode\"\r\n    [forceState]=\"forceState\"\r\n    [drawerVisible]=\"drawerVisible\"\r\n    [dialogVisible]=\"dialogVisible\"\r\n    [isViewMode]=\"isViewMode\"\r\n    [isEditMode]=\"isEditMode\"\r\n    [useConfirmOnSave]=\"useConfirmOnSave\"\r\n    [loading]=\"loading\"\r\n    [errorMsg]=\"errorMsg\"\r\n    [errorMessage]=\"errorMessage\"\r\n    [beforeSaveTransform]=\"beforeSaveTransform\"\r\n    (action)=\"action.emit($event)\"\r\n    (afterSave)=\"afterSave.emit($event);onSubmit();\"\r\n    (afterDelete)=\"afterDelete.emit($event)\"\r\n    (beforeSave)=\"beforeSave.emit($event)\"\r\n    (beforeDelete)=\"beforeDelete.emit($event)\"\r\n    (formCancel)=\"formCancel.emit()\"\r\n    (formInit)=\"formInit.emit($event)\"\r\n    (dataLoaded)=\"dataLoaded.emit($event)\"\r\n    (selectionChange)=\"selectionChange.emit($event)\"\r\n    (error)=\"error.emit($event)\"\r\n    (visibleChange)=\"visibleChange.emit($event)\"\r\n  >\r\n  </app-generic-dialog>\r\n\r\n   <app-detail-view\r\n    [displayMode]=\"displayMode\"\r\n    [mode]=\"mode\"\r\n    [title]=\"breadcrumb_?.[0]?.label || 'Detail'\"\r\n    [service]=\"service\"\r\n    [apiName]=\"service.apiName\"\r\n    [moduleName]=\"service.moduleName\"\r\n    [idField]=\"idField\"\r\n    [actions]=\"actions\"\r\n    [formFields]=\"formFields\"\r\n    [model]=\"model\"\r\n    [tabs]=\"tabs\"\r\n    [loading]=\"loading\"\r\n    [breadcrumb]=\"breadcrumb_\"\r\n    [createEditActions]=\"createEditActions\"\r\n     (action)=\"action.emit($event)\"\r\n    >\r\n  </app-detail-view>\r\n\r\n    <!-- \uD83D\uDFE2 \u0645\u0643\u0648\u0646 \u062F\u0631\u062C \u0627\u0644\u0642\u0648\u0627\u0644\u0628 \u0627\u0644\u0645\u062D\u0641\u0648\u0638\u0629 -->\r\n<!-- <saved-report-templates-drawer\r\n  [(visible)]=\"templateDrawerVisible\"\r\n  (visibleChange)=\"templateDrawerVisibleChange.emit($event)\"\r\n  [filterFields]=\"filters\"\r\n  [service]=\"service.moduleName\"\r\n  [category]=\"category\"\r\n  [feature]=\"feature\"\r\n  (templateSelected)=\"templateSelected.emit($event)\">\r\n</saved-report-templates-drawer> -->\r\n\r\n</div>\r\n" }]
+        }], propDecorators: { genericTable: [{
+                type: ViewChild,
+                args: ['genericTable']
+            }], dialog: [{
+                type: ViewChild,
+                args: ['dialog']
+            }], data: [{
+                type: Input
+            }], formFields: [{
+                type: Input
+            }], columnFormFields: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], dialogMaxWidth: [{
+                type: Input
+            }], isViewMode: [{
+                type: Input
+            }], displayMode: [{
+                type: Input
+            }], useConfirmOnSave: [{
+                type: Input
+            }], isEditMode: [{
+                type: Input
+            }], drawerVisible: [{
+                type: Input
+            }], dialogVisible: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], errorMsg: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], actionsMode: [{
+                type: Input
+            }], action: [{
+                type: Output
+            }], bulkAction: [{
+                type: Output
+            }], singleAction: [{
+                type: Output
+            }], beforeSaveTransform: [{
+                type: Input
+            }], afterSave: [{
+                type: Output
+            }], afterDelete: [{
+                type: Output
+            }], beforeSave: [{
+                type: Output
+            }], beforeDelete: [{
+                type: Output
+            }], formCancel: [{
+                type: Output
+            }], formInit: [{
+                type: Output
+            }], dataLoaded: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], error: [{
+                type: Output
+            }], filters: [{
+                type: Input
+            }], filterModel: [{
+                type: Input
+            }], search: [{
+                type: Output
+            }], showSearch: [{
+                type: Input
+            }], first: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], totalRecords: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], onSearch: [{
+                type: Output
+            }], visibleChange: [{
+                type: Output
+            }], rowEditable: [{
+                type: Input
+            }], rowSelectable: [{
+                type: Input
+            }], rowSelect: [{
+                type: Output
+            }], scrollHeight: [{
+                type: Input
+            }], paginator: [{
+                type: Input
+            }], service: [{
+                type: Input
+            }], apiName: [{
+                type: Input
+            }], moduleName: [{
+                type: Input
+            }], idField: [{
+                type: Input
+            }], showRowSelectionCheckbox: [{
+                type: Input
+            }], showAddButton: [{
+                type: Input
+            }], showPrintButton: [{
+                type: Input
+            }], PermissionName: [{
+                type: Input
+            }], addButtonConfigs: [{
+                type: Input
+            }], createEditActions: [{
+                type: Input
+            }], supportSubPage: [{
+                type: Input
+            }], tabs: [{
+                type: Input
+            }], bulkActionButtons: [{
+                type: Input
+            }], singleActionButtons: [{
+                type: Input
+            }], breadcrumb: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], forceState: [{
+                type: Input
+            }], hideTable: [{
+                type: Input
+            }], autoShowForm: [{
+                type: Input
+            }], rowStyleFn: [{
+                type: Input
+            }], rowClassFn: [{
+                type: Input
+            }], disableRowCheckboxFn: [{
+                type: Input
+            }], showAdvancedFilter: [{
+                type: Input
+            }], advancedFilterIcon: [{
+                type: Input
+            }], searchTabs: [{
+                type: Input
+            }], showViewMode: [{
+                type: Input
+            }], viewMode: [{
+                type: Input
+            }], viewModeChange: [{
+                type: Output
+            }], templateSelected: [{
+                type: Output
+            }], templateDrawerVisible: [{
+                type: Input
+            }], templateDrawerVisibleChange: [{
+                type: Output
+            }], category: [{
+                type: Input
+            }], feature: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GenericCrudHeaderComponent, GenericCrudTableComponent, GenericCrudTableModule };
+//# sourceMappingURL=es.framework-ng.ui.core-generic-crud-table.mjs.map