@masterteam/properties 0.0.6 → 0.0.8

package/fesm2022/masterteam-properties.mjs

@@ -15,6 +15,8 @@ import { DynamicForm } from '@masterteam/forms/dynamic-form';
 import { PickListFieldConfig, ValidatorConfig } from '@masterteam/components';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, FormArray, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, ControlContainer, FormGroupDirective } from '@angular/forms';
+import * as i2 from 'primeng/skeleton';
+import { SkeletonModule } from 'primeng/skeleton';
 import { SelectField } from '@masterteam/components/select-field';
 import { TextField } from '@masterteam/components/text-field';
 import { ToggleField } from '@masterteam/components/toggle-field';
@@ -66,8 +68,12 @@ class GetLookups {
 class GetGroups {
     static type = '[Properties] Get Groups';
 }
-class GetLogs {
-    static type = '[Properties] Get Logs';
+class GetConfigAsType {
+    viewType;
+    static type = '[Properties] Get Config As Type';
+    constructor(viewType) {
+        this.viewType = viewType;
+    }
 }
 class GetCountries {
     static type = '[Properties] Get Countries';
@@ -96,6 +102,9 @@ class GetPropertiesForConfigType {
 class ResetConfigProperties {
     static type = '[Properties] Reset Config Properties';
 }
+class ResetConfigScopes {
+    static type = '[Properties] Reset Config Scopes';
+}
 class ResetSelectedProperty {
     static type = '[Properties] Reset Selected Property';
 }
@@ -156,7 +165,7 @@ const DEFAULT_STATE = {
     lookups: [],
     configTypeProperties: [],
     groups: [],
-    logs: [],
+    configScopes: [],
     countries: [],
     apiSchema: null,
     apiProperties: [],
@@ -167,7 +176,6 @@ let PropertiesState = class PropertiesState {
     lookupsUrl = 'Lookups';
     configPropertiesUrl = 'Properties';
     groupsUrl = 'identity/Groups';
-    logsUrl = 'Logs';
     countriesUrl = '/assets/countries/countries.json';
     apiTestUrl = 'app/testAPI';
     apiDetectUrl = 'app/detect';
@@ -186,8 +194,8 @@ let PropertiesState = class PropertiesState {
     static groups(state) {
         return state.groups;
     }
-    static logs(state) {
-        return state.logs;
+    static configScopes(state) {
+        return state.configScopes;
     }
     static countries(state) {
         return state.countries;
@@ -281,20 +289,24 @@ let PropertiesState = class PropertiesState {
             return of([]);
         }), finalize(() => endLoading(ctx, 'getGroups')));
     }
-    getLogs(ctx, _action) {
+    getConfigAsType(ctx, action) {
         const state = ctx.getState();
-        if (state.logs.length) {
-            return of(state.logs);
+        // Don't reload if we already have data for this viewType
+        if (state.configScopes.length) {
+            return of(state.configScopes);
         }
-        startLoading(ctx, 'getLogs');
-        return this.http.get(this.logsUrl).pipe(tap((response) => {
-            const logs = Array.isArray(response?.data) ? response.data : [];
-            ctx.patchState({ logs });
+        startLoading(ctx, 'getConfigAsType');
+        const url = `${this.baseUrl}/${action.viewType}/GetViewTypeProperties`;
+        return this.http.get(url).pipe(tap((response) => {
+            const configScopes = Array.isArray(response?.data) ? response.data : [];
+            ctx.patchState({ configScopes });
         }), catchError((error) => {
-            const message = error?.error?.message ?? error?.message ?? 'Failed to load logs';
-            setLoadingError(ctx, 'getLogs', message);
+            const message = error?.error?.message ??
+                error?.message ??
+                'Failed to load configuration scopes';
+            setLoadingError(ctx, 'getConfigAsType', message);
             return of([]);
-        }), finalize(() => endLoading(ctx, 'getLogs')));
+        }), finalize(() => endLoading(ctx, 'getConfigAsType')));
     }
     getCountries(ctx, _action) {
         const state = ctx.getState();
@@ -421,6 +433,9 @@ let PropertiesState = class PropertiesState {
     resetConfigProperties(ctx) {
         ctx.patchState({ configTypeProperties: [] });
     }
+    resetConfigScopes(ctx) {
+        ctx.patchState({ configScopes: [] });
+    }
     resetSelectedProperty(ctx) {
         ctx.patchState({ selectedProperty: null });
     }
@@ -533,8 +548,8 @@ __decorate([
     Action(GetGroups)
 ], PropertiesState.prototype, "getGroups", null);
 __decorate([
-    Action(GetLogs)
-], PropertiesState.prototype, "getLogs", null);
+    Action(GetConfigAsType)
+], PropertiesState.prototype, "getConfigAsType", null);
 __decorate([
     Action(GetCountries)
 ], PropertiesState.prototype, "getCountries", null);
@@ -550,6 +565,9 @@ __decorate([
 __decorate([
     Action(ResetConfigProperties)
 ], PropertiesState.prototype, "resetConfigProperties", null);
+__decorate([
+    Action(ResetConfigScopes)
+], PropertiesState.prototype, "resetConfigScopes", null);
 __decorate([
     Action(ResetSelectedProperty)
 ], PropertiesState.prototype, "resetSelectedProperty", null);
@@ -585,7 +603,7 @@ __decorate([
 ], PropertiesState, "groups", null);
 __decorate([
     Selector()
-], PropertiesState, "logs", null);
+], PropertiesState, "configScopes", null);
 __decorate([
     Selector()
 ], PropertiesState, "countries", null);
@@ -615,7 +633,7 @@ PropertiesState = __decorate([
 ], PropertiesState);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertiesState, decorators: [{
             type: Injectable
-        }], propDecorators: { getAll: [], getOne: [], getLookups: [], getGroups: [], getLogs: [], getCountries: [], testApiConfiguration: [], resetApiConfiguration: [], getPropertiesForConfigType: [], resetConfigProperties: [], resetSelectedProperty: [], setModuleInfo: [], create: [], update: [], delete: [], SetPropertyTypes: [] } });
+        }], propDecorators: { getAll: [], getOne: [], getLookups: [], getGroups: [], getConfigAsType: [], getCountries: [], testApiConfiguration: [], resetApiConfiguration: [], getPropertiesForConfigType: [], resetConfigProperties: [], resetConfigScopes: [], resetSelectedProperty: [], setModuleInfo: [], create: [], update: [], delete: [], SetPropertyTypes: [] } });
 
 class PropertiesFacade {
     store = inject(Store);
@@ -625,7 +643,7 @@ class PropertiesFacade {
     lookups = select(PropertiesState.lookups);
     configProperties = select(PropertiesState.configTypeProperties);
     groups = select(PropertiesState.groups);
-    logs = select(PropertiesState.logs);
+    configScopes = select(PropertiesState.configScopes);
     countries = select(PropertiesState.countries);
     apiSchema = select(PropertiesState.apiSchema);
     apiProperties = select(PropertiesState.apiProperties);
@@ -659,8 +677,8 @@ class PropertiesFacade {
     loadGroups() {
         return this.store.dispatch(new GetGroups());
     }
-    loadLogs() {
-        return this.store.dispatch(new GetLogs());
+    loadConfigAsType(viewType) {
+        return this.store.dispatch(new GetConfigAsType(viewType));
     }
     loadCountries() {
         return this.store.dispatch(new GetCountries());
@@ -683,6 +701,9 @@ class PropertiesFacade {
     resetConfigProperties() {
         return this.store.dispatch(new ResetConfigProperties());
     }
+    resetConfigScopes() {
+        return this.store.dispatch(new ResetConfigScopes());
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertiesFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertiesFacade, providedIn: 'root' });
 }
@@ -713,7 +734,7 @@ class PropertiesList {
     ], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
     activeTab = signal('all', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
     tableColumns = signal([
-        { key: 'name', label: 'Name' },
+        { key: 'title', label: 'Name' },
         { key: 'viewType', label: 'Type' },
         { key: 'required', label: 'Required', type: 'boolean' },
     ], ...(ngDevMode ? [{ debugName: "tableColumns" }] : []));
@@ -776,11 +797,11 @@ class PropertiesList {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertiesList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: PropertiesList, isStandalone: true, selector: "mt-properties-list", ngImport: i0, template: "<div class=\"py-4 px-6 space-y-3\">\n  <div class=\"flex items-center justify-between\">\n    <div class=\"space-y-1\">\n      <h1 class=\"text-xl font-semibold text-slate-900 tracking-tight\">\n        All Properties\n      </h1>\n      <p class=\"text-sm text-slate-500\">PMO - Project - Properties</p>\n    </div>\n  </div>\n\n  <mt-table\n    [tabs]=\"tabs()\"\n    [(activeTab)]=\"activeTab\"\n    [data]=\"tableData()\"\n    [actions]=\"tableActions()\"\n    [columns]=\"tableColumns()\"\n    [rowActions]=\"rowActions()\"\n    [generalSearch]=\"true\"\n    [showFilters]=\"true\"\n    [loading]=\"loading()\"\n    paginatorPosition=\"center\"\n  >\n  </mt-table>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "generalSearch", "showFilters", "loading", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: PropertiesList, isStandalone: true, selector: "mt-properties-list", ngImport: i0, template: "<div class=\"py-4 px-6 space-y-3\">\n  <div class=\"flex items-center justify-between\">\n    <div class=\"space-y-1\">\n      <h1 class=\"text-xl font-semibold text-slate-900 tracking-tight\">\n        All Properties\n      </h1>\n      <p class=\"text-sm text-slate-500\">PMO - Project - Properties</p>\n    </div>\n  </div>\n\n  <mt-table\n    [tabs]=\"tabs()\"\n    [(activeTab)]=\"activeTab\"\n    [data]=\"tableData()\"\n    [actions]=\"tableActions()\"\n    [columns]=\"tableColumns()\"\n    [rowActions]=\"rowActions()\"\n    [generalSearch]=\"true\"\n    [loading]=\"loading()\"\n    paginatorPosition=\"center\"\n  >\n  </mt-table>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "generalSearch", "showFilters", "loading", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertiesList, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-properties-list', standalone: true, imports: [CommonModule, Table], template: "<div class=\"py-4 px-6 space-y-3\">\n  <div class=\"flex items-center justify-between\">\n    <div class=\"space-y-1\">\n      <h1 class=\"text-xl font-semibold text-slate-900 tracking-tight\">\n        All Properties\n      </h1>\n      <p class=\"text-sm text-slate-500\">PMO - Project - Properties</p>\n    </div>\n  </div>\n\n  <mt-table\n    [tabs]=\"tabs()\"\n    [(activeTab)]=\"activeTab\"\n    [data]=\"tableData()\"\n    [actions]=\"tableActions()\"\n    [columns]=\"tableColumns()\"\n    [rowActions]=\"rowActions()\"\n    [generalSearch]=\"true\"\n    [showFilters]=\"true\"\n    [loading]=\"loading()\"\n    paginatorPosition=\"center\"\n  >\n  </mt-table>\n</div>\n" }]
+            args: [{ selector: 'mt-properties-list', standalone: true, imports: [CommonModule, Table], template: "<div class=\"py-4 px-6 space-y-3\">\n  <div class=\"flex items-center justify-between\">\n    <div class=\"space-y-1\">\n      <h1 class=\"text-xl font-semibold text-slate-900 tracking-tight\">\n        All Properties\n      </h1>\n      <p class=\"text-sm text-slate-500\">PMO - Project - Properties</p>\n    </div>\n  </div>\n\n  <mt-table\n    [tabs]=\"tabs()\"\n    [(activeTab)]=\"activeTab\"\n    [data]=\"tableData()\"\n    [actions]=\"tableActions()\"\n    [columns]=\"tableColumns()\"\n    [rowActions]=\"rowActions()\"\n    [generalSearch]=\"true\"\n    [loading]=\"loading()\"\n    paginatorPosition=\"center\"\n  >\n  </mt-table>\n</div>\n" }]
         }] });
 
 class ApiConfiguration {
@@ -966,10 +987,13 @@ class CheckListFormConfiguration {
     controlContainer = inject(ControlContainer);
     parentGroup = this.controlContainer.control;
     lookups = this.propertiesFacade.lookups;
-    logs = this.propertiesFacade.logs;
+    configScopes = this.propertiesFacade.configScopes;
     configProperties = this.propertiesFacade.configProperties;
-    prevLogId = signal(null, ...(ngDevMode ? [{ debugName: "prevLogId" }] : []));
     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: [
             {
@@ -987,21 +1011,23 @@ class CheckListFormConfiguration {
                         label: 'Select Lookup',
                         optionLabel: 'displayName',
                         optionValue: 'id',
+                        filter: true,
                         options: this.lookups(),
                     },
                     {
-                        key: 'log',
+                        key: 'scopeId',
                         type: 'select',
-                        label: 'Select Log',
-                        optionLabel: 'name',
+                        label: 'Select Scope',
+                        optionLabel: 'title',
                         optionValue: 'id',
-                        options: this.logs(),
+                        options: this.scopeItems(),
+                        filter: true,
                     },
                     new PickListFieldConfig({
                         key: 'properties',
                         cssClass: 'md:col-span-2',
                         options: this.configProperties(),
-                        optionLabel: 'name',
+                        optionLabel: 'title',
                         optionValue: 'key',
                         sourceHeader: 'Available Properties',
                         targetHeader: 'Selected Properties',
@@ -1017,18 +1043,12 @@ class CheckListFormConfiguration {
             }
         });
         effect(() => {
-            if (!this.logs().length) {
-                this.propertiesFacade.loadLogs();
-            }
-        });
-        effect(() => {
-            const logId = this.configuration()?.log;
-            if (logId) {
-                if (this.prevLogId() == logId) {
-                    return;
+            const scopeId = this.configuration()?.scopeId;
+            if (scopeId) {
+                const scopeType = this.configScopes()[0]?.scope;
+                if (scopeType) {
+                    this.propertiesFacade.loadPropertiesForConfigType(scopeType, scopeId);
                 }
-                this.prevLogId.set(logId);
-                this.propertiesFacade.loadPropertiesForConfigType('Log', logId);
             }
         });
     }
@@ -1051,10 +1071,13 @@ class DynamicListConfiguration {
     propertiesFacade = inject(PropertiesFacade);
     controlContainer = inject(ControlContainer);
     parentGroup = this.controlContainer.control;
-    logs = this.propertiesFacade.logs;
+    configScopes = this.propertiesFacade.configScopes;
     configProperties = this.propertiesFacade.configProperties;
-    prevLogId = signal(null, ...(ngDevMode ? [{ debugName: "prevLogId" }] : []));
     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: [
             {
@@ -1067,18 +1090,19 @@ class DynamicListConfiguration {
                 bodyClass: 'grid grid-cols-1 md:grid-cols-2 gap-3',
                 fields: [
                     {
-                        key: 'logId',
+                        key: 'scopeId',
                         type: 'select',
-                        label: 'Select Log',
-                        optionLabel: 'name',
+                        label: 'Select Scope',
+                        optionLabel: 'title',
                         optionValue: 'id',
-                        options: this.logs(),
+                        filter: true,
+                        options: this.scopeItems(),
                     },
                     new PickListFieldConfig({
                         key: 'properties',
                         cssClass: 'md:col-span-2',
                         options: this.configProperties(),
-                        optionLabel: 'name',
+                        optionLabel: 'title',
                         optionValue: 'key',
                         sourceHeader: 'Available Properties',
                         targetHeader: 'Selected Properties',
@@ -1095,18 +1119,12 @@ class DynamicListConfiguration {
     }));
     constructor() {
         effect(() => {
-            if (!this.logs().length) {
-                this.propertiesFacade.loadLogs();
-            }
-        });
-        effect(() => {
-            const logId = this.configuration()?.logId;
-            if (logId) {
-                if (this.prevLogId() == logId) {
-                    return;
+            const scopeId = this.configuration()?.scopeId;
+            if (scopeId) {
+                const scopeType = this.configScopes()[0]?.scope;
+                if (scopeType) {
+                    this.propertiesFacade.loadPropertiesForConfigType(scopeType, scopeId);
                 }
-                this.prevLogId.set(logId);
-                this.propertiesFacade.loadPropertiesForConfigType('Log', logId);
             }
         });
     }
@@ -1129,10 +1147,13 @@ class EditableListViewConfiguration {
     propertiesFacade = inject(PropertiesFacade);
     controlContainer = inject(ControlContainer);
     parentGroup = this.controlContainer.control;
-    logs = this.propertiesFacade.logs;
+    configScopes = this.propertiesFacade.configScopes;
     configProperties = this.propertiesFacade.configProperties;
-    prevLogId = signal(null, ...(ngDevMode ? [{ debugName: "prevLogId" }] : []));
     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: [
             {
@@ -1145,18 +1166,18 @@ class EditableListViewConfiguration {
                 bodyClass: 'grid grid-cols-1 md:grid-cols-2 gap-3',
                 fields: [
                     {
-                        key: 'logId',
+                        key: 'scopeId',
                         type: 'select',
-                        label: 'Select Log',
-                        optionLabel: 'name',
+                        label: 'Select Scope',
+                        optionLabel: 'title',
                         optionValue: 'id',
-                        options: this.logs(),
+                        options: this.scopeItems(),
                     },
                     new PickListFieldConfig({
                         key: 'Properties',
                         cssClass: 'md:col-span-2',
                         options: this.configProperties(),
-                        optionLabel: 'name',
+                        optionLabel: 'title',
                         optionValue: 'key',
                         sourceHeader: 'Available Properties',
                         targetHeader: 'Selected Properties',
@@ -1177,18 +1198,12 @@ class EditableListViewConfiguration {
     }));
     constructor() {
         effect(() => {
-            if (!this.logs().length) {
-                this.propertiesFacade.loadLogs();
-            }
-        });
-        effect(() => {
-            const logId = this.configuration()?.logId;
-            if (logId) {
-                if (this.prevLogId() == logId) {
-                    return;
+            const scopeId = this.configuration()?.scopeId;
+            if (scopeId) {
+                const scopeType = this.configScopes()[0]?.scope;
+                if (scopeType) {
+                    this.propertiesFacade.loadPropertiesForConfigType(scopeType, scopeId);
                 }
-                this.prevLogId.set(logId);
-                this.propertiesFacade.loadPropertiesForConfigType('Log', logId);
             }
         });
     }
@@ -1215,9 +1230,16 @@ class InternalModuleConfiguration {
     cc = inject(ControlContainer);
     parentGroup = this.cc.control;
     configProperties = this.propertiesFacade.configProperties;
-    logs = this.propertiesFacade.logs;
+    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: [
             {
@@ -1233,50 +1255,24 @@ class InternalModuleConfiguration {
                         key: 'type',
                         type: 'select',
                         label: 'Type',
-                        optionLabel: 'label',
-                        optionValue: 'value',
-                        options: [
-                            { label: 'Level', value: 'Level' },
-                            { label: 'Log', value: 'Log' },
-                        ],
-                    },
-                    {
-                        key: 'levelId',
-                        type: 'select',
-                        hidden: true,
-                        label: 'Select Level',
-                        optionLabel: 'name.en',
-                        optionValue: 'id',
-                        options: this.levels(),
-                        relations: [
-                            {
-                                key: 'type',
-                                value: 'Level',
-                                action: 'show',
-                            },
-                        ],
+                        optionLabel: 'scope',
+                        optionValue: 'scope',
+                        options: this.configScopes(),
                     },
                     {
-                        key: 'logId',
+                        key: 'scopeId',
                         type: 'select',
-                        hidden: true,
-                        label: 'Select Log',
-                        optionLabel: 'name',
+                        label: 'Select Scope',
+                        optionLabel: 'title',
                         optionValue: 'id',
-                        options: this.logs(),
-                        relations: [
-                            {
-                                key: 'type',
-                                value: 'Log',
-                                action: 'show',
-                            },
-                        ],
+                        filter: true,
+                        options: this.scopeItems(),
                     },
                     {
                         type: 'select',
                         key: 'property',
                         label: 'Value Property',
-                        optionLabel: 'name',
+                        optionLabel: 'title',
                         optionValue: 'key',
                         options: this.configProperties(),
                     },
@@ -1284,7 +1280,7 @@ class InternalModuleConfiguration {
                         cssClass: 'md:col-span-2 mt-2',
                         key: 'propertyDetails',
                         options: this.configProperties(),
-                        optionLabel: 'name',
+                        optionLabel: 'title',
                         optionValue: 'key',
                         sourceHeader: 'Available Properties',
                         targetHeader: 'Selected Properties',
@@ -1301,20 +1297,9 @@ class InternalModuleConfiguration {
     }));
     constructor() {
         effect(() => {
-            if (this.configuration()?.type === 'Log') {
-                if (!this.logs().length) {
-                    this.propertiesFacade.loadLogs();
-                }
-                this.parentGroup.get('levelId')?.setValue(null);
-            }
-            else if (this.configuration()?.type === 'Level') {
-                this.parentGroup.get('logId')?.setValue(null);
-            }
-            if (this.configuration()?.logId || this.configuration()?.levelId) {
+            if (this.configuration()?.scopeId) {
                 const moduleType = this.configuration()?.type;
-                const moduleId = moduleType === 'Log'
-                    ? this.configuration()?.logId
-                    : this.configuration()?.levelId;
+                const moduleId = this.configuration()?.scopeId;
                 if (moduleId == this.PrevModuleId()) {
                     return;
                 }
@@ -1361,6 +1346,7 @@ class LocationConfiguration {
                         optionLabel: 'name',
                         optionValue: 'name',
                         options: this.countries(),
+                        filter: true,
                     },
                 ],
             },
@@ -1406,6 +1392,7 @@ class LookupConfiguration {
                         optionLabel: 'displayName',
                         optionValue: 'id',
                         options: this.lookups(),
+                        filter: true,
                     },
                 ],
             },
@@ -1484,6 +1471,7 @@ class UserConfiguration {
                         optionLabel: 'name',
                         optionValue: 'id',
                         options: this.groups(),
+                        filter: true,
                     },
                 ],
             },
@@ -1682,6 +1670,7 @@ class PropertyForm {
     configurationControl = this.propertyForm.get('configuration');
     creating = this.facade.isLoading('create');
     updating = this.facade.isLoading('update');
+    loading = this.facade.isLoading('getOne');
     submitting = computed(() => this.creating() || this.updating(), ...(ngDevMode ? [{ debugName: "submitting" }] : []));
     propertyType = toSignal(this.mainControl.valueChanges.pipe(map((v) => v?.viewType), distinctUntilChanged()));
     selectedPropertyTypeConfiguration = computed(() => {
@@ -1725,12 +1714,65 @@ class PropertyForm {
                         cssClass: 'w-1/2',
                         options: this.propertyTypes()?.value,
                         disabled: this.isEditing(),
+                        filter: true,
                     },
                     {
                         key: 'isCalculated',
                         type: 'toggle',
                         label: 'Calculated',
                         cssClass: 'justify-self-end',
+                        relations: [
+                            {
+                                action: 'show',
+                                key: 'viewType',
+                                value: 'Text',
+                            },
+                            {
+                                action: 'show',
+                                key: 'viewType',
+                                value: 'LongText',
+                            },
+                            {
+                                action: 'show',
+                                key: 'viewType',
+                                value: 'Percentage',
+                            },
+                            {
+                                action: 'show',
+                                key: 'viewType',
+                                value: 'Date',
+                            },
+                            {
+                                action: 'show',
+                                key: 'viewType',
+                                value: 'Currency',
+                            },
+                            {
+                                action: 'show',
+                                key: 'viewType',
+                                value: 'Number',
+                            },
+                            {
+                                action: 'show',
+                                key: 'viewType',
+                                value: 'Checkbox',
+                            },
+                            {
+                                action: 'show',
+                                key: 'viewType',
+                                value: 'Lookup',
+                            },
+                            {
+                                action: 'show',
+                                key: 'viewType',
+                                value: 'LookupMultiSelect',
+                            },
+                            {
+                                action: 'show',
+                                key: 'viewType',
+                                value: 'Time',
+                            },
+                        ],
                     },
                 ],
             },
@@ -1742,15 +1784,15 @@ class PropertyForm {
                 bodyClass: 'grid grid-cols-1 md:grid-cols-2 gap-3',
                 fields: [
                     {
-                        key: 'name.ar',
-                        label: 'Name-Ar',
-                        placeholder: 'Name-Ar',
+                        key: 'title.en',
+                        label: 'English Name',
+                        placeholder: 'English Name',
                         validators: [new ValidatorConfig({ type: 'required' })],
                     },
                     {
-                        key: 'name.en',
-                        label: 'Name-En',
-                        placeholder: 'Name-En',
+                        key: 'title.ar',
+                        label: 'Arabic Name',
+                        placeholder: 'Arabic Name',
                         validators: [new ValidatorConfig({ type: 'required' })],
                     },
                     {
@@ -1759,11 +1801,11 @@ class PropertyForm {
                         type: 'textarea',
                         cssClass: 'md:col-span-2',
                     },
-                    {
-                        key: 'defaultValue',
-                        label: 'Default Value',
-                        cssClass: 'md:col-span-2',
-                    },
+                    // {
+                    //   key: 'defaultValue',
+                    //   label: 'Default Value',
+                    //   cssClass: 'md:col-span-2',
+                    // },
                 ],
             },
         ],
@@ -1779,11 +1821,29 @@ class PropertyForm {
         let prev;
         effect(() => {
             const currentPropertyType = this.propertyType();
-            if (!currentPropertyType || !prev || prev == currentPropertyType)
+            if (!currentPropertyType || !prev || prev == currentPropertyType) {
+                prev = this.propertyType();
                 return;
-            prev = this.propertyType();
+            }
             this.configurationControl.reset(null);
         });
+        effect(() => {
+            const currentPropertyType = this.propertyType();
+            if (!currentPropertyType)
+                return;
+            // Reset config scopes before loading new ones
+            this.facade.resetConfigScopes();
+            // Load config scopes for specific property types
+            const supportedTypes = [
+                'InternalModule',
+                'DynamicList',
+                'EditableListView',
+                'LookupLog',
+            ];
+            if (supportedTypes.includes(currentPropertyType)) {
+                this.facade.loadConfigAsType(currentPropertyType);
+            }
+        });
         effect(() => {
             const property = this.facade.selected();
             this.syncFormWithSelectedProperty(property);
@@ -1899,7 +1959,9 @@ class PropertyForm {
     syncFormWithSelectedProperty(property) {
         if (!property)
             return;
-        this.mainControl.patchValue(property);
+        this.mainControl.patchValue(property, {
+            emitEvent: false,
+        });
         this.configurationControl.setValue(property?.configuration);
     }
     goBack() {
@@ -1913,7 +1975,7 @@ class PropertyForm {
         this.destroyConfigurationComponent();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertyForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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-card class=\"h-full\">\n  <ng-template #headless>\n    <div class=\"flex justify-between items-center p-3 border-b border-surface\">\n      <div class=\"flex gap-2 items-center\">\n        <mt-button\n          [text]=\"true\"\n          icon=\"arrow.arrow-narrow-left\"\n          size=\"large\"\n          (click)=\"goBack()\"\n        ></mt-button>\n        <mt-avatar size=\"normal\" icon=\"custom.user-pp\" />\n        <h3 class=\"font-bold text-lg\">\n          {{ propertyId() ? \"Edit Property\" : \"Create New Property\" }}\n        </h3>\n      </div>\n      <mt-button\n        class=\"mx-2\"\n        [label]=\"submitLabel()\"\n        [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\n        [loading]=\"submitting()\"\n        [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\n        (click)=\"createOrEditProperty()\"\n      />\n    </div>\n    <div\n      [formGroup]=\"propertyForm\"\n      class=\"h-full py-4 bg-[radial-gradient(120%_80%_at_100%_0%,_#EBEFFF_0%,_#F6F8FC_45%,_#F6F8FC_100%)] flex justify-center\"\n    >\n      <div class=\"w-1/2 flex flex-col gap-6\">\n        <mt-dynamic-form\n          [formConfig]=\"dynamicFormConfigMain()\"\n          [formControlName]=\"'main'\"\n        />\n        @if (configurationFormConfig()) {\n          <mt-dynamic-form\n            formControlName=\"configuration\"\n            [formConfig]=\"configurationFormConfig()!\"\n          />\n        } @else {\n          <ng-container #configurationHost></ng-container>\n          @if (!configurationComponentExists()) {\n            @switch (propertyType()) {\n              @case (\"User\") {\n                <mt-user-configuration />\n              }\n              @case (\"Percentage\") {\n                <mt-percentage-configuration />\n              }\n              @case (\"Lookup\") {\n                <mt-lookup-configuration />\n              }\n              @case (\"LookupMultiSelect\") {\n                <mt-lookup-configuration />\n              }\n              @case (\"InternalModule\") {\n                <mt-internal-module-configuration />\n              }\n              @case (\"DynamicList\") {\n                <mt-dynamic-list-configuration />\n              }\n              @case (\"API\") {\n                <mt-api-configuration formControlName=\"configuration\" />\n              }\n              <!-- @case('ViewList') { REMOVED FOR NOW\n                <mt-view-list-configuration />\n                } -->\n              @case (\"Attachment\") {\n                <mt-attachment-configuration />\n              }\n              <!-- @case('ReferenceProperty') { REMOVED FOR NOW\n                 } -->\n              @case (\"EditableListView\") {\n                <mt-editable-list-view-configuration />\n              }\n              @case (\"LookupLog\") {\n                <mt-check-list-form-configuration />\n              }\n              <!-- @case('LookupMatrix') { REMOVED FOR NOW\n                <mt-lookup-configuration />\n                } -->\n              @case (\"Location\") {\n                <mt-location-configuration />\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n  </ng-template>\n</mt-card>\n", styles: [""], dependencies: [{ kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { 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: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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-card class=\"h-full\">\n  <ng-template #headless>\n    <div class=\"flex justify-between items-center p-3 border-b border-surface\">\n      <div class=\"flex gap-2 items-center\">\n        <mt-button\n          [text]=\"true\"\n          icon=\"arrow.arrow-narrow-left\"\n          size=\"large\"\n          (click)=\"goBack()\"\n        ></mt-button>\n        <mt-avatar size=\"normal\" icon=\"custom.user-pp\" />\n        <h3 class=\"font-bold text-lg\">\n          {{ propertyId() ? \"Edit Property\" : \"Create New Property\" }}\n        </h3>\n      </div>\n      <mt-button\n        class=\"mx-2\"\n        [label]=\"submitLabel()\"\n        [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\n        [loading]=\"submitting()\"\n        [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\n        (click)=\"createOrEditProperty()\"\n      />\n    </div>\n    <div\n      [formGroup]=\"propertyForm\"\n      class=\"h-full py-4 bg-[radial-gradient(120%_80%_at_100%_0%,_#EBEFFF_0%,_#F6F8FC_45%,_#F6F8FC_100%)] flex justify-center\"\n    >\n      <div class=\"w-1/2 flex flex-col gap-6\">\n        @if (loading()) {\n          <!-- Skeleton Loading State -->\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <div class=\"flex justify-between items-center gap-6\">\n              <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\n              <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <p-skeleton\n              width=\"12rem\"\n              height=\"1.5rem\"\n              styleClass=\"mb-4\"\n            ></p-skeleton>\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n              <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <p-skeleton\n              width=\"10rem\"\n              height=\"1.5rem\"\n              styleClass=\"mb-4\"\n            ></p-skeleton>\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n            </div>\n          </div>\n        } @else {\n          <mt-dynamic-form\n            [formConfig]=\"dynamicFormConfigMain()\"\n            [formControlName]=\"'main'\"\n          />\n          @if (configurationFormConfig()) {\n            <mt-dynamic-form\n              formControlName=\"configuration\"\n              [formConfig]=\"configurationFormConfig()!\"\n            />\n          } @else {\n            <ng-container #configurationHost></ng-container>\n            @if (!configurationComponentExists()) {\n              @switch (propertyType()) {\n                @case (\"User\") {\n                  <mt-user-configuration />\n                }\n                @case (\"Percentage\") {\n                  <mt-percentage-configuration />\n                }\n                @case (\"Lookup\") {\n                  <mt-lookup-configuration />\n                }\n                @case (\"LookupMultiSelect\") {\n                  <mt-lookup-configuration />\n                }\n                @case (\"InternalModule\") {\n                  <mt-internal-module-configuration />\n                }\n                @case (\"DynamicList\") {\n                  <mt-dynamic-list-configuration />\n                }\n                @case (\"API\") {\n                  <mt-api-configuration formControlName=\"configuration\" />\n                }\n                <!-- @case('ViewList') { REMOVED FOR NOW\n                  <mt-view-list-configuration />\n                  } -->\n                @case (\"Attachment\") {\n                  <mt-attachment-configuration />\n                }\n                <!-- @case('ReferenceProperty') { REMOVED FOR NOW\n                   } -->\n                @case (\"EditableListView\") {\n                  <mt-editable-list-view-configuration />\n                }\n                @case (\"LookupLog\") {\n                  <mt-check-list-form-configuration />\n                }\n                <!-- @case('LookupMatrix') { REMOVED FOR NOW\n                  <mt-lookup-configuration />\n                  } -->\n                @case (\"Location\") {\n                  <mt-location-configuration />\n                }\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n  </ng-template>\n</mt-card>\n", styles: [""], dependencies: [{ kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { 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: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PropertyForm, decorators: [{
             type: Component,
@@ -1933,7 +1995,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         PercentageConfiguration,
                         UserConfiguration,
                         AttachmentConfiguration,
-                    ], template: "<mt-card class=\"h-full\">\n  <ng-template #headless>\n    <div class=\"flex justify-between items-center p-3 border-b border-surface\">\n      <div class=\"flex gap-2 items-center\">\n        <mt-button\n          [text]=\"true\"\n          icon=\"arrow.arrow-narrow-left\"\n          size=\"large\"\n          (click)=\"goBack()\"\n        ></mt-button>\n        <mt-avatar size=\"normal\" icon=\"custom.user-pp\" />\n        <h3 class=\"font-bold text-lg\">\n          {{ propertyId() ? \"Edit Property\" : \"Create New Property\" }}\n        </h3>\n      </div>\n      <mt-button\n        class=\"mx-2\"\n        [label]=\"submitLabel()\"\n        [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\n        [loading]=\"submitting()\"\n        [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\n        (click)=\"createOrEditProperty()\"\n      />\n    </div>\n    <div\n      [formGroup]=\"propertyForm\"\n      class=\"h-full py-4 bg-[radial-gradient(120%_80%_at_100%_0%,_#EBEFFF_0%,_#F6F8FC_45%,_#F6F8FC_100%)] flex justify-center\"\n    >\n      <div class=\"w-1/2 flex flex-col gap-6\">\n        <mt-dynamic-form\n          [formConfig]=\"dynamicFormConfigMain()\"\n          [formControlName]=\"'main'\"\n        />\n        @if (configurationFormConfig()) {\n          <mt-dynamic-form\n            formControlName=\"configuration\"\n            [formConfig]=\"configurationFormConfig()!\"\n          />\n        } @else {\n          <ng-container #configurationHost></ng-container>\n          @if (!configurationComponentExists()) {\n            @switch (propertyType()) {\n              @case (\"User\") {\n                <mt-user-configuration />\n              }\n              @case (\"Percentage\") {\n                <mt-percentage-configuration />\n              }\n              @case (\"Lookup\") {\n                <mt-lookup-configuration />\n              }\n              @case (\"LookupMultiSelect\") {\n                <mt-lookup-configuration />\n              }\n              @case (\"InternalModule\") {\n                <mt-internal-module-configuration />\n              }\n              @case (\"DynamicList\") {\n                <mt-dynamic-list-configuration />\n              }\n              @case (\"API\") {\n                <mt-api-configuration formControlName=\"configuration\" />\n              }\n              <!-- @case('ViewList') { REMOVED FOR NOW\n                <mt-view-list-configuration />\n                } -->\n              @case (\"Attachment\") {\n                <mt-attachment-configuration />\n              }\n              <!-- @case('ReferenceProperty') { REMOVED FOR NOW\n                 } -->\n              @case (\"EditableListView\") {\n                <mt-editable-list-view-configuration />\n              }\n              @case (\"LookupLog\") {\n                <mt-check-list-form-configuration />\n              }\n              <!-- @case('LookupMatrix') { REMOVED FOR NOW\n                <mt-lookup-configuration />\n                } -->\n              @case (\"Location\") {\n                <mt-location-configuration />\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n  </ng-template>\n</mt-card>\n" }]
+                        SkeletonModule,
+                    ], template: "<mt-card class=\"h-full\">\n  <ng-template #headless>\n    <div class=\"flex justify-between items-center p-3 border-b border-surface\">\n      <div class=\"flex gap-2 items-center\">\n        <mt-button\n          [text]=\"true\"\n          icon=\"arrow.arrow-narrow-left\"\n          size=\"large\"\n          (click)=\"goBack()\"\n        ></mt-button>\n        <mt-avatar size=\"normal\" icon=\"custom.user-pp\" />\n        <h3 class=\"font-bold text-lg\">\n          {{ propertyId() ? \"Edit Property\" : \"Create New Property\" }}\n        </h3>\n      </div>\n      <mt-button\n        class=\"mx-2\"\n        [label]=\"submitLabel()\"\n        [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\n        [loading]=\"submitting()\"\n        [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\n        (click)=\"createOrEditProperty()\"\n      />\n    </div>\n    <div\n      [formGroup]=\"propertyForm\"\n      class=\"h-full py-4 bg-[radial-gradient(120%_80%_at_100%_0%,_#EBEFFF_0%,_#F6F8FC_45%,_#F6F8FC_100%)] flex justify-center\"\n    >\n      <div class=\"w-1/2 flex flex-col gap-6\">\n        @if (loading()) {\n          <!-- Skeleton Loading State -->\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <div class=\"flex justify-between items-center gap-6\">\n              <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\n              <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <p-skeleton\n              width=\"12rem\"\n              height=\"1.5rem\"\n              styleClass=\"mb-4\"\n            ></p-skeleton>\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n              <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n            </div>\n          </div>\n\n          <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n            <p-skeleton\n              width=\"10rem\"\n              height=\"1.5rem\"\n              styleClass=\"mb-4\"\n            ></p-skeleton>\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"3rem\"></p-skeleton>\n              <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n            </div>\n          </div>\n        } @else {\n          <mt-dynamic-form\n            [formConfig]=\"dynamicFormConfigMain()\"\n            [formControlName]=\"'main'\"\n          />\n          @if (configurationFormConfig()) {\n            <mt-dynamic-form\n              formControlName=\"configuration\"\n              [formConfig]=\"configurationFormConfig()!\"\n            />\n          } @else {\n            <ng-container #configurationHost></ng-container>\n            @if (!configurationComponentExists()) {\n              @switch (propertyType()) {\n                @case (\"User\") {\n                  <mt-user-configuration />\n                }\n                @case (\"Percentage\") {\n                  <mt-percentage-configuration />\n                }\n                @case (\"Lookup\") {\n                  <mt-lookup-configuration />\n                }\n                @case (\"LookupMultiSelect\") {\n                  <mt-lookup-configuration />\n                }\n                @case (\"InternalModule\") {\n                  <mt-internal-module-configuration />\n                }\n                @case (\"DynamicList\") {\n                  <mt-dynamic-list-configuration />\n                }\n                @case (\"API\") {\n                  <mt-api-configuration formControlName=\"configuration\" />\n                }\n                <!-- @case('ViewList') { REMOVED FOR NOW\n                  <mt-view-list-configuration />\n                  } -->\n                @case (\"Attachment\") {\n                  <mt-attachment-configuration />\n                }\n                <!-- @case('ReferenceProperty') { REMOVED FOR NOW\n                   } -->\n                @case (\"EditableListView\") {\n                  <mt-editable-list-view-configuration />\n                }\n                @case (\"LookupLog\") {\n                  <mt-check-list-form-configuration />\n                }\n                <!-- @case('LookupMatrix') { REMOVED FOR NOW\n                  <mt-lookup-configuration />\n                  } -->\n                @case (\"Location\") {\n                  <mt-location-configuration />\n                }\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n  </ng-template>\n</mt-card>\n" }]
         }], ctorParameters: () => [], propDecorators: { configurationHost: [{
                 type: ViewChild,
                 args: ['configurationHost', { read: ViewContainerRef }]
@@ -1947,5 +2010,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CreateProperty, DeleteProperty, GetCountries, GetGroups, GetLogs, GetLookups, GetProperties, GetPropertiesForConfigType, GetProperty, PropertiesFacade, PropertiesList, PropertiesState, PropertyForm, REQUEST_CONTEXT, ResetApiConfiguration, ResetConfigProperties, ResetSelectedProperty, SetPropertiesModuleInfo, SetPropertyTypes, TestApiConfiguration, UpdateProperty };
+export { CreateProperty, DeleteProperty, GetConfigAsType, GetCountries, GetGroups, GetLookups, GetProperties, GetPropertiesForConfigType, GetProperty, PropertiesFacade, PropertiesList, PropertiesState, PropertyForm, REQUEST_CONTEXT, ResetApiConfiguration, ResetConfigProperties, ResetConfigScopes, ResetSelectedProperty, SetPropertiesModuleInfo, SetPropertyTypes, TestApiConfiguration, UpdateProperty };
 //# sourceMappingURL=masterteam-properties.mjs.map