@acorex/modules 21.0.0-next.16 → 21.0.0-next.18

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

@@ -39,9 +39,9 @@ import { AXSearchBoxModule } from '@acorex/components/search-box';
 import * as i4$2 from '@acorex/components/text-area';
 import { AXTextAreaModule } from '@acorex/components/text-area';
 import { AXFormModule } from '@acorex/components/form';
+import { AXPLayoutRendererComponent, AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
 import { moveItemInArray as moveItemInArray$1, transferArrayItem, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import { AXDialogService } from '@acorex/components/dialog';
-import { AXPLayoutBuilderService, AXPLayoutRendererComponent } from '@acorex/platform/layout/builder';
 
 const config = {
     i18n: 'data-management',
@@ -91,6 +91,19 @@ const RootConfig = {
             title: '@general:terms.common.tag',
             icon: 'fa-light fa-tags',
         },
+        equipmentCategory: {
+            name: 'EquipmentCategory',
+            title: '@data-management:equipments.entities.equipment-category.title',
+            titlePlural: '@data-management:equipments.entities.equipment-category.plural',
+            icon: 'fa-light fa-folder-tree',
+        },
+        equipment: {
+            name: 'Equipment',
+            source: 'DataManagement.Equipment',
+            title: '@data-management:equipments.entities.equipment.title',
+            titlePlural: '@data-management:equipments.entities.equipment.plural',
+            icon: 'fa-light fa-plug',
+        },
     },
 };
 
@@ -1384,6 +1397,7 @@ const AXMDataManagementFeatureKeys = {
     Queries: 'DataManagement:Feature:Queries',
     DataSources: 'DataManagement:Feature:DataSources',
     MetaDataDefinitions: 'DataManagement:Feature:MetaDataDefinitions',
+    Equipments: 'DataManagement:Feature:Equipments',
 };
 
 //#region ----   Imports   ----
@@ -1416,6 +1430,13 @@ class AXPDataManagementFeatureDefinitionProvider {
             defaultValue: true,
             type: 'boolean',
         });
+        // Equipments feature
+        context.addFeature(AXMDataManagementFeatureKeys.Equipments, {
+            title: '@data-management:features.equipments.title',
+            description: '@data-management:features.equipments.description',
+            defaultValue: true,
+            type: 'boolean',
+        });
     }
 }
 //#endregion
@@ -1431,6 +1452,9 @@ const AXMPermissionsKeys = {
         MetaDataDefinition: {
             Management: 'DataManagement:Permission:MetaDataDefinition.Management',
         },
+        Equipment: {
+            Management: 'DataManagement:Permission:Equipment.Management',
+        },
         Tag: {
             Management: 'DataManagement:Permission:Tag.Management',
         },
@@ -1455,6 +1479,8 @@ class AXMPermissionDefinitionProvider {
         const transMetaData = async (key) => await this.translateService.translateAsync(`@data-management:metadata-definitions.permissions.metadata-definitions.${key}`);
         // Tag permissions
         const transTag = async (key) => await this.translateService.translateAsync(`@data-management:tags.permissions.tags.${key}`);
+        // Equipment permissions
+        const transEquipment = async (key) => await this.translateService.translateAsync(`@data-management:equipments.permissions.equipments.${key}`);
         context
             .addGroup(RootConfig.module.name, moduleTitle, moduleDescription)
             //
@@ -1467,6 +1493,9 @@ class AXMPermissionDefinitionProvider {
             .addPermission(keys.MetaDataDefinition.Management, await transMetaData('actions.manage.title'), await transMetaData('actions.manage.description'))
             .endPermission()
             //
+            .addPermission(keys.Equipment.Management, await transEquipment('actions.manage.title'), await transEquipment('actions.manage.description'))
+            .endPermission()
+            //
             .addPermission(keys.Tag.Management, await transTag('actions.manage.title'), await transTag('actions.manage.description'))
             .endPermission()
             //
@@ -1484,6 +1513,8 @@ const AXPDataManagementMenuKeys = {
     Queries: 'DataManagement:Menu:Queries',
     DataSources: 'DataManagement:Menu:DataSources',
     MetaDataDefinitions: 'DataManagement:Menu:MetaDataDefinitions',
+    Equipments: 'DataManagement:Menu:Equipments',
+    EquipmentCategories: 'DataManagement:Menu:EquipmentCategories',
     Tags: 'DataManagement:Menu:Tags',
 };
 
@@ -1536,12 +1567,35 @@ class AXMMenuProvider {
                             permissions: [AXMPermissionsKeys.DataManagement.MetaDataDefinition.Management],
                         },
                     },
+                    // Equipments & Equipment Categories (commented out)
+                    // {
+                    //   name: AXPDataManagementMenuKeys.Equipments,
+                    //   text: '@data-management:equipments.menus.equipments.title',
+                    //   path: this.entityService.createPath(RootConfig.module.name, RootConfig.entities.equipment.name),
+                    //   icon: RootConfig.entities.equipment.icon,
+                    //   priority: 9006,
+                    //   policy: {
+                    //     features: [AXMDataManagementFeatureKeys.Equipments],
+                    //     permissions: [AXMPermissionsKeys.DataManagement.Equipment.Management],
+                    //   },
+                    // },
+                    // {
+                    //   name: AXPDataManagementMenuKeys.EquipmentCategories,
+                    //   text: '@data-management:equipments.menus.equipment-categories.title',
+                    //   path: this.entityService.createPath(RootConfig.module.name, RootConfig.entities.equipmentCategory.name),
+                    //   icon: RootConfig.entities.equipmentCategory.icon,
+                    //   priority: 9007,
+                    //   policy: {
+                    //     features: [AXMDataManagementFeatureKeys.Equipments],
+                    //     permissions: [AXMPermissionsKeys.DataManagement.Equipment.Management],
+                    //   },
+                    // },
                     {
                         name: AXPDataManagementMenuKeys.Tags,
                         text: '@general:terms.common.tags',
                         icon: RootConfig.entities.tag.icon,
                         path: this.entityService.createPath(RootConfig.module.name, RootConfig.entities.tag.name),
-                        priority: 9006,
+                        priority: 9008,
                         policy: {
                             permissions: [AXMPermissionsKeys.DataManagement.Tag.Management],
                         },
@@ -1574,6 +1628,8 @@ class AXMEntityProvider {
                     return (await Promise.resolve().then(function () { return metaDataDefinition_entity; })).metaDataDefinitionFactory(this.injector);
                 case RootConfig.entities.tag.name:
                     return (await Promise.resolve().then(function () { return tag_entity; })).factory(this.injector);
+                case RootConfig.entities.equipment.name:
+                    return (await Promise.resolve().then(function () { return equipment_entity; })).equipmentFactory(this.injector);
             }
         }
         return null;
@@ -4299,6 +4355,179 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 //#region ----   Tag Entity Types   ----
 //#endregion
 
+//#region ----   Imports   ----
+//#endregion
+async function equipmentFactory(injector) {
+    const entityDef = {
+        module: RootConfig.module.name,
+        name: RootConfig.entities.equipment.name,
+        title: RootConfig.entities.equipment.title,
+        icon: RootConfig.entities.equipment.icon,
+        formats: {
+            individual: RootConfig.entities.equipment.title,
+            plural: RootConfig.entities.equipment.titlePlural,
+            displayName: RootConfig.entities.equipment.title,
+            searchResult: {
+                title: '{{ title }} ({{ code }})',
+                description: RootConfig.module.title,
+            },
+        },
+        plugins: [
+            { name: 'history' },
+            { name: 'lock' },
+            { name: 'compare' },
+            { name: 'clone' },
+            {
+                name: 'category',
+                options: {
+                    appearance: { icon: true, color: true },
+                    metaData: { enabled: true },
+                },
+            },
+            {
+                name: 'meta-data-form',
+                options: {
+                    path: 'categoryIds',
+                    title: '@data-management:equipments.entities.equipment.components.meta-data-form.title',
+                },
+            },
+            { name: 'tags' },
+            { name: 'notes' },
+        ],
+        relatedEntities: [],
+        groups: [
+            {
+                id: 'basic-info',
+                title: '@general:terms.interface.basic-info',
+            },
+        ],
+        properties: [
+            {
+                name: 'code',
+                title: '@general:terms.common.code',
+                groupId: 'basic-info',
+                options: {
+                    sort: { enabled: true },
+                    filter: {
+                        advance: { enabled: true },
+                        inline: { enabled: true },
+                    },
+                },
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.text,
+                        options: {
+                            placeholder: 'e.g., EQ-001',
+                        },
+                    },
+                },
+                validations: [
+                    {
+                        rule: 'required',
+                    },
+                ],
+            },
+            {
+                name: 'title',
+                title: '@general:terms.common.title',
+                groupId: 'basic-info',
+                options: {
+                    sort: { enabled: true },
+                    filter: {
+                        advance: { enabled: true },
+                        inline: { enabled: true },
+                    },
+                },
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.text,
+                    },
+                },
+                validations: [
+                    {
+                        rule: 'required',
+                    },
+                ],
+            },
+            {
+                name: 'description',
+                title: '@general:terms.common.description',
+                groupId: 'basic-info',
+                options: {
+                    sort: { enabled: false },
+                    filter: {
+                        advance: { enabled: true },
+                        inline: { enabled: false },
+                    },
+                },
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.largeText,
+                        options: {
+                            rows: 3,
+                        },
+                    },
+                },
+            },
+        ],
+        columns: [
+            { name: 'code' },
+            { name: 'title' },
+            { name: 'categoryIds', options: { dataPath: 'categories' } },
+        ],
+        interfaces: {
+            master: {
+                create: {
+                    sections: [{ id: 'basic-info' }, { id: 'classification' }],
+                    properties: [
+                        { name: 'code', layout: { positions: { lg: { colSpan: 6, order: 1 } } } },
+                        { name: 'title', layout: { positions: { lg: { colSpan: 6, order: 2 } } } },
+                        { name: 'description', layout: { positions: { lg: { colSpan: 12, order: 3 } } } },
+                        { name: 'categoryIds', layout: { positions: { lg: { colSpan: 12, order: 12 } } } },
+                    ],
+                },
+                update: {
+                    sections: [{ id: 'basic-info' }, { id: 'classification' }],
+                    properties: [
+                        { name: 'code', layout: { positions: { lg: { colSpan: 6, order: 1 } } } },
+                        { name: 'title', layout: { positions: { lg: { colSpan: 6, order: 2 } } } },
+                        { name: 'description', layout: { positions: { lg: { colSpan: 12, order: 3 } } } },
+                        { name: 'categoryIds', layout: { positions: { lg: { colSpan: 12, order: 12 } } } },
+                    ],
+                },
+                single: {
+                    title: '{{title}}',
+                    sections: [{ id: 'basic-info' }, { id: 'classification' }],
+                    properties: [
+                        { name: 'code', layout: { positions: { lg: { colSpan: 6, order: 1 } } } },
+                        { name: 'title', layout: { positions: { lg: { colSpan: 6, order: 2 } } } },
+                        { name: 'description', layout: { positions: { lg: { colSpan: 12, order: 3 } } } },
+                        { name: 'categoryIds', layout: { label: { visible: true }, positions: { lg: { colSpan: 12, order: 12 } } } },
+                    ],
+                    actions: [...entityMasterRecordActions()],
+                },
+                list: {
+                    actions: [...entityMasterCrudActions()],
+                    views: [
+                        createAllQueryView({
+                            sorts: [{ name: 'title', dir: 'asc' }],
+                        }),
+                    ],
+                },
+            },
+        },
+    };
+    return entityDef;
+}
+
+var equipment_entity = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    equipmentFactory: equipmentFactory
+});
+
 class AXMQueryEntityModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMQueryEntityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AXMQueryEntityModule }); }
