@masterteam/properties 0.0.30 → 0.0.32

package/fesm2022/masterteam-properties.mjs

@@ -19,7 +19,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { Page } from '@masterteam/components/page';
 import { DynamicForm } from '@masterteam/forms/dynamic-form';
 import * as i1$1 from '@angular/forms';
-import { FormGroup, FormControl, FormArray, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, ControlContainer, FormGroupDirective } from '@angular/forms';
+import { FormGroup, FormControl, Validators, FormArray, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, ControlContainer, FormGroupDirective } from '@angular/forms';
 import * as i2 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import { FormulaBuilder } from '@masterteam/formula-builder';
@@ -262,14 +262,23 @@ let PropertiesState = class PropertiesState extends CrudStateBase {
     // ============================================================================
     getAll(ctx, action) {
         const state = ctx.getState();
-        const moduleType = state.moduleType ?? undefined;
-        const moduleId = state.moduleId ?? undefined;
-        const parentPath = state.parentPath ?? '';
-        const params = { ...action.params };
         ctx.patchState({
-            lastQueryParams: params ?? null,
+            lastQueryParams: action.params ?? null,
         });
-        const req$ = this.http.get(`${this.baseUrl}${parentPath}/${moduleType}/${moduleId}`, { params });
+        // Build contextKey in format "Level:5/Module:10" or "Level:5" or "Module:10"
+        const contextParts = [];
+        if (state.parentModuleType && state.parentModuleId) {
+            contextParts.push(`${state.parentModuleType}:${state.parentModuleId}`);
+        }
+        if (state.moduleType && state.moduleId) {
+            contextParts.push(`${state.moduleType}:${state.moduleId}`);
+        }
+        const contextKey = contextParts.join('/');
+        const params = {
+            ...action.params,
+            contextKey,
+        };
+        const req$ = this.http.get(`${this.baseUrl}/catalog`, { params });
         return handleApiRequest({
             ctx,
             key: PropertiesActionKey.GetAll,
@@ -1021,12 +1030,19 @@ class ApiConfiguration {
             validators: [Validators.required],
         }),
         headers: new FormArray([]),
-        key: new FormControl(null),
-        value: new FormControl(null),
+        key: new FormControl('', {
+            nonNullable: true,
+            validators: [Validators.required],
+        }),
+        value: new FormControl('', {
+            nonNullable: true,
+            validators: [Validators.required],
+        }),
         supportMultiSelect: new FormControl(false, { nonNullable: true }),
     });
     onChange = () => { };
     onTouched = () => { };
+    onValidatorChange = () => { };
     formChanges = toSignal(this.form.valueChanges, {
         initialValue: this.form.getRawValue(),
     });
@@ -1035,6 +1051,7 @@ class ApiConfiguration {
         effect(() => {
             this.formChanges();
             this.emitValue();
+            this.onValidatorChange();
         });
         effect(() => {
             const latestSchema = this.facade.apiSchema();
@@ -1058,8 +1075,8 @@ class ApiConfiguration {
             if (!value) {
                 this.form.reset({
                     endpoint: '',
-                    key: null,
-                    value: null,
+                    key: '',
+                    value: '',
                     supportMultiSelect: false,
                 }, { emitEvent: false });
                 this.setHeadersFromRecord({});
@@ -1070,8 +1087,8 @@ class ApiConfiguration {
             this.schema.set(value.schema ?? null);
             this.form.patchValue({
                 endpoint: value.endpoint ?? '',
-                key: value.key ?? null,
-                value: value.value ?? null,
+                key: value.key ?? '',
+                value: value.value ?? '',
                 supportMultiSelect: !!value.supportMultiSelect,
             }, { emitEvent: false });
             this.setHeadersFromRecord(value.headers ?? {});
@@ -1080,6 +1097,7 @@ class ApiConfiguration {
         finally {
             this.isWriting = false;
             this.emitValue(false);
+            this.onValidatorChange();
         }
     }
     registerOnChange(fn) {
@@ -1088,6 +1106,12 @@ class ApiConfiguration {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    validate(_) {
+        return this.form.valid ? null : { apiConfigurationInvalid: true };
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
     setDisabledState(isDisabled) {
         if (isDisabled) {
             this.form.disable({ emitEvent: false });
@@ -1123,8 +1147,8 @@ class ApiConfiguration {
         const value = {
             endpoint: this.form.controls.endpoint.value,
             headers,
-            key: this.form.controls.key.value ?? undefined,
-            value: this.form.controls.value.value ?? undefined,
+            key: this.form.controls.key.value,
+            value: this.form.controls.value.value,
             supportMultiSelect: this.form.controls.supportMultiSelect.value,
             schema: this.schema(),
         };
@@ -1164,7 +1188,12 @@ class ApiConfiguration {
                 useExisting: forwardRef(() => ApiConfiguration),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div [formGroup]=\"form\" class=\"space-y-6\">\r\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\r\n    <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_auto]\">\r\n      <mt-text-field\r\n        formControlName=\"endpoint\"\r\n        [label]=\"'properties.form.endpoint' | transloco\"\r\n        [placeholder]=\"'properties.form.endpointPlaceholder' | transloco\"\r\n      />\r\n      <div class=\"flex justify-end gap-2\">\r\n        <mt-button\r\n          type=\"button\"\r\n          [text]=\"true\"\r\n          icon=\"general.plus\"\r\n          [label]=\"'properties.form.addHeader' | transloco\"\r\n          (click)=\"addHeader()\"\r\n        />\r\n        <mt-button\r\n          type=\"button\"\r\n          [label]=\"'properties.form.testApi' | transloco\"\r\n          [loading]=\"isTesting()\"\r\n          (click)=\"testApi()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (headers.controls.length) {\r\n      <div class=\"space-y-3\">\r\n        <div class=\"text-sm font-medium text-surface-500\">\r\n          {{ \"properties.form.headers\" | transloco }}\r\n        </div>\r\n        <div class=\"space-y-3\">\r\n          @for (\r\n            headerCtrl of headers.controls;\r\n            track headerCtrl;\r\n            let i = $index\r\n          ) {\r\n            <div\r\n              [formGroup]=\"headerCtrl\"\r\n              class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]\"\r\n            >\r\n              <mt-text-field\r\n                formControlName=\"key\"\r\n                [label]=\"'properties.form.headerKey' | transloco\"\r\n              />\r\n              <mt-text-field\r\n                formControlName=\"value\"\r\n                [label]=\"'properties.form.headerValue' | transloco\"\r\n              />\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                icon=\"general.trash-01\"\r\n                (click)=\"removeHeader(i)\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.noHeadersMessage\" | transloco }}\r\n      </p>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\r\n    @if (hasDetectedSchema()) {\r\n      <div class=\"grid gap-4 md:grid-cols-2\">\r\n        <mt-select-field\r\n          formControlName=\"key\"\r\n          [options]=\"apiProperties()\"\r\n          [showClear]=\"true\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"key\"\r\n          [label]=\"'properties.form.keyField' | transloco\"\r\n        />\r\n        <mt-select-field\r\n          formControlName=\"value\"\r\n          [options]=\"apiProperties()\"\r\n          [showClear]=\"true\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"key\"\r\n          [label]=\"'properties.form.valueField' | transloco\"\r\n        />\r\n      </div>\r\n    } @else {\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.messageTestApiPrompt\" | transloco }}\r\n      </p>\r\n    }\r\n\r\n    <div class=\"flex items-center justify-between gap-4\">\r\n      <mt-toggle-field\r\n        formControlName=\"supportMultiSelect\"\r\n        [label]=\"'properties.form.labelSupportMultiSelect' | transloco\"\r\n      />\r\n      @if (isTesting()) {\r\n        <span class=\"text-xs text-surface-400\">\r\n          {{ \"properties.form.messageTesting\" | transloco }}\r\n        </span>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => ApiConfiguration),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div [formGroup]=\"form\" class=\"space-y-6\">\r\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\r\n    <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_auto]\">\r\n      <mt-text-field\r\n        formControlName=\"endpoint\"\r\n        [label]=\"'properties.form.endpoint' | transloco\"\r\n        [placeholder]=\"'properties.form.endpointPlaceholder' | transloco\"\r\n      />\r\n      <div class=\"flex justify-end gap-2\">\r\n        <mt-button\r\n          type=\"button\"\r\n          [text]=\"true\"\r\n          icon=\"general.plus\"\r\n          [label]=\"'properties.form.addHeader' | transloco\"\r\n          (click)=\"addHeader()\"\r\n        />\r\n        <mt-button\r\n          type=\"button\"\r\n          [label]=\"'properties.form.testApi' | transloco\"\r\n          [loading]=\"isTesting()\"\r\n          (click)=\"testApi()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (headers.controls.length) {\r\n      <div class=\"space-y-3\">\r\n        <div class=\"text-sm font-medium text-surface-500\">\r\n          {{ \"properties.form.headers\" | transloco }}\r\n        </div>\r\n        <div class=\"space-y-3\">\r\n          @for (\r\n            headerCtrl of headers.controls;\r\n            track headerCtrl;\r\n            let i = $index\r\n          ) {\r\n            <div\r\n              [formGroup]=\"headerCtrl\"\r\n              class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]\"\r\n            >\r\n              <mt-text-field\r\n                formControlName=\"key\"\r\n                [label]=\"'properties.form.headerKey' | transloco\"\r\n              />\r\n              <mt-text-field\r\n                formControlName=\"value\"\r\n                [label]=\"'properties.form.headerValue' | transloco\"\r\n              />\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                icon=\"general.trash-01\"\r\n                (click)=\"removeHeader(i)\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.noHeadersMessage\" | transloco }}\r\n      </p>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\r\n    @if (hasDetectedSchema()) {\r\n      <div class=\"grid gap-4 md:grid-cols-2\">\r\n        <mt-select-field\r\n          formControlName=\"key\"\r\n          [options]=\"apiProperties()\"\r\n          [showClear]=\"true\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"key\"\r\n          [label]=\"'properties.form.keyField' | transloco\"\r\n        />\r\n        <mt-select-field\r\n          formControlName=\"value\"\r\n          [options]=\"apiProperties()\"\r\n          [showClear]=\"true\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"key\"\r\n          [label]=\"'properties.form.valueField' | transloco\"\r\n        />\r\n      </div>\r\n    } @else {\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.messageTestApiPrompt\" | transloco }}\r\n      </p>\r\n    }\r\n\r\n    <div class=\"flex items-center justify-between gap-4\">\r\n      <mt-toggle-field\r\n        formControlName=\"supportMultiSelect\"\r\n        [label]=\"'properties.form.labelSupportMultiSelect' | transloco\"\r\n      />\r\n      @if (isTesting()) {\r\n        <span class=\"text-xs text-surface-400\">\r\n          {{ \"properties.form.messageTesting\" | transloco }}\r\n        </span>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ApiConfiguration, decorators: [{
             type: Component,
@@ -1182,6 +1211,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                             useExisting: forwardRef(() => ApiConfiguration),
                             multi: true,
                         },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => ApiConfiguration),
+                            multi: true,
+                        },
                     ], template: "<div [formGroup]=\"form\" class=\"space-y-6\">\r\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\r\n    <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_auto]\">\r\n      <mt-text-field\r\n        formControlName=\"endpoint\"\r\n        [label]=\"'properties.form.endpoint' | transloco\"\r\n        [placeholder]=\"'properties.form.endpointPlaceholder' | transloco\"\r\n      />\r\n      <div class=\"flex justify-end gap-2\">\r\n        <mt-button\r\n          type=\"button\"\r\n          [text]=\"true\"\r\n          icon=\"general.plus\"\r\n          [label]=\"'properties.form.addHeader' | transloco\"\r\n          (click)=\"addHeader()\"\r\n        />\r\n        <mt-button\r\n          type=\"button\"\r\n          [label]=\"'properties.form.testApi' | transloco\"\r\n          [loading]=\"isTesting()\"\r\n          (click)=\"testApi()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (headers.controls.length) {\r\n      <div class=\"space-y-3\">\r\n        <div class=\"text-sm font-medium text-surface-500\">\r\n          {{ \"properties.form.headers\" | transloco }}\r\n        </div>\r\n        <div class=\"space-y-3\">\r\n          @for (\r\n            headerCtrl of headers.controls;\r\n            track headerCtrl;\r\n            let i = $index\r\n          ) {\r\n            <div\r\n              [formGroup]=\"headerCtrl\"\r\n              class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]\"\r\n            >\r\n              <mt-text-field\r\n                formControlName=\"key\"\r\n                [label]=\"'properties.form.headerKey' | transloco\"\r\n              />\r\n              <mt-text-field\r\n                formControlName=\"value\"\r\n                [label]=\"'properties.form.headerValue' | transloco\"\r\n              />\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                icon=\"general.trash-01\"\r\n                (click)=\"removeHeader(i)\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.noHeadersMessage\" | transloco }}\r\n      </p>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\r\n    @if (hasDetectedSchema()) {\r\n      <div class=\"grid gap-4 md:grid-cols-2\">\r\n        <mt-select-field\r\n          formControlName=\"key\"\r\n          [options]=\"apiProperties()\"\r\n          [showClear]=\"true\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"key\"\r\n          [label]=\"'properties.form.keyField' | transloco\"\r\n        />\r\n        <mt-select-field\r\n          formControlName=\"value\"\r\n          [options]=\"apiProperties()\"\r\n          [showClear]=\"true\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"key\"\r\n          [label]=\"'properties.form.valueField' | transloco\"\r\n        />\r\n      </div>\r\n    } @else {\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.messageTestApiPrompt\" | transloco }}\r\n      </p>\r\n    }\r\n\r\n    <div class=\"flex items-center justify-between gap-4\">\r\n      <mt-toggle-field\r\n        formControlName=\"supportMultiSelect\"\r\n        [label]=\"'properties.form.labelSupportMultiSelect' | transloco\"\r\n      />\r\n      @if (isTesting()) {\r\n        <span class=\"text-xs text-surface-400\">\r\n          {{ \"properties.form.messageTesting\" | transloco }}\r\n        </span>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [] });
 
@@ -1260,7 +1294,7 @@ class CheckListFormConfiguration {
         this.propertiesFacade.resetConfigProperties();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CheckListFormConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: CheckListFormConfiguration, isStandalone: true, selector: "mt-check-list-form-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: CheckListFormConfiguration, isStandalone: true, selector: "mt-check-list-form-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1271,265 +1305,169 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                     ], template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n" }]
         }], ctorParameters: () => [] });
 
-class DynamicListConfiguration {
+class EntityListConfiguration {
     propertiesFacade = inject(PropertiesFacade);
     controlContainer = inject(ControlContainer);
     parentGroup = this.controlContainer.control;
     transloco = inject(TranslocoService);
+    previousModuleId = signal(null, ...(ngDevMode ? [{ debugName: "previousModuleId" }] : []));
+    configurationControl = this.parentGroup.get('configuration');
     configScopes = this.propertiesFacade.configScopes;
     configProperties = this.propertiesFacade.configProperties;
     configuration = toSignal(this.parentGroup.valueChanges.pipe(startWith(this.parentGroup.value), map((value) => value?.configuration), distinctUntilChanged()), { initialValue: this.parentGroup.value?.configuration });
-    scopeItems = computed(() => {
+    moduleItems = computed(() => {
         const scope = this.configScopes()[0];
         return scope?.items ?? [];
-    }, ...(ngDevMode ? [{ debugName: "scopeItems" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "moduleItems" }] : []));
+    accessOptions = [
+        { label: 'Auto', value: 'Auto' },
+        { label: 'Read', value: 'Read' },
+        { label: 'Write', value: 'Write' },
+        { label: 'ReadWrite', value: 'ReadWrite' },
+        { label: 'None', value: 'None' },
+    ];
+    snapshotModeOptions = [
+        { label: 'Snapshot', value: 'Snapshot' },
+        { label: 'Realtime', value: 'Realtime' },
+    ];
     formConfig = linkedSignal(() => ({
         sections: [
             {
                 key: 'configuration',
                 label: this.transloco.translate('properties.form.configurationSection'),
-                cssClass: ' rounded-xl bg-content \
-    shadow-sm \
+                cssClass: ' rounded-xl bg-content \
+    shadow-sm \
    px-6 py-4',
                 type: 'header',
                 bodyClass: 'grid grid-cols-1 md:grid-cols-2 gap-3',
                 fields: [
                     {
-                        key: 'scopeId',
+                        key: 'moduleId',
                         type: 'select',
                         label: this.transloco.translate('properties.form.selectScope'),
                         optionLabel: 'name',
                         optionValue: 'id',
+                        options: this.moduleItems(),
                         filter: true,
-                        options: this.scopeItems(),
                     },
-                    new PickListFieldConfig({
-                        key: 'properties',
-                        cssClass: 'md:col-span-2',
-                        options: this.configProperties(),
-                        optionLabel: 'name.display',
-                        optionValue: 'key',
-                        sourceHeader: this.transloco.translate('properties.form.availableProperties'),
-                        targetHeader: this.transloco.translate('properties.form.selectedProperties'),
-                    }),
                     {
-                        key: 'mappingBehaviour',
-                        type: 'toggle',
-                        label: this.transloco.translate('properties.form.mapToActual'),
-                        cssClass: 'md:col-span-2',
+                        key: 'access',
+                        type: 'select',
+                        label: 'Access',
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        options: this.accessOptions,
                     },
-                ],
-            },
-        ],
-    }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
-    constructor() {
-        effect(() => {
-            const scopeId = this.configuration()?.scopeId;
-            if (scopeId) {
-                const scopeType = this.configScopes()[0]?.scope;
-                if (scopeType) {
-                    this.propertiesFacade.loadPropertiesForConfigType(scopeType, scopeId);
-                }
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.propertiesFacade.resetConfigProperties();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicListConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: DynamicListConfiguration, isStandalone: true, selector: "mt-dynamic-list-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
-            { provide: ControlContainer, useExisting: FormGroupDirective },
-        ] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicListConfiguration, decorators: [{
-            type: Component,
-            args: [{ selector: 'mt-dynamic-list-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
-                        { provide: ControlContainer, useExisting: FormGroupDirective },
-                    ], template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n" }]
-        }], ctorParameters: () => [] });
-
-class EditableListViewConfiguration {
-    propertiesFacade = inject(PropertiesFacade);
-    controlContainer = inject(ControlContainer);
-    parentGroup = this.controlContainer.control;
-    transloco = inject(TranslocoService);
-    configScopes = this.propertiesFacade.configScopes;
-    configProperties = this.propertiesFacade.configProperties;
-    configuration = toSignal(this.parentGroup.valueChanges.pipe(startWith(this.parentGroup.value), map((value) => value?.configuration), distinctUntilChanged()), { initialValue: this.parentGroup.value?.configuration });
-    scopeItems = computed(() => {
-        const scope = this.configScopes()[0];
-        return scope?.items ?? [];
-    }, ...(ngDevMode ? [{ debugName: "scopeItems" }] : []));
-    formConfig = linkedSignal(() => ({
-        sections: [
-            {
-                key: 'configuration',
-                label: this.transloco.translate('properties.form.configurationSection'),
-                cssClass: ' rounded-xl bg-content \
-    shadow-sm \
-   px-6 py-4',
-                type: 'header',
-                bodyClass: 'grid grid-cols-1 md:grid-cols-2 gap-3',
-                fields: [
                     {
-                        key: 'scopeId',
+                        key: 'snapshotMode',
                         type: 'select',
-                        label: this.transloco.translate('properties.form.selectScope'),
-                        optionLabel: 'name',
-                        optionValue: 'id',
-                        options: this.scopeItems(),
+                        label: 'Snapshot Mode',
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        options: this.snapshotModeOptions,
                     },
                     new PickListFieldConfig({
-                        key: 'Properties',
+                        key: 'readFields',
                         cssClass: 'md:col-span-2',
                         options: this.configProperties(),
                         optionLabel: 'name.display',
                         optionValue: 'key',
-                        sourceHeader: this.transloco.translate('properties.form.availableProperties'),
-                        targetHeader: this.transloco.translate('properties.form.selectedProperties'),
+                        sourceHeader: 'Available Read Fields',
+                        targetHeader: 'Selected Read Fields',
                     }),
-                    {
-                        key: 'isEditable',
-                        type: 'toggle',
-                        label: this.transloco.translate('properties.form.isEditable'),
-                    },
-                    {
-                        key: 'preserveValue',
-                        type: 'toggle',
-                        label: this.transloco.translate('properties.form.preserveValue'),
-                    },
-                ],
-            },
-        ],
-    }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
-    constructor() {
-        effect(() => {
-            const scopeId = this.configuration()?.scopeId;
-            if (scopeId) {
-                const scopeType = this.configScopes()[0]?.scope;
-                if (scopeType) {
-                    this.propertiesFacade.loadPropertiesForConfigType(scopeType, scopeId);
-                }
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.propertiesFacade.resetConfigProperties();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EditableListViewConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: EditableListViewConfiguration, isStandalone: true, selector: "mt-editable-list-view-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
-            { provide: ControlContainer, useExisting: FormGroupDirective },
-        ] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EditableListViewConfiguration, decorators: [{
-            type: Component,
-            args: [{ selector: 'mt-editable-list-view-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
-                        { provide: ControlContainer, useExisting: FormGroupDirective },
-                    ], template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n" }]
-        }], ctorParameters: () => [] });
-
-class InternalModuleConfiguration {
-    // private readonly workspaceStructureFacade = inject(WorkspaceStructureFacade);
-    //  = this.workspaceStructureFacade.workspaceNodes;
-    levels;
-    propertiesFacade = inject(PropertiesFacade);
-    cc = inject(ControlContainer);
-    transloco = inject(TranslocoService);
-    parentGroup = this.cc.control;
-    configProperties = this.propertiesFacade.configProperties;
-    configScopes = this.propertiesFacade.configScopes;
-    configuration = toSignal(this.parentGroup.valueChanges.pipe(startWith(this.parentGroup.value), map((v) => v?.configuration), distinctUntilChanged()), { initialValue: this.parentGroup.value?.configuration });
-    PrevModuleId = signal(null, ...(ngDevMode ? [{ debugName: "PrevModuleId" }] : []));
-    scopeItems = computed(() => {
-        const selectedType = this.configuration()?.type;
-        if (!selectedType)
-            return [];
-        const scope = this.configScopes().find((s) => s.scope === selectedType);
-        return scope?.items ?? [];
-    }, ...(ngDevMode ? [{ debugName: "scopeItems" }] : []));
-    formConfig = linkedSignal(() => ({
-        sections: [
-            {
-                key: 'configuration',
-                label: this.transloco.translate('properties.form.configurationSection'),
-                cssClass: ' rounded-xl bg-content \
-    shadow-sm \
-   px-6 py-4',
-                type: 'header',
-                bodyClass: 'grid grid-cols-1 md:grid-cols-2 gap-3 align-items-end ',
-                fields: [
-                    {
-                        key: 'type',
-                        type: 'select',
-                        label: this.transloco.translate('properties.form.type'),
-                        optionLabel: 'scope',
-                        optionValue: 'scope',
-                        options: this.configScopes(),
-                    },
-                    {
-                        key: 'scopeId',
-                        type: 'select',
-                        label: this.transloco.translate('properties.form.selectScope'),
-                        optionLabel: 'name',
-                        optionValue: 'id',
-                        filter: true,
-                        options: this.scopeItems(),
-                    },
-                    {
-                        type: 'select',
-                        key: 'property',
-                        label: this.transloco.translate('properties.form.valueProperty'),
-                        optionLabel: 'name.display',
-                        optionValue: 'key',
-                        options: this.configProperties(),
-                    },
                     new PickListFieldConfig({
-                        cssClass: 'md:col-span-2 mt-2',
-                        key: 'propertyDetails',
+                        key: 'writeFields',
+                        cssClass: 'md:col-span-2',
                         options: this.configProperties(),
                         optionLabel: 'name.display',
                         optionValue: 'key',
-                        sourceHeader: this.transloco.translate('properties.form.availableProperties'),
-                        targetHeader: this.transloco.translate('properties.form.selectedProperties'),
+                        sourceHeader: 'Available Write Fields',
+                        targetHeader: 'Selected Write Fields',
+                        relations: [
+                            { action: 'show', key: 'access', value: 'Write' },
+                            { action: 'show', key: 'access', value: 'ReadWrite' },
+                            { action: 'show', key: 'access', value: 'Auto' },
+                        ],
                     }),
                     {
+                        key: 'readFilter',
+                        type: 'text',
                         cssClass: 'md:col-span-2',
-                        key: 'preserveValue',
-                        type: 'toggle',
-                        label: this.transloco.translate('properties.form.labelPreserveValue'),
+                        label: 'Read Filter',
+                        placeholder: 'status == "completed"',
                     },
                 ],
             },
         ],
     }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     constructor() {
+        this.applyEntityListDefaults();
+        this.syncLegacyScopeAlias();
+        this.loadModuleProperties();
+    }
+    applyEntityListDefaults() {
+        const config = this.configurationControl.value;
+        if (config)
+            return;
+        this.configurationControl.setValue({
+            moduleId: 0,
+            access: 'Auto',
+            snapshotMode: 'Snapshot',
+            readFields: [],
+            writeFields: [],
+            readFilter: '',
+        }, { emitEvent: true });
+    }
+    syncLegacyScopeAlias() {
         effect(() => {
-            if (this.configuration()?.scopeId) {
-                const moduleType = this.configuration()?.type;
-                const moduleId = this.configuration()?.scopeId;
-                if (moduleId == this.PrevModuleId()) {
-                    return;
-                }
-                if (moduleType && moduleId) {
-                    this.PrevModuleId.set(moduleId);
-                    this.propertiesFacade.loadPropertiesForConfigType(moduleType, moduleId);
-                }
+            const config = this.configuration();
+            if (!config || typeof config !== 'object')
+                return;
+            const moduleId = config.moduleId;
+            const scopeId = config.scopeId;
+            if ((moduleId === null || moduleId === undefined || moduleId === '') &&
+                scopeId !== null &&
+                scopeId !== undefined &&
+                scopeId !== '') {
+                this.configurationControl.patchValue({ ...config, moduleId: scopeId }, { emitEvent: true });
+                return;
+            }
+            if (moduleId !== null &&
+                moduleId !== undefined &&
+                moduleId !== '' &&
+                moduleId !== scopeId) {
+                this.configurationControl.patchValue({ ...config, scopeId: moduleId }, { emitEvent: true });
             }
         });
     }
+    loadModuleProperties() {
+        effect(() => {
+            const config = this.configuration();
+            const moduleId = config?.moduleId ?? config?.scopeId;
+            if (!moduleId || moduleId === this.previousModuleId()) {
+                return;
+            }
+            const scopeType = this.configScopes()[0]?.scope;
+            if (!scopeType) {
+                return;
+            }
+            this.previousModuleId.set(moduleId);
+            this.propertiesFacade.loadPropertiesForConfigType(scopeType, moduleId);
+        });
+    }
     ngOnDestroy() {
         this.propertiesFacade.resetConfigProperties();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: InternalModuleConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: InternalModuleConfiguration, isStandalone: true, selector: "mt-internal-module-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityListConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: EntityListConfiguration, isStandalone: true, selector: "mt-entity-list-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: InternalModuleConfiguration, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityListConfiguration, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-internal-module-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
+            args: [{ selector: 'mt-entity-list-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
                         { provide: ControlContainer, useExisting: FormGroupDirective },
-                    ], template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n" }]
+                    ], template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\n" }]
         }], ctorParameters: () => [] });
 
 class LocationConfiguration {
@@ -1568,7 +1506,7 @@ class LocationConfiguration {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LocationConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: LocationConfiguration, isStandalone: true, selector: "mt-location-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: LocationConfiguration, isStandalone: true, selector: "mt-location-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1615,7 +1553,7 @@ class LookupConfiguration {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: LookupConfiguration, isStandalone: true, selector: "mt-lookup-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: LookupConfiguration, isStandalone: true, selector: "mt-lookup-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1649,7 +1587,7 @@ class PercentageConfiguration {
         ],
     }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PercentageConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: PercentageConfiguration, isStandalone: true, selector: "mt-percentage-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: PercentageConfiguration, isStandalone: true, selector: "mt-percentage-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1696,7 +1634,7 @@ class UserConfiguration {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: UserConfiguration, isStandalone: true, selector: "mt-user-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: UserConfiguration, isStandalone: true, selector: "mt-user-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1849,7 +1787,7 @@ class AttachmentConfiguration {
         ],
     }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AttachmentConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: AttachmentConfiguration, isStandalone: true, selector: "mt-attachment-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: AttachmentConfiguration, isStandalone: true, selector: "mt-attachment-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1867,6 +1805,11 @@ class PropertyForm {
     transloco = inject(TranslocoService);
     propertyId = input('', ...(ngDevMode ? [{ debugName: "propertyId" }] : []));
     propertyTypes = this.facade.propertyTypes;
+    legacyReplacedViewTypes = [
+        'DynamicList',
+        'EditableListView',
+        'InternalModule',
+    ];
     submitLabel = computed(() => this.propertyId()
         ? this.transloco.translate('properties.form.updateButton')
         : this.transloco.translate('properties.form.createButton'), ...(ngDevMode ? [{ debugName: "submitLabel" }] : []));
@@ -1877,7 +1820,7 @@ class PropertyForm {
             isCalculated: false,
             viewType: null,
             name: { ar: '', en: '' },
-            description: '',
+            description: { ar: '', en: '' },
         }),
         configuration: new FormControl(null),
         formula: new FormControl(null),
@@ -1894,6 +1837,10 @@ class PropertyForm {
         initialValue: Boolean(this.mainControl.value?.isCalculated),
     });
     formulaSchemaId = computed(() => this.resolveSchemaId(this.facade.parentModuleId() ?? this.facade.moduleId()), ...(ngDevMode ? [{ debugName: "formulaSchemaId" }] : []));
+    availablePropertyTypes = computed(() => {
+        const allTypes = this.propertyTypes()?.value ?? [];
+        return allTypes.filter((item) => !this.legacyReplacedViewTypes.includes(item?.viewType ?? ''));
+    }, ...(ngDevMode ? [{ debugName: "availablePropertyTypes" }] : []));
     selectedPropertyTypeConfiguration = computed(() => {
         const propertyTypesSetting = this.propertyTypes();
         const selectedViewType = this.propertyType();
@@ -1933,7 +1880,7 @@ class PropertyForm {
                         optionLabel: 'label.en',
                         optionValue: 'viewType',
                         cssClass: 'w-1/2',
-                        options: this.propertyTypes()?.value,
+                        options: this.availablePropertyTypes(),
                         disabled: this.isEditing(),
                         filter: true,
                         hasPlaceholderPrefix: false,
@@ -2018,10 +1965,14 @@ class PropertyForm {
                         validators: [new ValidatorConfig({ type: 'required' })],
                     },
                     {
-                        key: 'description',
-                        label: this.transloco.translate('properties.form.description'),
+                        key: 'description.en',
+                        label: this.transloco.translate('properties.form.englishDescription'),
+                        type: 'textarea',
+                    },
+                    {
+                        key: 'description.ar',
+                        label: this.transloco.translate('properties.form.arabicDescription'),
                         type: 'textarea',
-                        cssClass: 'md:col-span-2',
                     },
                     // {
                     //   key: 'defaultValue',
@@ -2063,14 +2014,12 @@ class PropertyForm {
             // Reset config scopes before loading new ones
             this.facade.resetConfigScopes();
             // Load config scopes for specific property types
-            const supportedTypes = [
-                'InternalModule',
-                'DynamicList',
-                'EditableListView',
-                'LookupLog',
-            ];
+            const supportedTypes = ['EntityList', 'LookupModuleCheckList'];
             if (supportedTypes.includes(currentPropertyType)) {
-                this.facade.loadConfigAsType(currentPropertyType);
+                const configScopeType = currentPropertyType === 'LookupModuleCheckList'
+                    ? 'LookupLog'
+                    : currentPropertyType;
+                this.facade.loadConfigAsType(configScopeType);
             }
         });
         effect(() => {
@@ -2219,7 +2168,7 @@ class PropertyForm {
         this.destroyConfigurationComponent();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertyForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PropertyForm, isStandalone: true, selector: "mt-property-form", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "configurationHost", first: true, predicate: ["configurationHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<mt-page\r\n  [title]=\"\r\n    propertyId()\r\n      ? ('properties.form.editProperty' | transloco)\r\n      : ('properties.form.createNewProperty' | transloco)\r\n  \"\r\n  avatarIcon=\"custom.products-and-services\"\r\n  [avatarStyle]=\"{\r\n    '--p-avatar-background': 'var(--p-sky-50)',\r\n    '--p-avatar-color': 'var(--p-sky-700)',\r\n  }\"\r\n  (backButtonClick)=\"goBack()\"\r\n  backButton\r\n  class=\"h-full\"\r\n>\r\n  <ng-template #headerEnd>\r\n    <mt-button\r\n      class=\"mx-2\"\r\n      [label]=\"submitLabel()\"\r\n      [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\r\n      [loading]=\"submitting()\"\r\n      [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\r\n      (click)=\"createOrEditProperty()\"\r\n    />\r\n  </ng-template>\r\n  <div\r\n    [formGroup]=\"propertyForm\"\r\n    class=\"h-full py-4 h-full overflow-y-auto flex justify-center\"\r\n  >\r\n    <div class=\"w-2/3 flex flex-col gap-6\">\r\n      @if (loading()) {\r\n        <!-- Skeleton Loading State -->\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <div class=\"flex justify-between items-center gap-6\">\r\n            <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\r\n            <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"12rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"10rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <mt-dynamic-form\r\n          [formConfig]=\"dynamicFormConfigMain()\"\r\n          [formControlName]=\"'main'\"\r\n        />\r\n        @if (configurationFormConfig()) {\r\n          <mt-dynamic-form\r\n            formControlName=\"configuration\"\r\n            [formConfig]=\"configurationFormConfig()!\"\r\n          />\r\n        } @else {\r\n          <ng-container #configurationHost></ng-container>\r\n          @if (!configurationComponentExists()) {\r\n            @switch (propertyType()) {\r\n              @case (\"User\") {\r\n                <mt-user-configuration />\r\n              }\r\n              @case (\"Percentage\") {\r\n                <mt-percentage-configuration />\r\n              }\r\n              @case (\"Lookup\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"LookupMultiSelect\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"InternalModule\") {\r\n                <mt-internal-module-configuration />\r\n              }\r\n              @case (\"DynamicList\") {\r\n                <mt-dynamic-list-configuration />\r\n              }\r\n              @case (\"API\") {\r\n                <mt-api-configuration formControlName=\"configuration\" />\r\n              }\r\n              <!-- @case('ViewList') { REMOVED FOR NOW\r\n                  <mt-view-list-configuration />\r\n                  } -->\r\n              @case (\"Attachment\") {\r\n                <mt-attachment-configuration />\r\n              }\r\n              <!-- @case('ReferenceProperty') { REMOVED FOR NOW\r\n                   } -->\r\n              @case (\"EditableListView\") {\r\n                <mt-editable-list-view-configuration />\r\n              }\r\n              @case (\"LookupLog\") {\r\n                <mt-check-list-form-configuration />\r\n              }\r\n              <!-- @case('LookupMatrix') { REMOVED FOR NOW\r\n                  <mt-lookup-configuration />\r\n                  } -->\r\n              @case (\"Location\") {\r\n                <mt-location-configuration />\r\n              }\r\n            }\r\n          }\r\n        }\r\n        @if (isCalculated()) {\r\n          <mt-card title=\"Formula\">\r\n            <mt-formula-builder\r\n              formControlName=\"formula\"\r\n              [levelSchemaId]=\"formulaSchemaId()\"\r\n            />\r\n          </mt-card>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</mt-page>\r\n", styles: [""], dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormulaBuilder, selector: "mt-formula-builder", inputs: ["propertiesByPath", "levelSchemaId", "templateId", "placeholder", "hideToolbar", "hideStatusBar"], outputs: ["validationChange", "tokensChange"] }, { kind: "component", type: ApiConfiguration, selector: "mt-api-configuration" }, { kind: "component", type: CheckListFormConfiguration, selector: "mt-check-list-form-configuration" }, { kind: "component", type: DynamicListConfiguration, selector: "mt-dynamic-list-configuration" }, { kind: "component", type: EditableListViewConfiguration, selector: "mt-editable-list-view-configuration" }, { kind: "component", type: InternalModuleConfiguration, selector: "mt-internal-module-configuration" }, { kind: "component", type: LocationConfiguration, selector: "mt-location-configuration" }, { kind: "component", type: LookupConfiguration, selector: "mt-lookup-configuration" }, { kind: "component", type: PercentageConfiguration, selector: "mt-percentage-configuration" }, { kind: "component", type: UserConfiguration, selector: "mt-user-configuration" }, { kind: "component", type: AttachmentConfiguration, selector: "mt-attachment-configuration" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PropertyForm, isStandalone: true, selector: "mt-property-form", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "configurationHost", first: true, predicate: ["configurationHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<mt-page\r\n  [title]=\"\r\n    propertyId()\r\n      ? ('properties.form.editProperty' | transloco)\r\n      : ('properties.form.createNewProperty' | transloco)\r\n  \"\r\n  avatarIcon=\"custom.products-and-services\"\r\n  [avatarStyle]=\"{\r\n    '--p-avatar-background': 'var(--p-sky-50)',\r\n    '--p-avatar-color': 'var(--p-sky-700)',\r\n  }\"\r\n  (backButtonClick)=\"goBack()\"\r\n  backButton\r\n  class=\"h-full\"\r\n>\r\n  <ng-template #headerEnd>\r\n    <mt-button\r\n      class=\"mx-2\"\r\n      [label]=\"submitLabel()\"\r\n      [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\r\n      [loading]=\"submitting()\"\r\n      [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\r\n      (click)=\"createOrEditProperty()\"\r\n    />\r\n  </ng-template>\r\n  <div\r\n    [formGroup]=\"propertyForm\"\r\n    class=\"h-full py-4 h-full overflow-y-auto flex justify-center\"\r\n  >\r\n    <div class=\"w-2/3 flex flex-col gap-6\">\r\n      @if (loading()) {\r\n        <!-- Skeleton Loading State -->\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <div class=\"flex justify-between items-center gap-6\">\r\n            <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\r\n            <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"12rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"10rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <mt-dynamic-form\r\n          [formConfig]=\"dynamicFormConfigMain()\"\r\n          [formControlName]=\"'main'\"\r\n        />\r\n        @if (configurationFormConfig()) {\r\n          <mt-dynamic-form\r\n            formControlName=\"configuration\"\r\n            [formConfig]=\"configurationFormConfig()!\"\r\n          />\r\n        } @else {\r\n          <ng-container #configurationHost></ng-container>\r\n          @if (!configurationComponentExists()) {\r\n            @switch (propertyType()) {\r\n              @case (\"User\") {\r\n                <mt-user-configuration />\r\n              }\r\n              @case (\"Percentage\") {\r\n                <mt-percentage-configuration />\r\n              }\r\n              @case (\"Lookup\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"LookupMultiSelect\") {\n                <mt-lookup-configuration />\n              }\n              @case (\"EntityList\") {\n                <mt-entity-list-configuration />\n              }\n              @case (\"API\") {\n                <mt-api-configuration formControlName=\"configuration\" />\n              }\n              <!-- @case('ViewList') { REMOVED FOR NOW\r\n                  <mt-view-list-configuration />\r\n                  } -->\r\n              @case (\"Attachment\") {\r\n                <mt-attachment-configuration />\r\n              }\r\n              <!-- @case('ReferenceProperty') { REMOVED FOR NOW\r\n                   } -->\r\n              @case (\"LookupModuleCheckList\") {\n                <mt-check-list-form-configuration />\n              }\n              <!-- @case('LookupMatrix') { REMOVED FOR NOW\r\n                  <mt-lookup-configuration />\r\n                  } -->\r\n              @case (\"Location\") {\r\n                <mt-location-configuration />\r\n              }\r\n            }\r\n          }\r\n        }\r\n        @if (isCalculated()) {\r\n          <mt-card title=\"Formula\">\r\n            <mt-formula-builder\r\n              formControlName=\"formula\"\r\n              [levelSchemaId]=\"formulaSchemaId()\"\r\n            />\r\n          </mt-card>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</mt-page>\r\n", styles: [""], dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormulaBuilder, selector: "mt-formula-builder", inputs: ["propertiesByPath", "levelSchemaId", "templateId", "placeholder", "hideToolbar", "hideStatusBar"], outputs: ["validationChange", "tokensChange"] }, { kind: "component", type: ApiConfiguration, selector: "mt-api-configuration" }, { kind: "component", type: CheckListFormConfiguration, selector: "mt-check-list-form-configuration" }, { kind: "component", type: EntityListConfiguration, selector: "mt-entity-list-configuration" }, { kind: "component", type: LocationConfiguration, selector: "mt-location-configuration" }, { kind: "component", type: LookupConfiguration, selector: "mt-lookup-configuration" }, { kind: "component", type: PercentageConfiguration, selector: "mt-percentage-configuration" }, { kind: "component", type: UserConfiguration, selector: "mt-user-configuration" }, { kind: "component", type: AttachmentConfiguration, selector: "mt-attachment-configuration" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertyForm, decorators: [{
             type: Component,
@@ -2232,9 +2181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         FormulaBuilder,
                         ApiConfiguration,
                         CheckListFormConfiguration,
-                        DynamicListConfiguration,
-                        EditableListViewConfiguration,
-                        InternalModuleConfiguration,
+                        EntityListConfiguration,
                         LocationConfiguration,
                         LookupConfiguration,
                         PercentageConfiguration,
@@ -2242,7 +2189,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         AttachmentConfiguration,
                         SkeletonModule,
                         TranslocoModule,
-                    ], template: "<mt-page\r\n  [title]=\"\r\n    propertyId()\r\n      ? ('properties.form.editProperty' | transloco)\r\n      : ('properties.form.createNewProperty' | transloco)\r\n  \"\r\n  avatarIcon=\"custom.products-and-services\"\r\n  [avatarStyle]=\"{\r\n    '--p-avatar-background': 'var(--p-sky-50)',\r\n    '--p-avatar-color': 'var(--p-sky-700)',\r\n  }\"\r\n  (backButtonClick)=\"goBack()\"\r\n  backButton\r\n  class=\"h-full\"\r\n>\r\n  <ng-template #headerEnd>\r\n    <mt-button\r\n      class=\"mx-2\"\r\n      [label]=\"submitLabel()\"\r\n      [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\r\n      [loading]=\"submitting()\"\r\n      [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\r\n      (click)=\"createOrEditProperty()\"\r\n    />\r\n  </ng-template>\r\n  <div\r\n    [formGroup]=\"propertyForm\"\r\n    class=\"h-full py-4 h-full overflow-y-auto flex justify-center\"\r\n  >\r\n    <div class=\"w-2/3 flex flex-col gap-6\">\r\n      @if (loading()) {\r\n        <!-- Skeleton Loading State -->\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <div class=\"flex justify-between items-center gap-6\">\r\n            <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\r\n            <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"12rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"10rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <mt-dynamic-form\r\n          [formConfig]=\"dynamicFormConfigMain()\"\r\n          [formControlName]=\"'main'\"\r\n        />\r\n        @if (configurationFormConfig()) {\r\n          <mt-dynamic-form\r\n            formControlName=\"configuration\"\r\n            [formConfig]=\"configurationFormConfig()!\"\r\n          />\r\n        } @else {\r\n          <ng-container #configurationHost></ng-container>\r\n          @if (!configurationComponentExists()) {\r\n            @switch (propertyType()) {\r\n              @case (\"User\") {\r\n                <mt-user-configuration />\r\n              }\r\n              @case (\"Percentage\") {\r\n                <mt-percentage-configuration />\r\n              }\r\n              @case (\"Lookup\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"LookupMultiSelect\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"InternalModule\") {\r\n                <mt-internal-module-configuration />\r\n              }\r\n              @case (\"DynamicList\") {\r\n                <mt-dynamic-list-configuration />\r\n              }\r\n              @case (\"API\") {\r\n                <mt-api-configuration formControlName=\"configuration\" />\r\n              }\r\n              <!-- @case('ViewList') { REMOVED FOR NOW\r\n                  <mt-view-list-configuration />\r\n                  } -->\r\n              @case (\"Attachment\") {\r\n                <mt-attachment-configuration />\r\n              }\r\n              <!-- @case('ReferenceProperty') { REMOVED FOR NOW\r\n                   } -->\r\n              @case (\"EditableListView\") {\r\n                <mt-editable-list-view-configuration />\r\n              }\r\n              @case (\"LookupLog\") {\r\n                <mt-check-list-form-configuration />\r\n              }\r\n              <!-- @case('LookupMatrix') { REMOVED FOR NOW\r\n                  <mt-lookup-configuration />\r\n                  } -->\r\n              @case (\"Location\") {\r\n                <mt-location-configuration />\r\n              }\r\n            }\r\n          }\r\n        }\r\n        @if (isCalculated()) {\r\n          <mt-card title=\"Formula\">\r\n            <mt-formula-builder\r\n              formControlName=\"formula\"\r\n              [levelSchemaId]=\"formulaSchemaId()\"\r\n            />\r\n          </mt-card>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</mt-page>\r\n" }]
+                    ], template: "<mt-page\r\n  [title]=\"\r\n    propertyId()\r\n      ? ('properties.form.editProperty' | transloco)\r\n      : ('properties.form.createNewProperty' | transloco)\r\n  \"\r\n  avatarIcon=\"custom.products-and-services\"\r\n  [avatarStyle]=\"{\r\n    '--p-avatar-background': 'var(--p-sky-50)',\r\n    '--p-avatar-color': 'var(--p-sky-700)',\r\n  }\"\r\n  (backButtonClick)=\"goBack()\"\r\n  backButton\r\n  class=\"h-full\"\r\n>\r\n  <ng-template #headerEnd>\r\n    <mt-button\r\n      class=\"mx-2\"\r\n      [label]=\"submitLabel()\"\r\n      [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\r\n      [loading]=\"submitting()\"\r\n      [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\r\n      (click)=\"createOrEditProperty()\"\r\n    />\r\n  </ng-template>\r\n  <div\r\n    [formGroup]=\"propertyForm\"\r\n    class=\"h-full py-4 h-full overflow-y-auto flex justify-center\"\r\n  >\r\n    <div class=\"w-2/3 flex flex-col gap-6\">\r\n      @if (loading()) {\r\n        <!-- Skeleton Loading State -->\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <div class=\"flex justify-between items-center gap-6\">\r\n            <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\r\n            <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"12rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"10rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <mt-dynamic-form\r\n          [formConfig]=\"dynamicFormConfigMain()\"\r\n          [formControlName]=\"'main'\"\r\n        />\r\n        @if (configurationFormConfig()) {\r\n          <mt-dynamic-form\r\n            formControlName=\"configuration\"\r\n            [formConfig]=\"configurationFormConfig()!\"\r\n          />\r\n        } @else {\r\n          <ng-container #configurationHost></ng-container>\r\n          @if (!configurationComponentExists()) {\r\n            @switch (propertyType()) {\r\n              @case (\"User\") {\r\n                <mt-user-configuration />\r\n              }\r\n              @case (\"Percentage\") {\r\n                <mt-percentage-configuration />\r\n              }\r\n              @case (\"Lookup\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"LookupMultiSelect\") {\n                <mt-lookup-configuration />\n              }\n              @case (\"EntityList\") {\n                <mt-entity-list-configuration />\n              }\n              @case (\"API\") {\n                <mt-api-configuration formControlName=\"configuration\" />\n              }\n              <!-- @case('ViewList') { REMOVED FOR NOW\r\n                  <mt-view-list-configuration />\r\n                  } -->\r\n              @case (\"Attachment\") {\r\n                <mt-attachment-configuration />\r\n              }\r\n              <!-- @case('ReferenceProperty') { REMOVED FOR NOW\r\n                   } -->\r\n              @case (\"LookupModuleCheckList\") {\n                <mt-check-list-form-configuration />\n              }\n              <!-- @case('LookupMatrix') { REMOVED FOR NOW\r\n                  <mt-lookup-configuration />\r\n                  } -->\r\n              @case (\"Location\") {\r\n                <mt-location-configuration />\r\n              }\r\n            }\r\n          }\r\n        }\r\n        @if (isCalculated()) {\r\n          <mt-card title=\"Formula\">\r\n            <mt-formula-builder\r\n              formControlName=\"formula\"\r\n              [levelSchemaId]=\"formulaSchemaId()\"\r\n            />\r\n          </mt-card>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</mt-page>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { propertyId: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyId", required: false }] }], configurationHost: [{
                 type: ViewChild,
                 args: ['configurationHost', { read: ViewContainerRef }]