@acorex/modules 19.1.6 → 19.1.8

package/fesm2022/acorex-modules-form-template-management.mjs

@@ -1,189 +1,359 @@
-import { AXMEntityCrudServiceImpl, AXPDataGenerator, AXPWorkflowNavigateAction, AXP_MENU_PROVIDER, AXP_SETTING_DEFINITION_PROVIDER } from '@acorex/platform/common';
+import { AXMEntityCrudServiceImpl, AXPCommandSearchProvider, AXPDataGenerator, AXPWorkflowNavigateAction, AXP_MENU_PROVIDER, AXP_SETTING_DEFINITION_PROVIDER, AXP_SEARCH_PROVIDER } from '@acorex/platform/common';
+import * as i2 from '@acorex/platform/layout/builder';
+import { AXPWidgetComponent, AXPLayoutBuilderModule, AXP_WIDGETS_ADVANCE_GROUP, createStringProperty, AXP_WIDGETS_LAYOUT_GROUP, AXPWidgetsCatalog } from '@acorex/platform/layout/builder';
+import { AXPDesignerService, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerConnector } from '@acorex/platform/layout/designer';
 import { AXPEntityService, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
 import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_BEHAVIOR_PROPERTY_GROUP, AXPWidgetsModule } from '@acorex/platform/widgets';
+import * as i2$1 from '@acorex/platform/workflow';
+import { AXPWorkflowService, AXPWorkflowAction, AXPWorkflowModule } from '@acorex/platform/workflow';
 import * as i0 from '@angular/core';
-import { Injectable, NgModule, inject, Injector, Component, ChangeDetectionStrategy, InjectionToken, computed, signal, effect, HostBinding } from '@angular/core';
+import { InjectionToken, inject, Injectable, computed, signal, effect, Component, ChangeDetectionStrategy, HostBinding, NgModule, Injector } from '@angular/core';
 import { ROUTES } from '@angular/router';
-import * as i2 from '@acorex/platform/layout/builder';
-import { AXPWidgetComponent, AXP_WIDGETS_LAYOUT_GROUP, AXPLayoutBuilderModule, AXP_WIDGETS_ADVANCE_GROUP, createStringProperty, AXPWidgetsCatalog } from '@acorex/platform/layout/builder';
-import { AXButtonModule } from '@acorex/components/button';
 import * as i3 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
-import * as i2$1 from '@acorex/platform/workflow';
-import { AXPWorkflowService, AXPWorkflowAction, AXPWorkflowModule } from '@acorex/platform/workflow';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { AXPDesignerConnector, AXPDesignerService, AXPWidgetDesignerRendererDirective, AXPDesignerAddWidgetMiniButtonComponent } from '@acorex/platform/layout/designer';
-import { get, sortBy } from 'lodash-es';
+import { sortBy, get } from 'lodash-es';
 import { AXPopupService } from '@acorex/components/popup';
+import { AXButtonModule } from '@acorex/components/button';
 