@@ -7774,12 +8003,12 @@ var queryBuilderWidgetDesigner_component = /*#__PURE__*/Object.freeze({
 //#region ----   Re-exports from Entity Types   ----
 //#endregion
 
-const AXPMetaDataSelectorWidget = {
-    name: 'meta-data-selector-editor',
-    title: '@data-management:metadata-definitions.components.meta-data-selector.title',
+const AXPMetaDataFormWidget = {
+    name: 'meta-data-form-editor',
+    title: '@data-management:metadata-definitions.components.meta-data-form.title',
     categories: AXP_WIDGETS_EDITOR_CATEGORY,
     groups: [AXPWidgetGroupEnum.UtilityWidget],
-    description: '@data-management:metadata-definitions.components.meta-data-selector.description',
+    description: '@data-management:metadata-definitions.components.meta-data-form.description',
     icon: 'fa-light fa-list-check',
     defaultFilterWidgetName: 'string-filter',
     type: 'editor',
@@ -7789,1753 +8018,1802 @@ const AXPMetaDataSelectorWidget = {
     properties: [
         AXP_NAME_PROPERTY,
         AXP_DATA_PATH_PROPERTY,
+        AXP_READONLY_PROPERTY,
+        AXP_DISABLED_PROPERTY,
     ],
     components: {
         view: {
-            component: () => Promise.resolve().then(function () { return metaDataSelectorView_component; }).then((c) => c.AXPMetaDataSelectorWidgetViewComponent),
+            component: () => Promise.resolve().then(function () { return metaDataFormEdit_component; }).then((c) => c.AXPMetaDataFormWidgetEditComponent),
         },
         edit: {
-            component: () => Promise.resolve().then(function () { return metaDataSelectorEdit_component; }).then((c) => c.AXPMetaDataSelectorWidgetEditComponent),
+            component: () => Promise.resolve().then(function () { return metaDataFormEdit_component; }).then((c) => c.AXPMetaDataFormWidgetEditComponent),
         },
         print: {
-            component: () => Promise.resolve().then(function () { return metaDataSelectorEdit_component; }).then((c) => c.AXPMetaDataSelectorWidgetEditComponent),
+            component: () => Promise.resolve().then(function () { return metaDataFormEdit_component; }).then((c) => c.AXPMetaDataFormWidgetEditComponent),
         },
     },
 };
 
-//#region ----   Meta-Data Selector Field Types   ----
-//#endregion
-//#region ----   Utility Functions   ----
-/**
- * Convert raw value to designer state
- */
-function convertValueToState(value) {
-    // Handle null/undefined
-    if (!value) {
-        return {
-            groups: [createDefaultGroup()],
-            mode: 'designer',
-        };
+class AXPMetaDataFormWidgetEditComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Inputs   ----
+        /**
+         * Groups structure from meta-data-selector or evaluated expression
+         */
+        this.groups = computed(() => {
+            const options = this.options();
+            const groupsOption = options['groups'];
+            // Handle evaluated expression result (array of groups) or direct groups array
+            if (Array.isArray(groupsOption) && groupsOption.length > 0) {
+                return groupsOption;
+            }
+            return [];
+        }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
+        this.#effect = effect(() => {
+            this.initializeFormDefinition();
+        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
+        /**
+         * Check if there are any valid metadata definitions available
+         */
+        this.hasDefinitions = computed(() => {
+            const groups = this.groups();
+            if (groups.length === 0) {
+                return false;
+            }
+            return groups.some((group) => {
+                const fields = group.fields || [];
+                return fields.length > 0 && fields.some((field) => field != null);
+            });
+        }, ...(ngDevMode ? [{ debugName: "hasDefinitions" }] : []));
+        //#endregion
+        //#region ----   Outputs   ----
+        /**
+         * Emitted when form context changes
+         */
+        this.contextChange = output();
+        /**
+         * Emitted when form validity changes
+         */
+        this.validityChange = output();
+        //#endregion
+        //#region ----   Properties   ----
+        this.layoutRenderer = viewChild(AXPLayoutRendererComponent, ...(ngDevMode ? [{ debugName: "layoutRenderer" }] : []));
+        /**
+         * Form definition signal that only updates when structure actually changes
+         */
+        this.formDefinition = signal({ groups: [] }, ...(ngDevMode ? [{ debugName: "formDefinition" }] : []));
     }
-    // Handle old structure (flat array) - no longer supported but graceful fallback
-    if (Array.isArray(value)) {
-        return {
-            groups: [
-                {
-                    id: 'group-default',
-                    name: 'default',
-                    title: 'Default Section',
-                    description: undefined,
-                    order: 0,
-                    fields: value.map((item, index) => ({
-                        id: item.id || `field-${index}`,
-                        name: item.name,
-                        title: item.title,
-                        description: item.description,
-                        interface: item.interface,
-                        configuration: item.configuration,
-                        status: item.status || 'active',
-                        order: item.order ?? index,
-                        isNewlyAdded: item.isNewlyAdded,
-                    })),
-                },
-            ],
-            mode: 'designer',
-        };
-    }
-    // Handle new structure (groups)
-    if (value.groups && Array.isArray(value.groups)) {
-        const groups = value.groups.map((group, groupIndex) => ({
-            id: group.id || `group-${group.name}`,
-            name: group.name,
-            title: group.title,
-            description: group.description,
-            order: group.order ?? groupIndex,
-            fields: (group.fields || []).map((field, fieldIndex) => ({
-                id: field.id || `field-${fieldIndex}`,
-                name: field.name,
-                title: field.title,
-                description: field.description,
-                interface: field.interface,
-                configuration: field.configuration,
-                status: field.status || 'active',
-                order: field.order ?? fieldIndex,
-                isNewlyAdded: field.isNewlyAdded,
-            })),
-            isNewlyAdded: group.isNewlyAdded,
-        }));
-        // Ensure at least 1 group exists
-        const finalGroups = groups.length > 0 ? groups : [createDefaultGroup()];
-        return {
-            groups: finalGroups,
-            mode: 'designer',
-        };
-    }
-    // Fallback to default
-    return {
-        groups: [createDefaultGroup()],
-        mode: 'designer',
-    };
-}
-/**
- * Convert designer state to value for persistence
- */
-function convertStateToValue(state) {
-    return {
-        groups: state.groups.map((group) => {
-            // Filter deleted fields only
-            const activeFields = group.fields.filter((field) => field.status !== 'deleted');
-            // Explicitly include only the properties defined in AXMMetaDataSelectorValue
-            // This ensures isNewlyAdded and other internal properties are not included
-            return {
-                name: group.name,
-                title: group.title,
-                description: group.description,
-                order: group.order,
-                fields: activeFields.map((field) => {
-                    // Explicitly include only the properties defined in AXMMetaDataSelectorValue
-                    // This ensures isNewlyAdded, status, and other internal properties are not included
-                    return {
-                        id: field.id,
-                        name: field.name,
-                        title: field.title,
-                        description: field.description,
-                        interface: field.interface,
-                        configuration: field.configuration,
-                        order: field.order,
-                    };
-                }),
-            };
-        }),
-    };
-}
-/**
- * Create a default group
- */
-function createDefaultGroup() {
-    return {
-        id: 'group-default',
-        name: 'default',
-        title: 'Default Section',
-        description: undefined,
-        order: 0,
-        fields: [],
-        isNewlyAdded: true,
-    };
-}
-//#endregion
-
-class AXPMetaDataSelectorWidgetEditComponent extends AXPValueWidgetComponent {
-    constructor() {
-        super(...arguments);
-        //#region ----   Services & Dependencies   ----
-        this.dataSelectorService = inject(AXPDataSelectorService);
-        this.metaDataService = inject(AXMMetaDataDefinitionService);
-        this.entityResolver = inject(AXPEntityDefinitionRegistryService);
-        this.dialogService = inject(AXDialogService);
-        this.translationService = inject(AXTranslationService);
-        this.layoutBuilder = inject(AXPLayoutBuilderService);
-        this.widgetPropertyViewerService = inject(AXPWidgetPropertyViewerService);
-        //#endregion
-        //#region ----   Class Properties   ----
-        this.DEFAULT_GROUP_NAME = 'default';
-        this.designerState = signal({
-            groups: [createDefaultGroup()],
-            mode: 'designer',
-        }, ...(ngDevMode ? [{ debugName: "designerState" }] : []));
-        //#endregion
-        //#region ----   Computed Properties   ----
-        /**
-         * Check if the widget is in readonly mode
-         */
-        this.readonly = computed(() => this.options()['readonly'], ...(ngDevMode ? [{ debugName: "readonly" }] : []));
-        /**
-         * Check if a group is the default group
-         */
-        this.isDefaultGroup = (groupName) => {
-            return groupName === this.DEFAULT_GROUP_NAME;
-        };
-        /**
-         * Check if we can delete a group (more than 1 group exists)
-         */
-        this.canDeleteGroup = computed(() => {
-            return this.designerState().groups.length > 1;
-        }, ...(ngDevMode ? [{ debugName: "canDeleteGroup" }] : []));
-        /**
-         * Disable preview when no groups or all groups are empty
-         */
-        this.isPreviewDisabled = computed(() => {
-            const groups = this.designerState().groups || [];
-            if (groups.length === 0) {
-                return true;
-            }
-            // Check if all groups have no active fields
-            const hasAnyActiveFields = groups.some((group) => group.fields.some((field) => field.status === 'active'));
-            return !hasAnyActiveFields;
-        }, ...(ngDevMode ? [{ debugName: "isPreviewDisabled" }] : []));
-        /**
-         * Get all groups for rendering
-         */
-        this.groups = computed(() => this.designerState().groups, ...(ngDevMode ? [{ debugName: "groups" }] : []));
-        /**
-         * Get groups data formatted for meta-data-form component (only active fields)
-         */
-        this.previewGroups = computed(() => {
-            return this.groups()
-                .map((group) => ({
-                name: group.name,
-                title: group.title,
-                description: group.description,
-                fields: group.fields
-                    .filter((field) => field.status === 'active')
-                    .sort((a, b) => a.order - b.order)
-                    .map((field) => ({
-                    name: field.name,
-                    title: field.title,
-                    description: field.description,
-                    interface: field.interface,
-                    configuration: field.configuration,
-                    defaultValue: field.configuration?.['defaultValue'],
-                })),
-            }))
-                .filter((group) => group.fields.length > 0);
-        }, ...(ngDevMode ? [{ debugName: "previewGroups" }] : []));
-        /**
-         * Convert preview groups to form definition for layout renderer
-         */
-        this.previewFormDefinition = computed(() => {
-            const groups = this.previewGroups();
-            const formGroups = [];
-            groups.forEach((group) => {
-                const fields = group.fields || [];
-                const validFields = fields.filter((field) => field != null);
-                if (validFields.length > 0) {
-                    const parameters = validFields.map((field) => this.convertFieldToFormDefinition(field));
-                    formGroups.push({
-                        name: this.sanitizeGroupName(group.name || 'default'),
-                        title: group.title || group.name,
-                        description: group.description,
-                        look: groups.length > 1 ? 'group' : 'container',
-                        parameters,
-                    });
-                }
-            });
-            return { groups: formGroups };
-        }, ...(ngDevMode ? [{ debugName: "previewFormDefinition" }] : []));
-        //#endregion
-        //#region ----   Lifecycle & Effects   ----
-        /**
-         * Sync external value changes to internal state
-         */
-        this.#syncValueToState = effect(() => {
-            const value = this.getValue();
-            const newState = convertValueToState(value);
-            this.designerState.set(newState);
-        }, ...(ngDevMode ? [{ debugName: "#syncValueToState" }] : []));
-        /**
-         * Effect to handle status changes and cleanup before submission
-         */
-        this.#statusChanged = effect(() => {
-            if (this.layoutService.status() === AXPPageStatus.Submitting) {
-                const currentState = this.designerState();
-                const cleanedValue = convertStateToValue(currentState);
-                this.setValue(cleanedValue);
-            }
-        }, ...(ngDevMode ? [{ debugName: "#statusChanged" }] : []));
+    #effect;
+    //#endregion
+    //#region ----   Event Handlers   ----
+    /**
+     * Handle context change from dynamic form
+     */
+    onContextChange(context) {
+        this.contextChange.emit(context);
+        this.setValue(context);
     }
     /**
-     * Convert a field to form field definition
+     * Handle validity change from dynamic form
      */
-    convertFieldToFormDefinition(field) {
-        const interfaceConfig = this.parseInterfaceConfig(field.interface);
-        const defaultValue = field.defaultValue ?? field.configuration?.defaultValue;
-        const description = field.description ?? field.configuration?.description;
-        return {
-            path: field.name || 'unnamed',
-            title: field.title || 'Untitled Field',
-            description: description,
-            widget: {
-                type: interfaceConfig.type || 'text-editor',
-                path: field.name || 'unnamed',
-                options: {
-                    ...interfaceConfig.options,
-                    defaultValue: defaultValue,
-                    readonly: true,
-                    validations: this.parseValidations(field.interface),
-                },
-            },
-        };
+    onValidityChange(isValid) {
+        this.validityChange.emit(isValid);
     }
+    //#endregion
+    //#region ----   Private Methods   ----
     /**
-     * Parse interface configuration from metadata
+     * Initialize form definition based on current inputs
      */
-    parseInterfaceConfig(interfaceValue) {
-        if (typeof interfaceValue === 'string') {
-            try {
-                return JSON.parse(interfaceValue || '{}');
-            }
-            catch (error) {
-                console.warn('Failed to parse interface config:', interfaceValue, error);
-                return {};
-            }
+    initializeFormDefinition() {
+        const groups = this.groups();
+        if (groups.length > 0) {
+            const newFormDefinition = this.convertGroupsToFormDefinition(groups);
+            this.formDefinition.set(newFormDefinition);
         }
-        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
+     * Convert groups structure from meta-data-selector to form definition
+     * Each metadata group becomes a separate form group with visual separation (card look)
      */
-    sanitizeGroupName(name) {
-        return name.toLowerCase().replace(/[^a-z0-9]/g, '-');
-    }
-    //#endregion
-    //#region ----   Lifecycle & Effects   ----
-    /**
-     * Sync external value changes to internal state
+    convertGroupsToFormDefinition(groups) {
+        const formGroups = [];
+        groups.forEach((group) => {
+            const fields = group.fields || [];
+            const validFields = fields.filter((field) => field != null);
+            if (validFields.length > 0) {
+                const parameters = validFields.map((field) => this.convertMetadataToFieldDefinition(field));
+                formGroups.push({
+                    name: this.sanitizeGroupName(group.name || 'default'),
+                    title: group.title || group.name,
+                    description: group.description,
+                    look: groups.length > 1 ? 'group' : 'container',
+                    parameters,
+                });
+            }
+        });
+        return { groups: formGroups };
+    }
+    /**
+     * Convert single metadata definition to field definition
      */
-    #syncValueToState;
+    convertMetadataToFieldDefinition(metadata) {
+        // Handle null/undefined metadata
+        if (!metadata) {
+            console.warn('Undefined metadata definition encountered');
+            return {
+                path: 'undefined',
+                title: 'Undefined Field',
+                description: 'This field has undefined metadata',
+                widget: {
+                    type: 'text-editor',
+                    path: 'undefined',
+                    options: {
+                        defaultValue: '',
+                        validations: [],
+                    },
+                },
+            };
+        }
+        const interfaceConfig = this.parseInterfaceConfig(metadata.interface);
+        // Handle defaultValue: support both direct property and configuration.defaultValue
+        // (meta-data-selector uses configuration.defaultValue, other sources may use defaultValue directly)
+        const defaultValue = metadata.defaultValue ?? metadata.configuration?.defaultValue;
+        // Handle description: support both direct property and from configuration
+        const description = metadata.description ?? metadata.configuration?.description;
+        const widget = {
+            type: interfaceConfig.type || 'text-editor',
+            path: metadata.name || 'unnamed',
+            options: {
+                ...interfaceConfig.options,
+                defaultValue: defaultValue,
+                validations: this.parseValidations(metadata.interface),
+            },
+        };
+        if (interfaceConfig.triggers?.length) {
+            widget.triggers = interfaceConfig.triggers;
+        }
+        return {
+            path: metadata.name || 'unnamed',
+            title: metadata.title || 'Untitled Field',
+            description: description,
+            widget,
+        };
+    }
     /**
-     * Effect to handle status changes and cleanup before submission
+     * Parse interface configuration from metadata
      */
-    #statusChanged;
-    //#endregion
-    //#region ----   Group Management   ----
+    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 || {};
+    }
     /**
-     * Handle adding a new group
+     * Parse validations from interface configuration
      */
-    async handleAddGroupClick() {
-        await this.layoutBuilder
-            .create()
-            .dialog((dialog) => {
-            dialog
-                .setTitle('@data-management:metadata-definitions.actions.add-group.title')
-                .setContext({ title: '', description: '' })
-                .content((flex) => {
-                flex
-                    .setDirection('column')
-                    .formField('@general:terms.common.title', (field) => {
-                    field.path('title');
-                    field.textBox({ validations: [{ rule: 'required' }] });
-                })
-                    .formField('@general:terms.common.description', (field) => {
-                    field.path('description');
-                    field.largeTextBox({});
-                });
-            })
-                .setActions((actions) => {
-                actions.cancel('@general:actions.cancel.title').submit('@general:actions.save.title');
-            })
-                .onAction(async (dialogRef) => {
-                const context = dialogRef.context();
-                const action = dialogRef.action();
-                if (!context || action === 'cancel') {
-                    return;
-                }
-                const form = context;
-                if (form.title?.trim()) {
-                    const newGroup = {
-                        id: AXPDataGenerator.uuid(),
-                        name: generateKebabCase(form.title),
-                        title: form.title,
-                        description: form.description || undefined,
-                        order: this.designerState().groups.length,
-                        fields: [],
-                        isNewlyAdded: true,
-                    };
-                    this.designerState.update((state) => ({
-                        ...state,
-                        groups: [...state.groups, newGroup],
-                    }));
-                    this.syncStateToValue();
-                }
-            });
-        })
-            .show();
+    parseValidations(interfaceValue) {
+        const config = this.parseInterfaceConfig(interfaceValue);
+        return config.options?.validations || [];
     }
     /**
-     * Handle editing a group
+     * Sanitize group name for use as identifier
      */
-    async handleGroupEdit(group) {
-        await this.layoutBuilder
-            .create()
-            .dialog((dialog) => {
-            dialog
-                .setTitle('@data-management:metadata-definitions.actions.edit-group.title')
-                .setContext({ title: group.title || group.name, description: group.description || '' })
-                .content((flex) => {
-                flex
-                    .setDirection('column')
-                    .formField('@general:terms.common.title', (field) => {
-                    field.path('title');
-                    field.textBox({ validations: [{ rule: 'required' }] });
-                })
-                    .formField('@general:terms.common.description', (field) => {
-                    field.path('description');
-                    field.largeTextBox({});
-                });
-            })
-                .setActions((actions) => {
-                actions.cancel('@general:actions.cancel.title').submit('@general:actions.save.title');
-            })
-                .onAction(async (dialogRef) => {
-                const context = dialogRef.context();
-                const action = dialogRef.action();
-                if (!context || action === 'cancel') {
-                    return;
-                }
-                const form = context;
-                if (form.title?.trim()) {
-                    this.designerState.update((state) => ({
-                        ...state,
-                        groups: state.groups.map((g) => g.id === group.id
-                            ? {
-                                ...g,
-                                name: generateKebabCase(form.title),
-                                title: form.title,
-                                description: form.description || undefined,
-                            }
-                            : g),
-                    }));
-                    this.syncStateToValue();
-                }
-            });
-        })
-            .show();
+    sanitizeGroupName(name) {
+        return name.toLowerCase().replace(/[^a-z0-9]/g, '-');
     }
+    //#endregion
+    //#region ----   Public Methods   ----
     /**
-     * Handle removing a group
-     * Ensures at least 1 group always exists
+     * Get the layout renderer component instance
      */
-    async handleGroupRemove(group) {
-        if (this.designerState().groups.length <= 1) {
-            return;
-        }
-        const confirmed = await this.dialogService.confirm(await this.translationService.translateAsync('@data-management:metadata-definitions.actions.delete-group.title'), await this.translationService.translateAsync('@data-management:metadata-definitions.components.meta-data-selector.dialogs.delete-group.message'), 'danger', 'horizontal', false);
-        if (confirmed) {
-            this.designerState.update((state) => {
-                const remainingGroups = state.groups.filter((g) => g.id !== group.id);
-                const finalGroups = remainingGroups.length > 0 ? remainingGroups : [createDefaultGroup()];
-                return {
-                    ...state,
-                    groups: finalGroups,
-                };
-            });
-            this.syncStateToValue();
+    getLayoutRenderer() {
+        return this.layoutRenderer();
+    }
+    /**
+     * Validate the form
+     */
+    async validate() {
+        const renderer = this.layoutRenderer();
+        if (renderer) {
+            const validation = await renderer.validate();
+            return validation.result;
         }
+        return false;
     }
     /**
-     * Handle group drag and drop
+     * Get current form context
      */
-    handleGroupDrop(event) {
-        const groups = [...this.designerState().groups];
-        moveItemInArray$1(groups, event.previousIndex, event.currentIndex);
-        const updatedGroups = groups.map((group, index) => ({
-            ...group,
-            order: index,
-        }));
-        this.designerState.update((state) => ({
-            ...state,
-            groups: updatedGroups,
-        }));
-        this.syncStateToValue();
+    getContext() {
+        const renderer = this.layoutRenderer();
+        return renderer ? renderer.getContext() : {};
     }
-    //#endregion
-    //#region ----   Field Management   ----
     /**
-     * Handle adding fields to a group
+     * Update form context programmatically
      */
-    async handleAddFieldToGroup(group) {
-        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,
-                    };
-                },
-            });
-            const categoryTreeDataSource = {
-                loadRootNodes: async () => {
-                    const result = await this.metaDataService.getCategoriesList({
-                        skip: 0,
-                        take: 1000,
-                        filter: {
-                            field: 'parentId',
-                            operator: { type: 'isEmpty' },
-                            value: true,
-                        },
-                    });
-                    return result.items.map((item) => ({
-                        id: item.id,
-                        title: item.title || item.name,
-                        description: item.description || '',
-                        parentId: item.parentId,
-                        childrenCount: item.childrenCount || 0,
-                    }));
-                },
-                loadChildNodes: async (parentId) => {
-                    const result = await this.metaDataService.getCategoriesList({
-                        skip: 0,
-                        take: 1000,
-                        filter: {
-                            field: 'parentId',
-                            operator: { type: 'equal' },
-                            value: parentId,
-                        },
-                    });
-                    return result.items.map((item) => ({
-                        id: item.id,
-                        title: item.title || item.name,
-                        description: item.description || '',
-                        parentId: item.parentId,
-                        childrenCount: item.childrenCount || 0,
-                    }));
-                },
-                searchNodes: async (searchValue) => {
-                    const result = await this.metaDataService.getCategoriesList({
-                        skip: 0,
-                        take: 1000,
-                        filter: {
-                            filters: [
-                                {
-                                    field: 'title',
-                                    operator: { type: 'contains' },
-                                    value: searchValue,
-                                },
-                                {
-                                    field: 'name',
-                                    operator: { type: 'contains' },
-                                    value: searchValue,
-                                },
-                            ],
-                            logic: 'or',
-                        },
-                    });
-                    return result.items.map((item) => ({
-                        id: item.id,
-                        title: item.title || item.name,
-                        description: item.description || '',
-                        parentId: item.parentId,
-                        childrenCount: item.childrenCount || 0,
-                    }));
-                },
+    updateContext(context) {
+        console.log('updateContext', context);
+        const renderer = this.layoutRenderer();
+        if (renderer) {
+            renderer.updateContext(context);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPMetaDataFormWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPMetaDataFormWidgetEditComponent, isStandalone: true, selector: "axp-meta-data-form-widget-edit", outputs: { contextChange: "contextChange", validityChange: "validityChange" }, viewQueries: [{ propertyName: "layoutRenderer", first: true, predicate: AXPLayoutRendererComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    @if (hasDefinitions()) {
+      <axp-layout-renderer
+        [layout]="formDefinition()"
+        [context]="getValue()"
+        [look]="'container'"
+        (contextChange)="onContextChange($event)"
+        (validityChange)="onValidityChange($event)"
+      >
+      </axp-layout-renderer>
+    } @else {
+      <axp-state-message
+        icon="fa-light fa-clipboard-list"
+        [title]="'@data-management:metadata-definitions.components.meta-data-selector.empty-states.no-metadata-definitions.title'"
+        [description]="'@data-management:metadata-definitions.components.meta-data-selector.empty-states.no-metadata-definitions.description'"
+      >
+      </axp-state-message>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPMetaDataFormWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-meta-data-form-widget-edit', template: `
+    @if (hasDefinitions()) {
+      <axp-layout-renderer
+        [layout]="formDefinition()"
+        [context]="getValue()"
+        [look]="'container'"
+        (contextChange)="onContextChange($event)"
+        (validityChange)="onValidityChange($event)"
+      >
+      </axp-layout-renderer>
+    } @else {
+      <axp-state-message
+        icon="fa-light fa-clipboard-list"
+        [title]="'@data-management:metadata-definitions.components.meta-data-selector.empty-states.no-metadata-definitions.title'"
+        [description]="'@data-management:metadata-definitions.components.meta-data-selector.empty-states.no-metadata-definitions.description'"
+      >
+      </axp-state-message>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXPLayoutRendererComponent, AXFormModule, AXLabelModule, AXPWidgetCoreModule, AXPStateMessageComponent] }]
+        }], propDecorators: { contextChange: [{ type: i0.Output, args: ["contextChange"] }], validityChange: [{ type: i0.Output, args: ["validityChange"] }], layoutRenderer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPLayoutRendererComponent), { isSignal: true }] }] } });
+
+var metaDataFormEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPMetaDataFormWidgetEditComponent: AXPMetaDataFormWidgetEditComponent
+});
+
+class ShowMetaDataFormPopupCommand {
+    constructor() {
+        this.layoutBuilder = inject(AXPLayoutBuilderService);
+        this.translationService = inject(AXTranslationService);
+        this.entityService = inject(AXPEntityService);
+        this.entityRegistry = inject(AXPEntityDefinitionRegistryService);
+    }
+    async execute(input) {
+        try {
+            // Extract evaluated options from __context__ (private/controlled data)
+            // The __context__.options contains evaluated expressions from entity actions
+            const contextOptions = input.__context__?.options;
+            // Merge root-level input with evaluated options from __context__
+            // Root-level takes precedence if both exist
+            const evaluatedInput = {
+                ...contextOptions,
+                ...input,
+                // Ensure we use evaluated options from __context__ if available
+                ...(contextOptions ? contextOptions : {}),
             };
-            const entity = await this.entityResolver.resolve(RootConfig.module.name, RootConfig.entities.metaDataDefinition.name);
-            if (!entity) {
-                throw new Error('Entity not found with name: ' + RootConfig.entities.metaDataDefinition.name);
-            }
-            const columns = entity.columns
-                ?.filter((column) => entity.properties.some((property) => property.name === column.name))
-                .map((column) => {
-                const property = entity.properties.find((prop) => prop.name === column.name);
+            const { entity, id, field = META_DATA_FORM_FIELD, title, path } = evaluatedInput;
+            if (!entity || !id) {
                 return {
-                    name: column.name,
-                    title: property?.title ?? '',
-                    visible: column.options?.visible !== false,
-                    widget: {
-                        type: column.showAs?.type ?? property?.schema?.interface?.type ?? 'text-editor',
-                        options: column.showAs?.options ?? property?.schema?.interface?.options ?? {},
+                    success: false,
+                    message: {
+                        text: await this.translationService.translateAsync('@general:messages.entity.invalid-data'),
                     },
                 };
-            }) || [];
-            const result = await this.dataSelectorService.openWithCategoryFilter({
-                title: '@data-management:metadata-definitions.components.meta-data-selector.select-items',
-                dataSource: dataSource,
-                columns: columns,
-                selectionMode: 'multiple',
-                searchFields: [
-                    { name: 'title', title: '@general:terms.common.title' },
-                    { name: 'description', title: '@general:terms.common.description' },
-                ],
-                allowCreate: false,
-            }, {
-                title: '@data-management:metadata-definitions.components.meta-data-selector.categories',
-                dataSource: categoryTreeDataSource,
-                filterField: 'categoryIds',
-                filterOperator: 'contains',
-                width: '350px',
-            });
-            if (result?.items && result.items.length > 0) {
-                const newFields = result.items.map((item, index) => ({
-                    id: AXPDataGenerator.uuid(),
-                    name: item.name,
-                    title: item.title,
-                    description: item.description || '',
-                    interface: typeof item.interface === 'string' ? item.interface : JSON.stringify(item.interface),
-                    configuration: {
-                        isRequired: false,
-                        placeholder: '',
-                    },
-                    status: 'active',
-                    order: group.fields.length + index,
-                    isNewlyAdded: true,
-                }));
-                this.designerState.update((state) => ({
-                    ...state,
-                    groups: state.groups.map((g) => g.id === group.id
-                        ? {
-                            ...g,
-                            fields: [...g.fields, ...newFields],
-                        }
-                        : g),
-                }));
-                this.syncStateToValue();
             }
-        }
-        catch (error) {
-            console.error('Error loading meta-data:', error);
-        }
-    }
-    /**
-     * Handle field editing - allows overriding the field's interface property
-     */
-    async handleFieldEdit(field) {
-        try {
-            let currentWidget;
-            if (typeof field.interface === 'string') {
-                if (!field.interface || field.interface.trim() === '') {
-                    throw new Error('Field interface is empty');
-                }
-                try {
-                    const parsed = JSON.parse(field.interface);
-                    currentWidget = parsed;
-                }
-                catch (error) {
-                    throw new Error(`Failed to parse field interface: ${error}`);
+            // Ensure id is a string
+            if (typeof id !== 'string' && id != null) {
+                const stringId = String(id);
+                if (stringId) {
+                    evaluatedInput.id = stringId;
                 }
             }
-            else {
-                currentWidget = field.interface;
-            }
-            if (!currentWidget || !currentWidget.type) {
-                throw new Error('Invalid widget configuration: missing type');
-            }
-            const fieldName = field.title || field.name || 'Field';
-            const editTitle = await this.translationService.translateAsync('@general:actions.configure.title', {
-                params: { name: fieldName },
-            }) || `Configure ${fieldName}`;
-            const result = await this.widgetPropertyViewerService.open({
-                title: editTitle,
-                widget: cloneDeep(currentWidget),
-                mode: 'simple',
-            });
-            if (result && result.values) {
-                const updatedWidget = {
-                    ...currentWidget,
-                    ...result.values,
-                    options: {
-                        ...(currentWidget.options ?? {}),
-                        ...(result.values.options ?? {}),
+            if (!evaluatedInput.id || typeof evaluatedInput.id !== 'string') {
+                return {
+                    success: false,
+                    message: {
+                        text: await this.translationService.translateAsync('@general:messages.entity.invalid-data'),
                     },
                 };
-                const updatedInterface = JSON.stringify(updatedWidget);
-                this.designerState.update((state) => ({
-                    ...state,
-                    groups: state.groups.map((group) => ({
-                        ...group,
-                        fields: group.fields.map((f) => f.id === field.id
-                            ? {
-                                ...f,
-                                interface: updatedInterface,
-                            }
-                            : f),
-                    })),
-                }));
-                this.syncStateToValue();
             }
-        }
-        catch (error) {
-            console.error('Error editing field interface:', error);
-            await this.dialogService.alert(await this.translationService.translateAsync('@general:messages.error.title') || 'Error', error instanceof Error ? error.message : 'Failed to edit field interface', 'danger');
-        }
-    }
-    /**
-     * Handle field removal
-     */
-    handleFieldRemove(field, groupId) {
-        this.designerState.update((state) => ({
-            ...state,
-            groups: state.groups.map((group) => {
-                if (group.id !== groupId)
-                    return group;
-                if (field.isNewlyAdded) {
-                    return {
-                        ...group,
-                        fields: group.fields.filter((f) => f.id !== field.id),
-                    };
-                }
-                if (field.status === 'active') {
-                    return {
-                        ...group,
-                        fields: group.fields.map((f) => (f.id === field.id ? { ...f, status: 'deleted' } : f)),
-                    };
-                }
+            const finalId = evaluatedInput.id;
+            // Get current entity record to get the metadata expression value
+            const [moduleName, entityName] = entity.split('.');
+            const currentRecord = await this.findRecord(entity, finalId);
+            if (!currentRecord) {
                 return {
-                    ...group,
-                    fields: group.fields.filter((f) => f.id !== field.id),
+                    success: false,
+                    message: {
+                        text: await this.translationService.translateAsync('@general:messages.entity.not-found'),
+                    },
                 };
-            }),
-        }));
-        this.syncStateToValue();
-    }
-    /**
-     * Handle field revert (undo deletion)
-     */
-    handleFieldRevert(field, groupId) {
-        this.designerState.update((state) => ({
-            ...state,
-            groups: state.groups.map((group) => group.id === groupId
-                ? {
-                    ...group,
-                    fields: group.fields.map((f) => (f.id === field.id ? { ...f, status: 'active' } : f)),
-                }
-                : group),
-        }));
-        this.syncStateToValue();
-    }
-    /**
-     * Handle field drag and drop (within and between groups)
-     */
-    handleFieldDrop(event, targetGroupName) {
-        const sourceGroupName = event.previousContainer.id.replace('group-', '').replace('-fields', '');
-        this.designerState.update((state) => {
-            const groups = [...state.groups];
-            const sourceGroup = groups.find((g) => g.name === sourceGroupName);
-            const targetGroup = groups.find((g) => g.name === targetGroupName);
-            if (!sourceGroup || !targetGroup)
-                return state;
-            if (event.previousContainer === event.container) {
-                const fields = [...sourceGroup.fields];
-                moveItemInArray$1(fields, event.previousIndex, event.currentIndex);
-                const updatedFields = fields.map((field, index) => ({
-                    ...field,
-                    order: index,
-                }));
+            }
+            // Note: pathValue might be null/undefined, but the metadata expression evaluator will handle it
+            // The expression will return an empty array if pathValue is not available
+            // Resolve entity to get metadata expression and determine if it's category or entity lookup
+            const entityDef = await this.entityRegistry.resolve(moduleName, entityName);
+            const metaDataFormExt = entityDef.extensions?.metaDataForm?.[field];
+            if (!metaDataFormExt) {
                 return {
-                    ...state,
-                    groups: groups.map((g) => (g.id === sourceGroup.id ? { ...g, fields: updatedFields } : g)),
+                    success: false,
+                    message: {
+                        text: await this.translationService.translateAsync('@data-management:metadata-definitions.messages.meta-data-form-not-configured'),
+                    },
                 };
             }
-            else {
-                const sourceFields = [...sourceGroup.fields];
-                const targetFields = [...targetGroup.fields];
-                transferArrayItem(sourceFields, targetFields, event.previousIndex, event.currentIndex);
-                const updatedSourceFields = sourceFields.map((field, index) => ({
-                    ...field,
-                    order: index,
-                }));
-                const updatedTargetFields = targetFields.map((field, index) => ({
-                    ...field,
-                    order: index,
-                }));
+            // Get path property to determine metadata source type
+            const props = entityDef.properties || [];
+            const pathProperty = props.find((p) => p.name === path);
+            const targetEntity = pathProperty?.schema?.interface?.options?.['entity'];
+            if (!targetEntity) {
                 return {
-                    ...state,
-                    groups: groups.map((g) => {
-                        if (g.id === sourceGroup.id)
-                            return { ...g, fields: updatedSourceFields };
-                        if (g.id === targetGroup.id)
-                            return { ...g, fields: updatedTargetFields };
-                        return g;
-                    }),
+                    success: false,
+                    message: {
+                        text: await this.translationService.translateAsync('@data-management:metadata-definitions.messages.invalid-path-field'),
+                    },
                 };
             }
-        });
-        this.syncStateToValue();
-    }
-    /**
-     * Get all group drop list IDs for connected drag & drop
-     */
-    getAllGroupDropLists() {
-        return this.groups().map((group) => `group-${group.name}-fields`);
-    }
-    //#endregion
-    //#region ----   Preview Mode   ----
-    /**
-     * Handle preview button click - opens preview in a dialog using layout builder
-     */
-    async handlePreviewClick() {
-        if (this.isPreviewDisabled()) {
-            return;
-        }
-        try {
-            const previewTitle = await this.translationService.translateAsync('@data-management:metadata-definitions.actions.preview.title');
-            const formDef = this.previewFormDefinition();
-            if (!formDef.groups || formDef.groups.length === 0) {
-                const emptyDialogRef = await this.layoutBuilder
-                    .create()
-                    .dialog((dialog) => {
-                    dialog
-                        .setTitle(previewTitle)
-                        .setSize('md')
-                        .setCloseButton(true)
-                        .setContext({})
-                        .setActions((actions) => actions.cancel('@general:actions.close.title'));
-                })
-                    .show();
-                emptyDialogRef.close();
-                return;
+            // Build metadata expression based on target entity type
+            let metadataExpression;
+            if (targetEntity.endsWith('Category')) {
+                // Category lookup - use fromCategory
+                metadataExpression = `{{ metadata.fromCategory("${entity}", context.eval('${path}')) }}`;
             }
-            const dialogRef = await this.layoutBuilder
+            else {
+                // Relationship lookup - use fromEntity
+                metadataExpression = `{{ metadata.fromEntity("${targetEntity}", context.eval('${path}')) }}`;
+            }
+            // Get current meta data form value
+            const currentMetaDataValue = currentRecord[field] || {};
+            // Build dialog title
+            const dialogTitle = title || metaDataFormExt.title || await this.translationService.translateAsync('@data-management:metadata-definitions.components.meta-data-form.title');
+            // Open dialog with meta-data-form-editor widget
+            const result = await this.layoutBuilder
                 .create()
                 .dialog((dialog) => {
                 dialog
-                    .setTitle(previewTitle)
+                    .setTitle(dialogTitle)
                     .setSize('lg')
                     .setCloseButton(true)
-                    .setContext(this.getValue() || {})
-                    .content((layoutBuilder) => {
-                    layoutBuilder.dynamicForm(formDef);
+                    .setContext({
+                    ...currentRecord,
+                    [field]: currentMetaDataValue,
                 })
-                    .setActions((actions) => actions.cancel('@general:actions.close.title'));
+                    .content((layout) => {
+                    layout.flex((flex) => {
+                        flex.setDirection('column').setGap('16px');
+                        // Add meta-data-form-editor widget with metadata expression
+                        flex.formField('', (fieldBuilder) => {
+                            fieldBuilder
+                                .path(field)
+                                .setShowLabel(false)
+                                .customWidget('meta-data-form-editor', {
+                                groups: metadataExpression,
+                            });
+                        });
+                    });
+                })
+                    .setActions((actions) => {
+                    actions
+                        .cancel('@general:actions.cancel.title')
+                        .submit('@general:actions.save.title');
+                })
+                    .onAction(async (dialogRef) => {
+                    const context = dialogRef.context();
+                    const action = dialogRef.action();
+                    if (!context || action === 'cancel') {
+                        return { success: false };
+                    }
+                    const updateData = {
+                        [field]: context[field],
+                    };
+                    const updated = await this.updateRecord(entity, finalId, updateData);
+                    return {
+                        success: true,
+                        data: updated,
+                        message: {
+                            text: await this.translationService.translateAsync('@general:messages.entity.updated'),
+                        },
+                    };
+                });
             })
                 .show();
-            await dialogRef.action();
-            dialogRef.close();
+            return result;
         }
         catch (error) {
-            console.error('Error opening preview:', error);
-            await this.dialogService.alert((await this.translationService.translateAsync('@general:messages.error.title')) || 'Error', error instanceof Error ? error.message : 'Failed to open preview', 'danger');
+            return {
+                success: false,
+                message: {
+                    text: error instanceof Error ? error.message : 'Failed to show meta data form popup',
+                },
+            };
         }
     }
-    //#endregion
-    //#region ----   Utility Methods   ----
+    //#region ---- Overridable Methods ----
     /**
-     * Sync internal state to external value
-     * Ensures at least 1 group always exists
+     * Loads a record by entity and id. Override to use custom data sources or key handling.
      */
-    syncStateToValue() {
-        const currentState = this.designerState();
-        let groups = currentState.groups;
-        if (groups.length === 0) {
-            groups = [createDefaultGroup()];
-            this.designerState.update((state) => ({
-                ...state,
-                groups,
-            }));
-        }
-        const value = convertStateToValue({ ...currentState, groups });
-        this.setValue(value);
+    findRecord(entity, id) {
+        const dataAccessor = this.entityService.withEntity(entity).data();
+        return dataAccessor.byKey(id);
     }
     /**
-     * Parse interface field to extract widget type
+     * Persists meta-data form changes. Override to use custom persistence or validation.
      */
-    parseInterfaceType(interfaceValue) {
-        try {
-            if (!interfaceValue)
-                return 'text-editor';
-            // If it's already a string widget type
-            if (!interfaceValue.startsWith('{')) {
-                return interfaceValue;
-            }
-            // Try to parse as JSON
-            const parsed = JSON.parse(interfaceValue);
-            return parsed.type || 'text-editor';
-        }
-        catch {
-            return 'text-editor';
-        }
-    }
-    /**
-     * Get widget icon for a field
-     */
-    getWidgetIcon(interfaceValue) {
-        return 'fa-light fa-input-text';
-    }
-    /**
-     * Get widget title for a field
-     */
-    getWidgetTitle(interfaceValue) {
-        const widgetType = this.parseInterfaceType(interfaceValue);
-        return widgetType
-            .replace(/-/g, ' ')
-            .replace(/editor/gi, '')
-            .trim()
-            .split(' ')
-            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ') || 'Text';
+    updateRecord(entity, id, data) {
+        const dataAccessor = this.entityService.withEntity(entity).data();
+        return dataAccessor.update(id, data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPMetaDataSelectorWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPMetaDataSelectorWidgetEditComponent, isStandalone: true, selector: "axp-meta-data-selector-widget-edit", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-meta-data-selector-widget-edit\" *translate=\"let t\">\n  @if (!readonly()) {\n  <div class=\"__header\">\n    <div class=\"__header-left\"></div>\n    <div class=\"__header-right\">\n      <ax-button class=\"ax-sm\"\n        [text]=\"'@data-management:metadata-definitions.actions.add-group.title' | translate | async\" [color]=\"'primary'\"\n        (onClick)=\"handleAddGroupClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button class=\"ax-sm\" [color]=\"'success'\" [disabled]=\"isPreviewDisabled()\"\n        [text]=\"'@data-management:metadata-definitions.actions.preview.title' | translate | async\"\n        (onClick)=\"handlePreviewClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  }\n\n  <div class=\"__content\">\n    @if (groups().length === 0) {\n    <axp-state-message icon=\"fa-light fa-layer-group\"\n      [title]=\"'@data-management:metadata-definitions.components.meta-data-selector.empty-states.no-groups.title'\"\n      [description]=\"\n        '@data-management:metadata-definitions.components.meta-data-selector.empty-states.no-groups.description'\n      \">\n    </axp-state-message>\n    } @else {\n    <div class=\"__groups-container\" cdkDropList [cdkDropListData]=\"groups()\"\n      (cdkDropListDropped)=\"handleGroupDrop($event)\">\n      @for (group of groups(); track group.id) {\n      <div class=\"__group\" cdkDrag [class.__default-group]=\"isDefaultGroup(group.name)\">\n        <div class=\"__group-header\">\n          @if (!readonly()) {\n          <div class=\"__group-drag-handle\" cdkDragHandle>\n            <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n          </div>\n          }\n          <div class=\"__group-info\">\n            <h3 class=\"__group-title\">\n              @if (group.title) {\n              {{ group.title }}\n              <span class=\"__group-name-prefix\">({{ group.name }})</span>\n              } @else {\n              {{ group.name }}\n              }\n              @if (isDefaultGroup(group.name) && !group.title) {\n              <span class=\"__default-group-badge\">{{\n                '@data-management:metadata-definitions.components.meta-data-selector.default-section-badge'\n                | translate\n                | async\n                }}</span>\n              }\n            </h3>\n            @if (group.description) {\n            <p class=\"__group-description\">{{ group.description }}</p>\n            }\n          </div>\n          @if (!readonly()) {\n          <div class=\"__group-actions\">\n            <ax-button class=\"ax-sm\"\n              [text]=\"'@data-management:metadata-definitions.actions.add-field.title' | translate | async\"\n              [color]=\"'accent2'\" (onClick)=\"handleAddFieldToGroup(group)\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n              <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n            </ax-button>\n            @if (canDeleteGroup()) {\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n              <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n            </ax-button>\n            }\n          </div>\n          }\n        </div>\n\n        <div class=\"__fields-container\">\n          <div class=\"__items-list\" cdkDropList [id]=\"'group-' + group.name + '-fields'\"\n            [cdkDropListData]=\"group.fields\" [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n            (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\">\n            @if (group.fields.length === 0) {\n            <axp-state-message icon=\"fa-light fa-inbox\" [title]=\"\n                '@data-management:metadata-definitions.components.meta-data-selector.empty-states.empty-group.title'\n              \" [description]=\"\n                '@data-management:metadata-definitions.components.meta-data-selector.empty-states.empty-group.description'\n              \">\n            </axp-state-message>\n            } @else { @for (field of group.fields; track field.id) {\n            <div class=\"__field-item\" cdkDrag [class.__deleted]=\"field.status === 'deleted'\">\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                  <div class=\"__field-icon\">\n                    <ax-icon [icon]=\"getWidgetIcon(field.interface)\"></ax-icon>\n                  </div>\n                  <div class=\"__field-info\">\n                    <h4 class=\"__item-title\">{{ field.title }}</h4>\n                    <span class=\"__widget-type\">{{ getWidgetTitle(field.interface) }}</span>\n                    @if (field.description) {\n                    <p class=\"__field-description\">{{ field.description }}</p>\n                    }\n                  </div>\n                </div>\n              </div>\n\n              @if (!readonly()) {\n              <div class=\"__item-actions\">\n                @if (field.status === 'deleted') {\n                <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"warning\"\n                  (onClick)=\"handleFieldRevert(field, group.id)\">\n                  <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n                </ax-button>\n                } @else {\n                <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\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)=\"handleFieldRemove(field, group.id)\">\n                  <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                </ax-button>\n                }\n              </div>\n              }\n            </div>\n            } }\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>", styles: [".axp-meta-data-selector-widget-edit{display:flex;height:100%;width:100%;flex-direction:column}.axp-meta-data-selector-widget-edit .__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-bottom-width:1px;padding:.75rem}.axp-meta-data-selector-widget-edit .__header .__header-left,.axp-meta-data-selector-widget-edit .__header .__header-right{display:flex;gap:.5rem}.axp-meta-data-selector-widget-edit .__content{flex:1 1 0%;overflow:auto;padding:.75rem}.axp-meta-data-selector-widget-edit .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-meta-data-selector-widget-edit .__group{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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))}.axp-meta-data-selector-widget-edit .__group .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info{flex:1 1 0%}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info .__group-title .__group-name-prefix{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info .__group-title .__default-group-badge{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-meta-data-selector-widget-edit .__group .__fields-container{padding:1rem}.axp-meta-data-selector-widget-edit .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-meta-data-selector-widget-edit .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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));cursor:move;-webkit-user-select:none;user-select:none}.axp-meta-data-selector-widget-edit .__field-item:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-meta-data-selector-widget-edit .__field-item.__deleted{opacity:.6;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))}.axp-meta-data-selector-widget-edit .__field-item.__selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-meta-data-selector-widget-edit .__field-item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab;transition:color .15s ease-in-out}.axp-meta-data-selector-widget-edit .__field-item .__drag-handle:active{cursor:grabbing}.axp-meta-data-selector-widget-edit .__field-item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__field-item .__item-content{flex:1 1 0%}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header{display:flex;align-items:flex-start;gap:.75rem}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-info{flex:1 1 0%}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__field-item .__item-actions{display:flex;gap:.5rem}.__group.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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))}.__group.cdk-drag-preview .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__group.cdk-drag-preview .__group-info{flex:1 1 0%}.__group.cdk-drag-preview .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.__group.cdk-drag-preview .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-preview .__fields-container{padding:.75rem}.__group.cdk-drag-preview .__fields-container .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;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))}.__group.cdk-drag-preview .__fields-container .__field-item .__field-icon{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content{flex:1 1 0%}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__item-title{margin-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:500}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__widget-type{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin-bottom:1rem;min-height:8rem}.__group.cdk-drag-dragging{opacity:.7}.__group:hover:not(.cdk-drag-dragging) .__group-drag-handle{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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));display:flex;align-items:center;gap:.75rem;padding:.75rem;opacity:.9}.__field-item.cdk-drag-preview .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview .__item-content{flex:1 1 0%}.__field-item.cdk-drag-preview .__item-content .__item-header{display:flex;align-items:flex-start;gap:.75rem}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-info{flex:1 1 0%}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__field-item.cdk-drag-placeholder{position:relative;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));border-radius:.375rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));min-height:5rem;margin-bottom:.75rem;opacity:.5}.__field-item.cdk-drag-placeholder>*{opacity:0}.__field-item.cdk-drag-placeholder:before{content:\"\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));pointer-events:none}.__field-item.cdk-drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.__items-list.cdk-drop-list-dragging .__field-item:not(.cdk-drag-placeholder){margin-bottom:.75rem}.__items-list.cdk-drop-list-dragging .__field-item:not(.cdk-drag-placeholder):last-child{margin-bottom:0}.__items-list.cdk-drop-list-dragging{position:relative;min-height:4rem;border-radius:.375rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.__items-list.cdk-drop-list-dragging axp-state-message{display:none}.__items-list.cdk-drop-list-dragging:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem;border-radius:.375rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.__items-list.cdk-drop-list-receiving axp-state-message{display:none}.__items-list.cdk-drop-list-receiving:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__groups-container.cdk-drop-list-dragging .__group:not(.cdk-drag-placeholder){margin-bottom:1rem}.__groups-container.cdk-drop-list-dragging .__group:not(.cdk-drag-placeholder):last-child{margin-bottom:0}.__groups-container.cdk-drop-list-dragging:has(.__group.cdk-drag-placeholder){border-radius:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.__groups-container.cdk-drop-list-receiving:has(.__group.cdk-drag-placeholder){border-radius:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.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: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.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: AXFormModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i7.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "directive", type: 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: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ShowMetaDataFormPopupCommand, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ShowMetaDataFormPopupCommand, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPMetaDataSelectorWidgetEditComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axp-meta-data-selector-widget-edit', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
-                        AXButtonModule,
-                        AXDecoratorModule,
-                        AXFormModule,
-                        AXTranslationModule,
-                        AXPStateMessageComponent,
-                        CdkDropList,
-                        CdkDrag,
-                        CdkDragHandle,
-                    ], template: "<div class=\"axp-meta-data-selector-widget-edit\" *translate=\"let t\">\n  @if (!readonly()) {\n  <div class=\"__header\">\n    <div class=\"__header-left\"></div>\n    <div class=\"__header-right\">\n      <ax-button class=\"ax-sm\"\n        [text]=\"'@data-management:metadata-definitions.actions.add-group.title' | translate | async\" [color]=\"'primary'\"\n        (onClick)=\"handleAddGroupClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button class=\"ax-sm\" [color]=\"'success'\" [disabled]=\"isPreviewDisabled()\"\n        [text]=\"'@data-management:metadata-definitions.actions.preview.title' | translate | async\"\n        (onClick)=\"handlePreviewClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  }\n\n  <div class=\"__content\">\n    @if (groups().length === 0) {\n    <axp-state-message icon=\"fa-light fa-layer-group\"\n      [title]=\"'@data-management:metadata-definitions.components.meta-data-selector.empty-states.no-groups.title'\"\n      [description]=\"\n        '@data-management:metadata-definitions.components.meta-data-selector.empty-states.no-groups.description'\n      \">\n    </axp-state-message>\n    } @else {\n    <div class=\"__groups-container\" cdkDropList [cdkDropListData]=\"groups()\"\n      (cdkDropListDropped)=\"handleGroupDrop($event)\">\n      @for (group of groups(); track group.id) {\n      <div class=\"__group\" cdkDrag [class.__default-group]=\"isDefaultGroup(group.name)\">\n        <div class=\"__group-header\">\n          @if (!readonly()) {\n          <div class=\"__group-drag-handle\" cdkDragHandle>\n            <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n          </div>\n          }\n          <div class=\"__group-info\">\n            <h3 class=\"__group-title\">\n              @if (group.title) {\n              {{ group.title }}\n              <span class=\"__group-name-prefix\">({{ group.name }})</span>\n              } @else {\n              {{ group.name }}\n              }\n              @if (isDefaultGroup(group.name) && !group.title) {\n              <span class=\"__default-group-badge\">{{\n                '@data-management:metadata-definitions.components.meta-data-selector.default-section-badge'\n                | translate\n                | async\n                }}</span>\n              }\n            </h3>\n            @if (group.description) {\n            <p class=\"__group-description\">{{ group.description }}</p>\n            }\n          </div>\n          @if (!readonly()) {\n          <div class=\"__group-actions\">\n            <ax-button class=\"ax-sm\"\n              [text]=\"'@data-management:metadata-definitions.actions.add-field.title' | translate | async\"\n              [color]=\"'accent2'\" (onClick)=\"handleAddFieldToGroup(group)\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n              <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n            </ax-button>\n            @if (canDeleteGroup()) {\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n              <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n            </ax-button>\n            }\n          </div>\n          }\n        </div>\n\n        <div class=\"__fields-container\">\n          <div class=\"__items-list\" cdkDropList [id]=\"'group-' + group.name + '-fields'\"\n            [cdkDropListData]=\"group.fields\" [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n            (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\">\n            @if (group.fields.length === 0) {\n            <axp-state-message icon=\"fa-light fa-inbox\" [title]=\"\n                '@data-management:metadata-definitions.components.meta-data-selector.empty-states.empty-group.title'\n              \" [description]=\"\n                '@data-management:metadata-definitions.components.meta-data-selector.empty-states.empty-group.description'\n              \">\n            </axp-state-message>\n            } @else { @for (field of group.fields; track field.id) {\n            <div class=\"__field-item\" cdkDrag [class.__deleted]=\"field.status === 'deleted'\">\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                  <div class=\"__field-icon\">\n                    <ax-icon [icon]=\"getWidgetIcon(field.interface)\"></ax-icon>\n                  </div>\n                  <div class=\"__field-info\">\n                    <h4 class=\"__item-title\">{{ field.title }}</h4>\n                    <span class=\"__widget-type\">{{ getWidgetTitle(field.interface) }}</span>\n                    @if (field.description) {\n                    <p class=\"__field-description\">{{ field.description }}</p>\n                    }\n                  </div>\n                </div>\n              </div>\n\n              @if (!readonly()) {\n              <div class=\"__item-actions\">\n                @if (field.status === 'deleted') {\n                <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"warning\"\n                  (onClick)=\"handleFieldRevert(field, group.id)\">\n                  <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n                </ax-button>\n                } @else {\n                <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\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)=\"handleFieldRemove(field, group.id)\">\n                  <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                </ax-button>\n                }\n              </div>\n              }\n            </div>\n            } }\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>", styles: [".axp-meta-data-selector-widget-edit{display:flex;height:100%;width:100%;flex-direction:column}.axp-meta-data-selector-widget-edit .__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-bottom-width:1px;padding:.75rem}.axp-meta-data-selector-widget-edit .__header .__header-left,.axp-meta-data-selector-widget-edit .__header .__header-right{display:flex;gap:.5rem}.axp-meta-data-selector-widget-edit .__content{flex:1 1 0%;overflow:auto;padding:.75rem}.axp-meta-data-selector-widget-edit .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-meta-data-selector-widget-edit .__group{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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))}.axp-meta-data-selector-widget-edit .__group .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info{flex:1 1 0%}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info .__group-title .__group-name-prefix{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info .__group-title .__default-group-badge{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-meta-data-selector-widget-edit .__group .__fields-container{padding:1rem}.axp-meta-data-selector-widget-edit .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-meta-data-selector-widget-edit .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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));cursor:move;-webkit-user-select:none;user-select:none}.axp-meta-data-selector-widget-edit .__field-item:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-meta-data-selector-widget-edit .__field-item.__deleted{opacity:.6;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))}.axp-meta-data-selector-widget-edit .__field-item.__selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-meta-data-selector-widget-edit .__field-item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab;transition:color .15s ease-in-out}.axp-meta-data-selector-widget-edit .__field-item .__drag-handle:active{cursor:grabbing}.axp-meta-data-selector-widget-edit .__field-item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__field-item .__item-content{flex:1 1 0%}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header{display:flex;align-items:flex-start;gap:.75rem}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-info{flex:1 1 0%}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__field-item .__item-actions{display:flex;gap:.5rem}.__group.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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))}.__group.cdk-drag-preview .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__group.cdk-drag-preview .__group-info{flex:1 1 0%}.__group.cdk-drag-preview .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.__group.cdk-drag-preview .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-preview .__fields-container{padding:.75rem}.__group.cdk-drag-preview .__fields-container .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;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))}.__group.cdk-drag-preview .__fields-container .__field-item .__field-icon{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content{flex:1 1 0%}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__item-title{margin-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:500}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__widget-type{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin-bottom:1rem;min-height:8rem}.__group.cdk-drag-dragging{opacity:.7}.__group:hover:not(.cdk-drag-dragging) .__group-drag-handle{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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));display:flex;align-items:center;gap:.75rem;padding:.75rem;opacity:.9}.__field-item.cdk-drag-preview .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview .__item-content{flex:1 1 0%}.__field-item.cdk-drag-preview .__item-content .__item-header{display:flex;align-items:flex-start;gap:.75rem}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-info{flex:1 1 0%}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__field-item.cdk-drag-placeholder{position:relative;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));border-radius:.375rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));min-height:5rem;margin-bottom:.75rem;opacity:.5}.__field-item.cdk-drag-placeholder>*{opacity:0}.__field-item.cdk-drag-placeholder:before{content:\"\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));pointer-events:none}.__field-item.cdk-drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.__items-list.cdk-drop-list-dragging .__field-item:not(.cdk-drag-placeholder){margin-bottom:.75rem}.__items-list.cdk-drop-list-dragging .__field-item:not(.cdk-drag-placeholder):last-child{margin-bottom:0}.__items-list.cdk-drop-list-dragging{position:relative;min-height:4rem;border-radius:.375rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.__items-list.cdk-drop-list-dragging axp-state-message{display:none}.__items-list.cdk-drop-list-dragging:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem;border-radius:.375rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.__items-list.cdk-drop-list-receiving axp-state-message{display:none}.__items-list.cdk-drop-list-receiving:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__groups-container.cdk-drop-list-dragging .__group:not(.cdk-drag-placeholder){margin-bottom:1rem}.__groups-container.cdk-drop-list-dragging .__group:not(.cdk-drag-placeholder):last-child{margin-bottom:0}.__groups-container.cdk-drop-list-dragging:has(.__group.cdk-drag-placeholder){border-radius:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.__groups-container.cdk-drop-list-receiving:has(.__group.cdk-drag-placeholder){border-radius:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}\n"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ShowMetaDataFormPopupCommand, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }] });
 
-var metaDataSelectorEdit_component = /*#__PURE__*/Object.freeze({
+var showMetaDataFormPopup_command = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPMetaDataSelectorWidgetEditComponent: AXPMetaDataSelectorWidgetEditComponent
+    ShowMetaDataFormPopupCommand: ShowMetaDataFormPopupCommand
 });
 
-function normalizeSelectorDisplayConfig(display, defaultTitle) {
-    if (!display)
-        return { section: { enabled: true } };
-    if (typeof display === 'object')
-        return display;
-    switch (display) {
-        case 'section':
-            return { section: { enabled: true, title: defaultTitle }, popup: { enabled: false } };
-        case 'popup':
-            return { section: { enabled: false }, popup: { enabled: true, title: defaultTitle } };
-        case 'both':
-            return { section: { enabled: true, title: defaultTitle }, popup: { enabled: true, title: defaultTitle } };
-        default:
-            return { section: { enabled: true } };
+const AXPMetaDataSelectorWidget = {
+    name: 'meta-data-selector-editor',
+    title: '@data-management:metadata-definitions.components.meta-data-selector.title',
+    categories: AXP_WIDGETS_EDITOR_CATEGORY,
+    groups: [AXPWidgetGroupEnum.UtilityWidget],
+    description: '@data-management:metadata-definitions.components.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),
+        },
+    },
+};
+
+//#region ----   Meta-Data Selector Field Types   ----
+//#endregion
+//#region ----   Utility Functions   ----
+/**
+ * Convert raw value to designer state
+ */
+function convertValueToState(value) {
+    // Handle null/undefined
+    if (!value) {
+        return {
+            groups: [createDefaultGroup()],
+            mode: 'designer',
+        };
+    }
+    // Handle old structure (flat array) - no longer supported but graceful fallback
+    if (Array.isArray(value)) {
+        return {
+            groups: [
+                {
+                    id: 'group-default',
+                    name: 'default',
+                    title: 'Default Section',
+                    description: undefined,
+                    order: 0,
+                    fields: value.map((item, index) => ({
+                        id: item.id || `field-${index}`,
+                        name: item.name,
+                        title: item.title,
+                        description: item.description,
+                        interface: item.interface,
+                        configuration: item.configuration,
+                        status: item.status || 'active',
+                        order: item.order ?? index,
+                        isNewlyAdded: item.isNewlyAdded,
+                    })),
+                },
+            ],
+            mode: 'designer',
+        };
+    }
+    // Handle new structure (groups)
+    if (value.groups && Array.isArray(value.groups)) {
+        const groups = value.groups.map((group, groupIndex) => ({
+            id: group.id || `group-${group.name}`,
+            name: group.name,
+            title: group.title,
+            description: group.description,
+            order: group.order ?? groupIndex,
+            fields: (group.fields || []).map((field, fieldIndex) => ({
+                id: field.id || `field-${fieldIndex}`,
+                name: field.name,
+                title: field.title,
+                description: field.description,
+                interface: field.interface,
+                configuration: field.configuration,
+                status: field.status || 'active',
+                order: field.order ?? fieldIndex,
+                isNewlyAdded: field.isNewlyAdded,
+            })),
+            isNewlyAdded: group.isNewlyAdded,
+        }));
+        // Ensure at least 1 group exists
+        const finalGroups = groups.length > 0 ? groups : [createDefaultGroup()];
+        return {
+            groups: finalGroups,
+            mode: 'designer',
+        };
     }
+    // Fallback to default
+    return {
+        groups: [createDefaultGroup()],
+        mode: 'designer',
+    };
 }
 /**
- * meta-data-selector plugin
- *
- * Dynamic behavior:
- * - Creates a single property for metadata selector configuration
- * - Dynamically generates entity groups and meta-data-form widgets based on configured groups
- * - Each metadata group becomes a separate entity section with its own meta-data-form widget
- * - Reads group configuration at runtime from the field value
+ * Convert designer state to value for persistence
  */
-const metaDataSelectorPlugin = {
-    name: 'meta-data-selector',
-    order: 60,
-    apply: (ctx, options) => {
-        const opts = options ?? {};
-        const field = META_DATA_SELECTOR_FIELD;
-        // Try to get title from various sources in priority order:
-        // 1. Direct options.title
-        // 2. meta-data-form plugin configuration (from plugins array - current entity or base entity)
-        // 3. meta-data-form extension (if plugin has already run - current entity or base entity)
-        // 4. category plugin metaData.title (if enabled via category plugin)
-        // 5. Default title
-        let metaDataFormTitle;
-        let metaDataFormExtTitle;
-        let categoryMetaDataTitle;
-        // Check current entity's plugins and extensions
-        const plugins = ctx.entity.plugins;
-        const metaDataFormPlugin = plugins?.find((p) => p.name === 'meta-data-form');
-        metaDataFormTitle = metaDataFormPlugin?.options?.title;
-        const metaDataFormExt = ctx.entity.extensions?.metaDataForm;
-        metaDataFormExtTitle = metaDataFormExt
-            ? Object.values(metaDataFormExt).find((ext) => ext?.title)
-            : undefined;
-        const categoryExt = ctx.entity.extensions?.category;
-        categoryMetaDataTitle = categoryExt?.metaData?.title;
-        // If running on a category entity (name ends with "Category"), check the base entity
-        if (ctx.entity.name.endsWith('Category') && !metaDataFormTitle && !metaDataFormExtTitle) {
-            const baseEntityName = ctx.entity.name.replace('Category', '');
-            try {
-                // Try to access the entity registry to get base entity
-                // Note: This requires the registry to be available, which might not always be the case
-                // For now, we'll rely on the category extension which should have the title
-                // But we can also check if there's a way to access base entity plugins
-            }
-            catch (error) {
-                // Silently fail - we'll use other sources
-            }
-        }
-        // Priority: 1. options.title, 2. meta-data-form plugin title, 3. meta-data-form extension title, 4. category metaData.title, 5. default
-        const displayTitle = (opts.title && opts.title.trim().length > 0)
-            ? opts.title
-            : (metaDataFormTitle && metaDataFormTitle.trim().length > 0)
-                ? metaDataFormTitle
-                : (metaDataFormExtTitle?.title && metaDataFormExtTitle.title.trim().length > 0)
-                    ? metaDataFormExtTitle.title
-                    : (categoryMetaDataTitle && categoryMetaDataTitle.trim().length > 0)
-                        ? categoryMetaDataTitle
-                        : '@data-management:metadata-definitions.actions.configure-meta-data.title';
-        const displayConfig = normalizeSelectorDisplayConfig(opts.display, displayTitle);
-        const sectionConfig = displayConfig.section ?? {};
-        const popupConfig = displayConfig.popup ?? {};
-        const showSection = sectionConfig.enabled !== false;
-        const showPopup = popupConfig.enabled === true;
-        const popupTitle = popupConfig.title ?? displayTitle;
-        //#region ----   Step 1: Create Meta-Data Selector Property   ----
-        // Ensure group and section for the selector configuration itself
-        const selectorSectionId = `meta-data-config`;
-        const selectorGroupId = `meta-data-config`;
-        const existingGroups = ctx.groups.list() ?? [];
-        if (!existingGroups.some((g) => g.id === selectorGroupId)) {
-            ctx.groups.add({ id: selectorGroupId, 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: selectorGroupId,
-                schema: {
-                    dataType: 'object',
-                    interface: {
-                        type: 'meta-data-selector-editor',
-                    },
-                },
+function convertStateToValue(state) {
+    return {
+        groups: state.groups.map((group) => {
+            // Filter deleted fields only
+            const activeFields = group.fields.filter((field) => field.status !== 'deleted');
+            // Explicitly include only the properties defined in AXMMetaDataSelectorValue
+            // This ensures isNewlyAdded and other internal properties are not included
+            return {
+                name: group.name,
+                title: group.title,
+                description: group.description,
+                order: group.order,
+                fields: activeFields.map((field) => {
+                    // Explicitly include only the properties defined in AXMMetaDataSelectorValue
+                    // This ensures isNewlyAdded, status, and other internal properties are not included
+                    return {
+                        id: field.id,
+                        name: field.name,
+                        title: field.title,
+                        description: field.description,
+                        interface: field.interface,
+                        configuration: field.configuration,
+                        order: field.order,
+                    };
+                }),
+            };
+        }),
+    };
+}
+/**
+ * Create a default group
+ */
+function createDefaultGroup() {
+    return {
+        id: 'group-default',
+        name: 'default',
+        title: 'Default Section',
+        description: undefined,
+        order: 0,
+        fields: [],
+        isNewlyAdded: true,
+    };
+}
+//#endregion
+
+class AXPMetaDataSelectorWidgetEditComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Services & Dependencies   ----
+        this.dataSelectorService = inject(AXPDataSelectorService);
+        this.metaDataService = inject(AXMMetaDataDefinitionService);
+        this.entityResolver = inject(AXPEntityDefinitionRegistryService);
+        this.dialogService = inject(AXDialogService);
+        this.translationService = inject(AXTranslationService);
+        this.layoutBuilder = inject(AXPLayoutBuilderService);
+        this.widgetPropertyViewerService = inject(AXPWidgetPropertyViewerService);
+        //#endregion
+        //#region ----   Class Properties   ----
+        this.DEFAULT_GROUP_NAME = 'default';
+        this.designerState = signal({
+            groups: [createDefaultGroup()],
+            mode: 'designer',
+        }, ...(ngDevMode ? [{ debugName: "designerState" }] : []));
+        //#endregion
+        //#region ----   Computed Properties   ----
+        /**
+         * Check if the widget is in readonly mode
+         */
+        this.readonly = computed(() => this.options()['readonly'], ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        /**
+         * Check if a group is the default group
+         */
+        this.isDefaultGroup = (groupName) => {
+            return groupName === this.DEFAULT_GROUP_NAME;
+        };
+        /**
+         * Check if we can delete a group (more than 1 group exists)
+         */
+        this.canDeleteGroup = computed(() => {
+            return this.designerState().groups.length > 1;
+        }, ...(ngDevMode ? [{ debugName: "canDeleteGroup" }] : []));
+        /**
+         * Disable preview when no groups or all groups are empty
+         */
+        this.isPreviewDisabled = computed(() => {
+            const groups = this.designerState().groups || [];
+            if (groups.length === 0) {
+                return true;
+            }
+            // Check if all groups have no active fields
+            const hasAnyActiveFields = groups.some((group) => group.fields.some((field) => field.status === 'active'));
+            return !hasAnyActiveFields;
+        }, ...(ngDevMode ? [{ debugName: "isPreviewDisabled" }] : []));
+        /**
+         * Get all groups for rendering
+         */
+        this.groups = computed(() => this.designerState().groups, ...(ngDevMode ? [{ debugName: "groups" }] : []));
+        /**
+         * Get groups data formatted for meta-data-form component (only active fields)
+         */
+        this.previewGroups = computed(() => {
+            return this.groups()
+                .map((group) => ({
+                name: group.name,
+                title: group.title,
+                description: group.description,
+                fields: group.fields
+                    .filter((field) => field.status === 'active')
+                    .sort((a, b) => a.order - b.order)
+                    .map((field) => ({
+                    name: field.name,
+                    title: field.title,
+                    description: field.description,
+                    interface: field.interface,
+                    configuration: field.configuration,
+                    defaultValue: field.configuration?.['defaultValue'],
+                })),
+            }))
+                .filter((group) => group.fields.length > 0);
+        }, ...(ngDevMode ? [{ debugName: "previewGroups" }] : []));
+        /**
+         * Convert preview groups to form definition for layout renderer
+         */
+        this.previewFormDefinition = computed(() => {
+            const groups = this.previewGroups();
+            const formGroups = [];
+            groups.forEach((group) => {
+                const fields = group.fields || [];
+                const validFields = fields.filter((field) => field != null);
+                if (validFields.length > 0) {
+                    const parameters = validFields.map((field) => this.convertFieldToFormDefinition(field));
+                    formGroups.push({
+                        name: this.sanitizeGroupName(group.name || 'default'),
+                        title: group.title || group.name,
+                        description: group.description,
+                        look: groups.length > 1 ? 'group' : 'container',
+                        parameters,
+                    });
+                }
             });
+            return { groups: formGroups };
+        }, ...(ngDevMode ? [{ debugName: "previewFormDefinition" }] : []));
+        //#endregion
+        //#region ----   Lifecycle & Effects   ----
+        /**
+         * Sync external value changes to internal state
+         */
+        this.#syncValueToState = effect(() => {
+            const value = this.getValue();
+            const newState = convertValueToState(value);
+            this.designerState.set(newState);
+        }, ...(ngDevMode ? [{ debugName: "#syncValueToState" }] : []));
+        /**
+         * Effect to handle status changes and cleanup before submission
+         */
+        this.#statusChanged = effect(() => {
+            if (this.layoutService.status() === AXPPageStatus.Submitting) {
+                const currentState = this.designerState();
+                const cleanedValue = convertStateToValue(currentState);
+                this.setValue(cleanedValue);
+            }
+        }, ...(ngDevMode ? [{ debugName: "#statusChanged" }] : []));
+    }
+    /**
+     * Convert a field to form field definition
+     */
+    convertFieldToFormDefinition(field) {
+        const interfaceConfig = this.parseInterfaceConfig(field.interface);
+        const defaultValue = field.defaultValue ?? field.configuration?.defaultValue;
+        const description = field.description ?? field.configuration?.description;
+        return {
+            path: field.name || 'unnamed',
+            title: field.title || 'Untitled Field',
+            description: description,
+            widget: {
+                type: interfaceConfig.type || 'text-editor',
+                path: field.name || 'unnamed',
+                options: {
+                    ...interfaceConfig.options,
+                    defaultValue: defaultValue,
+                    readonly: true,
+                    validations: this.parseValidations(field.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 {};
+            }
         }
-        // Add selector to single/create/modify views only when section display is enabled
-        const selectorColSpan = 12;
-        if (showSection) {
-            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 === selectorSectionId)) {
-                    next.sections.push({
-                        id: selectorSectionId,
-                        title: sectionConfig.title ?? displayTitle,
-                        order: sectionConfig.order ?? 200,
-                    });
+        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 ----   Lifecycle & Effects   ----
+    /**
+     * Sync external value changes to internal state
+     */
+    #syncValueToState;
+    /**
+     * Effect to handle status changes and cleanup before submission
+     */
+    #statusChanged;
+    //#endregion
+    //#region ----   Group Management   ----
+    /**
+     * Handle adding a new group
+     */
+    async handleAddGroupClick() {
+        await this.layoutBuilder
+            .create()
+            .dialog((dialog) => {
+            dialog
+                .setTitle('@data-management:metadata-definitions.actions.add-group.title')
+                .setContext({ title: '', description: '' })
+                .content((flex) => {
+                flex
+                    .setDirection('column')
+                    .formField('@general:terms.common.title', (field) => {
+                    field.path('title');
+                    field.textBox({ validations: [{ rule: 'required' }] });
+                })
+                    .formField('@general:terms.common.description', (field) => {
+                    field.path('description');
+                    field.largeTextBox({});
+                });
+            })
+                .setActions((actions) => {
+                actions.cancel('@general:actions.cancel.title').submit('@general:actions.save.title');
+            })
+                .onAction(async (dialogRef) => {
+                const context = dialogRef.context();
+                const action = dialogRef.action();
+                if (!context || action === 'cancel') {
+                    return;
                 }
-                next.properties = next.properties ?? [];
-                if (!next.properties.some((p) => p.name === field)) {
-                    next.properties.push({
-                        name: field,
-                        layout: {
-                            label: { visible: false },
-                            positions: { lg: { colSpan: selectorColSpan, order: 9 } },
-                        },
-                    });
+                const form = context;
+                if (form.title?.trim()) {
+                    const newGroup = {
+                        id: AXPDataGenerator.uuid(),
+                        name: generateKebabCase(form.title),
+                        title: form.title,
+                        description: form.description || undefined,
+                        order: this.designerState().groups.length,
+                        fields: [],
+                        isNewlyAdded: true,
+                    };
+                    this.designerState.update((state) => ({
+                        ...state,
+                        groups: [...state.groups, newGroup],
+                    }));
+                    this.syncStateToValue();
                 }
-                return next;
             });
-            ctx.interfaces.master.create.update((create) => {
-                const next = create ?? { sections: [], properties: [] };
-                next.sections = next.sections ?? [];
-                if (!next.sections.some((s) => s.id === selectorSectionId)) {
-                    next.sections.push({
-                        id: selectorSectionId,
-                        title: sectionConfig.title ?? displayTitle,
-                    });
+        })
+            .show();
+    }
+    /**
+     * Handle editing a group
+     */
+    async handleGroupEdit(group) {
+        await this.layoutBuilder
+            .create()
+            .dialog((dialog) => {
+            dialog
+                .setTitle('@data-management:metadata-definitions.actions.edit-group.title')
+                .setContext({ title: group.title || group.name, description: group.description || '' })
+                .content((flex) => {
+                flex
+                    .setDirection('column')
+                    .formField('@general:terms.common.title', (field) => {
+                    field.path('title');
+                    field.textBox({ validations: [{ rule: 'required' }] });
+                })
+                    .formField('@general:terms.common.description', (field) => {
+                    field.path('description');
+                    field.largeTextBox({});
+                });
+            })
+                .setActions((actions) => {
+                actions.cancel('@general:actions.cancel.title').submit('@general:actions.save.title');
+            })
+                .onAction(async (dialogRef) => {
+                const context = dialogRef.context();
+                const action = dialogRef.action();
+                if (!context || action === 'cancel') {
+                    return;
                 }
-                next.properties = next.properties ?? [];
-                if (!next.properties.some((p) => p.name === field)) {
-                    next.properties.push({
-                        name: field,
-                        layout: {
-                            label: { visible: false },
-                            positions: { lg: { colSpan: selectorColSpan, order: 7 } },
-                        },
-                    });
+                const form = context;
+                if (form.title?.trim()) {
+                    this.designerState.update((state) => ({
+                        ...state,
+                        groups: state.groups.map((g) => g.id === group.id
+                            ? {
+                                ...g,
+                                name: generateKebabCase(form.title),
+                                title: form.title,
+                                description: form.description || undefined,
+                            }
+                            : g),
+                    }));
+                    this.syncStateToValue();
                 }
-                return next;
             });
-            ctx.interfaces.master.modify.update((modify) => {
-                const next = modify ?? { sections: [], properties: [] };
-                next.sections = next.sections ?? [];
-                if (!next.sections.some((s) => s.id === selectorSectionId)) {
-                    next.sections.push({
-                        id: selectorSectionId,
-                        title: sectionConfig.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: selectorColSpan, order: 7 } },
-                        },
-                    });
-                }
-                return next;
+        })
+            .show();
+    }
+    /**
+     * Handle removing a group
+     * Ensures at least 1 group always exists
+     */
+    async handleGroupRemove(group) {
+        if (this.designerState().groups.length <= 1) {
+            return;
+        }
+        const confirmed = await this.dialogService.confirm(await this.translationService.translateAsync('@data-management:metadata-definitions.actions.delete-group.title'), await this.translationService.translateAsync('@data-management:metadata-definitions.components.meta-data-selector.dialogs.delete-group.message'), 'danger', 'horizontal', false);
+        if (confirmed) {
+            this.designerState.update((state) => {
+                const remainingGroups = state.groups.filter((g) => g.id !== group.id);
+                const finalGroups = remainingGroups.length > 0 ? remainingGroups : [createDefaultGroup()];
+                return {
+                    ...state,
+                    groups: finalGroups,
+                };
             });
+            this.syncStateToValue();
         }
-        //#endregion
-        //#region ----   Step 2: Dynamic Group Generation Middleware   ----
-        // Add metadata middleware to dynamically generate groups at runtime
-        // This middleware reads the metaDataList field value and creates
-        // entity groups + meta-data-form widgets for each configured group
-        const metadataMiddleware = {
-            name: 'metadata-dynamic-groups',
-            order: 100,
-            apply: (entityCtx) => {
-                // Get the metadata selector value from context
-                const metaDataValue = entityCtx.data?.[field];
-                if (!metaDataValue?.groups || metaDataValue.groups.length === 0) {
-                    return; // No groups configured, skip
-                }
-                // TODO: Implement renderGroupsAsSections option
-                // If opts.renderGroupsAsSections === true:
-                //   - Create separate entity sections for each metadata group
-                //   - Each section gets its own meta-data-form widget with only that group's fields
-                // If opts.renderGroupsAsSections === false (default):
-                //   - Create single section with all groups (current behavior)
-                //   - Single meta-data-form widget receives all groups, renders them as cards
-                // Current implementation: renderGroupsAsSections = false (default)
-                // Create a single section and single meta-data-form widget for all groups
-                const sectionId = 'metadata-section';
-                const formFieldName = META_DATA_FORM_FIELD;
-                const groupId = 'metadata-group';
-                // Ensure entity group exists
-                if (!entityCtx.groups.list().some((g) => g.id === groupId)) {
-                    entityCtx.groups.add({
-                        id: groupId,
-                        title: displayTitle,
-                    });
-                }
-                // Ensure meta-data-form property exists with all groups
-                // Always update the property to ensure groups are passed correctly
-                const existingProp = entityCtx.properties.list().find((p) => p.name === formFieldName);
-                const groupsData = metaDataValue.groups.map((group) => ({
-                    name: group.name,
-                    title: group.title,
-                    description: group.description,
-                    fields: group.fields,
-                }));
-                if (!existingProp) {
-                    entityCtx.properties.add({
-                        name: formFieldName,
-                        title: displayTitle,
-                        groupId: groupId,
-                        schema: {
-                            dataType: 'object',
-                            interface: {
-                                type: 'meta-data-form-editor',
-                                options: {
-                                    // Pass all groups so the form can render them as separate groups
-                                    groups: groupsData,
-                                },
-                            },
+    }
+    /**
+     * Handle group drag and drop
+     */
+    handleGroupDrop(event) {
+        const groups = [...this.designerState().groups];
+        moveItemInArray$1(groups, event.previousIndex, event.currentIndex);
+        const updatedGroups = groups.map((group, index) => ({
+            ...group,
+            order: index,
+        }));
+        this.designerState.update((state) => ({
+            ...state,
+            groups: updatedGroups,
+        }));
+        this.syncStateToValue();
+    }
+    //#endregion
+    //#region ----   Field Management   ----
+    /**
+     * Handle adding fields to a group
+     */
+    async handleAddFieldToGroup(group) {
+        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,
+                    };
+                },
+            });
+            const categoryTreeDataSource = {
+                loadRootNodes: async () => {
+                    const result = await this.metaDataService.getCategoriesList({
+                        skip: 0,
+                        take: 1000,
+                        filter: {
+                            field: 'parentId',
+                            operator: { type: 'isEmpty' },
+                            value: true,
                         },
                     });
-                }
-                else {
-                    // Update existing property to ensure groups are set
-                    if (existingProp.schema?.interface?.options) {
-                        existingProp.schema.interface.options.groups = groupsData;
-                    }
-                }
-                // Add to single view - single section
-                entityCtx.interfaces.master.single.update((single) => {
-                    const next = single ?? { title: entityCtx.entity.title, sections: [], properties: [] };
-                    next.sections = next.sections ?? [];
-                    if (!next.sections.some((s) => s.id === sectionId)) {
-                        next.sections.push({
-                            id: sectionId,
-                            title: displayTitle,
-                            order: 300,
-                        });
-                    }
-                    next.properties = next.properties ?? [];
-                    if (!next.properties.some((p) => p.name === formFieldName)) {
-                        next.properties.push({
-                            name: formFieldName,
-                            layout: {
-                                label: { visible: false },
-                                positions: { lg: { colSpan: 12, order: 0 } },
-                            },
-                        });
-                    }
-                    return next;
-                });
-                // Add to create view - single section
-                entityCtx.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 === formFieldName)) {
-                        next.properties.push({
-                            name: formFieldName,
-                            layout: {
-                                label: { visible: false },
-                                positions: { lg: { colSpan: 12, order: 10 } },
-                            },
-                        });
-                    }
-                    return next;
-                });
-                // Add to modify view - single section
-                entityCtx.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 === formFieldName)) {
-                        next.properties.push({
-                            name: formFieldName,
-                            layout: {
-                                label: { visible: false },
-                                positions: { lg: { colSpan: 12, order: 10 } },
-                            },
-                        });
-                    }
-                    return next;
-                });
-            },
-        };
-        // Register the middleware (if middleware system exists)
-        // Note: This is conceptual - actual implementation depends on platform capabilities
-        // (ctx as any).middleware?.add?.(metadataMiddleware);
-        //#endregion
-        //#region ----   Step 3: Popup actions (when display is popup or both)   ----
-        if (showPopup) {
-            const actionName = `show-meta-data-selector-popup-${field}`;
-            const commandName = 'show-meta-data-selector-popup';
-            ctx.interfaces.master.single.update((single) => {
-                const next = single ?? { title: ctx.entity.title, sections: [], properties: [], actions: [] };
-                next.actions = next.actions ?? [];
-                if (!actionExists(next.actions, commandName, actionName)) {
-                    next.actions.push({
-                        name: actionName,
-                        title: popupTitle,
-                        command: {
-                            name: commandName,
-                            options: {
-                                entity: `${ctx.entity.module}.${ctx.entity.name}`,
-                                id: '{{ context.eval("id") }}',
-                                field,
-                                title: popupTitle,
-                            },
+                    return result.items.map((item) => ({
+                        id: item.id,
+                        title: item.title || item.name,
+                        description: item.description || '',
+                        parentId: item.parentId,
+                        childrenCount: item.childrenCount || 0,
+                    }));
+                },
+                loadChildNodes: async (parentId) => {
+                    const result = await this.metaDataService.getCategoriesList({
+                        skip: 0,
+                        take: 1000,
+                        filter: {
+                            field: 'parentId',
+                            operator: { type: 'equal' },
+                            value: parentId,
                         },
-                        priority: 'secondary',
-                        type: 'configure',
-                        icon: 'fa-light fa-list-check',
-                        scope: AXPEntityCommandScope.Individual,
                     });
-                }
-                return next;
-            });
-            ctx.interfaces.master.list.update((list) => {
-                const next = list ?? { actions: [], views: [] };
-                next.actions = next.actions ?? [];
-                if (!actionExists(next.actions, commandName, actionName)) {
-                    next.actions.push({
-                        name: actionName,
-                        title: popupTitle,
-                        command: {
-                            name: commandName,
-                            options: {
-                                entity: `${ctx.entity.module}.${ctx.entity.name}`,
-                                id: '{{ context.eval("id") }}',
-                                field,
-                                title: popupTitle,
-                            },
+                    return result.items.map((item) => ({
+                        id: item.id,
+                        title: item.title || item.name,
+                        description: item.description || '',
+                        parentId: item.parentId,
+                        childrenCount: item.childrenCount || 0,
+                    }));
+                },
+                searchNodes: async (searchValue) => {
+                    const result = await this.metaDataService.getCategoriesList({
+                        skip: 0,
+                        take: 1000,
+                        filter: {
+                            filters: [
+                                {
+                                    field: 'title',
+                                    operator: { type: 'contains' },
+                                    value: searchValue,
+                                },
+                                {
+                                    field: 'name',
+                                    operator: { type: 'contains' },
+                                    value: searchValue,
+                                },
+                            ],
+                            logic: 'or',
                         },
-                        priority: 'secondary',
-                        type: 'configure',
-                        icon: 'fa-light fa-list-check',
-                        scope: AXPEntityCommandScope.Individual,
                     });
-                }
-                return next;
+                    return result.items.map((item) => ({
+                        id: item.id,
+                        title: item.title || item.name,
+                        description: item.description || '',
+                        parentId: item.parentId,
+                        childrenCount: item.childrenCount || 0,
+                    }));
+                },
+            };
+            const entity = await this.entityResolver.resolve(RootConfig.module.name, RootConfig.entities.metaDataDefinition.name);
+            if (!entity) {
+                throw new Error('Entity not found with name: ' + RootConfig.entities.metaDataDefinition.name);
+            }
+            const columns = entity.columns
+                ?.filter((column) => entity.properties.some((property) => property.name === column.name))
+                .map((column) => {
+                const property = entity.properties.find((prop) => prop.name === column.name);
+                return {
+                    name: column.name,
+                    title: property?.title ?? '',
+                    visible: column.options?.visible !== false,
+                    widget: {
+                        type: column.showAs?.type ?? property?.schema?.interface?.type ?? 'text-editor',
+                        options: column.showAs?.options ?? property?.schema?.interface?.options ?? {},
+                    },
+                };
+            }) || [];
+            const result = await this.dataSelectorService.openWithCategoryFilter({
+                title: '@data-management:metadata-definitions.components.meta-data-selector.select-items',
+                dataSource: dataSource,
+                columns: columns,
+                selectionMode: 'multiple',
+                searchFields: [
+                    { name: 'title', title: '@general:terms.common.title' },
+                    { name: 'description', title: '@general:terms.common.description' },
+                ],
+                allowCreate: false,
+            }, {
+                title: '@data-management:metadata-definitions.components.meta-data-selector.categories',
+                dataSource: categoryTreeDataSource,
+                filterField: 'categoryIds',
+                filterOperator: 'contains',
+                width: '350px',
             });
+            if (result?.items && result.items.length > 0) {
+                const newFields = result.items.map((item, index) => ({
+                    id: AXPDataGenerator.uuid(),
+                    name: item.name,
+                    title: item.title,
+                    description: item.description || '',
+                    interface: typeof item.interface === 'string' ? item.interface : JSON.stringify(item.interface),
+                    configuration: {
+                        isRequired: false,
+                        placeholder: '',
+                    },
+                    status: 'active',
+                    order: group.fields.length + index,
+                    isNewlyAdded: true,
+                }));
+                this.designerState.update((state) => ({
+                    ...state,
+                    groups: state.groups.map((g) => g.id === group.id
+                        ? {
+                            ...g,
+                            fields: [...g.fields, ...newFields],
+                        }
+                        : g),
+                }));
+                this.syncStateToValue();
+            }
         }
-        //#endregion
-        //#region ----   Step 4: Extension Metadata   ----
-        // Stamp normalized config for middleware
-        ctx.entity.extensions ??= {};
-        ctx.entity.extensions.metaDataSelector ??= {};
-        ctx.entity.extensions.metaDataSelector[field] = {
-            title: displayTitle,
-            display: displayConfig,
-        };
-        //#endregion
-    },
-};
-
-class AXPMetaDataSelectorWidgetViewComponent extends AXPValueWidgetComponent {
+        catch (error) {
+            console.error('Error loading meta-data:', error);
+        }
+    }
     /**
-     * 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.
+     * Handle field editing - allows overriding the field's interface property
      */
-    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.3.16", ngImport: i0, type: AXPMetaDataSelectorWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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.3.16", 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
-});
-
-/**
- * Opens the meta-data-selector (configuration UI for groups/fields) in a popup.
- * Used when meta-data-selector plugin has display: 'popup' or 'both'.
- */
-class ShowMetaDataSelectorPopupCommand {
-    constructor() {
-        this.layoutBuilder = inject(AXPLayoutBuilderService);
-        this.translationService = inject(AXTranslationService);
-        this.entityService = inject(AXPEntityService);
-    }
-    async execute(input) {
+    async handleFieldEdit(field) {
         try {
-            const contextOptions = input.__context__?.options;
-            const evaluatedInput = {
-                ...contextOptions,
-                ...input,
-                ...(contextOptions ? contextOptions : {}),
-            };
-            const { entity, id, field = META_DATA_SELECTOR_FIELD, title, } = evaluatedInput;
-            if (!entity || !id) {
-                return {
-                    success: false,
-                    message: {
-                        text: await this.translationService.translateAsync('@general:messages.entity.invalid-data'),
-                    },
-                };
+            let currentWidget;
+            if (typeof field.interface === 'string') {
+                if (!field.interface || field.interface.trim() === '') {
+                    throw new Error('Field interface is empty');
+                }
+                try {
+                    const parsed = JSON.parse(field.interface);
+                    currentWidget = parsed;
+                }
+                catch (error) {
+                    throw new Error(`Failed to parse field interface: ${error}`);
+                }
             }
-            const finalId = typeof id === 'string' ? id : String(id);
-            if (!finalId) {
-                return {
-                    success: false,
-                    message: {
-                        text: await this.translationService.translateAsync('@general:messages.entity.invalid-data'),
-                    },
-                };
+            else {
+                currentWidget = field.interface;
             }
-            const currentRecord = await this.findRecord(entity, finalId);
-            if (!currentRecord) {
-                return {
-                    success: false,
-                    message: {
-                        text: await this.translationService.translateAsync('@general:messages.entity.not-found'),
+            if (!currentWidget || !currentWidget.type) {
+                throw new Error('Invalid widget configuration: missing type');
+            }
+            const fieldName = field.title || field.name || 'Field';
+            const editTitle = await this.translationService.translateAsync('@general:actions.configure.title', {
+                params: { name: fieldName },
+            }) || `Configure ${fieldName}`;
+            const result = await this.widgetPropertyViewerService.open({
+                title: editTitle,
+                widget: cloneDeep(currentWidget),
+                mode: 'simple',
+            });
+            if (result && result.values) {
+                const updatedWidget = {
+                    ...currentWidget,
+                    ...result.values,
+                    options: {
+                        ...(currentWidget.options ?? {}),
+                        ...(result.values.options ?? {}),
                     },
                 };
+                const updatedInterface = JSON.stringify(updatedWidget);
+                this.designerState.update((state) => ({
+                    ...state,
+                    groups: state.groups.map((group) => ({
+                        ...group,
+                        fields: group.fields.map((f) => f.id === field.id
+                            ? {
+                                ...f,
+                                interface: updatedInterface,
+                            }
+                            : f),
+                    })),
+                }));
+                this.syncStateToValue();
             }
-            const currentSelectorValue = currentRecord[field] ?? { groups: [] };
-            const dialogTitle = title ??
-                (await this.translationService.translateAsync('@data-management:metadata-definitions.actions.configure-meta-data.title'));
-            const result = await this.layoutBuilder
-                .create()
-                .dialog((dialog) => {
-                dialog
-                    .setTitle(dialogTitle)
-                    .setSize('lg')
-                    .setCloseButton(true)
-                    .setContext({
-                    ...currentRecord,
-                    [field]: currentSelectorValue,
-                })
-                    .content((layout) => {
-                    layout.flex((flex) => {
-                        flex.setDirection('column').setGap('16px');
-                        flex.formField('', (fieldBuilder) => {
-                            fieldBuilder
-                                .path(field)
-                                .setShowLabel(false)
-                                .customWidget('meta-data-selector-editor', {});
-                        });
-                    });
-                })
-                    .setActions((actions) => {
-                    actions
-                        .cancel('@general:actions.cancel.title')
-                        .submit('@general:actions.save.title');
-                })
-                    .onAction(async (dialogRef) => {
-                    const context = dialogRef.context();
-                    const action = dialogRef.action();
-                    if (!context || action === 'cancel') {
-                        return { success: false };
-                    }
-                    const updateData = { [field]: context[field] };
-                    const updated = await this.updateRecord(entity, finalId, updateData);
-                    return {
-                        success: true,
-                        data: updated,
-                        message: {
-                            text: await this.translationService.translateAsync('@general:messages.entity.updated'),
-                        },
-                    };
-                });
-            })
-                .show();
-            return result;
         }
         catch (error) {
-            return {
-                success: false,
-                message: {
-                    text: error instanceof Error
-                        ? error.message
-                        : 'Failed to show meta data selector popup',
-                },
-            };
+            console.error('Error editing field interface:', error);
+            await this.dialogService.alert(await this.translationService.translateAsync('@general:messages.error.title') || 'Error', error instanceof Error ? error.message : 'Failed to edit field interface', 'danger');
         }
     }
-    //#region ---- Overridable Methods ----
     /**
-     * Loads a record by entity and id. Override to use custom data sources or key handling.
+     * Handle field removal
      */
-    findRecord(entity, id) {
-        const dataAccessor = this.entityService.withEntity(entity).data();
-        return dataAccessor.byKey(id);
+    handleFieldRemove(field, groupId) {
+        this.designerState.update((state) => ({
+            ...state,
+            groups: state.groups.map((group) => {
+                if (group.id !== groupId)
+                    return group;
+                if (field.isNewlyAdded) {
+                    return {
+                        ...group,
+                        fields: group.fields.filter((f) => f.id !== field.id),
+                    };
+                }
+                if (field.status === 'active') {
+                    return {
+                        ...group,
+                        fields: group.fields.map((f) => (f.id === field.id ? { ...f, status: 'deleted' } : f)),
+                    };
+                }
+                return {
+                    ...group,
+                    fields: group.fields.filter((f) => f.id !== field.id),
+                };
+            }),
+        }));
+        this.syncStateToValue();
     }
     /**
-     * Persists meta-data changes. Override to use custom persistence or validation.
+     * Handle field revert (undo deletion)
      */
-    updateRecord(entity, id, data) {
-        const dataAccessor = this.entityService.withEntity(entity).data();
-        return dataAccessor.update(id, data);
+    handleFieldRevert(field, groupId) {
+        this.designerState.update((state) => ({
+            ...state,
+            groups: state.groups.map((group) => group.id === groupId
+                ? {
+                    ...group,
+                    fields: group.fields.map((f) => (f.id === field.id ? { ...f, status: 'active' } : f)),
+                }
+                : group),
+        }));
+        this.syncStateToValue();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ShowMetaDataSelectorPopupCommand, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ShowMetaDataSelectorPopupCommand, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ShowMetaDataSelectorPopupCommand, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-var showMetaDataSelectorPopup_command = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    ShowMetaDataSelectorPopupCommand: ShowMetaDataSelectorPopupCommand
-});
-
-const AXPMetaDataFormWidget = {
-    name: 'meta-data-form-editor',
-    title: '@data-management:metadata-definitions.components.meta-data-form.title',
-    categories: AXP_WIDGETS_EDITOR_CATEGORY,
-    groups: [AXPWidgetGroupEnum.UtilityWidget],
-    description: '@data-management:metadata-definitions.components.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   ----
-        /**
-         * Groups structure from meta-data-selector or evaluated expression
-         */
-        this.groups = computed(() => {
-            const options = this.options();
-            const groupsOption = options['groups'];
-            // Handle evaluated expression result (array of groups) or direct groups array
-            if (Array.isArray(groupsOption) && groupsOption.length > 0) {
-                return groupsOption;
+    /**
+     * Handle field drag and drop (within and between groups)
+     */
+    handleFieldDrop(event, targetGroupName) {
+        const sourceGroupName = event.previousContainer.id.replace('group-', '').replace('-fields', '');
+        this.designerState.update((state) => {
+            const groups = [...state.groups];
+            const sourceGroup = groups.find((g) => g.name === sourceGroupName);
+            const targetGroup = groups.find((g) => g.name === targetGroupName);
+            if (!sourceGroup || !targetGroup)
+                return state;
+            if (event.previousContainer === event.container) {
+                const fields = [...sourceGroup.fields];
+                moveItemInArray$1(fields, event.previousIndex, event.currentIndex);
+                const updatedFields = fields.map((field, index) => ({
+                    ...field,
+                    order: index,
+                }));
+                return {
+                    ...state,
+                    groups: groups.map((g) => (g.id === sourceGroup.id ? { ...g, fields: updatedFields } : g)),
+                };
             }
-            return [];
-        }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
-        this.#effect = effect(() => {
-            this.initializeFormDefinition();
-        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
-        /**
-         * Check if there are any valid metadata definitions available
-         */
-        this.hasDefinitions = computed(() => {
-            const groups = this.groups();
-            if (groups.length === 0) {
-                return false;
+            else {
+                const sourceFields = [...sourceGroup.fields];
+                const targetFields = [...targetGroup.fields];
+                transferArrayItem(sourceFields, targetFields, event.previousIndex, event.currentIndex);
+                const updatedSourceFields = sourceFields.map((field, index) => ({
+                    ...field,
+                    order: index,
+                }));
+                const updatedTargetFields = targetFields.map((field, index) => ({
+                    ...field,
+                    order: index,
+                }));
+                return {
+                    ...state,
+                    groups: groups.map((g) => {
+                        if (g.id === sourceGroup.id)
+                            return { ...g, fields: updatedSourceFields };
+                        if (g.id === targetGroup.id)
+                            return { ...g, fields: updatedTargetFields };
+                        return g;
+                    }),
+                };
             }
-            return groups.some((group) => {
-                const fields = group.fields || [];
-                return fields.length > 0 && fields.some((field) => field != null);
-            });
-        }, ...(ngDevMode ? [{ debugName: "hasDefinitions" }] : []));
-        //#endregion
-        //#region ----   Outputs   ----
-        /**
-         * Emitted when form context changes
-         */
-        this.contextChange = output();
-        /**
-         * Emitted when form validity changes
-         */
-        this.validityChange = output();
-        //#endregion
-        //#region ----   Properties   ----
-        this.layoutRenderer = viewChild(AXPLayoutRendererComponent, ...(ngDevMode ? [{ debugName: "layoutRenderer" }] : []));
-        /**
-         * Form definition signal that only updates when structure actually changes
-         */
-        this.formDefinition = signal({ groups: [] }, ...(ngDevMode ? [{ debugName: "formDefinition" }] : []));
+        });
+        this.syncStateToValue();
     }
-    #effect;
-    //#endregion
-    //#region ----   Event Handlers   ----
     /**
-     * Handle context change from dynamic form
+     * Get all group drop list IDs for connected drag & drop
      */
-    onContextChange(context) {
-        this.contextChange.emit(context);
-        this.setValue(context);
+    getAllGroupDropLists() {
+        return this.groups().map((group) => `group-${group.name}-fields`);
     }
+    //#endregion
+    //#region ----   Preview Mode   ----
     /**
-     * Handle validity change from dynamic form
+     * Handle preview button click - opens preview in a dialog using layout builder
      */
-    onValidityChange(isValid) {
-        this.validityChange.emit(isValid);
+    async handlePreviewClick() {
+        if (this.isPreviewDisabled()) {
+            return;
+        }
+        try {
+            const previewTitle = await this.translationService.translateAsync('@data-management:metadata-definitions.actions.preview.title');
+            const formDef = this.previewFormDefinition();
+            if (!formDef.groups || formDef.groups.length === 0) {
+                const emptyDialogRef = await this.layoutBuilder
+                    .create()
+                    .dialog((dialog) => {
+                    dialog
+                        .setTitle(previewTitle)
+                        .setSize('md')
+                        .setCloseButton(true)
+                        .setContext({})
+                        .setActions((actions) => actions.cancel('@general:actions.close.title'));
+                })
+                    .show();
+                emptyDialogRef.close();
+                return;
+            }
+            const dialogRef = await this.layoutBuilder
+                .create()
+                .dialog((dialog) => {
+                dialog
+                    .setTitle(previewTitle)
+                    .setSize('lg')
+                    .setCloseButton(true)
+                    .setContext(this.getValue() || {})
+                    .content((layoutBuilder) => {
+                    layoutBuilder.dynamicForm(formDef);
+                })
+                    .setActions((actions) => actions.cancel('@general:actions.close.title'));
+            })
+                .show();
+            await dialogRef.action();
+            dialogRef.close();
+        }
+        catch (error) {
+            console.error('Error opening preview:', error);
+            await this.dialogService.alert((await this.translationService.translateAsync('@general:messages.error.title')) || 'Error', error instanceof Error ? error.message : 'Failed to open preview', 'danger');
+        }
     }
     //#endregion
-    //#region ----   Private Methods   ----
+    //#region ----   Utility Methods   ----
     /**
-     * Initialize form definition based on current inputs
+     * Sync internal state to external value
+     * Ensures at least 1 group always exists
      */
-    initializeFormDefinition() {
-        const groups = this.groups();
-        if (groups.length > 0) {
-            const newFormDefinition = this.convertGroupsToFormDefinition(groups);
-            this.formDefinition.set(newFormDefinition);
+    syncStateToValue() {
+        const currentState = this.designerState();
+        let groups = currentState.groups;
+        if (groups.length === 0) {
+            groups = [createDefaultGroup()];
+            this.designerState.update((state) => ({
+                ...state,
+                groups,
+            }));
         }
+        const value = convertStateToValue({ ...currentState, groups });
+        this.setValue(value);
     }
     /**
-     * Convert groups structure from meta-data-selector to form definition
-     * Each metadata group becomes a separate form group with visual separation (card look)
+     * Parse interface field to extract widget type
      */
-    convertGroupsToFormDefinition(groups) {
-        const formGroups = [];
-        groups.forEach((group) => {
-            const fields = group.fields || [];
-            const validFields = fields.filter((field) => field != null);
-            if (validFields.length > 0) {
-                const parameters = validFields.map((field) => this.convertMetadataToFieldDefinition(field));
-                formGroups.push({
-                    name: this.sanitizeGroupName(group.name || 'default'),
-                    title: group.title || group.name,
-                    description: group.description,
-                    look: groups.length > 1 ? 'group' : 'container',
-                    parameters,
-                });
+    parseInterfaceType(interfaceValue) {
+        try {
+            if (!interfaceValue)
+                return 'text-editor';
+            // If it's already a string widget type
+            if (!interfaceValue.startsWith('{')) {
+                return interfaceValue;
             }
-        });
-        return { groups: formGroups };
+            // Try to parse as JSON
+            const parsed = JSON.parse(interfaceValue);
+            return parsed.type || 'text-editor';
+        }
+        catch {
+            return 'text-editor';
+        }
     }
     /**
-     * Convert single metadata definition to field definition
+     * Get widget icon for a field
      */
-    convertMetadataToFieldDefinition(metadata) {
-        // Handle null/undefined metadata
-        if (!metadata) {
-            console.warn('Undefined metadata definition encountered');
-            return {
-                path: 'undefined',
-                title: 'Undefined Field',
-                description: 'This field has undefined metadata',
-                widget: {
-                    type: 'text-editor',
-                    path: 'undefined',
-                    options: {
-                        defaultValue: '',
-                        validations: [],
+    getWidgetIcon(interfaceValue) {
+        return 'fa-light fa-input-text';
+    }
+    /**
+     * Get widget title for a field
+     */
+    getWidgetTitle(interfaceValue) {
+        const widgetType = this.parseInterfaceType(interfaceValue);
+        return widgetType
+            .replace(/-/g, ' ')
+            .replace(/editor/gi, '')
+            .trim()
+            .split(' ')
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ') || 'Text';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPMetaDataSelectorWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPMetaDataSelectorWidgetEditComponent, isStandalone: true, selector: "axp-meta-data-selector-widget-edit", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-meta-data-selector-widget-edit\" *translate=\"let t\">\n  @if (!readonly()) {\n  <div class=\"__header\">\n    <div class=\"__header-left\"></div>\n    <div class=\"__header-right\">\n      <ax-button class=\"ax-sm\"\n        [text]=\"'@data-management:metadata-definitions.actions.add-group.title' | translate | async\" [color]=\"'primary'\"\n        (onClick)=\"handleAddGroupClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button class=\"ax-sm\" [color]=\"'success'\" [disabled]=\"isPreviewDisabled()\"\n        [text]=\"'@data-management:metadata-definitions.actions.preview.title' | translate | async\"\n        (onClick)=\"handlePreviewClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  }\n\n  <div class=\"__content\">\n    @if (groups().length === 0) {\n    <axp-state-message icon=\"fa-light fa-layer-group\"\n      [title]=\"'@data-management:metadata-definitions.components.meta-data-selector.empty-states.no-groups.title'\"\n      [description]=\"\n        '@data-management:metadata-definitions.components.meta-data-selector.empty-states.no-groups.description'\n      \">\n    </axp-state-message>\n    } @else {\n    <div class=\"__groups-container\" cdkDropList [cdkDropListData]=\"groups()\"\n      (cdkDropListDropped)=\"handleGroupDrop($event)\">\n      @for (group of groups(); track group.id) {\n      <div class=\"__group\" cdkDrag [class.__default-group]=\"isDefaultGroup(group.name)\">\n        <div class=\"__group-header\">\n          @if (!readonly()) {\n          <div class=\"__group-drag-handle\" cdkDragHandle>\n            <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n          </div>\n          }\n          <div class=\"__group-info\">\n            <h3 class=\"__group-title\">\n              @if (group.title) {\n              {{ group.title }}\n              <span class=\"__group-name-prefix\">({{ group.name }})</span>\n              } @else {\n              {{ group.name }}\n              }\n              @if (isDefaultGroup(group.name) && !group.title) {\n              <span class=\"__default-group-badge\">{{\n                '@data-management:metadata-definitions.components.meta-data-selector.default-section-badge'\n                | translate\n                | async\n                }}</span>\n              }\n            </h3>\n            @if (group.description) {\n            <p class=\"__group-description\">{{ group.description }}</p>\n            }\n          </div>\n          @if (!readonly()) {\n          <div class=\"__group-actions\">\n            <ax-button class=\"ax-sm\"\n              [text]=\"'@data-management:metadata-definitions.actions.add-field.title' | translate | async\"\n              [color]=\"'accent2'\" (onClick)=\"handleAddFieldToGroup(group)\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n              <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n            </ax-button>\n            @if (canDeleteGroup()) {\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n              <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n            </ax-button>\n            }\n          </div>\n          }\n        </div>\n\n        <div class=\"__fields-container\">\n          <div class=\"__items-list\" cdkDropList [id]=\"'group-' + group.name + '-fields'\"\n            [cdkDropListData]=\"group.fields\" [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n            (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\">\n            @if (group.fields.length === 0) {\n            <axp-state-message icon=\"fa-light fa-inbox\" [title]=\"\n                '@data-management:metadata-definitions.components.meta-data-selector.empty-states.empty-group.title'\n              \" [description]=\"\n                '@data-management:metadata-definitions.components.meta-data-selector.empty-states.empty-group.description'\n              \">\n            </axp-state-message>\n            } @else { @for (field of group.fields; track field.id) {\n            <div class=\"__field-item\" cdkDrag [class.__deleted]=\"field.status === 'deleted'\">\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                  <div class=\"__field-icon\">\n                    <ax-icon [icon]=\"getWidgetIcon(field.interface)\"></ax-icon>\n                  </div>\n                  <div class=\"__field-info\">\n                    <h4 class=\"__item-title\">{{ field.title }}</h4>\n                    <span class=\"__widget-type\">{{ getWidgetTitle(field.interface) }}</span>\n                    @if (field.description) {\n                    <p class=\"__field-description\">{{ field.description }}</p>\n                    }\n                  </div>\n                </div>\n              </div>\n\n              @if (!readonly()) {\n              <div class=\"__item-actions\">\n                @if (field.status === 'deleted') {\n                <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"warning\"\n                  (onClick)=\"handleFieldRevert(field, group.id)\">\n                  <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n                </ax-button>\n                } @else {\n                <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\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)=\"handleFieldRemove(field, group.id)\">\n                  <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                </ax-button>\n                }\n              </div>\n              }\n            </div>\n            } }\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>", styles: [".axp-meta-data-selector-widget-edit{display:flex;height:100%;width:100%;flex-direction:column}.axp-meta-data-selector-widget-edit .__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-bottom-width:1px;padding:.75rem}.axp-meta-data-selector-widget-edit .__header .__header-left,.axp-meta-data-selector-widget-edit .__header .__header-right{display:flex;gap:.5rem}.axp-meta-data-selector-widget-edit .__content{flex:1 1 0%;overflow:auto;padding:.75rem}.axp-meta-data-selector-widget-edit .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-meta-data-selector-widget-edit .__group{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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))}.axp-meta-data-selector-widget-edit .__group .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info{flex:1 1 0%}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info .__group-title .__group-name-prefix{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info .__group-title .__default-group-badge{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-meta-data-selector-widget-edit .__group .__fields-container{padding:1rem}.axp-meta-data-selector-widget-edit .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-meta-data-selector-widget-edit .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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));cursor:move;-webkit-user-select:none;user-select:none}.axp-meta-data-selector-widget-edit .__field-item:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-meta-data-selector-widget-edit .__field-item.__deleted{opacity:.6;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))}.axp-meta-data-selector-widget-edit .__field-item.__selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-meta-data-selector-widget-edit .__field-item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab;transition:color .15s ease-in-out}.axp-meta-data-selector-widget-edit .__field-item .__drag-handle:active{cursor:grabbing}.axp-meta-data-selector-widget-edit .__field-item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__field-item .__item-content{flex:1 1 0%}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header{display:flex;align-items:flex-start;gap:.75rem}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-info{flex:1 1 0%}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__field-item .__item-actions{display:flex;gap:.5rem}.__group.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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))}.__group.cdk-drag-preview .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__group.cdk-drag-preview .__group-info{flex:1 1 0%}.__group.cdk-drag-preview .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.__group.cdk-drag-preview .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-preview .__fields-container{padding:.75rem}.__group.cdk-drag-preview .__fields-container .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;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))}.__group.cdk-drag-preview .__fields-container .__field-item .__field-icon{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content{flex:1 1 0%}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__item-title{margin-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:500}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__widget-type{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin-bottom:1rem;min-height:8rem}.__group.cdk-drag-dragging{opacity:.7}.__group:hover:not(.cdk-drag-dragging) .__group-drag-handle{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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));display:flex;align-items:center;gap:.75rem;padding:.75rem;opacity:.9}.__field-item.cdk-drag-preview .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview .__item-content{flex:1 1 0%}.__field-item.cdk-drag-preview .__item-content .__item-header{display:flex;align-items:flex-start;gap:.75rem}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-info{flex:1 1 0%}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__field-item.cdk-drag-placeholder{position:relative;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));border-radius:.375rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));min-height:5rem;margin-bottom:.75rem;opacity:.5}.__field-item.cdk-drag-placeholder>*{opacity:0}.__field-item.cdk-drag-placeholder:before{content:\"\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));pointer-events:none}.__field-item.cdk-drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.__items-list.cdk-drop-list-dragging .__field-item:not(.cdk-drag-placeholder){margin-bottom:.75rem}.__items-list.cdk-drop-list-dragging .__field-item:not(.cdk-drag-placeholder):last-child{margin-bottom:0}.__items-list.cdk-drop-list-dragging{position:relative;min-height:4rem;border-radius:.375rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.__items-list.cdk-drop-list-dragging axp-state-message{display:none}.__items-list.cdk-drop-list-dragging:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem;border-radius:.375rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.__items-list.cdk-drop-list-receiving axp-state-message{display:none}.__items-list.cdk-drop-list-receiving:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__groups-container.cdk-drop-list-dragging .__group:not(.cdk-drag-placeholder){margin-bottom:1rem}.__groups-container.cdk-drop-list-dragging .__group:not(.cdk-drag-placeholder):last-child{margin-bottom:0}.__groups-container.cdk-drop-list-dragging:has(.__group.cdk-drag-placeholder){border-radius:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.__groups-container.cdk-drop-list-receiving:has(.__group.cdk-drag-placeholder){border-radius:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.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: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.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: AXFormModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i7.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "directive", type: 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: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPMetaDataSelectorWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-meta-data-selector-widget-edit', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXFormModule,
+                        AXTranslationModule,
+                        AXPStateMessageComponent,
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragHandle,
+                    ], template: "<div class=\"axp-meta-data-selector-widget-edit\" *translate=\"let t\">\n  @if (!readonly()) {\n  <div class=\"__header\">\n    <div class=\"__header-left\"></div>\n    <div class=\"__header-right\">\n      <ax-button class=\"ax-sm\"\n        [text]=\"'@data-management:metadata-definitions.actions.add-group.title' | translate | async\" [color]=\"'primary'\"\n        (onClick)=\"handleAddGroupClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button class=\"ax-sm\" [color]=\"'success'\" [disabled]=\"isPreviewDisabled()\"\n        [text]=\"'@data-management:metadata-definitions.actions.preview.title' | translate | async\"\n        (onClick)=\"handlePreviewClick()\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  }\n\n  <div class=\"__content\">\n    @if (groups().length === 0) {\n    <axp-state-message icon=\"fa-light fa-layer-group\"\n      [title]=\"'@data-management:metadata-definitions.components.meta-data-selector.empty-states.no-groups.title'\"\n      [description]=\"\n        '@data-management:metadata-definitions.components.meta-data-selector.empty-states.no-groups.description'\n      \">\n    </axp-state-message>\n    } @else {\n    <div class=\"__groups-container\" cdkDropList [cdkDropListData]=\"groups()\"\n      (cdkDropListDropped)=\"handleGroupDrop($event)\">\n      @for (group of groups(); track group.id) {\n      <div class=\"__group\" cdkDrag [class.__default-group]=\"isDefaultGroup(group.name)\">\n        <div class=\"__group-header\">\n          @if (!readonly()) {\n          <div class=\"__group-drag-handle\" cdkDragHandle>\n            <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n          </div>\n          }\n          <div class=\"__group-info\">\n            <h3 class=\"__group-title\">\n              @if (group.title) {\n              {{ group.title }}\n              <span class=\"__group-name-prefix\">({{ group.name }})</span>\n              } @else {\n              {{ group.name }}\n              }\n              @if (isDefaultGroup(group.name) && !group.title) {\n              <span class=\"__default-group-badge\">{{\n                '@data-management:metadata-definitions.components.meta-data-selector.default-section-badge'\n                | translate\n                | async\n                }}</span>\n              }\n            </h3>\n            @if (group.description) {\n            <p class=\"__group-description\">{{ group.description }}</p>\n            }\n          </div>\n          @if (!readonly()) {\n          <div class=\"__group-actions\">\n            <ax-button class=\"ax-sm\"\n              [text]=\"'@data-management:metadata-definitions.actions.add-field.title' | translate | async\"\n              [color]=\"'accent2'\" (onClick)=\"handleAddFieldToGroup(group)\">\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n              <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n            </ax-button>\n            @if (canDeleteGroup()) {\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n              <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n            </ax-button>\n            }\n          </div>\n          }\n        </div>\n\n        <div class=\"__fields-container\">\n          <div class=\"__items-list\" cdkDropList [id]=\"'group-' + group.name + '-fields'\"\n            [cdkDropListData]=\"group.fields\" [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n            (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\">\n            @if (group.fields.length === 0) {\n            <axp-state-message icon=\"fa-light fa-inbox\" [title]=\"\n                '@data-management:metadata-definitions.components.meta-data-selector.empty-states.empty-group.title'\n              \" [description]=\"\n                '@data-management:metadata-definitions.components.meta-data-selector.empty-states.empty-group.description'\n              \">\n            </axp-state-message>\n            } @else { @for (field of group.fields; track field.id) {\n            <div class=\"__field-item\" cdkDrag [class.__deleted]=\"field.status === 'deleted'\">\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                  <div class=\"__field-icon\">\n                    <ax-icon [icon]=\"getWidgetIcon(field.interface)\"></ax-icon>\n                  </div>\n                  <div class=\"__field-info\">\n                    <h4 class=\"__item-title\">{{ field.title }}</h4>\n                    <span class=\"__widget-type\">{{ getWidgetTitle(field.interface) }}</span>\n                    @if (field.description) {\n                    <p class=\"__field-description\">{{ field.description }}</p>\n                    }\n                  </div>\n                </div>\n              </div>\n\n              @if (!readonly()) {\n              <div class=\"__item-actions\">\n                @if (field.status === 'deleted') {\n                <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"warning\"\n                  (onClick)=\"handleFieldRevert(field, group.id)\">\n                  <ax-icon class=\"fa-light fa-rotate-left\"></ax-icon>\n                </ax-button>\n                } @else {\n                <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\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)=\"handleFieldRemove(field, group.id)\">\n                  <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                </ax-button>\n                }\n              </div>\n              }\n            </div>\n            } }\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n  </div>\n</div>", styles: [".axp-meta-data-selector-widget-edit{display:flex;height:100%;width:100%;flex-direction:column}.axp-meta-data-selector-widget-edit .__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-bottom-width:1px;padding:.75rem}.axp-meta-data-selector-widget-edit .__header .__header-left,.axp-meta-data-selector-widget-edit .__header .__header-right{display:flex;gap:.5rem}.axp-meta-data-selector-widget-edit .__content{flex:1 1 0%;overflow:auto;padding:.75rem}.axp-meta-data-selector-widget-edit .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-meta-data-selector-widget-edit .__group{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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))}.axp-meta-data-selector-widget-edit .__group .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info{flex:1 1 0%}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info .__group-title .__group-name-prefix{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info .__group-title .__default-group-badge{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-meta-data-selector-widget-edit .__group .__fields-container{padding:1rem}.axp-meta-data-selector-widget-edit .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-meta-data-selector-widget-edit .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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));cursor:move;-webkit-user-select:none;user-select:none}.axp-meta-data-selector-widget-edit .__field-item:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-meta-data-selector-widget-edit .__field-item.__deleted{opacity:.6;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))}.axp-meta-data-selector-widget-edit .__field-item.__selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-meta-data-selector-widget-edit .__field-item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab;transition:color .15s ease-in-out}.axp-meta-data-selector-widget-edit .__field-item .__drag-handle:active{cursor:grabbing}.axp-meta-data-selector-widget-edit .__field-item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__field-item .__item-content{flex:1 1 0%}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header{display:flex;align-items:flex-start;gap:.75rem}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-info{flex:1 1 0%}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__field-item .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-meta-data-selector-widget-edit .__field-item .__item-actions{display:flex;gap:.5rem}.__group.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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))}.__group.cdk-drag-preview .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__group.cdk-drag-preview .__group-info{flex:1 1 0%}.__group.cdk-drag-preview .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.__group.cdk-drag-preview .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-preview .__fields-container{padding:.75rem}.__group.cdk-drag-preview .__fields-container .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;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))}.__group.cdk-drag-preview .__fields-container .__field-item .__field-icon{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content{flex:1 1 0%}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__item-title{margin-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:500}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__widget-type{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin-bottom:1rem;min-height:8rem}.__group.cdk-drag-dragging{opacity:.7}.__group:hover:not(.cdk-drag-dragging) .__group-drag-handle{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);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));display:flex;align-items:center;gap:.75rem;padding:.75rem;opacity:.9}.__field-item.cdk-drag-preview .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview .__item-content{flex:1 1 0%}.__field-item.cdk-drag-preview .__item-content .__item-header{display:flex;align-items:flex-start;gap:.75rem}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-info{flex:1 1 0%}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__field-item.cdk-drag-placeholder{position:relative;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));border-radius:.375rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));min-height:5rem;margin-bottom:.75rem;opacity:.5}.__field-item.cdk-drag-placeholder>*{opacity:0}.__field-item.cdk-drag-placeholder:before{content:\"\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));pointer-events:none}.__field-item.cdk-drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.__items-list.cdk-drop-list-dragging .__field-item:not(.cdk-drag-placeholder){margin-bottom:.75rem}.__items-list.cdk-drop-list-dragging .__field-item:not(.cdk-drag-placeholder):last-child{margin-bottom:0}.__items-list.cdk-drop-list-dragging{position:relative;min-height:4rem;border-radius:.375rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.__items-list.cdk-drop-list-dragging axp-state-message{display:none}.__items-list.cdk-drop-list-dragging:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem;border-radius:.375rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.__items-list.cdk-drop-list-receiving axp-state-message{display:none}.__items-list.cdk-drop-list-receiving:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__groups-container.cdk-drop-list-dragging .__group:not(.cdk-drag-placeholder){margin-bottom:1rem}.__groups-container.cdk-drop-list-dragging .__group:not(.cdk-drag-placeholder):last-child{margin-bottom:0}.__groups-container.cdk-drop-list-dragging:has(.__group.cdk-drag-placeholder){border-radius:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.__groups-container.cdk-drop-list-receiving:has(.__group.cdk-drag-placeholder){border-radius:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}\n"] }]
+        }] });
+
+var metaDataSelectorEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPMetaDataSelectorWidgetEditComponent: AXPMetaDataSelectorWidgetEditComponent
+});
+
+function normalizeSelectorDisplayConfig(display, defaultTitle) {
+    if (!display)
+        return { section: { enabled: true } };
+    if (typeof display === 'object')
+        return display;
+    switch (display) {
+        case 'section':
+            return { section: { enabled: true, title: defaultTitle }, popup: { enabled: false } };
+        case 'popup':
+            return { section: { enabled: false }, popup: { enabled: true, title: defaultTitle } };
+        case 'both':
+            return { section: { enabled: true, title: defaultTitle }, popup: { enabled: true, title: defaultTitle } };
+        default:
+            return { section: { enabled: true } };
+    }
+}
+/**
+ * meta-data-selector plugin
+ *
+ * Dynamic behavior:
+ * - Creates a single property for metadata selector configuration
+ * - Dynamically generates entity groups and meta-data-form widgets based on configured groups
+ * - Each metadata group becomes a separate entity section with its own meta-data-form widget
+ * - Reads group configuration at runtime from the field value
+ */
+const metaDataSelectorPlugin = {
+    name: 'meta-data-selector',
+    order: 60,
+    apply: (ctx, options) => {
+        const opts = options ?? {};
+        const field = META_DATA_SELECTOR_FIELD;
+        // Try to get title from various sources in priority order:
+        // 1. Direct options.title
+        // 2. meta-data-form plugin configuration (from plugins array - current entity or base entity)
+        // 3. meta-data-form extension (if plugin has already run - current entity or base entity)
+        // 4. category plugin metaData.title (if enabled via category plugin)
+        // 5. Default title
+        let metaDataFormTitle;
+        let metaDataFormExtTitle;
+        let categoryMetaDataTitle;
+        // Check current entity's plugins and extensions
+        const plugins = ctx.entity.plugins;
+        const metaDataFormPlugin = plugins?.find((p) => p.name === 'meta-data-form');
+        metaDataFormTitle = metaDataFormPlugin?.options?.title;
+        const metaDataFormExt = ctx.entity.extensions?.metaDataForm;
+        metaDataFormExtTitle = metaDataFormExt
+            ? Object.values(metaDataFormExt).find((ext) => ext?.title)
+            : undefined;
+        const categoryExt = ctx.entity.extensions?.category;
+        categoryMetaDataTitle = categoryExt?.metaData?.title;
+        // If running on a category entity (name ends with "Category"), check the base entity
+        if (ctx.entity.name.endsWith('Category') && !metaDataFormTitle && !metaDataFormExtTitle) {
+            const baseEntityName = ctx.entity.name.replace('Category', '');
+            try {
+                // Try to access the entity registry to get base entity
+                // Note: This requires the registry to be available, which might not always be the case
+                // For now, we'll rely on the category extension which should have the title
+                // But we can also check if there's a way to access base entity plugins
+            }
+            catch (error) {
+                // Silently fail - we'll use other sources
+            }
+        }
+        // Priority: 1. options.title, 2. meta-data-form plugin title, 3. meta-data-form extension title, 4. category metaData.title, 5. default
+        const displayTitle = (opts.title && opts.title.trim().length > 0)
+            ? opts.title
+            : (metaDataFormTitle && metaDataFormTitle.trim().length > 0)
+                ? metaDataFormTitle
+                : (metaDataFormExtTitle?.title && metaDataFormExtTitle.title.trim().length > 0)
+                    ? metaDataFormExtTitle.title
+                    : (categoryMetaDataTitle && categoryMetaDataTitle.trim().length > 0)
+                        ? categoryMetaDataTitle
+                        : '@data-management:metadata-definitions.actions.configure-meta-data.title';
+        const displayConfig = normalizeSelectorDisplayConfig(opts.display, displayTitle);
+        const sectionConfig = displayConfig.section ?? {};
+        const popupConfig = displayConfig.popup ?? {};
+        const showSection = sectionConfig.enabled !== false;
+        const showPopup = popupConfig.enabled === true;
+        const popupTitle = popupConfig.title ?? displayTitle;
+        //#region ----   Step 1: Create Meta-Data Selector Property   ----
+        // Ensure group and section for the selector configuration itself
+        const selectorSectionId = `meta-data-config`;
+        const selectorGroupId = `meta-data-config`;
+        const existingGroups = ctx.groups.list() ?? [];
+        if (!existingGroups.some((g) => g.id === selectorGroupId)) {
+            ctx.groups.add({ id: selectorGroupId, 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: selectorGroupId,
+                schema: {
+                    dataType: 'object',
+                    interface: {
+                        type: 'meta-data-selector-editor',
                     },
                 },
-            };
+            });
         }
-        const interfaceConfig = this.parseInterfaceConfig(metadata.interface);
-        // Handle defaultValue: support both direct property and configuration.defaultValue
-        // (meta-data-selector uses configuration.defaultValue, other sources may use defaultValue directly)
-        const defaultValue = metadata.defaultValue ?? metadata.configuration?.defaultValue;
-        // Handle description: support both direct property and from configuration
-        const description = metadata.description ?? metadata.configuration?.description;
-        const widget = {
-            type: interfaceConfig.type || 'text-editor',
-            path: metadata.name || 'unnamed',
-            options: {
-                ...interfaceConfig.options,
-                defaultValue: defaultValue,
-                validations: this.parseValidations(metadata.interface),
+        // Add selector to single/create/modify views only when section display is enabled
+        const selectorColSpan = 12;
+        if (showSection) {
+            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 === selectorSectionId)) {
+                    next.sections.push({
+                        id: selectorSectionId,
+                        title: sectionConfig.title ?? displayTitle,
+                        order: sectionConfig.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: selectorColSpan, order: 9 } },
+                        },
+                    });
+                }
+                return next;
+            });
+            ctx.interfaces.master.create.update((create) => {
+                const next = create ?? { sections: [], properties: [] };
+                next.sections = next.sections ?? [];
+                if (!next.sections.some((s) => s.id === selectorSectionId)) {
+                    next.sections.push({
+                        id: selectorSectionId,
+                        title: sectionConfig.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: selectorColSpan, order: 7 } },
+                        },
+                    });
+                }
+                return next;
+            });
+            ctx.interfaces.master.modify.update((modify) => {
+                const next = modify ?? { sections: [], properties: [] };
+                next.sections = next.sections ?? [];
+                if (!next.sections.some((s) => s.id === selectorSectionId)) {
+                    next.sections.push({
+                        id: selectorSectionId,
+                        title: sectionConfig.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: selectorColSpan, order: 7 } },
+                        },
+                    });
+                }
+                return next;
+            });
+        }
+        //#endregion
+        //#region ----   Step 2: Dynamic Group Generation Middleware   ----
+        // Add metadata middleware to dynamically generate groups at runtime
+        // This middleware reads the metaDataList field value and creates
+        // entity groups + meta-data-form widgets for each configured group
+        const metadataMiddleware = {
+            name: 'metadata-dynamic-groups',
+            order: 100,
+            apply: (entityCtx) => {
+                // Get the metadata selector value from context
+                const metaDataValue = entityCtx.data?.[field];
+                if (!metaDataValue?.groups || metaDataValue.groups.length === 0) {
+                    return; // No groups configured, skip
+                }
+                // TODO: Implement renderGroupsAsSections option
+                // If opts.renderGroupsAsSections === true:
+                //   - Create separate entity sections for each metadata group
+                //   - Each section gets its own meta-data-form widget with only that group's fields
+                // If opts.renderGroupsAsSections === false (default):
+                //   - Create single section with all groups (current behavior)
+                //   - Single meta-data-form widget receives all groups, renders them as cards
+                // Current implementation: renderGroupsAsSections = false (default)
+                // Create a single section and single meta-data-form widget for all groups
+                const sectionId = 'metadata-section';
+                const formFieldName = META_DATA_FORM_FIELD;
+                const groupId = 'metadata-group';
+                // Ensure entity group exists
+                if (!entityCtx.groups.list().some((g) => g.id === groupId)) {
+                    entityCtx.groups.add({
+                        id: groupId,
+                        title: displayTitle,
+                    });
+                }
+                // Ensure meta-data-form property exists with all groups
+                // Always update the property to ensure groups are passed correctly
+                const existingProp = entityCtx.properties.list().find((p) => p.name === formFieldName);
+                const groupsData = metaDataValue.groups.map((group) => ({
+                    name: group.name,
+                    title: group.title,
+                    description: group.description,
+                    fields: group.fields,
+                }));
+                if (!existingProp) {
+                    entityCtx.properties.add({
+                        name: formFieldName,
+                        title: displayTitle,
+                        groupId: groupId,
+                        schema: {
+                            dataType: 'object',
+                            interface: {
+                                type: 'meta-data-form-editor',
+                                options: {
+                                    // Pass all groups so the form can render them as separate groups
+                                    groups: groupsData,
+                                },
+                            },
+                        },
+                    });
+                }
+                else {
+                    // Update existing property to ensure groups are set
+                    if (existingProp.schema?.interface?.options) {
+                        existingProp.schema.interface.options.groups = groupsData;
+                    }
+                }
+                // Add to single view - single section
+                entityCtx.interfaces.master.single.update((single) => {
+                    const next = single ?? { title: entityCtx.entity.title, sections: [], properties: [] };
+                    next.sections = next.sections ?? [];
+                    if (!next.sections.some((s) => s.id === sectionId)) {
+                        next.sections.push({
+                            id: sectionId,
+                            title: displayTitle,
+                            order: 300,
+                        });
+                    }
+                    next.properties = next.properties ?? [];
+                    if (!next.properties.some((p) => p.name === formFieldName)) {
+                        next.properties.push({
+                            name: formFieldName,
+                            layout: {
+                                label: { visible: false },
+                                positions: { lg: { colSpan: 12, order: 0 } },
+                            },
+                        });
+                    }
+                    return next;
+                });
+                // Add to create view - single section
+                entityCtx.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 === formFieldName)) {
+                        next.properties.push({
+                            name: formFieldName,
+                            layout: {
+                                label: { visible: false },
+                                positions: { lg: { colSpan: 12, order: 10 } },
+                            },
+                        });
+                    }
+                    return next;
+                });
+                // Add to modify view - single section
+                entityCtx.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 === formFieldName)) {
+                        next.properties.push({
+                            name: formFieldName,
+                            layout: {
+                                label: { visible: false },
+                                positions: { lg: { colSpan: 12, order: 10 } },
+                            },
+                        });
+                    }
+                    return next;
+                });
             },
         };
-        if (interfaceConfig.triggers?.length) {
-            widget.triggers = interfaceConfig.triggers;
+        // Register the middleware (if middleware system exists)
+        // Note: This is conceptual - actual implementation depends on platform capabilities
+        // (ctx as any).middleware?.add?.(metadataMiddleware);
+        //#endregion
+        //#region ----   Step 3: Popup actions (when display is popup or both)   ----
+        if (showPopup) {
+            const actionName = `show-meta-data-selector-popup-${field}`;
+            const commandName = 'show-meta-data-selector-popup';
+            ctx.interfaces.master.single.update((single) => {
+                const next = single ?? { title: ctx.entity.title, sections: [], properties: [], actions: [] };
+                next.actions = next.actions ?? [];
+                if (!actionExists(next.actions, commandName, actionName)) {
+                    next.actions.push({
+                        name: actionName,
+                        title: popupTitle,
+                        command: {
+                            name: commandName,
+                            options: {
+                                entity: `${ctx.entity.module}.${ctx.entity.name}`,
+                                id: '{{ context.eval("id") }}',
+                                field,
+                                title: popupTitle,
+                            },
+                        },
+                        priority: 'secondary',
+                        type: 'configure',
+                        icon: 'fa-light fa-list-check',
+                        scope: AXPEntityCommandScope.Individual,
+                    });
+                }
+                return next;
+            });
+            ctx.interfaces.master.list.update((list) => {
+                const next = list ?? { actions: [], views: [] };
+                next.actions = next.actions ?? [];
+                if (!actionExists(next.actions, commandName, actionName)) {
+                    next.actions.push({
+                        name: actionName,
+                        title: popupTitle,
+                        command: {
+                            name: commandName,
+                            options: {
+                                entity: `${ctx.entity.module}.${ctx.entity.name}`,
+                                id: '{{ context.eval("id") }}',
+                                field,
+                                title: popupTitle,
+                            },
+                        },
+                        priority: 'secondary',
+                        type: 'configure',
+                        icon: 'fa-light fa-list-check',
+                        scope: AXPEntityCommandScope.Individual,
+                    });
+                }
+                return next;
+            });
         }
-        return {
-            path: metadata.name || 'unnamed',
-            title: metadata.title || 'Untitled Field',
-            description: description,
-            widget,
+        //#endregion
+        //#region ----   Step 4: Extension Metadata   ----
+        // Stamp normalized config for middleware
+        ctx.entity.extensions ??= {};
+        ctx.entity.extensions.metaDataSelector ??= {};
+        ctx.entity.extensions.metaDataSelector[field] = {
+            title: displayTitle,
+            display: displayConfig,
         };
-    }
-    /**
-     * 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 layout renderer component instance
-     */
-    getLayoutRenderer() {
-        return this.layoutRenderer();
-    }
-    /**
-     * Validate the form
-     */
-    async validate() {
-        const renderer = this.layoutRenderer();
-        if (renderer) {
-            const validation = await renderer.validate();
-            return validation.result;
-        }
-        return false;
-    }
-    /**
-     * Get current form context
-     */
-    getContext() {
-        const renderer = this.layoutRenderer();
-        return renderer ? renderer.getContext() : {};
-    }
+        //#endregion
+    },
+};
+
+class AXPMetaDataSelectorWidgetViewComponent extends AXPValueWidgetComponent {
     /**
-     * Update form context programmatically
+     * 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.
      */
-    updateContext(context) {
-        console.log('updateContext', context);
-        const renderer = this.layoutRenderer();
-        if (renderer) {
-            renderer.updateContext(context);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPMetaDataFormWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPMetaDataFormWidgetEditComponent, isStandalone: true, selector: "axp-meta-data-form-widget-edit", outputs: { contextChange: "contextChange", validityChange: "validityChange" }, viewQueries: [{ propertyName: "layoutRenderer", first: true, predicate: AXPLayoutRendererComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    @if (hasDefinitions()) {
-      <axp-layout-renderer
-        [layout]="formDefinition()"
-        [context]="getValue()"
-        [look]="'container'"
-        (contextChange)="onContextChange($event)"
-        (validityChange)="onValidityChange($event)"
-      >
-      </axp-layout-renderer>
-    } @else {
-      <axp-state-message
-        icon="fa-light fa-clipboard-list"
-        [title]="'@data-management:metadata-definitions.components.meta-data-selector.empty-states.no-metadata-definitions.title'"
-        [description]="'@data-management:metadata-definitions.components.meta-data-selector.empty-states.no-metadata-definitions.description'"
-      >
-      </axp-state-message>
+    get display() {
+        const val = this.getValue();
+        return Array.isArray(val) ? val.map((v) => v.title || v.text).join(', ') : '';
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPMetaDataSelectorWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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.3.16", ngImport: i0, type: AXPMetaDataFormWidgetEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPMetaDataSelectorWidgetViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-meta-data-form-widget-edit', template: `
-    @if (hasDefinitions()) {
-      <axp-layout-renderer
-        [layout]="formDefinition()"
-        [context]="getValue()"
-        [look]="'container'"
-        (contextChange)="onContextChange($event)"
-        (validityChange)="onValidityChange($event)"
-      >
-      </axp-layout-renderer>
-    } @else {
-      <axp-state-message
-        icon="fa-light fa-clipboard-list"
-        [title]="'@data-management:metadata-definitions.components.meta-data-selector.empty-states.no-metadata-definitions.title'"
-        [description]="'@data-management:metadata-definitions.components.meta-data-selector.empty-states.no-metadata-definitions.description'"
-      >
-      </axp-state-message>
-    }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXPLayoutRendererComponent, AXFormModule, AXLabelModule, AXPWidgetCoreModule, AXPStateMessageComponent] }]
-        }], propDecorators: { contextChange: [{ type: i0.Output, args: ["contextChange"] }], validityChange: [{ type: i0.Output, args: ["validityChange"] }], layoutRenderer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPLayoutRendererComponent), { isSignal: true }] }] } });
+            args: [{
+                    selector: 'axp-meta-data-selector-widget-view',
+                    template: `<span>{{ display }}</span>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AXDecoratorModule],
+                }]
+        }] });
 
-var metaDataFormEdit_component = /*#__PURE__*/Object.freeze({
+var metaDataSelectorView_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AXPMetaDataFormWidgetEditComponent: AXPMetaDataFormWidgetEditComponent
+    AXPMetaDataSelectorWidgetViewComponent: AXPMetaDataSelectorWidgetViewComponent
 });
 
-class ShowMetaDataFormPopupCommand {
+/**
+ * Opens the meta-data-selector (configuration UI for groups/fields) in a popup.
+ * Used when meta-data-selector plugin has display: 'popup' or 'both'.
+ */
+class ShowMetaDataSelectorPopupCommand {
     constructor() {
         this.layoutBuilder = inject(AXPLayoutBuilderService);
         this.translationService = inject(AXTranslationService);
         this.entityService = inject(AXPEntityService);
-        this.entityRegistry = inject(AXPEntityDefinitionRegistryService);
     }
     async execute(input) {
         try {
-            // Extract evaluated options from __context__ (private/controlled data)
-            // The __context__.options contains evaluated expressions from entity actions
             const contextOptions = input.__context__?.options;
-            // Merge root-level input with evaluated options from __context__
-            // Root-level takes precedence if both exist
             const evaluatedInput = {
                 ...contextOptions,
                 ...input,
-                // Ensure we use evaluated options from __context__ if available
                 ...(contextOptions ? contextOptions : {}),
             };
-            const { entity, id, field = META_DATA_FORM_FIELD, title, path } = evaluatedInput;
+            const { entity, id, field = META_DATA_SELECTOR_FIELD, title, } = evaluatedInput;
             if (!entity || !id) {
                 return {
                     success: false,
@@ -9544,14 +9822,8 @@ class ShowMetaDataFormPopupCommand {
                     },
                 };
             }
-            // Ensure id is a string
-            if (typeof id !== 'string' && id != null) {
-                const stringId = String(id);
-                if (stringId) {
-                    evaluatedInput.id = stringId;
-                }
-            }
-            if (!evaluatedInput.id || typeof evaluatedInput.id !== 'string') {
+            const finalId = typeof id === 'string' ? id : String(id);
+            if (!finalId) {
                 return {
                     success: false,
                     message: {
@@ -9559,9 +9831,6 @@ class ShowMetaDataFormPopupCommand {
                     },
                 };
             }
-            const finalId = evaluatedInput.id;
-            // Get current entity record to get the metadata expression value
-            const [moduleName, entityName] = entity.split('.');
             const currentRecord = await this.findRecord(entity, finalId);
             if (!currentRecord) {
                 return {
@@ -9571,46 +9840,9 @@ class ShowMetaDataFormPopupCommand {
                     },
                 };
             }
-            // Note: pathValue might be null/undefined, but the metadata expression evaluator will handle it
-            // The expression will return an empty array if pathValue is not available
-            // Resolve entity to get metadata expression and determine if it's category or entity lookup
-            const entityDef = await this.entityRegistry.resolve(moduleName, entityName);
-            const metaDataFormExt = entityDef.extensions?.metaDataForm?.[field];
-            if (!metaDataFormExt) {
-                return {
-                    success: false,
-                    message: {
-                        text: await this.translationService.translateAsync('@data-management:metadata-definitions.messages.meta-data-form-not-configured'),
-                    },
-                };
-            }
-            // Get path property to determine metadata source type
-            const props = entityDef.properties || [];
-            const pathProperty = props.find((p) => p.name === path);
-            const targetEntity = pathProperty?.schema?.interface?.options?.['entity'];
-            if (!targetEntity) {
-                return {
-                    success: false,
-                    message: {
-                        text: await this.translationService.translateAsync('@data-management:metadata-definitions.messages.invalid-path-field'),
-                    },
-                };
-            }
-            // Build metadata expression based on target entity type
-            let metadataExpression;
-            if (targetEntity.endsWith('Category')) {
-                // Category lookup - use fromCategory
-                metadataExpression = `{{ metadata.fromCategory("${entity}", context.eval('${path}')) }}`;
-            }
-            else {
-                // Relationship lookup - use fromEntity
-                metadataExpression = `{{ metadata.fromEntity("${targetEntity}", context.eval('${path}')) }}`;
-            }
-            // Get current meta data form value
-            const currentMetaDataValue = currentRecord[field] || {};
-            // Build dialog title
-            const dialogTitle = title || metaDataFormExt.title || await this.translationService.translateAsync('@data-management:metadata-definitions.components.meta-data-form.title');
-            // Open dialog with meta-data-form-editor widget
+            const currentSelectorValue = currentRecord[field] ?? { groups: [] };
+            const dialogTitle = title ??
+                (await this.translationService.translateAsync('@data-management:metadata-definitions.actions.configure-meta-data.title'));
             const result = await this.layoutBuilder
                 .create()
                 .dialog((dialog) => {
@@ -9620,19 +9852,16 @@ class ShowMetaDataFormPopupCommand {
                     .setCloseButton(true)
                     .setContext({
                     ...currentRecord,
-                    [field]: currentMetaDataValue,
+                    [field]: currentSelectorValue,
                 })
                     .content((layout) => {
                     layout.flex((flex) => {
                         flex.setDirection('column').setGap('16px');
-                        // Add meta-data-form-editor widget with metadata expression
                         flex.formField('', (fieldBuilder) => {
                             fieldBuilder
                                 .path(field)
                                 .setShowLabel(false)
-                                .customWidget('meta-data-form-editor', {
-                                groups: metadataExpression,
-                            });
+                                .customWidget('meta-data-selector-editor', {});
                         });
                     });
                 })
@@ -9647,9 +9876,7 @@ class ShowMetaDataFormPopupCommand {
                     if (!context || action === 'cancel') {
                         return { success: false };
                     }
-                    const updateData = {
-                        [field]: context[field],
-                    };
+                    const updateData = { [field]: context[field] };
                     const updated = await this.updateRecord(entity, finalId, updateData);
                     return {
                         success: true,
@@ -9667,7 +9894,9 @@ class ShowMetaDataFormPopupCommand {
             return {
                 success: false,
                 message: {
-                    text: error instanceof Error ? error.message : 'Failed to show meta data form popup',
+                    text: error instanceof Error
+                        ? error.message
+                        : 'Failed to show meta data selector popup',
                 },
             };
         }
@@ -9681,25 +9910,25 @@ class ShowMetaDataFormPopupCommand {
         return dataAccessor.byKey(id);
     }
     /**
-     * Persists meta-data form changes. Override to use custom persistence or validation.
+     * Persists meta-data changes. Override to use custom persistence or validation.
      */
     updateRecord(entity, id, data) {
         const dataAccessor = this.entityService.withEntity(entity).data();
         return dataAccessor.update(id, data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ShowMetaDataFormPopupCommand, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ShowMetaDataFormPopupCommand, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ShowMetaDataSelectorPopupCommand, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ShowMetaDataSelectorPopupCommand, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ShowMetaDataFormPopupCommand, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ShowMetaDataSelectorPopupCommand, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-var showMetaDataFormPopup_command = /*#__PURE__*/Object.freeze({
+var showMetaDataSelectorPopup_command = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    ShowMetaDataFormPopupCommand: ShowMetaDataFormPopupCommand
+    ShowMetaDataSelectorPopupCommand: ShowMetaDataSelectorPopupCommand
 });
 
 /**
@@ -10411,5 +10640,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AXMColumnFilterSelectorWidget, AXMColumnFilterSelectorWidgetColumnComponent, AXMColumnFilterSelectorWidgetEditComponent, AXMColumnFilterSelectorWidgetFilterComponent, AXMColumnFilterSelectorWidgetPrintComponent, AXMColumnFilterSelectorWidgetViewComponent, AXMDataManagementFeatureKeys, AXMDataManagementModule, AXMDataSourceEntityModule, AXMDataSourceOutputType, AXMDataSourceService, AXMDataSourceServiceImpl, AXMDataSourceType, AXMDefaultAggregateFunctionProvider, AXMDefaultDatabaseTypeProvider, AXMEntityProvider, AXMMenuProvider, AXMMetaDataDefinitionEntityModule, AXMMetaDataDefinitionService, AXMMetaDataFeatureModule, AXMMetadataEvaluatorScopeProvider, AXMPMetaDataDefinitionServiceImpl, AXMPermissionsKeys, AXMQueryEntityModule, AXMQueryService, AXMQueryServiceImpl, AXMTagEntityModule, AXMTagEntityService, AXMTagsFeatureModule, AXM_COLUMN_DEF_WIDGET, AXM_FILTER_DEF_WIDGET, AXPAggregateBuilderComponent, AXPAggregateFunctionService, AXPAggregateFunctionsRegistry, AXPColumnsBuilderComponent, AXPDataManagementMenuKeys, AXPDatabaseTypeService, AXPGroupByBuilderComponent, AXPMetaDataSelectorWidget, AXPMetaDataSelectorWidgetEditComponent, AXPMetaDataSelectorWidgetViewComponent, AXPQueryBuilderComponent, AXPQueryBuilderWidget, AXPQueryBuilderWidgetColumnComponent, AXPQueryBuilderWidgetDesignerComponent, AXPQueryBuilderWidgetEditComponent, AXPQueryBuilderWidgetViewComponent, AXPRawQueryBuilderComponent, AXPSortBuilderComponent, AXPSystemTagProvider, AXPWhereBuilderComponent, AXP_AGGREGATE_FUNCTION_PROVIDER, AXP_DATABASE_TYPE_PROVIDER, AXP_DEFAULT_AGGREGATE_FUNCTION_PROVIDER, AXP_DEFAULT_DATABASE_TYPE_PROVIDER, META_DATA_FORM_FIELD, META_DATA_SELECTOR_FIELD, RootConfig, ShowMetaDataSelectorPopupCommand, convertStateToValue, convertValueToState, createDefaultGroup, dataSourceEntityFactory, factory, metaDataDefinitionFactory, metaDataSelectorPlugin, queryFactory, tagsPlugin };
+export { AXMColumnFilterSelectorWidget, AXMColumnFilterSelectorWidgetColumnComponent, AXMColumnFilterSelectorWidgetEditComponent, AXMColumnFilterSelectorWidgetFilterComponent, AXMColumnFilterSelectorWidgetPrintComponent, AXMColumnFilterSelectorWidgetViewComponent, AXMDataManagementFeatureKeys, AXMDataManagementModule, AXMDataSourceEntityModule, AXMDataSourceOutputType, AXMDataSourceService, AXMDataSourceServiceImpl, AXMDataSourceType, AXMDefaultAggregateFunctionProvider, AXMDefaultDatabaseTypeProvider, AXMEntityProvider, AXMMenuProvider, AXMMetaDataDefinitionEntityModule, AXMMetaDataDefinitionService, AXMMetaDataFeatureModule, AXMMetadataEvaluatorScopeProvider, AXMPMetaDataDefinitionServiceImpl, AXMPermissionsKeys, AXMQueryEntityModule, AXMQueryService, AXMQueryServiceImpl, AXMTagEntityModule, AXMTagEntityService, AXMTagsFeatureModule, AXM_COLUMN_DEF_WIDGET, AXM_FILTER_DEF_WIDGET, AXPAggregateBuilderComponent, AXPAggregateFunctionService, AXPAggregateFunctionsRegistry, AXPColumnsBuilderComponent, AXPDataManagementMenuKeys, AXPDatabaseTypeService, AXPGroupByBuilderComponent, AXPMetaDataFormWidget, AXPMetaDataFormWidgetEditComponent, AXPMetaDataSelectorWidget, AXPMetaDataSelectorWidgetEditComponent, AXPMetaDataSelectorWidgetViewComponent, AXPQueryBuilderComponent, AXPQueryBuilderWidget, AXPQueryBuilderWidgetColumnComponent, AXPQueryBuilderWidgetDesignerComponent, AXPQueryBuilderWidgetEditComponent, AXPQueryBuilderWidgetViewComponent, AXPRawQueryBuilderComponent, AXPSortBuilderComponent, AXPSystemTagProvider, AXPWhereBuilderComponent, AXP_AGGREGATE_FUNCTION_PROVIDER, AXP_DATABASE_TYPE_PROVIDER, AXP_DEFAULT_AGGREGATE_FUNCTION_PROVIDER, AXP_DEFAULT_DATABASE_TYPE_PROVIDER, META_DATA_FORM_FIELD, META_DATA_SELECTOR_FIELD, RootConfig, ShowMetaDataFormPopupCommand, ShowMetaDataSelectorPopupCommand, convertStateToValue, convertValueToState, createDefaultGroup, dataSourceEntityFactory, equipmentFactory, factory, metaDataDefinitionFactory, metaDataSelectorPlugin, queryFactory, tagsPlugin };
 //# sourceMappingURL=acorex-modules-data-management.mjs.map