@acorex/platform 19.2.12 → 19.2.15

package/fesm2022/acorex-platform-layout-entity.mjs

@@ -1,12 +1,14 @@
-import * as i2$1 from '@acorex/components/common';
+import { applySortArray, applyFilterArray, AXPExpressionEvaluatorService } from '@acorex/platform/core';
+import Dexie from 'dexie';
+import * as i1$4 from '@acorex/platform/common';
+import { AXPDataGenerator, resolveActionLook, AXPFilterOperatorMiddlewareService, AXPEntityCommandScope, getEntityInfo, AXPSettingService, AXPRefreshEvent, AXPSettingScope, AXPWorkflowNavigateAction, AXP_SEARCH_DEFINITION_PROVIDER, AXPToastAction } from '@acorex/platform/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, computed, signal, Injector, effect, Component, ChangeDetectionStrategy, HostBinding, DestroyRef, ViewChild, NgModule } from '@angular/core';
+import * as i2 from '@acorex/components/common';
 import { AXDataSource, AXCommonModule } from '@acorex/components/common';
 import { AXFormatService } from '@acorex/core/format';
-import * as i1$3 from '@acorex/platform/common';
-import { resolveActionLook, AXPFilterOperatorMiddlewareService, AXPExpressionEvaluatorService, AXPEntityCommandScope, getEntityInfo, AXPSettingService, AXPRefreshEvent, AXPSettingScope, AXPWorkflowNavigateAction, AXP_SEARCH_DEFINITION_PROVIDER, AXPToastAction } from '@acorex/platform/common';
-import * as i2$3 from '@acorex/platform/workflow';
+import * as i2$2 from '@acorex/platform/workflow';
 import { AXPWorkflowService, ofType, createWorkFlowEvent, AXPWorkflowAction, AXPWorkflowModule } from '@acorex/platform/workflow';
-import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, computed, signal, Injector, effect, Component, ChangeDetectionStrategy, HostBinding, DestroyRef, ViewChild, NgModule } from '@angular/core';
 import { get, cloneDeep, set, merge, isNil, sortBy } from 'lodash-es';
 import * as i7 from '@acorex/platform/layout/builder';
 import { AXPPageStatus, AXPWidgetRegistryService, AXPWidgetComponent, AXPLayoutBuilderModule, AXPColumnWidgetComponent, AXP_WIDGETS_EDITOR_GROUP, AXPWidgetsCatalog } from '@acorex/platform/layout/builder';
@@ -22,9 +24,9 @@ import { AXPlatform } from '@acorex/core/platform';
 import { RouterModule, ROUTES } from '@angular/router';
 import * as i1 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
-import * as i1$1 from '@angular/common';
+import * as i1$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@acorex/components/badge';
+import * as i1$1 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
 import * as i3 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
@@ -32,11 +34,12 @@ import * as i4 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i6$1 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
+import * as i5$1 from '@acorex/components/select-box';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
-import * as i2$2 from '@acorex/components/text-box';
+import * as i2$1 from '@acorex/components/text-box';
 import { AXTextBoxComponent, AXTextBoxModule } from '@acorex/components/text-box';
 import { AXValidationModule } from '@acorex/core/validation';
-import * as i1$2 from '@angular/forms';
+import * as i1$3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i5 from '@acorex/components/data-table';
 import { AXDataTableModule } from '@acorex/components/data-table';
@@ -47,6 +50,157 @@ import { AXSearchBoxModule } from '@acorex/components/search-box';
 import { AXP_DISABLED_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_NAME_PROPERTY } from '@acorex/platform/widgets';
 import { AXPWidgetPropertyViewerComponent } from '@acorex/platform/layout/designer';
 