-const AXMFormTemplateManagementModuleConst = {
-    moduleName: 'FormTemplateManagement',
-    moduleRoute: 'form-template-management',
-    i18n: 'form-template-management',
-    categoryEntity: 'Category',
-    templateEntity: 'Template',
-};
-
-class AXMFormTemplateManagementCategoryEntityService extends AXMEntityCrudServiceImpl {
-}
-class AXMFormTemplateManagementCategoryEntityServiceImpl extends AXMFormTemplateManagementCategoryEntityService {
-    constructor() {
-        super(`${AXMFormTemplateManagementModuleConst.moduleName}.${AXMFormTemplateManagementModuleConst.categoryEntity}`);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementCategoryEntityServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementCategoryEntityServiceImpl }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementCategoryEntityServiceImpl, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-class AXMFormTemplateManagementCategoryEntityModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementCategoryEntityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementCategoryEntityModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementCategoryEntityModule, providers: [
-            {
-                provide: AXMFormTemplateManagementCategoryEntityService,
-                useClass: AXMFormTemplateManagementCategoryEntityServiceImpl,
-            },
-        ] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementCategoryEntityModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [],
-                    exports: [],
-                    declarations: [],
-                    providers: [
-                        {
-                            provide: AXMFormTemplateManagementCategoryEntityService,
-                            useClass: AXMFormTemplateManagementCategoryEntityServiceImpl,
-                        },
-                    ],
-                }]
-        }] });
-
-class AXMFormTemplateManagementTemplateEntityService extends AXMEntityCrudServiceImpl {
-}
-class AXMFormTemplateManagementTemplateEntityServiceImpl extends AXMFormTemplateManagementTemplateEntityService {
+const AXP_TEMPLATE_WIDGET_PROVIDER = new InjectionToken('AXP_TEMPLATE_WIDGET_PROVIDER');
+class AXPTemplateWidgetProviderService {
     constructor() {
-        super(`${AXMFormTemplateManagementModuleConst.moduleName}.${AXMFormTemplateManagementModuleConst.templateEntity}`);
+        this.popupService = inject(AXPopupService);
+        this.providers = inject(AXP_TEMPLATE_WIDGET_PROVIDER, { optional: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementTemplateEntityServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementTemplateEntityServiceImpl }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementTemplateEntityServiceImpl, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-class AXMFormTemplateManagementTemplateEntityModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementTemplateEntityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementTemplateEntityModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementTemplateEntityModule, providers: [
-            {
-                provide: AXMFormTemplateManagementTemplateEntityService,
-                useClass: AXMFormTemplateManagementTemplateEntityServiceImpl,
-            },
-        ] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementTemplateEntityModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [],
-                    exports: [],
-                    declarations: [],
-                    providers: [
-                        {
-                            provide: AXMFormTemplateManagementTemplateEntityService,
-                            useClass: AXMFormTemplateManagementTemplateEntityServiceImpl,
-                        },
-                    ],
-                }]
-        }] });
-
-const AXMFormTemplateTypes = {
-    Form: { id: 10, title: 'Form Template' },
-    Widget: { id: 20, title: 'Widget Template' },
-};
-
-class AXMFormTemplateManagementModuleEntityProvider {
-    constructor() {
-        this.injector = inject(Injector);
+    async items(query) {
+        if (Array.isArray(this.providers)) {
+            const result = [];
+            for (const provider of this.providers) {
+                const items = await provider.items(query);
+                if (items) {
+                    result.push(...items);
+                }
+            }
+            return result;
+        }
+        else {
+            return [];
+        }
     }
-    async get(moduleName, entityName) {
-        if (moduleName == AXMFormTemplateManagementModuleConst.moduleName) {
-            switch (entityName) {
-                case AXMFormTemplateManagementModuleConst.categoryEntity:
-                    return (await import('./acorex-modules-form-template-management-category.entity-Cqu3urCo.mjs')).factory(this.injector);
-                case AXMFormTemplateManagementModuleConst.templateEntity:
-                    return (await import('./acorex-modules-form-template-management-template.entity-CGhbmYel.mjs')).factory(this.injector);
+    async get(id) {
+        if (Array.isArray(this.providers)) {
+            for (const provider of this.providers) {
+                const node = await provider.get(id);
+                if (node) {
+                    return node;
+                }
             }
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementModuleEntityProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementModuleEntityProvider }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementModuleEntityProvider, decorators: [{
-            type: Injectable
-        }] });
-
-class AXMMenuProvider {
-    constructor() {
-        this.entityService = inject(AXPEntityService);
-    }
-    async provide(context) {
-        const scope = AXMFormTemplateManagementModuleConst.i18n;
-        const moduleName = AXMFormTemplateManagementModuleConst.moduleName;
-        context.addItems([
-            {
-                priority: 9001,
-                text: `t('module-name', {scope:"${scope}"})`,
-                icon: 'fa-solid fa-file-invoice',
-                children: [
-                    {
-                        text: `t("categories", { scope: "common" })`,
-                        path: this.entityService.createPath(moduleName, AXMFormTemplateManagementModuleConst.categoryEntity),
-                        priority: 1,
-                    },
-                    {
-                        text: `t('templates', {scope:"${scope}"})`,
-                        path: this.entityService.createPath(moduleName, AXMFormTemplateManagementModuleConst.templateEntity),
-                        priority: 2,
-                    },
-                ],
+    async chooseTemplate() {
+        const com = await import('./acorex-modules-form-template-management-template-picker.component-CsGnikzF.mjs').then((c) => c.AXPTemplateWidgetPickerComponent);
+        const widgets = await this.items({
+            skip: 0,
+            take: 100,
+            filter: {
+                field: 'type.id',
+                value: 20,
+                operator: {
+                    type: 'equal',
+                }
+            }
+        });
+        const result = await this.popupService.open(com, {
+            title: 'Widget Template Gallery',
+            size: 'md',
+            closeButton: true,
+            data: {
+                widgets: sortBy(widgets, (c) => c.title),
             },
-        ]);
+        });
+        if (result.data) {
+            const selected = result.data?.widgets;
+            return selected[0];
+        }
+        return null;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateWidgetProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateWidgetProviderService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateWidgetProviderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-class AXPTemplateDesignerWidgetViewComponent extends AXPWidgetComponent {
+class AXPTemplateWidgetViewComponent extends AXPWidgetComponent {
     constructor() {
-        super(...arguments);
-        this.workflow = inject(AXPWorkflowService);
+        super();
+        this.metaKey = '__meta__';
+        this.templateProvider = inject(AXPTemplateWidgetProviderService);
+        this.templateId = computed(() => this.options()['templateId']);
+        this.nodes = signal([]);
+        //
+        effect(async () => {
+            this.nodes.set([]);
+            const value = this.getValue();
+            const templateId = get(value, `${this.metaKey}.templateId`) ?? this.templateId();
+            if (templateId) {
+                const item = await this.templateProvider.get(templateId);
+                if (item) {
+                    this.nodes.set(item.nodes);
+                }
+            }
+        });
     }
-    async handleClick() {
-        await this.workflow.execute('design-form-template', { data: { id: this.extractValue('id') } });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPTemplateWidgetViewComponent, isStandalone: true, selector: "axp-template-widget-view", usesInheritance: true, ngImport: i0, template: `
+    @for (node of nodes(); track $index) {
+      <ng-container axp-widget-renderer
+        [node]="node"
+        [parentNode]="this"
+        [mode]="this.mode"
+      >
+      </ng-container>
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateDesignerWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPTemplateDesignerWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <span
-      class="ax-underline ax-decoration-dotted  ax-underline-offset-8 hover:ax-text-primary-500 ax-cursor-pointer"
-      (click)="handleClick()"
-    >
-      {{ 't("edit-template",{ scope:"form-template-management" })' | translate  | async }}
+    @empty {
+    <span class="ax-underline ax-decoration-dotted  ax-underline-offset-8 ax-text-gray-400">
+      {{ 'empty-template' | translate : { scope: 'form-template-management' } | async }}
     </span>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateDesignerWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateWidgetViewComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'axp-template-widget-view',
                     template: `
-    <span
-      class="ax-underline ax-decoration-dotted  ax-underline-offset-8 hover:ax-text-primary-500 ax-cursor-pointer"
-      (click)="handleClick()"
-    >
-      {{ 't("edit-template",{ scope:"form-template-management" })' | translate  | async }}
+    @for (node of nodes(); track $index) {
+      <ng-container axp-widget-renderer
+        [node]="node"
+        [parentNode]="this"
+        [mode]="this.mode"
+      >
+      </ng-container>
+    }
+    @empty {
+    <span class="ax-underline ax-decoration-dotted  ax-underline-offset-8 ax-text-gray-400">
+      {{ 'empty-template' | translate : { scope: 'form-template-management' } | async }}
+    </span>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXPLayoutBuilderModule, AXTranslationModule]
+                }]
+        }], ctorParameters: () => [] });
+
+var templateWidgetView_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPTemplateWidgetViewComponent: AXPTemplateWidgetViewComponent
+});
+
+const AXP_DESIGNER_TEMPLATE_WIDGET_CHOOSE_MENU = {
+    text: 'Choose Template',
+    name: 'choose',
+    icon: 'fa-solid fa-folder-open',
+};
+class AXPTemplateWidgetDesignerComponent extends AXPWidgetComponent {
+    constructor() {
+        super();
+        this.templateProvider = inject(AXPTemplateWidgetProviderService);
+        this.designerService = inject(AXPDesignerService);
+        this.templateId = computed(() => this.options()['templateId']);
+        this.nodes = signal([]);
+        this.title = signal(null);
+        //
+        effect(async () => {
+            this.nodes.set([]);
+            if (this.templateId()) {
+                const item = await this.templateProvider.get(this.templateId());
+                if (item && item.nodes?.length > 0) {
+                    this.title.set(item.title);
+                    this.nodes.set(item.nodes);
+                }
+            }
+        });
+    }
+    // override async ngOnInit() {
+    //   super.ngOnInit();
+    //   if (!this.templateId()) {
+    //     this.handleChooseWidget();
+    //   }
+    // }
+    async handleChooseWidget() {
+        const result = await this.templateProvider.chooseTemplate();
+        if (result) {
+            this.designerService.update({
+                mode: 'update',
+                values: { options: { templateId: result.id } },
+                widget: this.node,
+            });
+        }
+    }
+    get __class() {
+        const cls = {};
+        //
+        cls[`ax-w-full`] = true;
+        cls[`ax-widget-outline`] = true;
+        //
+        cls[`ax-block`] = true;
+        return cls;
+    }
+    onContextMenu(context) {
+        const items = [
+            AXP_DESIGNER_TEMPLATE_WIDGET_CHOOSE_MENU
+        ];
+        items[items.length - 1].break = true;
+        context.items.unshift(...items);
+    }
+    async executeCommand(command) {
+        switch (command.name) {
+            case AXP_DESIGNER_TEMPLATE_WIDGET_CHOOSE_MENU.name:
+                await this.handleChooseWidget();
+                break;
+        }
+        return Promise.resolve();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateWidgetDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPTemplateWidgetDesignerComponent, isStandalone: true, selector: "axp-template-widget-designer", host: { properties: { "class": "this.__class" } }, providers: [
+            {
+                provide: AXPTemplateWidgetDesignerComponent,
+                useExisting: AXPWidgetComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    @if(nodes().length) {
+    <div class="ax-relative ax-block ax-w-full ax-pointer-events-none">
+      @for (node of nodes(); track $index) {
+      <ng-container axp-widget-designer-renderer [locked]="true" [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      }
+      <div
+        class="ax-absolute ax-top-0 ax-bottom-0 ax-left-0 ax-right-0 ax-bg-blue-400 ax-opacity-30 ax-flex ax-justify-center ax-items-center ax-z-[400]"
+      >
+        <span class="ax-capitalize ax-font-semibold ax-text-primary-700"> {{ title() }}</span>
+      </div>
+    </div>
+    } @else {
+    <axp-designer-add-widget-mini-button
+      class="ax-flex-1 ax-self-center ax-place-self-end"
+      (onClick)="handleChooseWidget()"
+    >
+    </axp-designer-add-widget-mini-button>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateWidgetDesignerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-template-widget-designer',
+                    template: `
+    @if(nodes().length) {
+    <div class="ax-relative ax-block ax-w-full ax-pointer-events-none">
+      @for (node of nodes(); track $index) {
+      <ng-container axp-widget-designer-renderer [locked]="true" [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
+      }
+      <div
+        class="ax-absolute ax-top-0 ax-bottom-0 ax-left-0 ax-right-0 ax-bg-blue-400 ax-opacity-30 ax-flex ax-justify-center ax-items-center ax-z-[400]"
+      >
+        <span class="ax-capitalize ax-font-semibold ax-text-primary-700"> {{ title() }}</span>
+      </div>
+    </div>
+    } @else {
+    <axp-designer-add-widget-mini-button
+      class="ax-flex-1 ax-self-center ax-place-self-end"
+      (onClick)="handleChooseWidget()"
+    >
+    </axp-designer-add-widget-mini-button>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        CommonModule,
+                        AXPLayoutBuilderModule,
+                        AXPWidgetDesignerRendererDirective,
+                        AXPDesignerAddWidgetMiniButtonComponent,
+                    ],
+                    providers: [
+                        {
+                            provide: AXPTemplateWidgetDesignerComponent,
+                            useExisting: AXPWidgetComponent,
+                        },
+                    ]
+                }]
+        }], ctorParameters: () => [], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+var templateWidgetDesigner_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPTemplateWidgetDesignerComponent: AXPTemplateWidgetDesignerComponent,
+    AXP_DESIGNER_TEMPLATE_WIDGET_CHOOSE_MENU: AXP_DESIGNER_TEMPLATE_WIDGET_CHOOSE_MENU
+});
+
+const AXPTemplateWidget = {
+    name: 'template',
+    title: 'Template',
+    type: 'container',
+    icon: 'fa-solid fa-file-invoice',
+    group: AXP_WIDGETS_ADVANCE_GROUP,
+    visible: true,
+    options: {
+        canInsert: false,
+    },
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        createStringProperty({
+            name: 'options.templateId',
+            title: 'Template',
+            group: AXP_BEHAVIOR_PROPERTY_GROUP,
+            visible: false,
+        }),
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return templateWidgetView_component; }).then((c) => c.AXPTemplateWidgetViewComponent),
+        },
+        edit: {
+            component: () => import('./acorex-modules-form-template-management-template-widget-edit.component-CVyFN7D9.mjs').then((c) => c.AXPTemplateWidgetEditComponent),
+        },
+        print: {
+            component: () => Promise.resolve().then(function () { return templateWidgetView_component; }).then((c) => c.AXPTemplateWidgetViewComponent),
+        },
+        designer: {
+            component: () => Promise.resolve().then(function () { return templateWidgetDesigner_component; }).then((c) => c.AXPTemplateWidgetDesignerComponent),
+        },
+    },
+};
+
+class AXPTemplateDesignerWidgetViewComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.workflow = inject(AXPWorkflowService);
+    }
+    async handleClick() {
+        await this.workflow.execute('design-form-template', { data: { id: this.extractValue('id') } });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateDesignerWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPTemplateDesignerWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <span
+      class="ax-underline ax-decoration-dotted  ax-underline-offset-8 hover:ax-text-primary-500 ax-cursor-pointer"
+      (click)="handleClick()"
+    >
+      {{ 't("edit-template",{ scope:"form-template-management" })' | translate  | async }}
+    </span>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateDesignerWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <span
+      class="ax-underline ax-decoration-dotted  ax-underline-offset-8 hover:ax-text-primary-500 ax-cursor-pointer"
+      (click)="handleClick()"
+    >
+      {{ 't("edit-template",{ scope:"form-template-management" })' | translate  | async }}
     </span>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -217,44 +387,184 @@ const AXPTemplateDesignerWidget = {
     }
 };
 
-const AXMCreateFormTemplateWorkflow = {
-    startStepId: 'create-form-template',
-    steps: {
-        "create-form-template": {
-            action: 'start-workflow',
-            input: {
-                workflow: "create-entity",
-                context: {
-                    redirect: true,
-                    entity: `${AXMFormTemplateManagementModuleConst.moduleName}.${AXMFormTemplateManagementModuleConst.templateEntity}`,
-                }
+const AXMFormTemplateManagementModuleConst = {
+    moduleName: 'FormTemplateManagement',
+    moduleRoute: 'form-template-management',
+    i18n: 'form-template-management',
+    categoryEntity: 'Category',
+    templateEntity: 'Template',
+};
+
+class AXMFormTemplateManagementCategoryEntityService extends AXMEntityCrudServiceImpl {
+}
+class AXMFormTemplateManagementCategoryEntityServiceImpl extends AXMFormTemplateManagementCategoryEntityService {
+    constructor() {
+        super(`${AXMFormTemplateManagementModuleConst.moduleName}.${AXMFormTemplateManagementModuleConst.categoryEntity}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementCategoryEntityServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementCategoryEntityServiceImpl }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementCategoryEntityServiceImpl, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class AXMFormTemplateManagementCategoryEntityModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementCategoryEntityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementCategoryEntityModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementCategoryEntityModule, providers: [
+            {
+                provide: AXMFormTemplateManagementCategoryEntityService,
+                useClass: AXMFormTemplateManagementCategoryEntityServiceImpl,
             },
-            nextSteps: [
-                {
-                    conditions: [{ type: 'SINGLE', expression: 'context.getOutput("result") == true' }],
-                    nextStepId: 'get-template-confirmaton',
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementCategoryEntityModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    exports: [],
+                    declarations: [],
+                    providers: [
+                        {
+                            provide: AXMFormTemplateManagementCategoryEntityService,
+                            useClass: AXMFormTemplateManagementCategoryEntityServiceImpl,
+                        },
+                    ],
+                }]
+        }] });
+
+class AXMFormTemplateManagementTemplateEntityService extends AXMEntityCrudServiceImpl {
+}
+class AXMFormTemplateManagementTemplateEntityServiceImpl extends AXMFormTemplateManagementTemplateEntityService {
+    constructor() {
+        super(`${AXMFormTemplateManagementModuleConst.moduleName}.${AXMFormTemplateManagementModuleConst.templateEntity}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementTemplateEntityServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementTemplateEntityServiceImpl }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementTemplateEntityServiceImpl, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class AXMFormTemplateManagementTemplateEntityModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementTemplateEntityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementTemplateEntityModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementTemplateEntityModule, providers: [
+            {
+                provide: AXMFormTemplateManagementTemplateEntityService,
+                useClass: AXMFormTemplateManagementTemplateEntityServiceImpl,
+            },
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementTemplateEntityModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    exports: [],
+                    declarations: [],
+                    providers: [
+                        {
+                            provide: AXMFormTemplateManagementTemplateEntityService,
+                            useClass: AXMFormTemplateManagementTemplateEntityServiceImpl,
+                        },
+                    ],
+                }]
+        }] });
+
+const AXMFormTemplateTypes = {
+    Form: { id: 10, title: 'Form Template' },
+    Widget: { id: 20, title: 'Widget Template' },
+};
+
+class AXMFormTemplateManagementModuleEntityProvider {
+    constructor() {
+        this.injector = inject(Injector);
+    }
+    preload() {
+        const { categoryEntity, templateEntity } = AXMFormTemplateManagementModuleConst;
+        const module = AXMFormTemplateManagementModuleConst.moduleName;
+        return [categoryEntity, templateEntity].map((entity) => ({ module, entity }));
+    }
+    async get(moduleName, entityName) {
+        if (moduleName == AXMFormTemplateManagementModuleConst.moduleName) {
+            switch (entityName) {
+                case AXMFormTemplateManagementModuleConst.categoryEntity:
+                    return (await import('./acorex-modules-form-template-management-category.entity-Cqu3urCo.mjs')).factory(this.injector);
+                case AXMFormTemplateManagementModuleConst.templateEntity:
+                    return (await import('./acorex-modules-form-template-management-template.entity-CrFYszl6.mjs')).factory(this.injector);
+            }
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementModuleEntityProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementModuleEntityProvider }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementModuleEntityProvider, decorators: [{
+            type: Injectable
+        }] });
+
+class AXMMenuProvider {
+    constructor() {
+        this.entityService = inject(AXPEntityService);
+    }
+    async provide(context) {
+        const scope = AXMFormTemplateManagementModuleConst.i18n;
+        const moduleName = AXMFormTemplateManagementModuleConst.moduleName;
+        context.addItems([
+            {
+                priority: 9001,
+                text: `t('module-name', {scope:"${scope}"})`,
+                icon: 'fa-solid fa-file-invoice',
+                children: [
+                    {
+                        text: `t("categories", { scope: "common" })`,
+                        path: this.entityService.createPath(moduleName, AXMFormTemplateManagementModuleConst.categoryEntity),
+                        priority: 1,
+                    },
+                    {
+                        text: `t('templates', {scope:"${scope}"})`,
+                        path: this.entityService.createPath(moduleName, AXMFormTemplateManagementModuleConst.templateEntity),
+                        priority: 2,
+                    },
+                ],
+            },
+        ]);
+    }
+}
+
+class AXMFormTemplateManagementSearchProvider extends AXPCommandSearchProvider {
+    constructor() {
+        super(...arguments);
+        this.commands = [
+            {
+                name: 'command',
+                title: 'Create New Form Template',
+                icon: 'fa-solid fa-plus',
+                data: {
+                    command: {
+                        name: 'create-entity',
+                        options: {
+                            entity: `${AXMFormTemplateManagementModuleConst.moduleName}.${AXMFormTemplateManagementModuleConst.templateEntity}`,
+                        },
+                    },
                 },
-            ],
-        },
-        "get-template-confirmaton": {
-            action: 'show-prompt-dialog',
-            input: {
-                title: 'Confirm Action',
-                message: `Would you like to proceed with starting template design?`,
-                type: 'primary',
             },
-            nextSteps: [
-                {
-                    conditions: [{ type: 'SINGLE', expression: 'context.getOutput("result") == true' }],
-                    nextStepId: 'template-design',
+            {
+                name: 'command',
+                title: 'Create form template category',
+                icon: 'fa-solid fa-plus',
+                data: {
+                    command: {
+                        name: 'create-entity',
+                        options: {
+                            entity: `${AXMFormTemplateManagementModuleConst.moduleName}.${AXMFormTemplateManagementModuleConst.categoryEntity}`,
+                        },
+                    },
                 },
-            ],
-        },
-        "template-design": {
-            action: 'open-form-template-designer',
-        },
-    },
-};
+            },
+        ];
+    }
+}
 
 class AXPDesignerConnectorImpl extends AXPDesignerConnector {
     constructor() {
@@ -284,397 +594,59 @@ class AXPDesignerConnectorImpl extends AXPDesignerConnector {
                 type: AXMFormTemplateTypes.Widget,
                 template: content.json,
                 categoryId: (await this.categoryEntityService.query()).items[0]?.id
-            }
-        });
-        return result.getOutput('result');
-    }
-    async load(id) {
-        const item = await this.templateEntityService.getOne(id);
-        if (item) {
-            return item.template;
-        }
-        else {
-            throw Error("Invalid Id");
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDesignerConnectorImpl, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDesignerConnectorImpl }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDesignerConnectorImpl, decorators: [{
-            type: Injectable
-        }] });
-
-class AXMOpenFormTemplateDesignerAction extends AXPWorkflowAction {
-    constructor() {
-        super(...arguments);
-        this.navigation = inject(AXPWorkflowNavigateAction);
-    }
-    async execute(context) {
-        const { id } = context.getVariable('data');
-        context.setVariable('payload', {
-            commands: `forms/designer?id=${id}`,
-            target: 'blank'
-        });
-        await this.navigation.execute(context);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOpenFormTemplateDesignerAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOpenFormTemplateDesignerAction }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOpenFormTemplateDesignerAction, decorators: [{
-            type: Injectable
-        }] });
-const AXMDesignFormTemplateWorkflow = {
-    startStepId: 'open-design-designer',
-    steps: {
-        "open-design-designer": {
-            action: 'open-form-template-designer',
-        },
-    },
-};
-
-class AXPTemplateWidgetProviderImpl {
-    constructor() {
-        this.service = inject(AXMFormTemplateManagementTemplateEntityService);
-    }
-    async items(query) {
-        const result = ((await this.service.query(query)).items).map(c => ({
-            id: c.id,
-            title: c.title,
-            group: {
-                name: c.categoryId,
-                order: 2,
-                title: get(c, 'category.title') ?? 'Custom'
-            },
-            description: c.description
-        }));
-        return result;
-    }
-    async get(id) {
-        const item = await this.service.getOne(id);
-        if (item) {
-            const document = JSON.parse(item.template);
-            const page = document?.children?.[0];
-            return {
-                id: item.id,
-                nodes: page?.children ?? [],
-                title: item.title,
-            };
-        }
-        else {
-            throw Error("Invalid Id");
-        }
-    }
-}
-
-const AXP_TEMPLATE_WIDGET_PROVIDER = new InjectionToken('AXP_TEMPLATE_WIDGET_PROVIDER');
-class AXPTemplateWidgetProviderService {
-    constructor() {
-        this.popupService = inject(AXPopupService);
-        this.providers = inject(AXP_TEMPLATE_WIDGET_PROVIDER, { optional: true });
-    }
-    async items(query) {
-        if (Array.isArray(this.providers)) {
-            const result = [];
-            for (const provider of this.providers) {
-                const items = await provider.items(query);
-                if (items) {
-                    result.push(...items);
-                }
-            }
-            return result;
-        }
-        else {
-            return [];
-        }
-    }
-    async get(id) {
-        if (Array.isArray(this.providers)) {
-            for (const provider of this.providers) {
-                const node = await provider.get(id);
-                if (node) {
-                    return node;
-                }
-            }
-        }
-        return null;
-    }
-    async chooseTemplate() {
-        const com = await import('./acorex-modules-form-template-management-template-picker.component-CsGnikzF.mjs').then((c) => c.AXPTemplateWidgetPickerComponent);
-        const widgets = await this.items({
-            skip: 0,
-            take: 100,
-            filter: {
-                field: 'type.id',
-                value: 20,
-                operator: {
-                    type: 'equal',
-                }
-            }
-        });
-        const result = await this.popupService.open(com, {
-            title: 'Widget Template Gallery',
-            size: 'md',
-            closeButton: true,
-            data: {
-                widgets: sortBy(widgets, (c) => c.title),
-            },
-        });
-        if (result.data) {
-            const selected = result.data?.widgets;
-            return selected[0];
-        }
-        return null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateWidgetProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateWidgetProviderService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateWidgetProviderService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class AXPTemplateWidgetViewComponent extends AXPWidgetComponent {
-    constructor() {
-        super();
-        this.metaKey = '__meta__';
-        this.templateProvider = inject(AXPTemplateWidgetProviderService);
-        this.templateId = computed(() => this.options()['templateId']);
-        this.nodes = signal([]);
-        //
-        effect(async () => {
-            this.nodes.set([]);
-            const value = this.getValue();
-            const templateId = get(value, `${this.metaKey}.templateId`) ?? this.templateId();
-            if (templateId) {
-                const item = await this.templateProvider.get(templateId);
-                if (item) {
-                    this.nodes.set(item.nodes);
-                }
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPTemplateWidgetViewComponent, isStandalone: true, selector: "axp-template-widget-view", usesInheritance: true, ngImport: i0, template: `
-    @for (node of nodes(); track $index) {
-      <ng-container axp-widget-renderer
-        [node]="node"
-        [parentNode]="this"
-        [mode]="this.mode"
-      >
-      </ng-container>
-    }
-    @empty {
-    <span class="ax-underline ax-decoration-dotted  ax-underline-offset-8 ax-text-gray-400">
-      {{ 'empty-template' | translate : { scope: 'form-template-management' } | async }}
-    </span>
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: i2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateWidgetViewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'axp-template-widget-view',
-                    template: `
-    @for (node of nodes(); track $index) {
-      <ng-container axp-widget-renderer
-        [node]="node"
-        [parentNode]="this"
-        [mode]="this.mode"
-      >
-      </ng-container>
-    }
-    @empty {
-    <span class="ax-underline ax-decoration-dotted  ax-underline-offset-8 ax-text-gray-400">
-      {{ 'empty-template' | translate : { scope: 'form-template-management' } | async }}
-    </span>
-    }
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXPLayoutBuilderModule, AXTranslationModule]
-                }]
-        }], ctorParameters: () => [] });
-
-var templateWidgetView_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPTemplateWidgetViewComponent: AXPTemplateWidgetViewComponent
-});
-
-const AXP_DESIGNER_TEMPLATE_WIDGET_CHOOSE_MENU = {
-    text: 'Choose Template',
-    name: 'choose',
-    icon: 'fa-solid fa-folder-open',
-};
-class AXPTemplateWidgetDesignerComponent extends AXPWidgetComponent {
-    constructor() {
-        super();
-        this.templateProvider = inject(AXPTemplateWidgetProviderService);
-        this.designerService = inject(AXPDesignerService);
-        this.templateId = computed(() => this.options()['templateId']);
-        this.nodes = signal([]);
-        this.title = signal(null);
-        //
-        effect(async () => {
-            this.nodes.set([]);
-            if (this.templateId()) {
-                const item = await this.templateProvider.get(this.templateId());
-                if (item && item.nodes?.length > 0) {
-                    this.title.set(item.title);
-                    this.nodes.set(item.nodes);
-                }
-            }
-        });
-    }
-    // override async ngOnInit() {
-    //   super.ngOnInit();
-    //   if (!this.templateId()) {
-    //     this.handleChooseWidget();
-    //   }
-    // }
-    async handleChooseWidget() {
-        const result = await this.templateProvider.chooseTemplate();
-        if (result) {
-            this.designerService.update({
-                mode: 'update',
-                values: { options: { templateId: result.id } },
-                widget: this.node,
-            });
+            }
+        });
+        return result.getOutput('result');
+    }
+    async load(id) {
+        const item = await this.templateEntityService.getOne(id);
+        if (item) {
+            return item.template;
+        }
+        else {
+            throw Error("Invalid Id");
         }
     }
-    get __class() {
-        const cls = {};
-        //
-        cls[`ax-w-full`] = true;
-        cls[`ax-widget-outline`] = true;
-        //
-        cls[`ax-block`] = true;
-        return cls;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDesignerConnectorImpl, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDesignerConnectorImpl }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDesignerConnectorImpl, decorators: [{
+            type: Injectable
+        }] });
+
+class AXPTemplateWidgetProviderImpl {
+    constructor() {
+        this.service = inject(AXMFormTemplateManagementTemplateEntityService);
     }
-    onContextMenu(context) {
-        const items = [
-            AXP_DESIGNER_TEMPLATE_WIDGET_CHOOSE_MENU
-        ];
-        items[items.length - 1].break = true;
-        context.items.unshift(...items);
+    async items(query) {
+        const result = ((await this.service.query(query)).items).map(c => ({
+            id: c.id,
+            title: c.title,
+            group: {
+                name: c.categoryId,
+                order: 2,
+                title: get(c, 'category.title') ?? 'Custom'
+            },
+            description: c.description
+        }));
+        return result;
     }
-    async executeCommand(command) {
-        switch (command.name) {
-            case AXP_DESIGNER_TEMPLATE_WIDGET_CHOOSE_MENU.name:
-                await this.handleChooseWidget();
-                break;
+    async get(id) {
+        const item = await this.service.getOne(id);
+        if (item) {
+            const document = JSON.parse(item.template);
+            const page = document?.children?.[0];
+            return {
+                id: item.id,
+                nodes: page?.children ?? [],
+                title: item.title,
+            };
+        }
+        else {
+            throw Error("Invalid Id");
         }
-        return Promise.resolve();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateWidgetDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPTemplateWidgetDesignerComponent, isStandalone: true, selector: "axp-template-widget-designer", host: { properties: { "class": "this.__class" } }, providers: [
-            {
-                provide: AXPTemplateWidgetDesignerComponent,
-                useExisting: AXPWidgetComponent,
-            },
-        ], usesInheritance: true, ngImport: i0, template: `
-    @if(nodes().length) {
-    <div class="ax-relative ax-block ax-w-full ax-pointer-events-none">
-      @for (node of nodes(); track $index) {
-      <ng-container axp-widget-designer-renderer [locked]="true" [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
-      }
-      <div
-        class="ax-absolute ax-top-0 ax-bottom-0 ax-left-0 ax-right-0 ax-bg-blue-400 ax-opacity-30 ax-flex ax-justify-center ax-items-center ax-z-[400]"
-      >
-        <span class="ax-capitalize ax-font-semibold ax-text-primary-700"> {{ title() }}</span>
-      </div>
-    </div>
-    } @else {
-    <axp-designer-add-widget-mini-button
-      class="ax-flex-1 ax-self-center ax-place-self-end"
-      (onClick)="handleChooseWidget()"
-    >
-    </axp-designer-add-widget-mini-button>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "directive", type: AXPWidgetDesignerRendererDirective, selector: "[axp-widget-designer-renderer]", inputs: ["parentNode", "index", "locked", "mode", "node"] }, { kind: "component", type: AXPDesignerAddWidgetMiniButtonComponent, selector: "axp-designer-add-widget-mini-button", outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateWidgetDesignerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'axp-template-widget-designer',
-                    template: `
-    @if(nodes().length) {
-    <div class="ax-relative ax-block ax-w-full ax-pointer-events-none">
-      @for (node of nodes(); track $index) {
-      <ng-container axp-widget-designer-renderer [locked]="true" [node]="node" [parentNode]="this" [mode]="this.mode"> </ng-container>
-      }
-      <div
-        class="ax-absolute ax-top-0 ax-bottom-0 ax-left-0 ax-right-0 ax-bg-blue-400 ax-opacity-30 ax-flex ax-justify-center ax-items-center ax-z-[400]"
-      >
-        <span class="ax-capitalize ax-font-semibold ax-text-primary-700"> {{ title() }}</span>
-      </div>
-    </div>
-    } @else {
-    <axp-designer-add-widget-mini-button
-      class="ax-flex-1 ax-self-center ax-place-self-end"
-      (onClick)="handleChooseWidget()"
-    >
-    </axp-designer-add-widget-mini-button>
-    }
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        CommonModule,
-                        AXPLayoutBuilderModule,
-                        AXPWidgetDesignerRendererDirective,
-                        AXPDesignerAddWidgetMiniButtonComponent,
-                    ],
-                    providers: [
-                        {
-                            provide: AXPTemplateWidgetDesignerComponent,
-                            useExisting: AXPWidgetComponent,
-                        },
-                    ]
-                }]
-        }], ctorParameters: () => [], propDecorators: { __class: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-var templateWidgetDesigner_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXPTemplateWidgetDesignerComponent: AXPTemplateWidgetDesignerComponent,
-    AXP_DESIGNER_TEMPLATE_WIDGET_CHOOSE_MENU: AXP_DESIGNER_TEMPLATE_WIDGET_CHOOSE_MENU
-});
-
-const AXPTemplateWidget = {
-    name: 'template',
-    title: 'Template',
-    type: 'container',
-    icon: 'fa-solid fa-file-invoice',
-    group: AXP_WIDGETS_ADVANCE_GROUP,
-    visible: true,
-    options: {
-        canInsert: false,
-    },
-    properties: [
-        AXP_NAME_PROPERTY,
-        AXP_DATA_PATH_PROPERTY,
-        createStringProperty({
-            name: 'options.templateId',
-            title: 'Template',
-            group: AXP_BEHAVIOR_PROPERTY_GROUP,
-            visible: false,
-        }),
-    ],
-    components: {
-        view: {
-            component: () => Promise.resolve().then(function () { return templateWidgetView_component; }).then((c) => c.AXPTemplateWidgetViewComponent),
-        },
-        edit: {
-            component: () => import('./acorex-modules-form-template-management-template-widget-edit.component-CVyFN7D9.mjs').then((c) => c.AXPTemplateWidgetEditComponent),
-        },
-        print: {
-            component: () => Promise.resolve().then(function () { return templateWidgetView_component; }).then((c) => c.AXPTemplateWidgetViewComponent),
-        },
-        designer: {
-            component: () => Promise.resolve().then(function () { return templateWidgetDesigner_component; }).then((c) => c.AXPTemplateWidgetDesignerComponent),
-        },
-    },
-};
 
 class AXMSettingProvider {
     async provide(context) {
@@ -736,6 +708,73 @@ class AXMSettingProvider {
     }
 }
 
+const AXMCreateFormTemplateWorkflow = {
+    startStepId: 'create-form-template',
+    steps: {
+        "create-form-template": {
+            action: 'start-workflow',
+            input: {
+                workflow: "create-entity",
+                context: {
+                    redirect: true,
+                    entity: `${AXMFormTemplateManagementModuleConst.moduleName}.${AXMFormTemplateManagementModuleConst.templateEntity}`,
+                }
+            },
+            nextSteps: [
+                {
+                    conditions: [{ type: 'SINGLE', expression: 'context.getOutput("result") == true' }],
+                    nextStepId: 'get-template-confirmaton',
+                },
+            ],
+        },
+        "get-template-confirmaton": {
+            action: 'show-prompt-dialog',
+            input: {
+                title: 'Confirm Action',
+                message: `Would you like to proceed with starting template design?`,
+                type: 'primary',
+            },
+            nextSteps: [
+                {
+                    conditions: [{ type: 'SINGLE', expression: 'context.getOutput("result") == true' }],
+                    nextStepId: 'template-design',
+                },
+            ],
+        },
+        "template-design": {
+            action: 'open-form-template-designer',
+        },
+    },
+};
+
+class AXMOpenFormTemplateDesignerAction extends AXPWorkflowAction {
+    constructor() {
+        super(...arguments);
+        this.navigation = inject(AXPWorkflowNavigateAction);
+    }
+    async execute(context) {
+        const { id } = context.getVariable('data');
+        context.setVariable('payload', {
+            commands: `forms/designer?id=${id}`,
+            target: 'blank'
+        });
+        await this.navigation.execute(context);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOpenFormTemplateDesignerAction, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOpenFormTemplateDesignerAction }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOpenFormTemplateDesignerAction, decorators: [{
+            type: Injectable
+        }] });
+const AXMDesignFormTemplateWorkflow = {
+    startStepId: 'open-design-designer',
+    steps: {
+        "open-design-designer": {
+            action: 'open-form-template-designer',
+        },
+    },
+};
+
 function routesFacory() {
     const routes = [
         {
@@ -781,7 +820,7 @@ class AXMFormTemplateManagementModule {
             },
             {
                 provide: AXPDesignerConnector,
-                useClass: AXPDesignerConnectorImpl
+                useClass: AXPDesignerConnectorImpl,
             },
             {
                 provide: AXP_TEMPLATE_WIDGET_PROVIDER,
@@ -792,24 +831,31 @@ class AXMFormTemplateManagementModule {
                 provide: AXP_SETTING_DEFINITION_PROVIDER,
                 useClass: AXMSettingProvider,
                 multi: true,
-            }
+            },
+            {
+                provide: AXP_SEARCH_PROVIDER,
+                useClass: AXMFormTemplateManagementSearchProvider,
+                multi: true,
+            },
+            // {
+            //   provide: AXP_SEARCH_DEFINITION_PROVIDER,
+            //   useClass: AXMFormTemplateManagementModuleSearchProvider,
+            //   multi: true,
+            // },
         ], imports: [AXPWidgetsModule,
             AXMFormTemplateManagementCategoryEntityModule,
             AXMFormTemplateManagementTemplateEntityModule,
             AXPLayoutBuilderModule.forChild({
-                widgets: [
-                    AXPTemplateDesignerWidget,
-                    AXPTemplateWidget
-                ]
+                widgets: [AXPTemplateDesignerWidget, AXPTemplateWidget],
             }),
             AXPWorkflowModule.forChild({
                 actions: {
-                    'open-form-template-designer': AXMOpenFormTemplateDesignerAction
+                    'open-form-template-designer': AXMOpenFormTemplateDesignerAction,
                 },
                 workflows: {
                     'create-form-template': AXMCreateFormTemplateWorkflow,
-                    'design-form-template': AXMDesignFormTemplateWorkflow
-                }
+                    'design-form-template': AXMDesignFormTemplateWorkflow,
+                },
             })] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMFormTemplateManagementModule, decorators: [{
@@ -820,20 +866,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXMFormTemplateManagementCategoryEntityModule,
                         AXMFormTemplateManagementTemplateEntityModule,
                         AXPLayoutBuilderModule.forChild({
-                            widgets: [
-                                AXPTemplateDesignerWidget,
-                                AXPTemplateWidget
-                            ]
+                            widgets: [AXPTemplateDesignerWidget, AXPTemplateWidget],
                         }),
                         AXPWorkflowModule.forChild({
                             actions: {
-                                'open-form-template-designer': AXMOpenFormTemplateDesignerAction
+                                'open-form-template-designer': AXMOpenFormTemplateDesignerAction,
                             },
                             workflows: {
                                 'create-form-template': AXMCreateFormTemplateWorkflow,
-                                'design-form-template': AXMDesignFormTemplateWorkflow
-                            }
-                        })
+                                'design-form-template': AXMDesignFormTemplateWorkflow,
+                            },
+                        }),
                     ],
                     exports: [],
                     declarations: [],
@@ -855,7 +898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         },
                         {
                             provide: AXPDesignerConnector,
-                            useClass: AXPDesignerConnectorImpl
+                            useClass: AXPDesignerConnectorImpl,
                         },
                         {
                             provide: AXP_TEMPLATE_WIDGET_PROVIDER,
@@ -866,7 +909,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             provide: AXP_SETTING_DEFINITION_PROVIDER,
                             useClass: AXMSettingProvider,
                             multi: true,
-                        }
+                        },
+                        {
+                            provide: AXP_SEARCH_PROVIDER,
+                            useClass: AXMFormTemplateManagementSearchProvider,
+                            multi: true,
+                        },
+                        // {
+                        //   provide: AXP_SEARCH_DEFINITION_PROVIDER,
+                        //   useClass: AXMFormTemplateManagementModuleSearchProvider,
+                        //   multi: true,
+                        // },
                     ],
                 }]
         }] });