@elite.framework/ng.ui.core 2.0.1 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -370,7 +370,7 @@ class GenericViewComponent {
370
370
  // this.goToMode(currentMode);
371
371
  }
372
372
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
373
- 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" }] });
373
+ 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\r\n *ngTemplateOutlet=\"tab.content; context: { model: model }\">\r\n </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" }] });
374
374
  }
375
375
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: GenericViewComponent, decorators: [{
376
376
  type: Component,
@@ -388,7 +388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
388
388
  GenericDialogComponent,
389
389
  GenericButton,
390
390
  ProgressSpinnerModule
391
- ], 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" }]
391
+ ], 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\r\n *ngTemplateOutlet=\"tab.content; context: { model: model }\">\r\n </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" }]
392
392
  }], propDecorators: { title: [{
393
393
  type: Input
394
394
  }], actions: [{