+class AXPDexieEntityStorageService extends Dexie {
+    constructor() {
+        super('ACoreXPlatform');
+        this.version(1).stores({
+            'entity-store': '++id, entityName, [entityName+id]',
+        });
+    }
+    get dbName() {
+        return 'ACoreXPlatform';
+    }
+    async initial(entityName, collection) {
+        const exists = await this.table('entity-store').where({ entityName }).count();
+        if (exists === 0) {
+            await this.table('entity-store').bulkAdd(collection.map((item) => ({ ...item, entityName })));
+        }
+        return collection;
+    }
+    async getOne(entityName, id) {
+        return await this.table('entity-store').where({ entityName, id: id }).first();
+    }
+    async updateOne(entityName, id, keyValue) {
+        await this.table('entity-store').where({ entityName, id: id }).modify(keyValue);
+        return await this.getOne(entityName, id);
+    }
+    async deleteOne(entityName, id) {
+        await this.table('entity-store').where({ entityName, id: id }).delete();
+    }
+    async insertOne(entityName, entity) {
+        const uuid = AXPDataGenerator.uuid();
+        await this.table('entity-store').add({ ...entity, id: uuid, entityName });
+        return uuid;
+    }
+    async getAll(entityName) {
+        return await this.table('entity-store').where({ entityName }).toArray();
+    }
+    async query(entityName, request) {
+        let result = await this.table('entity-store').where({ entityName }).toArray();
+        if (request.sort && request.sort.length) {
+            result = applySortArray(result, request.sort);
+        }
+        result = applyFilterArray(result, request.filter ? [request.filter] : []);
+        return Promise.resolve({
+            total: result.length,
+            items: result.slice(request.skip, (request.skip ?? 0) + (request.take ?? 0)),
+        });
+    }
+}
+// export class AXPDexieTableStorageService extends Dexie implements AXPEntityStorageService {
+//   private schemaUpdateLock: Promise<void> = Promise.resolve();
+//   constructor() {
+//     super('ACoreXPlatform');
+//     // Initial empty version
+//     //this.version(1).stores({});
+//   }
+//   // Function to change the schema dynamically
+//   private async changeSchema(schemaChanges: { [tableName: string]: string | null }): Promise<void> {
+//     // Acquire schema update lock to ensure no other operations are performed while schema is changing
+//     this.schemaUpdateLock = this.schemaUpdateLock.then(async () => {
+//       console.log('Attempting schema change with:', schemaChanges);
+//       try {
+//         this.close();
+//         const newDb = new Dexie(this.name);
+//         // Extract current schema in Dexie format
+//         const currentSchema = this.tables.reduce((result, { name, schema }) => {
+//           result[name] = [schema.primKey.src, ...schema.indexes.map((idx) => idx.src)].join(',');
+//           return result;
+//         }, {} as { [tableName: string]: string });
+//         console.log('Current Schema:', currentSchema);
+//         // Define current schema version
+//         newDb.version(this.verno + 10).stores(currentSchema);
+//         // Define new schema version with schema changes
+//         const nextVersion = this.verno + 1;
+//         newDb.version(nextVersion).stores(schemaChanges);
+//         await newDb.open();
+//         // Reassign updated db instance
+//         Object.assign(this, newDb);
+//         console.log(`Schema updated. Current version: ${this.verno}`);
+//       } catch (error) {
+//         console.error('Error during schema change:', error);
+//         throw error;
+//       }
+//     });
+//     // Wait for schema change lock to complete
+//     await this.schemaUpdateLock;
+//   }
+//   private async ensureInitialized(entityName: string): Promise<void> {
+//     if (this.tables.findIndex((table) => table.name === entityName) == -1) {
+//       const schemaChanges: { [tableName: string]: string } = {};
+//       schemaChanges[entityName] = '++id';
+//       await this.changeSchema(schemaChanges);
+//     }
+//   }
+//   get dbName(): string {
+//     return 'ACoreXPlatform';
+//   }
+//   private async getTable<T>(entityName: string) {
+//     await this.ensureInitialized(entityName);
+//     return this.table<T, number>(entityName);
+//   }
+//   async initial<T = any>(entityName: string, collection: T[]): Promise<void> {
+//     const table = await this.getTable<T>(entityName);
+//     const exists = await table.count();
+//     if (exists === 0) {
+//       await table.bulkAdd(collection);
+//     }
+//   }
+//   async getOne<T = any>(entityName: string, id: string): Promise<T> {
+//     const table = await this.getTable<T>(entityName);
+//     return (await table.where({ id: parseInt(id) }).first()) as T;
+//   }
+//   async updateOne(entityName: string, id: string, keyValue: { [key: string]: any }): Promise<void> {
+//     const table = await this.getTable(entityName);
+//     await table.update(parseInt(id), keyValue);
+//   }
+//   async deleteOne(entityName: string, id: string): Promise<void> {
+//     const table = await this.getTable(entityName);
+//     await table.delete(parseInt(id));
+//   }
+//   async insertOne<T = any>(entityName: string, entity: T): Promise<void> {
+//     const table = await this.getTable<T>(entityName);
+//     await table.add(entity);
+//   }
+//   async getAll<T = any>(entityName: string): Promise<T[]> {
+//     const table = await this.getTable<T>(entityName);
+//     return await table.toArray();
+//   }
+// }
+
+const AXP_DATA_SEEDER_TOKEN = new InjectionToken('AXP_DATA_SEEDER_TOKEN');
+class AXPDataSeederService {
+    constructor() {
+        this.loader = inject(AXP_DATA_SEEDER_TOKEN, { optional: true });
+    }
+    async seed() {
+        if (Array.isArray(this.loader)) {
+            for (const loader of this.loader) {
+                await loader.seed();
+            }
+        }
+        else {
+            await this.loader?.seed();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDataSeederService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDataSeederService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDataSeederService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 const AXP_ENTITY_CONFIG_TOKEN = new InjectionToken('AXP_ENTITY_CONFIG_TOKEN');
 const AXP_ENTITY_DEFINITION_LOADER = new InjectionToken('AXP_ENTITY_DEFINITION_PROVIDER');
 class AXPEntityResolver {
@@ -156,7 +310,7 @@ class AXPEntityDetailListViewModel {
                         },
                     },
                 };
-                return await this.expressionEvaluator.evaluateExpression(this.parent.data, this.detailEntityConfig.hidden, scope);
+                return await this.expressionEvaluator.evaluate(this.detailEntityConfig.hidden, scope);
             }
             else {
                 return this.detailEntityConfig.hidden ?? false;
@@ -228,7 +382,7 @@ class AXPEntityDetailListViewModel {
                     },
                 },
             };
