@elite.framework/ng.ui.core 1.0.62 → 1.0.63

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

@@ -0,0 +1,398 @@
+import * as i7 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import * as i0 from '@angular/core';
+import { inject, EventEmitter, Input, ViewChild, Output, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { Location, CommonModule } from '@angular/common';
+import * as i2 from 'primeng/toolbar';
+import { ToolbarModule } from 'primeng/toolbar';
+import * as i4 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import { FormlyForm } from '@ngx-formly/core';
+import * as i6 from '@angular/forms';
+import { UntypedFormGroup, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i5 from 'primeng/tabs';
+import { TabsModule } from 'primeng/tabs';
+import * as i9 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { BreadcrumbComponent } from '@elite.framework/ng.ui.core/breadcrumb';
+import { BaseService, SwalService } from '@elite.framework/ng.core/services';
+import { ActivatedRoute, Router } from '@angular/router';
+import * as i8 from 'primeng/progressspinner';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { GenericDialogComponent } from '@elite.framework/ng.ui.core/generic-dialog';
+import { GenericButton } from '@elite.framework/ng.ui.core/generic-button';
+import * as i3 from 'primeng/api';
+
+class GenericViewComponent {
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    form = new UntypedFormGroup({});
+    title = '';
+    actions = [];
+    createEditActions = [];
+    actions_ = [];
+    tabs = [];
+    viewMode = true;
+    breadcrumb;
+    service = inject(BaseService);
+    formFields = [];
+    apiName = '';
+    idField = 'id';
+    standaloneMode = false;
+    isViewMode = true; // وضع المشاهدة فقط
+    isCreateMode = false; // وضع الاضافة فقط
+    isEditMode = false; // وضع التعديل
+    model = {};
+    displayMode = 'drawer';
+    mode = 'full';
+    action = new EventEmitter();
+    afterDelete = new EventEmitter();
+    dialog;
+    inlineForm;
+    tabs_ = [];
+    model_ = {};
+    currentId;
+    list = [];
+    totalRecords = 0;
+    loading = false;
+    // pagination state
+    pageSize = 10;
+    pageIndex = 0;
+    sort = '';
+    currentFilters = {};
+    pageFilters = {};
+    searchGlobal = '';
+    swalService = inject(SwalService);
+    _location = inject(Location);
+    ngOnInit() {
+        this.loading = true;
+        if (this.apiName) {
+            this.service.apiName = this.apiName;
+        }
+        this.actions_ = this.actions.filter(c => c.name != 'view');
+        this.route.paramMap.subscribe(params => {
+            const id = params.get(this.idField);
+            if (id) {
+                this.currentId = id;
+                if (this.standaloneMode) {
+                    this.loadList();
+                }
+            }
+            this.refresh();
+        });
+    }
+    refresh() {
+        // detect mode based on route
+        const url = this.router.url.toLowerCase();
+        this.isViewMode = url.includes('/view');
+        this.isEditMode = url.includes('/edit');
+        this.isCreateMode = url.includes('/create') || url.endsWith('/new') || url.endsWith('/add');
+        this.tabs_ = [];
+        for (let i = 0; i < this.tabs.length; i++) {
+            const t = this.tabs[i];
+            this.tabs_.push({
+                ...t,
+                fields: [
+                    {
+                        props: { label: '' },
+                        fieldGroupClassName: 'grid grid-cols-1 md:grid-cols-2 gap-3',
+                        fieldGroup: this.isCreateMode || this.isEditMode
+                            ? this.getCreateEditFields(i == 0 ? this.formFields : t.fields)
+                            : this.getViewFields(i == 0 ? this.formFields : t.fields),
+                    },
+                ],
+            });
+        }
+        this.loading = false;
+    }
+    // as form
+    getCreateEditFields(fields = []) {
+        return fields.map(f => ({
+            ...f,
+            props: { ...f.props, readonly: this.viewMode, disabled: this.viewMode },
+        }));
+    }
+    getViewFields(fields = []) {
+        const flatten = (fields) => fields.flatMap(field => {
+            if (field.fieldGroup?.length)
+                return flatten(field.fieldGroup);
+            if (!field.props
+                || field.props['view']?.hidden
+            // || field.props['table']?.hidden
+            )
+                return [];
+            const type = field.props['view']?.type || field.props['table']?.type || 'custom-label-type';
+            return [{
+                    type,
+                    key: field['key'],
+                    readonly: this.viewMode,
+                    disabled: this.viewMode,
+                    wrappers: field.wrappers ?? ['field-wrapper'],
+                    props: {
+                        ...field.props,
+                        ...(field.props['view']?.props || field.props['table']?.props),
+                    },
+                    expressions: field.props['view']?.expressions || field.props['view']?.expressions,
+                }];
+        });
+        return flatten(fields);
+    }
+    // Use a map to store form groups for each row and column
+    cellForms = new Map();
+    getForm(rowIndex) {
+        const key = `${rowIndex}_`;
+        let form = this.cellForms.get(key);
+        if (!form) {
+            form = new FormGroup({});
+            this.cellForms.set(key, form);
+        }
+        return form;
+    }
+    async handleCreateEditAction(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
+                if (btn.actionName == 'cancel') {
+                    this.back();
+                }
+                else {
+                    this.action.emit({
+                        name: btn.actionName ?? 'cancel',
+                        row: null, // provide row if available
+                    });
+                }
+            }
+        }
+        catch (err) {
+            console.error('Button action error', err);
+        }
+    }
+    onAction(act, model) {
+        if (act.action) {
+            act.action(model);
+        }
+        else {
+            // this.action.emit({ name: act.name, row:model });
+            this.emitAction({ name: act.name, row: model });
+        }
+    }
+    emitAction(event) {
+        switch (event.name) {
+            case 'edit':
+                this.dialog.openForm("edit", event.row);
+                break;
+            case 'delete':
+                this.onDelete(event.row);
+                break;
+            default:
+                this.action.emit(event);
+                break;
+        }
+    }
+    onDelete(item) {
+        const id = item[this.idField];
+        this.swalService.confirm('تأكيد الحذف', 'هل تريد حذف هذا السجل فعلاً؟', 'نعم، احذف', 'إلغاء').then((result) => {
+            if (result.isConfirmed) {
+                this.service.delete(id).subscribe({
+                    next: () => {
+                        this.swalService.success('تم الحذف بنجاح');
+                        this.back();
+                    },
+                    error: (err) => {
+                        this.loading = false;
+                    }
+                });
+            }
+        });
+    }
+    afterSave(event) {
+        this.model = event.response;
+        // set the id from backend response
+        this.currentId = event.response[this.idField];
+        if (this.isCreateMode) {
+            this.goToMode('view');
+        }
+        else if (this.isEditMode) {
+            this.goToMode('view');
+        }
+    }
+    goToMode(mode) {
+        const tree = this.router.parseUrl(this.router.url);
+        const segments = tree.root.children['primary']?.segments.map(s => s.path) ?? [];
+        let newSegments;
+        if (mode === 'create') {
+            // always navigate to "add"
+            newSegments = [
+                ...segments.filter(s => !['view', 'edit', 'add'].includes(s)),
+                'add',
+            ];
+        }
+        else {
+            // if in "add" mode, replace it with the new id
+            if (segments.includes('add')) {
+                newSegments = [
+                    ...segments.filter(s => s !== 'add'),
+                    String(this.currentId),
+                    mode,
+                ];
+            }
+            else {
+                const idIndex = segments.findIndex(s => s === String(this.currentId));
+                if (idIndex === -1) {
+                    newSegments = [...segments, String(this.currentId), mode];
+                }
+                else {
+                    newSegments = segments.slice(0, idIndex + 1);
+                    newSegments.push(mode);
+                }
+            }
+        }
+        this.router.navigate(newSegments);
+        this.refresh();
+    }
+    backToList() {
+        this.router.navigate(['../']);
+    }
+    back() {
+        //  this.router.navigate(['..']);
+        this._location.back();
+    }
+    loadList() {
+        this.loading = true;
+        const filters = {
+            maxResultCount: this.pageSize,
+            skipCount: this.pageIndex * this.pageSize,
+            sorting: this.sort,
+            ...this.currentFilters,
+            ...this.pageFilters,
+            ...(this.searchGlobal ? { filter: this.searchGlobal } : {}),
+        };
+        this.service.getList(filters).subscribe({
+            next: (res) => {
+                this.list = res.items;
+                this.totalRecords = res.totalCount;
+                this.loading = false;
+                // set model_ to current id item
+                const found = this.list.find(x => x[this.idField] == this.currentId);
+                if (found) {
+                    this.model_ = found;
+                }
+            },
+            error: err => {
+                console.error('Error loading list', err);
+                this.loading = false;
+            }
+        });
+    }
+    next() {
+        if (!this.currentId)
+            return;
+        // increment currentId numerically
+        // const newId = Number(this.currentId) + 1;
+        // this.currentId = newId;
+        // use goToMode to navigate and keep mode
+        const currentMode = this.isEditMode ? 'edit' : 'view';
+        // this.goToMode(currentMode);
+    }
+    previous() {
+        if (!this.currentId)
+            return;
+        // decrement currentId numerically
+        // const newId = Number(this.currentId) - 1;
+        // if (newId <= 0) return;
+        // this.currentId = newId;
+        // use goToMode to navigate and keep mode
+        const currentMode = this.isEditMode ? 'edit' : 'view';
+        // this.goToMode(currentMode);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: GenericViewComponent, isStandalone: true, selector: "app-detail-view", inputs: { title: "title", actions: "actions", createEditActions: "createEditActions", tabs: "tabs", viewMode: "viewMode", breadcrumb: "breadcrumb", service: "service", formFields: "formFields", apiName: "apiName", idField: "idField", standaloneMode: "standaloneMode", isViewMode: "isViewMode", isCreateMode: "isCreateMode", isEditMode: "isEditMode", model: "model", displayMode: "displayMode", mode: "mode", loading: "loading" }, outputs: { action: "action", afterDelete: "afterDelete" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }, { propertyName: "inlineForm", first: true, predicate: ["inlineForm"], descendants: true }], ngImport: i0, template: "\r\n@if (mode === 'detail') {\r\n<div  class=\"w-full flex flex-col gap-3\">\r\n  <!-- overlay -->\r\n  <div *ngIf=\"loading\"\r\n       class=\"absolute inset-0 bg-white/70 flex items-center justify-center z-50\">\r\n    <p-progress-spinner/>\r\n  </div>\r\n\r\n  <!-- actual content -->\r\n  <!-- Toolbar -->\r\n  <p-toolbar style=\"background: transparent;border: 0px;box-shadow: none;\" class=\"bg-transparent shadow-none border-none rounded-md px-3\">\r\n    <ng-template pTemplate=\"left\">\r\n      <!-- <span class=\"font-semibold text-lg xs:hidden block\">{{ title }}</span> -->\r\n      <app-breadcrumb class=\"xs:block\" [breadcrumb]=\"breadcrumb\"></app-breadcrumb> <!-- xs:block hidden -->\r\n    </ng-template>\r\n    <ng-template pTemplate=\"right\">\r\n      <div class=\"flex gap-2\">\r\n\r\n      <button\r\n        pButton pRipple\r\n        icon=\"pi pi-chevron-right\"\r\n        class=\"p-button-text p-button-sm fd-btn\"\r\n        pTooltip=\"\u0627\u0644\u062A\u0627\u0644\u064A\"\r\n        (click)=\"next()\"\r\n      ></button>\r\n       <button\r\n        pButton pRipple\r\n        icon=\"pi pi-chevron-left\"\r\n        class=\"p-button-text p-button-sm fd-btn\"\r\n        pTooltip=\"\u0627\u0644\u0633\u0627\u0628\u0642\"\r\n        (click)=\"previous()\"\r\n      ></button>\r\n      </div>\r\n    </ng-template>\r\n  </p-toolbar>\r\n   <p-toolbar class=\"bg-white shadow rounded-md px-3\">\r\n\r\n    <ng-template pTemplate=\"left\">\r\n       @if (isViewMode) {\r\n      <div class=\"flex gap-1\">\r\n          @for (action of actions_; track $index) {\r\n        <button\r\n        pButton pRipple\r\n      [icon]=\"action.icon ?? ''\"\r\n          [label]=\"(action.label ?? '') | translate\"\r\n        class=\"fd-btn\"\r\n        (click)=\"onAction(action,model)\"\r\n      ></button>\r\n          }\r\n      </div>\r\n    }\r\n    </ng-template>\r\n    <ng-template pTemplate=\"right\">\r\n      @if (isEditMode || isCreateMode) {\r\n      <div class=\"flex gap-1\">\r\n       @for (btn of createEditActions; track $index) {\r\n            @if (!btn.visible || (btn.visible && btn.visible === true)) {\r\n               @if (btn.type == 'submit' && inlineForm) {\r\n              <lib-generic-button\r\n                [type]=\"'submit'\"\r\n                [loading]=\"inlineForm.loading\"\r\n                [disabled]=\"inlineForm.loading || form.invalid\"\r\n                [icon]=\"btn.icon\"\r\n                [label]=\"btn.label | translate\"\r\n                [variant]=\"btn.variant\"\r\n                [severity]=\"btn.severity\"\r\n                [size]=\"btn.size\"\r\n                [model]=\"btn.splitActions\"\r\n                [permission]=\"btn.permission\"\r\n                (clicked)=\"inlineForm.onSubmit()\"\r\n              ></lib-generic-button>\r\n               }\r\n               @else{\r\n                 <lib-generic-button\r\n                [icon]=\"btn.icon\"\r\n                [label]=\"btn.label | translate\"\r\n                [variant]=\"btn.variant\"\r\n                [severity]=\"btn.severity\"\r\n                [size]=\"btn.size\"\r\n                [model]=\"btn.splitActions\"\r\n                [permission]=\"btn.permission\"\r\n                (clicked)=\"handleCreateEditAction(btn)\"\r\n              ></lib-generic-button>\r\n               }\r\n            }\r\n        }\r\n        </div>\r\n      }\r\n    </ng-template>\r\n\r\n  </p-toolbar>\r\n\r\n  <!-- Tabs -->\r\n  <p-tabs value=\"0\">\r\n    <p-tablist>\r\n       @for (tab of tabs_; track $index) {\r\n        <p-tab value=\"{{$index}}\">\r\n          <i [class]=\"tab.icon\"></i>\r\n           <span class=\"mr-1 ml-1\">{{ tab.header }}</span>\r\n        </p-tab>\r\n       }\r\n    </p-tablist>\r\n    <p-tabpanels>\r\n      @for (tab of tabs_; track $index) {\r\n <p-tabpanel value=\"{{$index}}\">\r\n\r\n      <!-- Formly fields -->\r\n      <!-- p-4 grid grid-cols-1 md:grid-cols-2 gap-4 -->\r\n      <div  class=\"border border-surface p-4\">\r\n        @if (tab.fields.length && $index == 0) {\r\n\r\n       <form *ngIf=\"form\" [formGroup]=\"form\">\r\n         @if (tab.fields.length && $index == 0 ) {\r\n @if (isEditMode || isCreateMode) {\r\n         <app-generic-dialog\r\n         #inlineForm\r\n         [form]=\"form\"\r\n         [model]=\"model\"\r\n    [formFields]=\"formFields ?? []\"\r\n    [apiName]=\"apiName\"\r\n    [idField]=\"idField ??'id'\"\r\n    [displayMode]=\"'inline'\"\r\n     [mode]=\"'form-only'\"\r\n     [forceState]=\"isCreateMode ? 'create':'edit'\"\r\n    (afterSave)=\"afterSave($event)\"\r\n  >\r\n  </app-generic-dialog>\r\n}\r\n@else if(isViewMode){\r\n <formly-form\r\n          [form]=\"form\"\r\n          [fields]=\"tab.fields\"\r\n          [model]=\"model\"\r\n        ></formly-form>\r\n}\r\n}\r\n        </form>\r\n\r\n      }\r\n      @if (tab.fields.length && $index > 0) {\r\n\r\n\r\n        <formly-form\r\n          [form]=\"getForm($index)\"\r\n          [fields]=\"tab.fields\"\r\n          [model]=\"tab.model || model\"\r\n        ></formly-form>\r\n\r\n      }\r\n\r\n      <!-- Custom template -->\r\n      @if (tab.content) {\r\n        <ng-container *ngTemplateOutlet=\"tab.content\"></ng-container>\r\n      }\r\n    </div>\r\n      </p-tabpanel>\r\n    }\r\n    </p-tabpanels>\r\n  </p-tabs>\r\n</div>\r\n\r\n<!-- [model]=\"model\" -->\r\n  <app-generic-dialog\r\n    #dialog\r\n    [formFields]=\"formFields ?? []\"\r\n    [apiName]=\"apiName\"\r\n    [idField]=\"idField ??'id'\"\r\n    [displayMode]=\"displayMode ?? 'dialog'\"\r\n    (afterSave)=\"afterSave($event)\"\r\n  >\r\n  </app-generic-dialog>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i2.Toolbar, selector: "p-toolbar", inputs: ["styleClass", "ariaLabelledBy"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i5.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i5.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i5.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i5.TabList, selector: "p-tablist" }, { kind: "component", type: i5.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: BreadcrumbComponent, selector: "app-breadcrumb", inputs: ["breadcrumb"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: GenericDialogComponent, selector: "app-generic-dialog", inputs: ["form", "service", "formFields", "model", "apiName", "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: 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: ProgressSpinnerModule }, { kind: "component", type: i8.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-detail-view', standalone: true, imports: [
+                        CommonModule,
+                        ToolbarModule,
+                        ButtonModule,
+                        TabsModule,
+                        FormlyForm,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TranslateModule,
+                        BreadcrumbComponent,
+                        TooltipModule,
+                        GenericDialogComponent,
+                        GenericButton,
+                        ProgressSpinnerModule
+                    ], template: "\r\n@if (mode === 'detail') {\r\n<div  class=\"w-full flex flex-col gap-3\">\r\n  <!-- overlay -->\r\n  <div *ngIf=\"loading\"\r\n       class=\"absolute inset-0 bg-white/70 flex items-center justify-center z-50\">\r\n    <p-progress-spinner/>\r\n  </div>\r\n\r\n  <!-- actual content -->\r\n  <!-- Toolbar -->\r\n  <p-toolbar style=\"background: transparent;border: 0px;box-shadow: none;\" class=\"bg-transparent shadow-none border-none rounded-md px-3\">\r\n    <ng-template pTemplate=\"left\">\r\n      <!-- <span class=\"font-semibold text-lg xs:hidden block\">{{ title }}</span> -->\r\n      <app-breadcrumb class=\"xs:block\" [breadcrumb]=\"breadcrumb\"></app-breadcrumb> <!-- xs:block hidden -->\r\n    </ng-template>\r\n    <ng-template pTemplate=\"right\">\r\n      <div class=\"flex gap-2\">\r\n\r\n      <button\r\n        pButton pRipple\r\n        icon=\"pi pi-chevron-right\"\r\n        class=\"p-button-text p-button-sm fd-btn\"\r\n        pTooltip=\"\u0627\u0644\u062A\u0627\u0644\u064A\"\r\n        (click)=\"next()\"\r\n      ></button>\r\n       <button\r\n        pButton pRipple\r\n        icon=\"pi pi-chevron-left\"\r\n        class=\"p-button-text p-button-sm fd-btn\"\r\n        pTooltip=\"\u0627\u0644\u0633\u0627\u0628\u0642\"\r\n        (click)=\"previous()\"\r\n      ></button>\r\n      </div>\r\n    </ng-template>\r\n  </p-toolbar>\r\n   <p-toolbar class=\"bg-white shadow rounded-md px-3\">\r\n\r\n    <ng-template pTemplate=\"left\">\r\n       @if (isViewMode) {\r\n      <div class=\"flex gap-1\">\r\n          @for (action of actions_; track $index) {\r\n        <button\r\n        pButton pRipple\r\n      [icon]=\"action.icon ?? ''\"\r\n          [label]=\"(action.label ?? '') | translate\"\r\n        class=\"fd-btn\"\r\n        (click)=\"onAction(action,model)\"\r\n      ></button>\r\n          }\r\n      </div>\r\n    }\r\n    </ng-template>\r\n    <ng-template pTemplate=\"right\">\r\n      @if (isEditMode || isCreateMode) {\r\n      <div class=\"flex gap-1\">\r\n       @for (btn of createEditActions; track $index) {\r\n            @if (!btn.visible || (btn.visible && btn.visible === true)) {\r\n               @if (btn.type == 'submit' && inlineForm) {\r\n              <lib-generic-button\r\n                [type]=\"'submit'\"\r\n                [loading]=\"inlineForm.loading\"\r\n                [disabled]=\"inlineForm.loading || form.invalid\"\r\n                [icon]=\"btn.icon\"\r\n                [label]=\"btn.label | translate\"\r\n                [variant]=\"btn.variant\"\r\n                [severity]=\"btn.severity\"\r\n                [size]=\"btn.size\"\r\n                [model]=\"btn.splitActions\"\r\n                [permission]=\"btn.permission\"\r\n                (clicked)=\"inlineForm.onSubmit()\"\r\n              ></lib-generic-button>\r\n               }\r\n               @else{\r\n                 <lib-generic-button\r\n                [icon]=\"btn.icon\"\r\n                [label]=\"btn.label | translate\"\r\n                [variant]=\"btn.variant\"\r\n                [severity]=\"btn.severity\"\r\n                [size]=\"btn.size\"\r\n                [model]=\"btn.splitActions\"\r\n                [permission]=\"btn.permission\"\r\n                (clicked)=\"handleCreateEditAction(btn)\"\r\n              ></lib-generic-button>\r\n               }\r\n            }\r\n        }\r\n        </div>\r\n      }\r\n    </ng-template>\r\n\r\n  </p-toolbar>\r\n\r\n  <!-- Tabs -->\r\n  <p-tabs value=\"0\">\r\n    <p-tablist>\r\n       @for (tab of tabs_; track $index) {\r\n        <p-tab value=\"{{$index}}\">\r\n          <i [class]=\"tab.icon\"></i>\r\n           <span class=\"mr-1 ml-1\">{{ tab.header }}</span>\r\n        </p-tab>\r\n       }\r\n    </p-tablist>\r\n    <p-tabpanels>\r\n      @for (tab of tabs_; track $index) {\r\n <p-tabpanel value=\"{{$index}}\">\r\n\r\n      <!-- Formly fields -->\r\n      <!-- p-4 grid grid-cols-1 md:grid-cols-2 gap-4 -->\r\n      <div  class=\"border border-surface p-4\">\r\n        @if (tab.fields.length && $index == 0) {\r\n\r\n       <form *ngIf=\"form\" [formGroup]=\"form\">\r\n         @if (tab.fields.length && $index == 0 ) {\r\n @if (isEditMode || isCreateMode) {\r\n         <app-generic-dialog\r\n         #inlineForm\r\n         [form]=\"form\"\r\n         [model]=\"model\"\r\n    [formFields]=\"formFields ?? []\"\r\n    [apiName]=\"apiName\"\r\n    [idField]=\"idField ??'id'\"\r\n    [displayMode]=\"'inline'\"\r\n     [mode]=\"'form-only'\"\r\n     [forceState]=\"isCreateMode ? 'create':'edit'\"\r\n    (afterSave)=\"afterSave($event)\"\r\n  >\r\n  </app-generic-dialog>\r\n}\r\n@else if(isViewMode){\r\n <formly-form\r\n          [form]=\"form\"\r\n          [fields]=\"tab.fields\"\r\n          [model]=\"model\"\r\n        ></formly-form>\r\n}\r\n}\r\n        </form>\r\n\r\n      }\r\n      @if (tab.fields.length && $index > 0) {\r\n\r\n\r\n        <formly-form\r\n          [form]=\"getForm($index)\"\r\n          [fields]=\"tab.fields\"\r\n          [model]=\"tab.model || model\"\r\n        ></formly-form>\r\n\r\n      }\r\n\r\n      <!-- Custom template -->\r\n      @if (tab.content) {\r\n        <ng-container *ngTemplateOutlet=\"tab.content\"></ng-container>\r\n      }\r\n    </div>\r\n      </p-tabpanel>\r\n    }\r\n    </p-tabpanels>\r\n  </p-tabs>\r\n</div>\r\n\r\n<!-- [model]=\"model\" -->\r\n  <app-generic-dialog\r\n    #dialog\r\n    [formFields]=\"formFields ?? []\"\r\n    [apiName]=\"apiName\"\r\n    [idField]=\"idField ??'id'\"\r\n    [displayMode]=\"displayMode ?? 'dialog'\"\r\n    (afterSave)=\"afterSave($event)\"\r\n  >\r\n  </app-generic-dialog>\r\n}\r\n" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], createEditActions: [{
+                type: Input
+            }], tabs: [{
+                type: Input
+            }], viewMode: [{
+                type: Input
+            }], breadcrumb: [{
+                type: Input
+            }], service: [{
+                type: Input
+            }], formFields: [{
+                type: Input
+            }], apiName: [{
+                type: Input
+            }], idField: [{
+                type: Input
+            }], standaloneMode: [{
+                type: Input
+            }], isViewMode: [{
+                type: Input
+            }], isCreateMode: [{
+                type: Input
+            }], isEditMode: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], displayMode: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], action: [{
+                type: Output
+            }], afterDelete: [{
+                type: Output
+            }], dialog: [{
+                type: ViewChild,
+                args: ['dialog']
+            }], inlineForm: [{
+                type: ViewChild,
+                args: ['inlineForm']
+            }], loading: [{
+                type: Input
+            }] } });
+
+class GenericViewModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.8", ngImport: i0, type: GenericViewModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericViewModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GenericViewComponent, GenericViewModule };
+//# sourceMappingURL=elite.framework-ng.ui.core-generic-view.mjs.map