@acorex/modules 20.3.0-next.7 → 20.3.0-next.8

package/fesm2022/acorex-modules-data-management.mjs

@@ -1,14 +1,16 @@
 import * as i0 from '@angular/core';
-import { inject, Injector, Injectable, computed, effect, HostBinding, ChangeDetectionStrategy, Component, NgModule, EventEmitter, signal, Output, Input } from '@angular/core';
+import { inject, Injector, Injectable, computed, effect, HostBinding, ChangeDetectionStrategy, Component, NgModule, EventEmitter, signal, Output, Input, input, output, viewChild } from '@angular/core';
 import { AXP_PERMISSION_DEFINITION_PROVIDER } from '@acorex/platform/auth';
 import { AXPSearchCommandProvider, createAllQueryView, createQueryView, AXPEntityCommandScope, AXPEntityQueryType, AXP_MENU_PROVIDER, AXP_SETTING_DEFINITION_PROVIDER, AXP_SEARCH_PROVIDER } from '@acorex/platform/common';
-import { AXPEntityService, AXMEntityCrudServiceImpl, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
+import { AXPDataSourceDefinitionProviderService, AXPDataGenerator, AXP_DATASOURCE_DEFINITION_PROVIDER, AXP_EXPRESSION_EVALUATOR_SCOPE_PROVIDER } from '@acorex/platform/core';
+import { AXPEntityService, AXMEntityCrudServiceImpl, ensureListActions, actionExists, AXP_ENTITY_ACTION_PLUGIN, AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
 import * as i4 from '@acorex/platform/layout/builder';
-import { AXPWidgetRegistryService, AXPWidgetsCatalog, AXP_WIDGETS_EDITOR_CATEGORY, AXPValueWidgetComponent, AXPLayoutBuilderModule, AXPWidgetGroupEnum } from '@acorex/platform/layout/builder';
+import { AXPWidgetRegistryService, AXPWidgetsCatalog, AXP_WIDGETS_EDITOR_CATEGORY, AXPValueWidgetComponent, AXPLayoutBuilderModule, AXPWidgetGroupEnum, AXPPageStatus } from '@acorex/platform/layout/builder';
+import { AXPQueryService } from '@acorex/platform/runtime';
 import { AXDataSource } from '@acorex/cdk/common';
 import { AXPWidgetsList } from '@acorex/modules/common';
-import { AXTranslationService } from '@acorex/core/translation';
-import { AXPDataSourceDefinitionProviderService, AXP_DATASOURCE_DEFINITION_PROVIDER } from '@acorex/platform/core';
+import * as i3$1 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY, AXP_LABEL_PROPERTY, AXP_READONLY_PROPERTY } from '@acorex/platform/widgets';
 import * as i2 from '@acorex/components/select-box';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
@@ -26,6 +28,9 @@ import { AXFormModule } from '@acorex/components/form';
 import * as i5 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import { moveItemInArray, AXDragDirective, AXDragHandleDirective, AXDropListDirective } from '@acorex/cdk/drag-drop';
+import { moveItemInArray as moveItemInArray$1, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
+import { AXPDataSelectorService, AXPDynamicFormComponent } from '@acorex/platform/layout/components';
+import { AXLabelModule } from '@acorex/components/label';
 
 const config = {
     i18n: 'data-management',
@@ -204,6 +209,32 @@ class AXMSearchCommandProvider extends AXPSearchCommandProvider {
     }
 }
 
+/**
+ * Metadata Evaluator Scope Provider
+ *
+ * Provides expression evaluation capabilities for metadata operations:
+ * - Get category IDs from context/expressions
+ * - Retrieve metadata by category IDs
+ * - Access category metadata inheritance
+ */
+class AXMMetadataEvaluatorScopeProvider {
+    constructor() {
+        this.queryService = inject(AXPQueryService);
+    }
+    async provide(context) {
+        context.addScope('metadata', {
+            getByCategoryIds: async (entityName, categoryIds) => {
+                const ids = Array.isArray(categoryIds) ? categoryIds : [categoryIds];
+                const result = await this.queryService.fetch('DataManagement:Metadata:GetCategoryInheritance', {
+                    entityName,
+                    categoryId: ids[0]
+                });
+                return result;
+            }
+        });
+    }
+}
+
 //#region ----   Column Definition Widget   ----
 const AXM_COLUMN_DEF_WIDGET = [
     {
@@ -3875,13 +3906,886 @@ class AXMDataSourceListDataSourceDefinition {
     }
 }
 
+const AXPMetaDataSelectorWidget = {
+    name: 'meta-data-selector-editor',
+    title: '@data-management:widgets.meta-data-selector.title',
+    categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    groups: [AXPWidgetGroupEnum.EntityWidget],
+    description: '@data-management:widgets.meta-data-selector.description',
+    icon: 'fa-light fa-list-check',
+    defaultFilterWidgetName: 'string-filter',
+    type: 'editor',
+    options: {
+        needLabel: false,
+    },
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return metaDataSelectorView_component; }).then((c) => c.AXPMetaDataSelectorWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return metaDataSelectorEdit_component; }).then((c) => c.AXPMetaDataSelectorWidgetEditComponent),
+        },
+        print: {
+            component: () => Promise.resolve().then(function () { return metaDataSelectorEdit_component; }).then((c) => c.AXPMetaDataSelectorWidgetEditComponent),
+        },
+    },
+};
+
+//#endregion
+class AXPMetaDataSelectorWidgetEditComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Services & Dependencies   ----
+        this.dataSelectorService = inject(AXPDataSelectorService);
+        this.metaDataService = inject(AXMMetaDataDefinitionService);
+        //#endregion
+        //#region ----   Computed Properties   ----
+        /**
+         * Check if the widget is in readonly mode
+         */
+        this.readonly = computed(() => this.options()['readonly'], ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        /**
+         * Convert raw value to MetaDataSelectorItem format for display
+         */
+        this.metaItems = computed(() => {
+            const value = this.getValue();
+            if (!Array.isArray(value)) {
+                return [];
+            }
+            return value.map((item, index) => ({
+                id: AXPDataGenerator.uuid(),
+                name: item.name,
+                title: item.title,
+                description: item.description,
+                interface: item.interface,
+                configuration: {
+                    isRequired: item.configuration?.isRequired ?? false,
+                    placeholder: item.configuration?.placeholder || '',
+                },
+                status: item.status || 'active',
+                order: item.order ?? index,
+                ...item
+            }));
+        }, ...(ngDevMode ? [{ debugName: "metaItems" }] : []));
+        //#endregion
+        //#region ----   Event Handlers   ----
+        /**
+         * Effect to handle status changes
+        */
+        this.#statusChanged = effect(() => {
+            if (this.layoutService.status() === AXPPageStatus.Submitting) {
+                const currentValue = this.getValue();
+                if (Array.isArray(currentValue)) {
+                    const cleanedValue = currentValue
+                        .filter(item => item.status !== 'deleted')
+                        .map(item => {
+                        const { isNewlyAdded, ...rest } = item;
+                        return rest;
+                    });
+                    this.setValue(cleanedValue);
+                }
+            }
+        }, ...(ngDevMode ? [{ debugName: "#statusChanged" }] : []));
+    }
+    //#endregion
+    //#region ----   Event Handlers   ----
+    /**
+     * Effect to handle status changes
+    */
+    #statusChanged;
+    /**
+     * Handle adding a new metadata item
+     */
+    async handleAddClick() {
+        try {
+            const dataSource = new AXDataSource({
+                key: 'id',
+                pageSize: 20,
+                load: async (e) => {
+                    const metaDataItems = await this.metaDataService.query(e);
+                    return {
+                        items: metaDataItems.items,
+                        total: metaDataItems.total
+                    };
+                }
+            });
+            // Open data selector
+            const result = await this.dataSelectorService.open({
+                title: '@data-management:meta-data-selector.select-items',
+                dataSource: dataSource,
+                columns: [
+                    {
+                        name: 'title',
+                        title: '@general:terms.title',
+                        visible: true,
+                        widget: {
+                            type: 'text-editor',
+                            options: {}
+                        }
+                    },
+                    {
+                        name: 'description',
+                        title: '@general:terms.description',
+                        visible: true,
+                        widget: {
+                            type: 'text-editor',
+                            options: {}
+                        }
+                    },
+                ],
+                selectionMode: 'multiple',
+                searchFields: ['title', 'description'],
+                allowCreate: false
+            });
+            // Add selected items to the current value
+            if (result?.items && result.items.length > 0) {
+                const currentValue = this.getValue() || [];
+                const newItems = result.items.map((item, index) => ({
+                    id: item.id,
+                    name: item.name,
+                    title: item.title,
+                    description: item.description,
+                    interface: item.interface,
+                    configuration: {},
+                    order: currentValue.length + index,
+                    isNewlyAdded: true, // Mark as newly added
+                }));
+                this.setValue([...currentValue, ...newItems]);
+            }
+        }
+        catch (error) {
+            console.error('Error loading meta-data:', error);
+        }
+    }
+    /**
+     * Handle removing a metadata item
+     */
+    handleItemRemove(item) {
+        this.removeMetaItem(item);
+    }
+    /**
+     * Handle reverting a deleted metadata item
+     */
+    handleItemRevert(item) {
+        item.status = 'active';
+        this.updateMetaItem(item);
+    }
+    /**
+     * Handle editing a metadata item (Phase 2 - will use AXPDynamicDialogService)
+     */
+    async handleItemEdit(item) {
+        // TODO: Phase 2 - Implement property editor popup
+        console.log('Edit item:', item);
+    }
+    /**
+     * Handle drag and drop reordering
+     */
+    handleDrop(event) {
+        const currentValue = this.getValue() || [];
+        moveItemInArray$1(currentValue, event.previousIndex, event.currentIndex);
+        // Update order property
+        const updatedItems = currentValue.map((item, index) => ({
+            ...item,
+            order: index
+        }));
+        this.setValue(updatedItems);
+    }
+    //#endregion
+    //#region ----   Utility Methods   ----
+    /**
+     * Remove a metadata item (mark as deleted if active, remove if already deleted)
+     */
+    removeMetaItem(item) {
+        const currentValue = this.getValue() || [];
+        // If item is newly added, always hard delete (remove completely)
+        if (item.isNewlyAdded) {
+            const updatedValue = currentValue.filter((meta) => meta.id !== item.id);
+            this.setValue(updatedValue);
+            return;
+        }
+        // For existing items (from database), use soft delete
+        if (item.status === 'active') {
+            // Mark as deleted instead of removing completely
+            const updatedValue = currentValue.map((meta) => meta.id === item.id ? { ...meta, status: 'deleted' } : meta);
+            this.setValue(updatedValue);
+        }
+        else {
+            // Remove completely if already marked as deleted
+            const updatedValue = currentValue.filter((meta) => meta.id !== item.id);
+            this.setValue(updatedValue);
+        }
+    }
+    /**
+     * Update a specific metadata item
+     */
+    updateMetaItem(item) {
+        const currentValue = this.getValue() || [];
+        const updatedValue = currentValue.map((meta) => meta.id === item.id ? { ...meta, ...item } : meta);
+        this.setValue(updatedValue);
+    }
+    //#endregion
+    //#region ----   Host Binding   ----
+    get __class() {
+        const cls = {};
+        cls[`ax-block`] = true;
+        cls[`ax-border`] = true;
+        cls[`ax-rounded-md`] = true;
+        cls[`ax-lightest-surface`] = true;
+        cls[`ax-flex-1`] = true;
+        return cls;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPMetaDataSelectorWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPMetaDataSelectorWidgetEditComponent, isStandalone: true, selector: "axp-meta-data-selector-widget-edit", host: { properties: { "class": "this.__class" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"axp-meta-data-selector-widget-edit\" *translate=\"let t\">\n  @if (!readonly()) {\n  <div class=\"__header\">\n    <ax-button class=\"ax-sm\" [text]=\"t('@data-management:actions.add-meta-data') | async\" [color]=\"'primary'\"\n      (onClick)=\"handleAddClick()\">\n      <ax-prefix>\n        <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n  </div>\n  }\n  <div class=\"__content\">\n    @if (metaItems().length === 0) {\n    <div class=\"__empty-state\">\n      <ax-icon class=\"__icon\" icon=\"fa-light fa-list-check\"></ax-icon>\n      <p class=\"__message\">{{ t('@data-management:meta-data-selector.no-items-selected') | async }}</p>\n    </div>\n    } @else {\n    <div class=\"__items-list\" cdkDropList (cdkDropListDropped)=\"handleDrop($event)\">\n      @for (item of metaItems(); track item.id) {\n      <div class=\"__meta-data-selector-item\" [class.__deleted]=\"item.status === 'deleted'\" cdkDrag>\n        <div class=\"__drag-handle\" cdkDragHandle>\n          <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n        </div>\n\n        <div class=\"__item-content\">\n          <div class=\"__item-header\">\n            <h4 class=\"__item-title\">{{ item.title }}</h4>\n            @if (item.configuration.isRequired) {\n            <span class=\"__required-badge\">{{ t('@data-management:meta-data-selector.required') | async }}</span>\n            }\n          </div>\n          @if (item.configuration.placeholder) {\n          <p class=\"__placeholder-text\">\n            {{ t('@data-management:meta-data-selector.placeholder') | async }}:\n            {{ item.configuration.placeholder }}\n          </p>\n          }\n        </div>\n\n        @if (!readonly()) {\n        <div class=\"__item-actions\">\n          @if (item.status === 'deleted') {\n          <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"warning\" (onClick)=\"handleItemRevert(item)\">\n            <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n          </ax-button>\n          } @else {\n          <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"accent3\" (onClick)=\"handleItemEdit(item)\">\n            <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n          </ax-button>\n\n          <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleItemRemove(item)\">\n            <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n          </ax-button>\n          }\n        </div>\n        }\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>", styles: [".axp-meta-data-selector-widget-edit .__header{display:flex;justify-content:flex-end;border-bottom-width:1px;padding:.5rem}.axp-meta-data-selector-widget-edit .__content{padding:.5rem}.axp-meta-data-selector-widget-edit .__content .__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:2rem;padding-bottom:2rem;text-align:center}.axp-meta-data-selector-widget-edit .__content .__empty-state .__icon{margin-bottom:.75rem;font-size:1.875rem;line-height:2.25rem;opacity:.65}.axp-meta-data-selector-widget-edit .__content .__empty-state .__message{font-size:.875rem;line-height:1.25rem;opacity:.65}.axp-meta-data-selector-widget-edit .__content .__items-list>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.__meta-data-selector-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;cursor:move;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__meta-data-selector-item:hover{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.__meta-data-selector-item.__deleted{background-color:rgb(var(--ax-sys-color-danger-lightest-surface));color:rgb(var(--ax-sys-color-on-danger-lightest-surface));border-color:rgb(var(--ax-sys-color-border-danger-lightest-surface))}.__meta-data-selector-item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;cursor:grab;align-items:center;justify-content:center}.__meta-data-selector-item .__drag-handle:active{cursor:grabbing}.__meta-data-selector-item .__item-content{flex:1 1 0%}.__meta-data-selector-item .__item-content .__item-header{margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem}.__meta-data-selector-item .__item-content .__item-header .__item-title{font-size:.875rem;line-height:1.25rem;font-weight:500}.__meta-data-selector-item .__item-content .__item-header .__required-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:500;--tw-bg-opacity: 1;background-color:rgb(255 237 213 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(154 52 18 / var(--tw-text-opacity, 1))}.__meta-data-selector-item .__item-content .__placeholder-text{font-size:.75rem;line-height:1rem}.__meta-data-selector-item .__item-actions{display:flex;gap:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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: AXDropdownModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "directive", type: 
+                // CDK DragDrop modules
+                CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPMetaDataSelectorWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-meta-data-selector-widget-edit', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXDropdownModule,
+                        AXTranslationModule,
+                        // CDK DragDrop modules
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragHandle,
+                    ], template: "<div class=\"axp-meta-data-selector-widget-edit\" *translate=\"let t\">\n  @if (!readonly()) {\n  <div class=\"__header\">\n    <ax-button class=\"ax-sm\" [text]=\"t('@data-management:actions.add-meta-data') | async\" [color]=\"'primary'\"\n      (onClick)=\"handleAddClick()\">\n      <ax-prefix>\n        <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n  </div>\n  }\n  <div class=\"__content\">\n    @if (metaItems().length === 0) {\n    <div class=\"__empty-state\">\n      <ax-icon class=\"__icon\" icon=\"fa-light fa-list-check\"></ax-icon>\n      <p class=\"__message\">{{ t('@data-management:meta-data-selector.no-items-selected') | async }}</p>\n    </div>\n    } @else {\n    <div class=\"__items-list\" cdkDropList (cdkDropListDropped)=\"handleDrop($event)\">\n      @for (item of metaItems(); track item.id) {\n      <div class=\"__meta-data-selector-item\" [class.__deleted]=\"item.status === 'deleted'\" cdkDrag>\n        <div class=\"__drag-handle\" cdkDragHandle>\n          <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n        </div>\n\n        <div class=\"__item-content\">\n          <div class=\"__item-header\">\n            <h4 class=\"__item-title\">{{ item.title }}</h4>\n            @if (item.configuration.isRequired) {\n            <span class=\"__required-badge\">{{ t('@data-management:meta-data-selector.required') | async }}</span>\n            }\n          </div>\n          @if (item.configuration.placeholder) {\n          <p class=\"__placeholder-text\">\n            {{ t('@data-management:meta-data-selector.placeholder') | async }}:\n            {{ item.configuration.placeholder }}\n          </p>\n          }\n        </div>\n\n        @if (!readonly()) {\n        <div class=\"__item-actions\">\n          @if (item.status === 'deleted') {\n          <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"warning\" (onClick)=\"handleItemRevert(item)\">\n            <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n          </ax-button>\n          } @else {\n          <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"accent3\" (onClick)=\"handleItemEdit(item)\">\n            <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n          </ax-button>\n\n          <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleItemRemove(item)\">\n            <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n          </ax-button>\n          }\n        </div>\n        }\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>", styles: [".axp-meta-data-selector-widget-edit .__header{display:flex;justify-content:flex-end;border-bottom-width:1px;padding:.5rem}.axp-meta-data-selector-widget-edit .__content{padding:.5rem}.axp-meta-data-selector-widget-edit .__content .__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:2rem;padding-bottom:2rem;text-align:center}.axp-meta-data-selector-widget-edit .__content .__empty-state .__icon{margin-bottom:.75rem;font-size:1.875rem;line-height:2.25rem;opacity:.65}.axp-meta-data-selector-widget-edit .__content .__empty-state .__message{font-size:.875rem;line-height:1.25rem;opacity:.65}.axp-meta-data-selector-widget-edit .__content .__items-list>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.__meta-data-selector-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;cursor:move;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__meta-data-selector-item:hover{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.__meta-data-selector-item.__deleted{background-color:rgb(var(--ax-sys-color-danger-lightest-surface));color:rgb(var(--ax-sys-color-on-danger-lightest-surface));border-color:rgb(var(--ax-sys-color-border-danger-lightest-surface))}.__meta-data-selector-item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;cursor:grab;align-items:center;justify-content:center}.__meta-data-selector-item .__drag-handle:active{cursor:grabbing}.__meta-data-selector-item .__item-content{flex:1 1 0%}.__meta-data-selector-item .__item-content .__item-header{margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem}.__meta-data-selector-item .__item-content .__item-header .__item-title{font-size:.875rem;line-height:1.25rem;font-weight:500}.__meta-data-selector-item .__item-content .__item-header .__required-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:500;--tw-bg-opacity: 1;background-color:rgb(255 237 213 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(154 52 18 / var(--tw-text-opacity, 1))}.__meta-data-selector-item .__item-content .__placeholder-text{font-size:.75rem;line-height:1rem}.__meta-data-selector-item .__item-actions{display:flex;gap:.25rem}\n"] }]
+        }], propDecorators: { __class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+var metaDataSelectorEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPMetaDataSelectorWidgetEditComponent: AXPMetaDataSelectorWidgetEditComponent
+});
+
+class AXPMetaDataSelectorWidgetViewComponent extends AXPValueWidgetComponent {
+    /**
+     * Returns a comma-separated list of selected meta titles.
+     * Extracting this logic into a getter keeps the template simple and
+     * avoids using arrow functions, which are not allowed in Angular
+     * interpolation expressions.
+     */
+    get display() {
+        const val = this.getValue();
+        return Array.isArray(val) ? val.map((v) => v.title || v.text).join(', ') : '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPMetaDataSelectorWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPMetaDataSelectorWidgetViewComponent, isStandalone: true, selector: "axp-meta-data-selector-widget-view", usesInheritance: true, ngImport: i0, template: `<span>{{ display }}</span>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPMetaDataSelectorWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-meta-data-selector-widget-view',
+                    template: `<span>{{ display }}</span>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AXDecoratorModule],
+                }]
+        }] });
+
+var metaDataSelectorView_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPMetaDataSelectorWidgetViewComponent: AXPMetaDataSelectorWidgetViewComponent
+});
+
+/**
+ * meta-data-selector plugin
+ * Notes:
+ * - Always ensures a 'meta-data' group and single-view section
+ * - Always ensures the property exists if missing
+ * - Uses provided configuration options; others are fixed
+ */
+const metaDataSelectorPlugin = {
+    name: 'meta-data-selector',
+    order: 60,
+    apply: (ctx, options) => {
+        const opts = options ?? {};
+        const field = opts.field && opts.field.trim().length > 0 ? opts.field : 'metaData';
+        const displayTitle = opts.title && opts.title.trim().length > 0 ? opts.title : 'Meta Data';
+        // Ensure group and section ids (unique per field)
+        const sectionId = `meta-data-${field}`;
+        const groupIdForProperty = `meta-data-${field}`;
+        const existingGroups = ctx.groups.list() ?? [];
+        if (!existingGroups.some((g) => g.id === groupIdForProperty)) {
+            ctx.groups.add({ id: groupIdForProperty, title: displayTitle });
+        }
+        // Ensure property exists (using meta-data-selector-editor interface)
+        const props = ctx.properties.list();
+        if (!props.some((p) => p.name === field)) {
+            ctx.properties.add({
+                name: field,
+                title: displayTitle,
+                groupId: groupIdForProperty,
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: 'meta-data-selector-editor',
+                        options: {
+                            allowMultiple: opts.allowMultiple ?? true,
+                            showRequired: opts.showRequired ?? true,
+                            showPlaceholder: opts.showPlaceholder ?? true,
+                            defaultConfiguration: opts.defaultConfiguration ?? {
+                                isRequired: false,
+                                placeholder: ''
+                            },
+                        },
+                    },
+                },
+                validations: [
+                    {
+                        rule: 'required',
+                    },
+                ],
+            });
+        }
+        // Ensure column exists
+        const cols = ctx.columns.list() ?? [];
+        if (!cols?.some((c) => c.name === field)) {
+            ctx.columns.add({ name: field });
+        }
+        // Ensure single view section and property layout exists
+        const sectionOrder = 9;
+        const colSpan = 12;
+        ctx.interfaces.master.single.update((single) => {
+            const next = single ?? { title: ctx.entity.title, sections: [], properties: [] };
+            next.sections = next.sections ?? [];
+            if (!next.sections.some((s) => s.id === sectionId)) {
+                next.sections.push({ id: sectionId, title: displayTitle, order: 200 });
+            }
+            next.properties = next.properties ?? [];
+            if (!next.properties.some((p) => p.name === field)) {
+                next.properties.push({
+                    name: field,
+                    layout: {
+                        label: { visible: false },
+                        positions: { lg: { colSpan, order: sectionOrder } },
+                    },
+                });
+            }
+            return next;
+        });
+        // Ensure create view includes the section and property layout
+        ctx.interfaces.master.create.update((create) => {
+            const next = create ?? { sections: [], properties: [] };
+            next.sections = next.sections ?? [];
+            if (!next.sections.some((s) => s.id === sectionId)) {
+                next.sections.push({ id: sectionId, title: displayTitle });
+            }
+            next.properties = next.properties ?? [];
+            if (!next.properties.some((p) => p.name === field)) {
+                next.properties.push({
+                    name: field,
+                    layout: {
+                        label: { visible: false },
+                        positions: { lg: { colSpan, order: 7 } },
+                    },
+                });
+            }
+            return next;
+        });
+        // Ensure update view includes the section and property layout
+        ctx.interfaces.master.modify.update((modify) => {
+            const next = modify ?? { sections: [], properties: [] };
+            next.sections = next.sections ?? [];
+            if (!next.sections.some((s) => s.id === sectionId)) {
+                next.sections.push({ id: sectionId, title: displayTitle });
+            }
+            next.properties = next.properties ?? [];
+            if (!next.properties.some((p) => p.name === field)) {
+                next.properties.push({
+                    name: field,
+                    layout: {
+                        label: { visible: false },
+                        positions: { lg: { colSpan, order: 7 } },
+                    },
+                });
+            }
+            return next;
+        });
+        // Ensure list action to open meta data selector popup exists
+        ensureListActions(ctx);
+        ctx.interfaces.update((i) => {
+            const actions = i.master.list.actions;
+            const cmdName = 'show-meta-data-selector-popup';
+            const actionName = `meta-data-${field}`;
+            if (!actionExists(actions, cmdName, actionName)) {
+                actions.push({
+                    name: actionName,
+                    title: opts.titleKey ?? opts.label ?? '@data-management:actions.configure-meta-data',
+                    command: {
+                        name: cmdName,
+                        options: {
+                            id: '{{ context.eval("id") }}',
+                            metaData: `{{ context.eval("${field}") }}`,
+                            allowMultiple: opts.allowMultiple ?? true,
+                            showRequired: opts.showRequired ?? true,
+                            showPlaceholder: opts.showPlaceholder ?? true,
+                            key: field,
+                            defaultConfiguration: opts.defaultConfiguration ?? {
+                                isRequired: false,
+                                placeholder: ''
+                            },
+                        },
+                    },
+                    priority: 'secondary',
+                    type: 'configure',
+                    scope: AXPEntityCommandScope.Individual,
+                });
+            }
+            return i;
+        });
+        // Stamp normalized config for middleware
+        ctx.entity.extensions ??= {};
+        ctx.entity.extensions.metaDataSelector ??= {};
+        ctx.entity.extensions.metaDataSelector[field] = {
+            title: displayTitle,
+            allowMultiple: opts.allowMultiple ?? true,
+            showRequired: opts.showRequired ?? true,
+            showPlaceholder: opts.showPlaceholder ?? true,
+            defaultConfiguration: opts.defaultConfiguration ?? {
+                isRequired: false,
+                placeholder: ''
+            }
+        };
+    },
+};
+
+const AXPMetaDataFormWidget = {
+    name: 'meta-data-form-editor',
+    title: '@data-management:widgets.meta-data-form.title',
+    categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    groups: [AXPWidgetGroupEnum.EntityWidget],
+    description: '@data-management:widgets.meta-data-form.description',
+    icon: 'fa-light fa-list-check',
+    defaultFilterWidgetName: 'string-filter',
+    type: 'editor',
+    options: {
+        needLabel: false,
+    },
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        AXP_READONLY_PROPERTY,
+        AXP_DISABLED_PROPERTY,
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return metaDataFormEdit_component; }).then((c) => c.AXPMetaDataFormWidgetEditComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return metaDataFormEdit_component; }).then((c) => c.AXPMetaDataFormWidgetEditComponent),
+        },
+        print: {
+            component: () => Promise.resolve().then(function () { return metaDataFormEdit_component; }).then((c) => c.AXPMetaDataFormWidgetEditComponent),
+        },
+    },
+};
+
+class AXPMetaDataFormWidgetEditComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Inputs   ----
+        /**
+         * Array of metadata definitions to render as form fields
+         */
+        this.definitions = computed(() => this.options()['definitions'] ?? [], ...(ngDevMode ? [{ debugName: "definitions" }] : []));
+        /**
+         * Form layout appearance (normal, compact, borderless)
+         */
+        this.layoutLook = input('borderless', ...(ngDevMode ? [{ debugName: "layoutLook" }] : []));
+        /**
+         * Form layout direction (vertical, horizontal, grid)
+         */
+        this.layoutDirection = input('vertical', ...(ngDevMode ? [{ debugName: "layoutDirection" }] : []));
+        /**
+         * Whether to group fields by category
+         */
+        this.groupByCategory = input(false, ...(ngDevMode ? [{ debugName: "groupByCategory" }] : []));
+        /**
+         * Whether to show category headers
+         */
+        this.showCategoryHeaders = input(false, ...(ngDevMode ? [{ debugName: "showCategoryHeaders" }] : []));
+        //#endregion
+        //#region ----   Outputs   ----
+        /**
+         * Emitted when form context changes
+         */
+        this.contextChange = output();
+        /**
+         * Emitted when form validity changes
+         */
+        this.validityChange = output();
+        //#endregion
+        //#region ----   Properties   ----
+        this.dynamicForm = viewChild(AXPDynamicFormComponent, ...(ngDevMode ? [{ debugName: "dynamicForm" }] : []));
+        //#endregion
+        //#region ----   Properties   ----
+        /**
+         * Form definition signal that only updates when structure actually changes
+         */
+        this.formDefinition = signal({ groups: [] }, ...(ngDevMode ? [{ debugName: "formDefinition" }] : []));
+    }
+    //#endregion
+    //#endregion
+    //#region ----   Lifecycle Methods   ----
+    ngOnInit() {
+        super.ngOnInit();
+        this.initializeFormDefinition();
+    }
+    //#endregion
+    //#region ----   Event Handlers   ----
+    /**
+     * Handle context change from dynamic form
+     */
+    onContextChange(context) {
+        this.contextChange.emit(context);
+        this.setValue(context);
+    }
+    /**
+     * Handle validity change from dynamic form
+     */
+    onValidityChange(isValid) {
+        this.validityChange.emit(isValid);
+    }
+    //#endregion
+    //#region ----   Private Methods   ----
+    /**
+     * Initialize form definition based on current inputs
+     */
+    initializeFormDefinition() {
+        const metadataDefinitions = this.definitions();
+        const groupByCategory = this.groupByCategory();
+        const showCategoryHeaders = this.showCategoryHeaders();
+        console.log('metadataDefinitions', metadataDefinitions);
+        let newFormDefinition;
+        if (groupByCategory) {
+            newFormDefinition = this.convertMetadataToGroupedFormDefinition(metadataDefinitions, showCategoryHeaders);
+        }
+        else {
+            newFormDefinition = this.convertMetadataToFlatFormDefinition(metadataDefinitions);
+        }
+        this.formDefinition.set(newFormDefinition);
+    }
+    /**
+     * Convert metadata definitions to grouped form definition
+     */
+    convertMetadataToGroupedFormDefinition(metadataDefinitions, showCategoryHeaders) {
+        const groups = [];
+        const categoryGroups = this.groupMetadataByCategory(metadataDefinitions);
+        for (const [categoryTitle, metadataItems] of categoryGroups) {
+            const parameters = metadataItems.map(item => this.convertMetadataToFieldDefinition(item));
+            groups.push({
+                name: this.sanitizeGroupName(categoryTitle),
+                title: showCategoryHeaders ? categoryTitle : undefined,
+                parameters
+            });
+        }
+        return { groups };
+    }
+    /**
+     * Convert metadata definitions to flat form definition (single group)
+     */
+    convertMetadataToFlatFormDefinition(metadataDefinitions) {
+        const parameters = metadataDefinitions.map(item => this.convertMetadataToFieldDefinition(item));
+        return {
+            groups: [{
+                    name: 'metadata-fields',
+                    title: undefined,
+                    parameters
+                }]
+        };
+    }
+    /**
+     * Group metadata definitions by category
+     */
+    groupMetadataByCategory(metadataDefinitions) {
+        const categoryGroups = new Map();
+        for (const metadata of metadataDefinitions) {
+            // For now, put all metadata in "General" group since categories might not be available
+            const generalGroup = categoryGroups.get('General') || [];
+            generalGroup.push(metadata);
+            categoryGroups.set('General', generalGroup);
+        }
+        return categoryGroups;
+    }
+    /**
+     * Convert single metadata definition to field definition
+     */
+    convertMetadataToFieldDefinition(metadata) {
+        const interfaceConfig = this.parseInterfaceConfig(metadata.interface);
+        return {
+            path: metadata.name,
+            title: metadata.title,
+            description: undefined, // metadata.description not available in current interface
+            widget: {
+                type: interfaceConfig.type || 'text-editor',
+                path: metadata.name,
+                options: {
+                    ...interfaceConfig.options,
+                    defaultValue: metadata.defaultValue,
+                    validations: this.parseValidations(metadata.interface)
+                }
+            }
+        };
+    }
+    /**
+     * Parse interface configuration from metadata
+     */
+    parseInterfaceConfig(interfaceValue) {
+        if (typeof interfaceValue === 'string') {
+            try {
+                return JSON.parse(interfaceValue || '{}');
+            }
+            catch (error) {
+                console.warn('Failed to parse interface config:', interfaceValue, error);
+                return {};
+            }
+        }
+        return interfaceValue || {};
+    }
+    /**
+     * Parse validations from interface configuration
+     */
+    parseValidations(interfaceValue) {
+        const config = this.parseInterfaceConfig(interfaceValue);
+        return config.options?.validations || [];
+    }
+    /**
+     * Sanitize group name for use as identifier
+     */
+    sanitizeGroupName(name) {
+        return name.toLowerCase().replace(/[^a-z0-9]/g, '-');
+    }
+    //#endregion
+    //#region ----   Public Methods   ----
+    /**
+     * Get the dynamic form component instance
+     */
+    getDynamicForm() {
+        return this.dynamicForm();
+    }
+    /**
+     * Validate the form
+     */
+    async validate() {
+        const form = this.dynamicForm();
+        if (form) {
+            return await form.validate();
+        }
+        return false;
+    }
+    /**
+     * Get current form context
+     */
+    getContext() {
+        const form = this.dynamicForm();
+        return form ? form.getContext() : {};
+    }
+    /**
+     * Update form context programmatically
+     */
+    updateContext(context) {
+        console.log('updateContext', context);
+        const form = this.dynamicForm();
+        if (form) {
+            form.updateContext(context);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPMetaDataFormWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.8", type: AXPMetaDataFormWidgetEditComponent, isStandalone: true, selector: "axp-meta-data-form-widget-edit", inputs: { layoutLook: { classPropertyName: "layoutLook", publicName: "layoutLook", isSignal: true, isRequired: false, transformFunction: null }, layoutDirection: { classPropertyName: "layoutDirection", publicName: "layoutDirection", isSignal: true, isRequired: false, transformFunction: null }, groupByCategory: { classPropertyName: "groupByCategory", publicName: "groupByCategory", isSignal: true, isRequired: false, transformFunction: null }, showCategoryHeaders: { classPropertyName: "showCategoryHeaders", publicName: "showCategoryHeaders", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contextChange: "contextChange", validityChange: "validityChange" }, viewQueries: [{ propertyName: "dynamicForm", first: true, predicate: AXPDynamicFormComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+        <axp-dynamic-form
+            [formDefinition]="formDefinition()"
+            [context]="getValue()"
+            [layoutLook]="layoutLook()"
+            [layoutDirection]="layoutDirection()"
+            (contextChange)="onContextChange($event)"
+            (validityChange)="onValidityChange($event)">
+        </axp-dynamic-form>     
+    `, isInline: true, dependencies: [{ kind: "component", type: AXPDynamicFormComponent, selector: "axp-dynamic-form", inputs: ["formDefinition", "context", "layoutLook", "layoutDirection", "layoutConfig"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPMetaDataFormWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-meta-data-form-widget-edit',
+                    template: `
+        <axp-dynamic-form
+            [formDefinition]="formDefinition()"
+            [context]="getValue()"
+            [layoutLook]="layoutLook()"
+            [layoutDirection]="layoutDirection()"
+            (contextChange)="onContextChange($event)"
+            (validityChange)="onValidityChange($event)">
+        </axp-dynamic-form>     
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AXPDynamicFormComponent, AXFormModule, AXLabelModule, AXPLayoutBuilderModule],
+                }]
+        }] });
+
+var metaDataFormEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPMetaDataFormWidgetEditComponent: AXPMetaDataFormWidgetEditComponent
+});
+
+/**
+ * meta-data-form plugin
+ * Notes:
+ * - Always ensures a 'meta-data-form' group and single-view section
+ * - Always ensures the property exists if missing
+ * - Uses provided configuration options; others are fixed
+ * - Requires path option to read meta-data form definition
+ * - field defaults to 'metaDataForm', title defaults to 'Meta Data Form'
+ */
+const metaDataFormPlugin = {
+    name: 'meta-data-form',
+    order: 60,
+    apply: (ctx, options) => {
+        if (!options?.path || options.path.trim().length === 0) {
+            throw new Error('meta-data-form plugin requires a path option to read meta-data form definition');
+        }
+        const field = options.field ?? 'metaDataForm';
+        const displayTitle = options.title ?? 'Meta Data Form';
+        // Ensure group and section ids (unique per field)
+        const sectionId = `meta-data-form-${field}`;
+        const groupIdForProperty = `meta-data-form-${field}`;
+        const existingGroups = ctx.groups.list() ?? [];
+        if (!existingGroups.some((g) => g.id === groupIdForProperty)) {
+            ctx.groups.add({ id: groupIdForProperty, title: displayTitle });
+        }
+        // Ensure property exists (using meta-data-form-editor interface)
+        const props = ctx.properties.list();
+        if (!props.some((p) => p.name === field)) {
+            ctx.properties.add({
+                name: field,
+                title: displayTitle,
+                groupId: groupIdForProperty,
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: 'meta-data-form-editor',
+                        options: {
+                            definitions: `{{ metadata.getByCategoryIds("${ctx.entity.module}.${ctx.entity.name}",context.eval('${options.path}')) }}`,
+                        },
+                    },
+                },
+            });
+        }
+        // Ensure column exists
+        // const cols = ctx.columns.list() ?? [];
+        // if (!cols?.some((c: any) => c.name === field)) {
+        //     ctx.columns.add({ name: field } as any);
+        // }
+        // Ensure single view section and property layout exists
+        const sectionOrder = 9;
+        const colSpan = 12;
+        ctx.interfaces.master.single.update((single) => {
+            const next = single ?? { title: ctx.entity.title, sections: [], properties: [] };
+            next.sections = next.sections ?? [];
+            if (!next.sections.some((s) => s.id === sectionId)) {
+                next.sections.push({ id: sectionId, title: displayTitle, order: 200 });
+            }
+            next.properties = next.properties ?? [];
+            if (!next.properties.some((p) => p.name === field)) {
+                next.properties.push({
+                    name: field,
+                    layout: {
+                        label: { visible: false },
+                        positions: { lg: { colSpan, order: sectionOrder } },
+                    },
+                });
+            }
+            return next;
+        });
+        // Ensure create view includes the section and property layout
+        ctx.interfaces.master.create.update((create) => {
+            const next = create ?? { sections: [], properties: [] };
+            next.sections = next.sections ?? [];
+            if (!next.sections.some((s) => s.id === sectionId)) {
+                next.sections.push({ id: sectionId, title: displayTitle });
+            }
+            next.properties = next.properties ?? [];
+            if (!next.properties.some((p) => p.name === field)) {
+                next.properties.push({
+                    name: field,
+                    layout: {
+                        label: { visible: false },
+                        positions: { lg: { colSpan, order: 7 } },
+                    },
+                });
+            }
+            return next;
+        });
+        // Ensure update view includes the section and property layout
+        ctx.interfaces.master.modify.update((modify) => {
+            const next = modify ?? { sections: [], properties: [] };
+            next.sections = next.sections ?? [];
+            if (!next.sections.some((s) => s.id === sectionId)) {
+                next.sections.push({ id: sectionId, title: displayTitle });
+            }
+            next.properties = next.properties ?? [];
+            if (!next.properties.some((p) => p.name === field)) {
+                next.properties.push({
+                    name: field,
+                    layout: {
+                        label: { visible: false },
+                        positions: { lg: { colSpan, order: 7 } },
+                    },
+                });
+            }
+            return next;
+        });
+        // Stamp normalized config for middleware
+        ctx.entity.extensions ??= {};
+        ctx.entity.extensions.metaDataForm ??= {};
+        ctx.entity.extensions.metaDataForm[field] = {
+            title: displayTitle,
+            path: options.path,
+        };
+    },
+};
+
+class AXMMetaDataFeatureModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXMMetaDataFeatureModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.8", ngImport: i0, type: AXMMetaDataFeatureModule, imports: [i4.AXPLayoutBuilderModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXMMetaDataFeatureModule, providers: [
+            { provide: AXP_ENTITY_ACTION_PLUGIN, multi: true, useValue: metaDataSelectorPlugin },
+            { provide: AXP_ENTITY_ACTION_PLUGIN, multi: true, useValue: metaDataFormPlugin },
+        ], imports: [AXPLayoutBuilderModule.forChild({
+                widgets: [AXPMetaDataSelectorWidget, AXPMetaDataFormWidget],
+            })] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXMMetaDataFeatureModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        AXPLayoutBuilderModule.forChild({
+                            widgets: [AXPMetaDataSelectorWidget, AXPMetaDataFormWidget],
+                        }),
+                    ],
+                    exports: [],
+                    declarations: [],
+                    providers: [
+                        { provide: AXP_ENTITY_ACTION_PLUGIN, multi: true, useValue: metaDataSelectorPlugin },
+                        { provide: AXP_ENTITY_ACTION_PLUGIN, multi: true, useValue: metaDataFormPlugin },
+                    ],
+                }]
+        }] });
+
 class AXMDataManagementModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXMDataManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.8", ngImport: i0, type: AXMDataManagementModule, imports: [i4.AXPLayoutBuilderModule, 
             // Entity Modules
             AXMQueryEntityModule,
             AXMDataSourceEntityModule,
-            AXMMetaDataDefinitionEntityModule] }); }
+            AXMMetaDataDefinitionEntityModule,
+            AXMMetaDataFeatureModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXMDataManagementModule, providers: [
             {
                 provide: AXP_MENU_PROVIDER,
@@ -3913,13 +4817,19 @@ class AXMDataManagementModule {
                 useClass: AXMDataSourceListDataSourceDefinition,
                 multi: true,
             },
+            {
+                provide: AXP_EXPRESSION_EVALUATOR_SCOPE_PROVIDER,
+                useClass: AXMMetadataEvaluatorScopeProvider,
+                multi: true,
+            },
         ], imports: [AXPLayoutBuilderModule.forChild({
                 widgets: [AXPQueryBuilderWidget, AXMColumnFilterSelectorWidget],
             }),
             // Entity Modules
             AXMQueryEntityModule,
             AXMDataSourceEntityModule,
-            AXMMetaDataDefinitionEntityModule] }); }
+            AXMMetaDataDefinitionEntityModule,
+            AXMMetaDataFeatureModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXMDataManagementModule, decorators: [{
             type: NgModule,
@@ -3932,6 +4842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                         AXMQueryEntityModule,
                         AXMDataSourceEntityModule,
                         AXMMetaDataDefinitionEntityModule,
+                        AXMMetaDataFeatureModule
                     ],
                     exports: [],
                     declarations: [],
@@ -3966,6 +4877,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                             useClass: AXMDataSourceListDataSourceDefinition,
                             multi: true,
                         },
+                        {
+                            provide: AXP_EXPRESSION_EVALUATOR_SCOPE_PROVIDER,
+                            useClass: AXMMetadataEvaluatorScopeProvider,
+                            multi: true,
+                        },
                     ]
                 }]
         }] });
@@ -3974,5 +4890,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXMColumnFilterSelectorWidget, AXMColumnFilterSelectorWidgetColumnComponent, AXMColumnFilterSelectorWidgetEditComponent, AXMColumnFilterSelectorWidgetFilterComponent, AXMColumnFilterSelectorWidgetPrintComponent, AXMColumnFilterSelectorWidgetViewComponent, AXMDataManagementModule, AXMDataSourceEntityModule, AXMDataSourceOutputType, AXMDataSourceService, AXMDataSourceServiceImpl, AXMDataSourceType, AXMEntityProvider, AXMMenuProvider, AXMMetaDataDefinitionEntityModule, AXMMetaDataDefinitionService, AXMPMetaDataDefinitionServiceImpl, AXMQueryEntityModule, AXMQueryService, AXMQueryServiceImpl, AXMSearchCommandProvider, AXMSettingProvider, AXM_COLUMN_DEF_WIDGET, AXM_FILTER_DEF_WIDGET, AXPQueryBuilderWidget, AXPQueryBuilderWidgetColumnComponent, AXPQueryBuilderWidgetDesignerComponent, AXPQueryBuilderWidgetEditComponent, AXPQueryBuilderWidgetViewComponent, RootConfig, dataSourceEntityFactory, metaDataDefinitionFactory, queryFactory };
+export { AXMColumnFilterSelectorWidget, AXMColumnFilterSelectorWidgetColumnComponent, AXMColumnFilterSelectorWidgetEditComponent, AXMColumnFilterSelectorWidgetFilterComponent, AXMColumnFilterSelectorWidgetPrintComponent, AXMColumnFilterSelectorWidgetViewComponent, AXMDataManagementModule, AXMDataSourceEntityModule, AXMDataSourceOutputType, AXMDataSourceService, AXMDataSourceServiceImpl, AXMDataSourceType, AXMEntityProvider, AXMMenuProvider, AXMMetaDataDefinitionEntityModule, AXMMetaDataDefinitionService, AXMMetaDataFeatureModule, AXMMetadataEvaluatorScopeProvider, AXMPMetaDataDefinitionServiceImpl, AXMQueryEntityModule, AXMQueryService, AXMQueryServiceImpl, AXMSearchCommandProvider, AXMSettingProvider, AXM_COLUMN_DEF_WIDGET, AXM_FILTER_DEF_WIDGET, AXPQueryBuilderWidget, AXPQueryBuilderWidgetColumnComponent, AXPQueryBuilderWidgetDesignerComponent, AXPQueryBuilderWidgetEditComponent, AXPQueryBuilderWidgetViewComponent, RootConfig, dataSourceEntityFactory, metaDataDefinitionFactory, queryFactory };
 //# sourceMappingURL=acorex-modules-data-management.mjs.map