-            return await this.expressionEvaluator.evaluateExpression(parentData, actionData, scope);
+            return await this.expressionEvaluator.evaluate(actionData, scope);
         };
         this.initialize();
     }
@@ -510,6 +664,7 @@ class AXPEntityMasterCreateViewModel {
         this.commandOptions = commandOptions;
         this.entityDef = cloneDeep(this.config);
         this.workflow = this.injector.get(AXPWorkflowService);
+        this.expressionEvaluator = this.injector.get(AXPExpressionEvaluatorService);
         this.context = signal(this.initialData ?? {});
         this.options = signal(this.commandOptions ?? {});
         this.isInProgress = signal(false);
@@ -524,17 +679,33 @@ class AXPEntityMasterCreateViewModel {
         });
         if (!initialData)
             initialData = {};
-        this.config.properties
-            .filter((c) => c.schema.defaultValue != null)
-            .forEach((p) => {
-            if (typeof p.schema.defaultValue === 'function') {
-                const func = p.schema.defaultValue;
-                set(initialData, p.name, func(initialData));
+        const scope = {
+            context: {
+                eval: (path) => {
+                    return new Promise((resolve) => {
+                        setTimeout(() => {
+                            resolve(get(initialData, path));
+                        });
+                    });
+                },
+            },
+        };
+        const processDefault = async (value) => {
+            if (typeof value == 'function') {
+                return value();
             }
-            else {
-                set(initialData, p.name, p.schema.defaultValue);
+            else if (typeof value == 'string' && value.startsWith("{{")) {
+                return await this.expressionEvaluator.evaluate(value, scope);
             }
+            return value;
+        };
+        this.config.properties
+            .filter((c) => !isNil(c.schema.defaultValue))
+            .forEach(async (p) => {
+            const value = await processDefault(p.schema.defaultValue);
+            set(initialData, p.name, value);
         });
+        //
         this.context.set(initialData);
         this.options.set(commandOptions);
         //
@@ -785,8 +956,12 @@ class AXPEntityMasterListViewModel {
         const listViewSetting = await this.settings.get(this.settingEntityKey);
         if (listViewSetting) {
             const columns = listViewSetting.list.views[this.view().name].columns;
+            const pageSize = listViewSetting.list.views[this.view().name].pageSize;
             const columnVisibilityMap = new Map(columns.map((col) => [col.name, col.visible]));
             const columnWidthsMap = new Map(columns.map((col) => [col.name, col.width]));
+            // if (pageSize) {
+            //   this.dataSource.setPageSize(pageSize);
+            // }
             this.columns.update((prev) => prev
                 .map((c) => {
                 return { ...c, width: columnWidthsMap.get(c.name), visible: columnVisibilityMap.get(c.name) ?? c.visible };
@@ -831,6 +1006,21 @@ class AXPEntityMasterListViewModel {
                     },
                 }));
                 break;
+            case 'pageSize':
+                updateSettings((prev) => ({
+                    ...prev,
+                    list: {
+                        ...prev?.list,
+                        views: {
+                            ...prev?.list?.views,
+                            [this.view().name]: {
+                                ...prev?.list?.views?.[this.view().name],
+                                pageSize: data,
+                            },
+                        },
+                    },
+                }));
+                break;
             default:
                 break;
         }
@@ -850,10 +1040,10 @@ class AXPEntityMasterListViewModel {
         const actions = await Promise.all(this.allActions()
             .filter((a) => a.scope === AXPEntityCommandScope.Individual && a.priority === 'secondary')
             .map(async (a) => {
-            const isHidden = await this.expressionEvaluator.evaluateExpression(rowData, a.hidden, scope);
+            const isHidden = await this.expressionEvaluator.evaluate(a.hidden, scope);
             if (isHidden)
                 return null;
-            const disabled = await this.expressionEvaluator.evaluateExpression(rowData, a.disabled, scope);
+            const disabled = await this.expressionEvaluator.evaluate(a.disabled, scope);
             return { ...a, disabled };
         }));
         return actions.filter(Boolean);
@@ -1635,6 +1825,82 @@ const AXPEntityDetailViewModelResolver = (route, state, service = inject(AXPEnti
     return service.create(moduleName, entityName, id);
 };
 
+class AXPEntityStorageService {
+}
+class AXPEntityDataProvider {
+}
+class AXPEntityDataProviderImpl {
+    constructor(storageService, entityName) {
+        this.storageService = storageService;
+        this.entityName = entityName;
+    }
+    async initial(collection) {
+        await this.storageService.initial(this.entityName, collection);
+    }
+    getOne(id) {
+        return this.storageService.getOne(this.entityName, id);
+    }
+    getAll() {
+        return this.storageService.getAll(this.entityName);
+    }
+    query(request) {
+        return this.storageService.query(this.entityName, request);
+    }
+    updateOne(id, keyValue) {
+        return this.storageService.updateOne(this.entityName, id, keyValue);
+    }
+    deleteOne(id) {
+        return this.storageService.deleteOne(this.entityName, id);
+    }
+    insertOne(entity) {
+        return this.storageService.insertOne(this.entityName, entity);
+    }
+}
+class AXMEntityCrudService {
+}
+class AXMEntityCrudServiceImpl {
+    constructor(entityName) {
+        this.entityName = entityName;
+        this._storageService = inject(AXPEntityStorageService);
+        this.entityRegistery = inject(AXPEntityDefinitionRegistryService);
+        this._entityDataProvider = new AXPEntityDataProviderImpl(this._storageService, this.entityName);
+    }
+    async insertOne(request) {
+        return this._entityDataProvider.insertOne(request);
+    }
+    async getOne(id) {
+        return this._entityDataProvider.getOne(id);
+    }
+    async deleteOne(id) {
+        return this._entityDataProvider.deleteOne(id);
+    }
+    async updateOne(id, values) {
+        return this._entityDataProvider.updateOne(id, values);
+    }
+    async query(request = { skip: 0, take: 100 }) {
+        const [moduleName, entityName] = this._entityDataProvider.entityName.split('.');
+        const entityRef = await this.entityRegistery.resolve(moduleName, entityName);
+        if (entityRef.parentKey) {
+            if (!request.filter?.filters?.length && request.filter?.field !== entityRef.parentKey) {
+                request.filter = {
+                    value: true,
+                    field: entityRef.parentKey,
+                    operator: {
+                        type: 'isEmpty',
+                    },
+                };
+            }
+        }
+        return this._entityDataProvider.query(request);
+    }
+    // get entityDataProvider() {
+    //   return this._entityDataProvider;
+    // }
+    get storageService() {
+        return this._storageService;
+    }
+}
+
 class AXPEntityCommandSearchDefinitionProvider {
     async provide(context) {
         context.addDefinition('command', 'Commands', 'command', 'fa-solid fa-command', 1, {
@@ -1750,7 +2016,7 @@ class AXPLookupWidgetViewComponent extends AXPWidgetComponent {
         <ax-badge  [look]="'twotone'" [text]="item.text" color="primary"></ax-badge>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLookupWidgetViewComponent, decorators: [{
             type: Component,
@@ -1886,7 +2152,7 @@ class AXPLookupWidgetSelectorComponent extends AXBasePageComponent {
         }
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i2$1.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i5.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "parentField", "rowTemplate", "emptyTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i7.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i2.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i5.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "parentField", "rowTemplate", "emptyTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i7.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLookupWidgetSelectorComponent, decorators: [{
             type: Component,
@@ -2152,7 +2418,7 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
         this.isOpen.set(true);
         this.popupService
             .open(AXPLookupWidgetSelectorComponent, {
-            title: `${this.translateService.translateSync('widget.lookup.search')} ${this.translateService.translateSync(this.entityDef()?.formats.plural)}`,
+            title: `${this.translateService.translateSync('widget.lookup.search')} ${this.translateService.translateSync(this.entityDef()?.formats.plural ?? '')}`,
             size: (this.vm()?.columns().length ?? 0) > 3 ? 'lg' : 'md',
             data: {
                 vm: new AXPLookupWidgetSelectorViewModel(this.injector, this.entityDef(), this.filter),
@@ -2269,7 +2535,7 @@ class AXPLookupWidgetEditComponent extends AXPWidgetComponent {
         </ax-button>
       </ax-suffix>
     </ax-text-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i2$2.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i6$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i2$1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i6$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLookupWidgetEditComponent, decorators: [{
             type: Component,
@@ -2349,7 +2615,7 @@ class AXPLookupWidgetColumnComponent extends AXPColumnWidgetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLookupWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPLookupWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `
    <ax-badge [look]="'twotone'" [text]="rawValue" color="primary"></ax-badge>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLookupWidgetColumnComponent, decorators: [{
             type: Component,
@@ -2448,6 +2714,371 @@ const AXPLookupWidget = {
     },
 };
 
+class AXPTagableBoxWidgetColumnComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.internalValue = computed(() => (Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]));
+        this.multiple = computed(() => this.options()['multiple']);
+        // ویژگی‌های مرتبط با SelectBox
+        this.useSelectBox = computed(() => this.options()['useSelectBox']);
+        this.textField = computed(() => this.options()['textField'] ?? 'title');
+        // استخراج داده‌ها برای نمایش
+        this.getData = computed(() => {
+            if (!this.useSelectBox()) {
+                return [];
+            }
+            const value = this.getValue();
+            if (!value) {
+                return [];
+            }
+            return Array.isArray(value) ? value : [value];
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTagableBoxWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPTagableBoxWidgetColumnComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-flex ax-gap-1 ax-flex-wrap">
+      @if (useSelectBox() && getData().length > 0) { @for (item of getData(); track $index) {
+      <ax-badge [look]="'twotone'" [text]="item[textField()]" color="primary"></ax-badge>
+      } } @else { @if(multiple()) { @for (item of internalValue(); track $index) {
+      <span class="ax-bg-slate-100 ax-px-2 ax-py-1 ax-rounded ax-inline-block">{{ item }}</span>
+      } } @else {
+      <span class="ax-bg-slate-100 ax-px-2 ax-py-1 ax-rounded ax-inline-block">{{ internalValue()[0] }}</span>
+      } }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTagableBoxWidgetColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div class="ax-flex ax-gap-1 ax-flex-wrap">
+      @if (useSelectBox() && getData().length > 0) { @for (item of getData(); track $index) {
+      <ax-badge [look]="'twotone'" [text]="item[textField()]" color="primary"></ax-badge>
+      } } @else { @if(multiple()) { @for (item of internalValue(); track $index) {
+      <span class="ax-bg-slate-100 ax-px-2 ax-py-1 ax-rounded ax-inline-block">{{ item }}</span>
+      } } @else {
+      <span class="ax-bg-slate-100 ax-px-2 ax-py-1 ax-rounded ax-inline-block">{{ internalValue()[0] }}</span>
+      } }
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXBadgeModule],
+                    inputs: [],
+                }]
+        }] });
+
+var tagableBoxWidgetColumn_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPTagableBoxWidgetColumnComponent: AXPTagableBoxWidgetColumnComponent
+});
+
+class AXPTagableBoxWidgetEditComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.entityResolver = inject(AXPEntityResolver);
+        this.hasClearButton = computed(() => this.options()['hasClearButton']);
+        this.disabled = computed(() => this.options()['disabled']);
+        this.placeholder = computed(() => this.options()['placeholder']);
+        // پارامترهای SelectBox
+        this.moduleName = computed(() => this.options()['module']);
+        this.entityName = computed(() => this.options()['entity']);
+        this.allowSearch = computed(() => this.options()['allowSearch']);
+        // منبع داده برای SelectBox
+        this._dataSource = new AXDataSource({
+            load: async (e) => {
+                const entity = await this.entityResolver.get(this.moduleName(), this.entityName());
+                const func = entity?.queries.list?.execute;
+                const result = await func(e);
+                console.log(result);
+                return {
+                    items: result?.items || [],
+                    total: result?.total || 0,
+                };
+            },
+            pageSize: 10,
+        });
+    }
+    handleSelectValueChange(e) {
+        if (e.isUserInteraction) {
+            this.setValue(e.value);
+        }
+    }
+    addItem() { }
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTagableBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPTagableBoxWidgetEditComponent, isStandalone: true, selector: "axp-tagable-box-widget", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+      <!-- نمایش Select Box با دکمه اضافه کردن آیتم -->
+      <ax-select-box
+        class="ax-col-span-12"
+        [placeholder]="placeholder()"
+        [dataSource]="_dataSource"
+        [ngModel]="getValue()"
+        [valueField]="'name'"
+        [textField]="'title'"
+        [multiple]="true"
+        (onValueChanged)="handleSelectValueChange($event)"
+      >
+        @if (allowSearch()) {
+        <ax-search-box><ax-clear-button></ax-clear-button></ax-search-box>
+        } @if (hasClearButton()) {
+        <ax-clear-button></ax-clear-button>
+        } @for (validation of validationRules(); track $index) {
+        <ax-validation-rule
+          [rule]="validation.rule"
+          [message]="validation.options?.message"
+          [options]="validation.options"
+        ></ax-validation-rule>
+        }
+      </ax-select-box>
+      <ax-button
+        [text]="'افزودن آیتم جدید'"
+        look="twotone"
+        [disabled]="disabled()"
+        (onClick)="addItem()"
+        class="ax-col-start-8 md:ax-col-start-9 2xl:ax-col-start-10 ax-col-end-13"
+      >
+        <ax-prefix>
+          <ax-icon class="fa-solid fa-add"></ax-icon>
+        </ax-prefix>
+      </ax-button>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i6$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i5$1.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTagableBoxWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-tagable-box-widget',
+                    template: `
+    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+      <!-- نمایش Select Box با دکمه اضافه کردن آیتم -->
+      <ax-select-box
+        class="ax-col-span-12"
+        [placeholder]="placeholder()"
+        [dataSource]="_dataSource"
+        [ngModel]="getValue()"
+        [valueField]="'name'"
+        [textField]="'title'"
+        [multiple]="true"
+        (onValueChanged)="handleSelectValueChange($event)"
+      >
+        @if (allowSearch()) {
+        <ax-search-box><ax-clear-button></ax-clear-button></ax-search-box>
+        } @if (hasClearButton()) {
+        <ax-clear-button></ax-clear-button>
+        } @for (validation of validationRules(); track $index) {
+        <ax-validation-rule
+          [rule]="validation.rule"
+          [message]="validation.options?.message"
+          [options]="validation.options"
+        ></ax-validation-rule>
+        }
+      </ax-select-box>
+      <ax-button
+        [text]="'افزودن آیتم جدید'"
+        look="twotone"
+        [disabled]="disabled()"
+        (onClick)="addItem()"
+        class="ax-col-start-8 md:ax-col-start-9 2xl:ax-col-start-10 ax-col-end-13"
+      >
+        <ax-prefix>
+          <ax-icon class="fa-solid fa-add"></ax-icon>
+        </ax-prefix>
+      </ax-button>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        CommonModule,
+                        AXTextBoxModule,
+                        FormsModule,
+                        AXFormModule,
+                        AXDecoratorModule,
+                        AXValidationModule,
+                        AXButtonModule,
+                        AXSelectBoxModule,
+                        AXSearchBoxModule,
+                    ],
+                    inputs: [],
+                }]
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+var tagableBoxWidgetEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPTagableBoxWidgetEditComponent: AXPTagableBoxWidgetEditComponent
+});
+
+class AXPTagableBoxWidgetFilterComponent extends AXPWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTagableBoxWidgetFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPTagableBoxWidgetFilterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTagableBoxWidgetFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, FormsModule],
+                    inputs: [],
+                }]
+        }] });
+
+var tagableBoxWidgetFilter_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPTagableBoxWidgetFilterComponent: AXPTagableBoxWidgetFilterComponent
+});
+
+class AXPTagableBoxWidgetPrintComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.internalValue = computed(() => (Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]));
+        this.multiple = computed(() => this.options()['multiple']);
+        // ویژگی‌های مرتبط با SelectBox
+        this.useSelectBox = computed(() => this.options()['useSelectBox']);
+        this.textField = computed(() => this.options()['textField'] ?? 'title');
+        // استخراج داده‌ها برای نمایش
+        this.getData = computed(() => {
+            if (!this.useSelectBox()) {
+                return [];
+            }
+            const value = this.getValue();
+            if (!value) {
+                return [];
+            }
+            return Array.isArray(value) ? value : [value];
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTagableBoxWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPTagableBoxWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div>
+      @if (useSelectBox() && getData().length > 0) { @for (item of getData(); track $index) {
+      <span class="ax-bg-slate-100 ax-px-2 ax-py-1 ax-rounded ax-mr-2 ax-mb-2 ax-inline-block">{{
+        item[textField()]
+      }}</span>
+      } } @else { @if(multiple()) { @for (item of internalValue(); track $index) {
+      <span class="ax-bg-slate-100 ax-px-2 ax-py-1 ax-rounded ax-mr-2 ax-mb-2 ax-inline-block">{{ item }}</span>
+      } } @else {
+      <span class="ax-bg-slate-100 ax-px-2 ax-py-1 ax-rounded ax-mr-2 ax-mb-2 ax-inline-block">{{
+        internalValue()[0]
+      }}</span>
+      } }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTagableBoxWidgetPrintComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div>
+      @if (useSelectBox() && getData().length > 0) { @for (item of getData(); track $index) {
+      <span class="ax-bg-slate-100 ax-px-2 ax-py-1 ax-rounded ax-mr-2 ax-mb-2 ax-inline-block">{{
+        item[textField()]
+      }}</span>
+      } } @else { @if(multiple()) { @for (item of internalValue(); track $index) {
+      <span class="ax-bg-slate-100 ax-px-2 ax-py-1 ax-rounded ax-mr-2 ax-mb-2 ax-inline-block">{{ item }}</span>
+      } } @else {
+      <span class="ax-bg-slate-100 ax-px-2 ax-py-1 ax-rounded ax-mr-2 ax-mb-2 ax-inline-block">{{
+        internalValue()[0]
+      }}</span>
+      } }
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule],
+                    inputs: [],
+                }]
+        }] });
+
+var tagableBoxWidgetPrint_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPTagableBoxWidgetPrintComponent: AXPTagableBoxWidgetPrintComponent
+});
+
+class AXPTagableBoxWidgetViewComponent extends AXPWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.internalValue = computed(() => (Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]));
+        this.multiple = computed(() => this.options()['multiple']);
+        // ویژگی‌های مرتبط با SelectBox
+        this.useSelectBox = computed(() => this.options()['useSelectBox']);
+        this.textField = computed(() => this.options()['textField'] ?? 'title');
+        // استخراج داده‌ها برای نمایش
+        this.getData = computed(() => {
+            if (!this.useSelectBox()) {
+                return [];
+            }
+            const value = this.getValue();
+            if (!value) {
+                return [];
+            }
+            return Array.isArray(value) ? value : [value];
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTagableBoxWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPTagableBoxWidgetViewComponent, isStandalone: true, selector: "axp-tagable-box-widget", usesInheritance: true, ngImport: i0, template: `
+    @for (item of internalValue(); track $index) {
+    <ax-badge [look]="'twotone'" [text]="item" color="primary"></ax-badge>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTagableBoxWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-tagable-box-widget',
+                    template: `
+    @for (item of internalValue(); track $index) {
+    <ax-badge [look]="'twotone'" [text]="item" color="primary"></ax-badge>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXBadgeModule],
+                    inputs: [],
+                }]
+        }] });
+
+var tagableBoxWidgetView_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPTagableBoxWidgetViewComponent: AXPTagableBoxWidgetViewComponent
+});
+
+const AXPTagableBoxWidget = {
+    name: 'tagable-editor',
+    title: 'Tagable Box',
+    icon: 'fa-solid fa-tags',
+    description: 'Inputs text with tags',
+    group: AXP_WIDGETS_EDITOR_GROUP,
+    type: 'editor',
+    defaultFilterWidgetName: 'string-filter',
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return tagableBoxWidgetView_component; }).then((c) => c.AXPTagableBoxWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return tagableBoxWidgetEdit_component; }).then((c) => c.AXPTagableBoxWidgetEditComponent),
+        },
+        filter: {
+            component: () => Promise.resolve().then(function () { return tagableBoxWidgetFilter_component; }).then((c) => c.AXPTagableBoxWidgetFilterComponent),
+        },
+        column: {
+            component: () => Promise.resolve().then(function () { return tagableBoxWidgetColumn_component; }).then((c) => c.AXPTagableBoxWidgetColumnComponent),
+        },
+        print: {
+            component: () => Promise.resolve().then(function () { return tagableBoxWidgetPrint_component; }).then((c) => c.AXPTagableBoxWidgetPrintComponent),
+        },
+        designer: {
+            component: () => Promise.resolve().then(function () { return tagableBoxWidgetEdit_component; }).then((c) => c.AXPTagableBoxWidgetEditComponent),
+        },
+    },
+};
+
 class AXPWidgetSelectorWidgetEditComponent extends AXPWidgetComponent {
     constructor() {
         super(...arguments);
@@ -2512,7 +3143,7 @@ class AXPWidgetSelectorWidgetEditComponent extends AXPWidgetComponent {
     <axp-widget-property-viewer [widget]="selectedWidgetNode()!" (onChanged)="handleChangeWidget($event)">
     </axp-widget-property-viewer>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i2$2.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i6$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget"], outputs: ["onChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i2$1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i6$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget"], outputs: ["onChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetSelectorWidgetEditComponent, decorators: [{
             type: Component,
@@ -2897,6 +3528,7 @@ function routesFacory() {
 class AXPEntityModule {
     constructor(appInitService, injector) {
         const service = injector.get(AXPEntityDefinitionRegistryService);
+        const seederService = injector.get(AXPDataSeederService);
         appInitService.registerTask({
             name: 'layout-theme',
             statusText: 'Preload entities ...',
@@ -2905,9 +3537,16 @@ class AXPEntityModule {
                 service.preload();
             },
         });
+        appInitService.registerTask({
+            name: 'Seeder',
+            statusText: 'Seed Data ...',
+            run: async () => {
+                await seederService.seed();
+            },
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPEntityModule, deps: [{ token: i1$3.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPEntityModule, imports: [RouterModule, i2$3.AXPWorkflowModule, i7.AXPLayoutBuilderModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPEntityModule, deps: [{ token: i1$4.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPEntityModule, imports: [RouterModule, i2$2.AXPWorkflowModule, i7.AXPLayoutBuilderModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPEntityModule, providers: [
             {
                 provide: ROUTES,
@@ -2954,7 +3593,7 @@ class AXPEntityModule {
                 functions: {},
             }),
             AXPLayoutBuilderModule.forChild({
-                widgets: [AXPLookupWidget, AXPWidgetSelectorWidget],
+                widgets: [AXPLookupWidget, AXPWidgetSelectorWidget, AXPTagableBoxWidget],
             })] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPEntityModule, decorators: [{
@@ -2987,7 +3626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             functions: {},
                         }),
                         AXPLayoutBuilderModule.forChild({
-                            widgets: [AXPLookupWidget, AXPWidgetSelectorWidget],
+                            widgets: [AXPLookupWidget, AXPWidgetSelectorWidget, AXPTagableBoxWidget],
                         }),
                     ],
                     exports: [],
@@ -3014,7 +3653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i1$3.AXPAppStartUpService }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: i1$4.AXPAppStartUpService }, { type: i0.Injector }] });
 
 class AXPEntityService {
     constructor() {
@@ -3035,5 +3674,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPCreateEntityWorkflow, AXPDeleteEntityWorkflow, AXPEntityCommandTriggerViewModel, AXPEntityCreateEvent, AXPEntityCreatePopupAction, AXPEntityCreateSubmittedAction, AXPEntityCreateViewElementViewModel, AXPEntityCreateViewModelFactory, AXPEntityCreateViewSectionViewModel, AXPEntityDefinitionRegistryService, AXPEntityDeletedEvent, AXPEntityDetailListViewModel, AXPEntityDetailViewModelFactory, AXPEntityDetailViewModelResolver, AXPEntityListViewColumnViewModel, AXPEntityListViewModelFactory, AXPEntityListViewModelResolver, AXPEntityMasterCreateViewModel, AXPEntityMasterListViewModel, AXPEntityMasterListViewQueryViewModel, AXPEntityMasterSingleElementViewModel, AXPEntityMasterSingleViewGroupViewModel, AXPEntityMasterSingleViewModel, AXPEntityMasterUpdateElementViewModel, AXPEntityMasterUpdateViewModel, AXPEntityMasterUpdateViewModelFactory, AXPEntityMiddleware, AXPEntityMiddlewareDefault, AXPEntityModifyConfirmedAction, AXPEntityModifyEvent, AXPEntityModifySectionPopupAction, AXPEntityModule, AXPEntityPerformDeleteAction, AXPEntityResolver, AXPEntityService, AXPModifyEntitySectionWorkflow, AXPQuickEntityModifyPopupAction, AXPQuickModifyEntityWorkflow, AXPShowDetailViewAction, AXPShowDetailsViewWorkflow, AXPShowListViewAction, AXPShowListViewWorkflow, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER };
+export { AXMEntityCrudService, AXMEntityCrudServiceImpl, AXPCreateEntityWorkflow, AXPDataSeederService, AXPDeleteEntityWorkflow, AXPDexieEntityStorageService, AXPEntityCommandTriggerViewModel, AXPEntityCreateEvent, AXPEntityCreatePopupAction, AXPEntityCreateSubmittedAction, AXPEntityCreateViewElementViewModel, AXPEntityCreateViewModelFactory, AXPEntityCreateViewSectionViewModel, AXPEntityDataProvider, AXPEntityDataProviderImpl, AXPEntityDefinitionRegistryService, AXPEntityDeletedEvent, AXPEntityDetailListViewModel, AXPEntityDetailViewModelFactory, AXPEntityDetailViewModelResolver, AXPEntityListViewColumnViewModel, AXPEntityListViewModelFactory, AXPEntityListViewModelResolver, AXPEntityMasterCreateViewModel, AXPEntityMasterListViewModel, AXPEntityMasterListViewQueryViewModel, AXPEntityMasterSingleElementViewModel, AXPEntityMasterSingleViewGroupViewModel, AXPEntityMasterSingleViewModel, AXPEntityMasterUpdateElementViewModel, AXPEntityMasterUpdateViewModel, AXPEntityMasterUpdateViewModelFactory, AXPEntityMiddleware, AXPEntityMiddlewareDefault, AXPEntityModifyConfirmedAction, AXPEntityModifyEvent, AXPEntityModifySectionPopupAction, AXPEntityModule, AXPEntityPerformDeleteAction, AXPEntityResolver, AXPEntityService, AXPEntityStorageService, AXPModifyEntitySectionWorkflow, AXPQuickEntityModifyPopupAction, AXPQuickModifyEntityWorkflow, AXPShowDetailViewAction, AXPShowDetailsViewWorkflow, AXPShowListViewAction, AXPShowListViewWorkflow, AXP_DATA_SEEDER_TOKEN, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER };
 //# sourceMappingURL=acorex-platform-layout-entity.mjs.map