@elite.framework/ng.ui.core 0.0.1

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

@@ -0,0 +1,398 @@
+import * as i0 from '@angular/core';
+import { NgModule, inject, EventEmitter, Input, Output, ViewChild, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { GenericButtonModule, GenericButton } from '@elite.framework/ng.ui.core/generic-button';
+import * as i4 from 'primeng/divider';
+import { DividerModule } from 'primeng/divider';
+import { MessageModule } from 'primeng/message';
+import * as i3 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import { TableModule } from 'primeng/table';
+import { ToolbarModule } from 'primeng/toolbar';
+import * as i8 from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { FormlyForm } from '@ngx-formly/core';
+import { IconFieldModule } from 'primeng/iconfield';
+import * as i5 from 'primeng/drawer';
+import { DrawerModule } from 'primeng/drawer';
+import * as i7 from 'primeng/dialog';
+import { DialogModule } from 'primeng/dialog';
+import * as i6 from '@angular/forms';
+import { UntypedFormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { SwalService } from '@elite.framework/ng.core/services';
+import { BreadcrumbComponent } from '@elite.framework/ng.ui.core/breadcrumb';
+import { GenericTable } from '@elite.framework/ng.ui.core/generic-table';
+import { GenericSearch } from '@elite.framework/ng.ui.core/generic-search';
+import { UiButtonComponent } from '@elite.framework/ng.ui.core/ui-button';
+import * as i2 from 'primeng/api';
+
+class GenericCrudTableModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericCrudTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.8", ngImport: i0, type: GenericCrudTableModule, imports: [CommonModule, GenericButtonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericCrudTableModule, imports: [CommonModule, GenericButtonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericCrudTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, GenericButtonModule],
+                }]
+        }] });
+
+class GenericCrudTableComponent {
+    genericTable;
+    translate = inject(TranslateService);
+    swalService = inject(SwalService);
+    home = { icon: 'pi pi-home', routerLink: '/' };
+    data = [];
+    formFields_ = []; // <-- هنا
+    formFields = []; // <-- هنا
+    columns = []; // <-- هنا
+    isViewMode = false;
+    displayMode = 'drawer';
+    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();
+    // البحث
+    // 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>();
+    viewHeaderTitle = 'عرض التفاصيل';
+    /** لجعل الجدول قابل لاختيار الصفوف (افتراضي false) */
+    rowSelectable = false;
+    /** حدث يخرج الصف المحدّد */
+    rowSelect = new EventEmitter();
+    selection = null;
+    // الفرز
+    sortField;
+    sortOrder = 1;
+    scrollHeight = '400px';
+    paginator = true;
+    service;
+    idField = 'id';
+    showRowSelectionCheckbox = false;
+    bulkActionButtons = [];
+    singleActionButtons = [];
+    _selectedRows = [];
+    get isSingleItemSelected() {
+        return this._selectedRows.length === 1;
+    }
+    get isMultipleItemSelected() {
+        return this._selectedRows.length > 1;
+    }
+    get selectedItems() {
+        return this._selectedRows;
+    }
+    /** للتحكم بإظهار زر الإضافة */
+    showAddButton = true;
+    splitActions = [];
+    /** الأيقونة الافتراضية لزر الإضافة */
+    addButtonIcon = 'pi pi-plus';
+    /** النص الافتراضي لزر الإضافة */
+    addButtonLabel = 'ADD';
+    /** تتحكّم بموقع زر الإضافة: 'top' أو 'bottom' */
+    addButtonPosition = 'top';
+    addButtonConfigs = [];
+    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;
+        }
+    }
+    //  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;
+                }
+            });
+        }
+        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 });
+        // يبني النص وإرساله
+    }
+    /** تصيير البيانات حسب الصفحة */
+    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 مباشرةً */
+    applySearch(filters) {
+        // this.genericTable.applyFilter(global);
+        this.onSearch.emit(filters);
+    }
+    /** دالة تنفّذ عند النقر على صف */
+    onRowClick(row) {
+        console.log('GenericCrudTableComponent.rowClick:', row);
+        if (this.rowSelectable) {
+            this.rowSelect.emit(row);
+        }
+    }
+    beforeSave = (record) => record;
+    // onSubmit() {
+    //     if (this.form.invalid) return;
+    //     this.loading = true;
+    //     this.errorMessage = null;
+    //     const service = this.service /* as CrudService<T> */;
+    //     const id = this.isEditMode ? (this.model as any)[this.idField] : null;
+    //     const recordToSave = this.beforeSave({ ...this.model });
+    //     const operation$: Observable<any> = this.isEditMode
+    //       ? service.update(id, recordToSave)
+    //       : service.create(recordToSave);
+    //     // operation$.pipe(takeUntil(this.destroy$)).subscribe({
+    //     operation$.subscribe({
+    //       next: () => {
+    //         // this.ref.close(true); // نجاح العملية
+    //         this.visibleChange.emit(false)
+    //           // this.pageChange.emit({ first, rows ,sort, filters });
+    //           this.applySearch('');
+    //         // this.me
+    //       },
+    //       error: (err:any) => {
+    //         this.loading = false;
+    //         this.errorMessage = err.error?.title ||
+    //                            err.message ||
+    //                            'حدث خطأ أثناء الحفظ. يرجى المحاولة مرة أخرى.';
+    //       }
+    //     });
+    //   }
+    onSubmit() {
+        if (this.form.invalid)
+            return;
+        // ✅ أول شيء نطلب تأكيد من المستخدم
+        this.swalService.confirm(this.isEditMode ? 'تأكيد التعديل' : 'تأكيد الحفظ', this.isEditMode
+            ? 'هل تريد حفظ التعديلات على هذا السجل؟'
+            : 'هل تريد حفظ هذا السجل؟', 'نعم', 'إلغاء').then((result) => {
+            if (!result.isConfirmed)
+                return;
+            this.loading = true;
+            this.errorMessage = null;
+            const service = this.service;
+            const id = this.isEditMode ? this.model[this.idField] : null;
+            const recordToSave = this.beforeSave({ ...this.model });
+            const operation$ = this.isEditMode
+                ? service.update(id, recordToSave)
+                : service.create(recordToSave);
+            operation$.subscribe({
+                next: () => {
+                    this.loading = false;
+                    // ✅ رسالة نجاح
+                    this.swalService.success(this.isEditMode ? 'تم التعديل بنجاح' : 'تم الحفظ بنجاح');
+                    this.visibleChange.emit(false);
+                    this.applySearch('');
+                },
+                error: (err) => {
+                    this.loading = false;
+                    const msg = err.error?.title ||
+                        err.message ||
+                        'حدث خطأ أثناء الحفظ. يرجى المحاولة مرة أخرى.';
+                    this.errorMessage = msg;
+                    // ❌ رسالة خطأ
+                    this.swalService.error('فشل الحفظ', msg);
+                }
+            });
+        });
+    }
+    trackByIdx(index, item) {
+        return index;
+    }
+    onSingleItemAction(btn) {
+        if (!this.isSingleItemSelected)
+            return;
+        const selectedItem = this._selectedRows[0];
+        this.singleAction.emit({
+            name: btn.actionName ?? 'singleAction',
+            item: selectedItem
+        });
+    }
+    onInternalBulkAction(btn) {
+        if (!this.isMultipleItemSelected)
+            return;
+        this.bulkAction.emit({
+            name: btn.actionName ?? 'bulkAction',
+            items: [...this._selectedRows] // نرسل نسخة من المصفوفة
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericCrudTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", 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", splitActions: "splitActions", 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 }], 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\r\n\r\n            @if ((showAddButton || splitActions.length > 0)&& addButtonConfigs.length === 0) {\r\n\r\n              @if (showAddButton && splitActions.length  === 0) {\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                <ui-button\r\n                  [config]=\"{\r\n                    type: 'button',\r\n                    label: 'Add',\r\n                    icon: 'pi pi-plus',\r\n                    severity: 'secondary',\r\n                    outlined: true\r\n                  }\"\r\n                  (onClick)=\"action.emit({ name: 'add', row: null! })\">\r\n                </ui-button>\r\n              }\r\n              @else {\r\n               <!-- Split Button -->\r\n                  <ui-button\r\n                    [config]=\"{\r\n                      type: 'split',\r\n                      label: 'Save',\r\n                      icon: 'pi pi-check',\r\n                      severity: 'success',\r\n                      loading: false,\r\n                      items: splitActions\r\n                    }\"\r\n                    (onClick)=\"action.emit({ name: 'add', row: null! })\">\r\n                  </ui-button>\r\n              }\r\n\r\n\r\n            }\r\n\r\n\r\n\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<!-- (ngSubmit)=\"onSubmit()\" -->\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\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=\"button\"\r\n        (click)=\"onSubmit()\"\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=\"button\"\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: i2.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.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i3.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.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i5.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: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.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: i7.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: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["config"], outputs: ["onClick"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericCrudTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-generic-crud-table', standalone: true, imports: [
+                        CommonModule,
+                        TableModule,
+                        GenericButton,
+                        ButtonModule,
+                        GenericSearch,
+                        GenericTable,
+                        ToolbarModule,
+                        TranslateModule,
+                        DividerModule,
+                        IconFieldModule,
+                        DrawerModule,
+                        FormlyForm,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        MessageModule,
+                        BreadcrumbComponent,
+                        DialogModule,
+                        UiButtonComponent
+                    ], 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\r\n\r\n            @if ((showAddButton || splitActions.length > 0)&& addButtonConfigs.length === 0) {\r\n\r\n              @if (showAddButton && splitActions.length  === 0) {\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                <ui-button\r\n                  [config]=\"{\r\n                    type: 'button',\r\n                    label: 'Add',\r\n                    icon: 'pi pi-plus',\r\n                    severity: 'secondary',\r\n                    outlined: true\r\n                  }\"\r\n                  (onClick)=\"action.emit({ name: 'add', row: null! })\">\r\n                </ui-button>\r\n              }\r\n              @else {\r\n               <!-- Split Button -->\r\n                  <ui-button\r\n                    [config]=\"{\r\n                      type: 'split',\r\n                      label: 'Save',\r\n                      icon: 'pi pi-check',\r\n                      severity: 'success',\r\n                      loading: false,\r\n                      items: splitActions\r\n                    }\"\r\n                    (onClick)=\"action.emit({ name: 'add', row: null! })\">\r\n                  </ui-button>\r\n              }\r\n\r\n\r\n            }\r\n\r\n\r\n\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<!-- (ngSubmit)=\"onSubmit()\" -->\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\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=\"button\"\r\n        (click)=\"onSubmit()\"\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=\"button\"\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']
+            }], data: [{
+                type: Input
+            }], formFields: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], isViewMode: [{
+                type: Input
+            }], displayMode: [{
+                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
+            }], 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
+            }], rowSelectable: [{
+                type: Input
+            }], rowSelect: [{
+                type: Output
+            }], scrollHeight: [{
+                type: Input
+            }], paginator: [{
+                type: Input
+            }], service: [{
+                type: Input
+            }], idField: [{
+                type: Input
+            }], showRowSelectionCheckbox: [{
+                type: Input
+            }], bulkActionButtons: [{
+                type: Input
+            }], singleActionButtons: [{
+                type: Input
+            }], showAddButton: [{
+                type: Input
+            }], splitActions: [{
+                type: Input
+            }], addButtonIcon: [{
+                type: Input
+            }], addButtonLabel: [{
+                type: Input
+            }], addButtonPosition: [{
+                type: Input
+            }], addButtonConfigs: [{
+                type: Input
+            }], breadcrumb: [{
+                type: Input
+            }], beforeSave: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GenericCrudTableComponent, GenericCrudTableModule };
+//# sourceMappingURL=elite.framework-ng.ui.core-generic-crud-table.mjs.map