@masterteam/properties 0.0.28 → 0.0.30

package/fesm2022/masterteam-properties.mjs

@@ -5,8 +5,9 @@ import { Table } from '@masterteam/components/table';
 import { Router, ActivatedRoute } from '@angular/router';
 import { HttpClient, HttpContextToken } from '@angular/common/http';
 import { Action, Selector, State, Store, select } from '@ngxs/store';
-import { of, finalize as finalize$1, startWith, map, distinctUntilChanged, Subscription } from 'rxjs';
-import { tap, catchError, finalize, switchMap } from 'rxjs/operators';
+import { of, finalize, startWith, map, distinctUntilChanged, Subscription } from 'rxjs';
+import { switchMap, tap } from 'rxjs/operators';
+import { CrudStateBase, handleApiRequest, PickListFieldConfig, ValidatorConfig } from '@masterteam/components';
 import { Breadcrumb } from '@masterteam/components/breadcrumb';
 import { Card } from '@masterteam/components/card';
 import { Avatar } from '@masterteam/components/avatar';
@@ -17,39 +18,29 @@ import { TranslocoService, TranslocoModule } from '@jsverse/transloco';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Page } from '@masterteam/components/page';
 import { DynamicForm } from '@masterteam/forms/dynamic-form';
-import { PickListFieldConfig, ValidatorConfig } from '@masterteam/components';
 import * as i1$1 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 { FormulaBuilder } from '@masterteam/formula-builder';
 import { SelectField } from '@masterteam/components/select-field';
 import { TextField } from '@masterteam/components/text-field';
 import { ToggleField } from '@masterteam/components/toggle-field';
 
-function startLoading(ctx, loadingName) {
-    const { loadingActive, errors } = ctx.getState();
-    if (!loadingActive.includes(loadingName)) {
-        ctx.patchState({
-            loadingActive: [...loadingActive, loadingName],
-        });
-    }
-    if (errors && errors[loadingName]) {
-        const { [loadingName]: _removed, ...rest } = errors;
-        ctx.patchState({ errors: rest });
-    }
-}
-function endLoading(ctx, loadingName) {
-    const { loadingActive } = ctx.getState();
-    ctx.patchState({
-        loadingActive: loadingActive.filter((name) => name !== loadingName),
-    });
-}
-function setLoadingError(ctx, loadingName, message) {
-    const { errors } = ctx.getState();
-    ctx.patchState({
-        errors: { ...errors, [loadingName]: message },
-    });
-}
+var PropertiesActionKey;
+(function (PropertiesActionKey) {
+    PropertiesActionKey["GetAll"] = "getAll";
+    PropertiesActionKey["GetOne"] = "getOne";
+    PropertiesActionKey["Create"] = "create";
+    PropertiesActionKey["Update"] = "update";
+    PropertiesActionKey["Delete"] = "delete";
+    PropertiesActionKey["GetLookups"] = "getLookups";
+    PropertiesActionKey["GetGroups"] = "getGroups";
+    PropertiesActionKey["GetConfigProperties"] = "getConfigProperties";
+    PropertiesActionKey["GetConfigAsType"] = "getConfigAsType";
+    PropertiesActionKey["GetCountries"] = "getCountries";
+    PropertiesActionKey["TestApiConfiguration"] = "testApiConfiguration";
+})(PropertiesActionKey || (PropertiesActionKey = {}));
 
 class GetProperties {
     params;
@@ -197,7 +188,7 @@ const DEFAULT_STATE = {
     breadcrumbItems: [],
     defaultViewType: null,
 };
-let PropertiesState = class PropertiesState {
+let PropertiesState = class PropertiesState extends CrudStateBase {
     http = inject(HttpClient);
     baseUrl = 'Properties';
     lookupsUrl = 'Lookups';
@@ -206,12 +197,21 @@ let PropertiesState = class PropertiesState {
     countriesUrl = '/assets/countries/countries.json';
     apiTestUrl = 'app/testAPI';
     apiDetectUrl = 'app/detect';
+    // ============================================================================
+    // Data Selectors - Individual for fine-grained reactivity
+    // ============================================================================
     static properties(state) {
         return state.properties;
     }
     static selectedProperty(state) {
         return state.selectedProperty;
     }
+    static moduleId(state) {
+        return state.moduleId;
+    }
+    static parentModuleId(state) {
+        return state.parentModuleId ?? null;
+    }
     static lookups(state) {
         return state.lookups;
     }
@@ -234,7 +234,7 @@ let PropertiesState = class PropertiesState {
         return state.apiProperties;
     }
     static propertyTypes(state) {
-        return state.propertyTypes ?? [];
+        return state.propertyTypes ?? {};
     }
     static breadcrumbItems(state) {
         return state.breadcrumbItems;
@@ -242,17 +242,25 @@ let PropertiesState = class PropertiesState {
     static defaultViewType(state) {
         return state.defaultViewType;
     }
-    static isLoadingFactory(state) {
-        return (loadingName) => state.loadingActive.includes(loadingName);
+    // ============================================================================
+    // Loading/Error Slice Selectors - REQUIRED for optimal performance
+    // ============================================================================
+    static getLoadingActive(state) {
+        return state.loadingActive;
     }
-    static errorFactory(state) {
-        return (loadingName) => state.errors?.[loadingName] ?? null;
+    static getErrors(state) {
+        return state.errors;
     }
+    // ============================================================================
+    // Derived Selectors
+    // ============================================================================
     static propertyById(state) {
         return (id) => state.properties.find((property) => property.id === Number(id)) ?? null;
     }
+    // ============================================================================
+    // CRUD Actions
+    // ============================================================================
     getAll(ctx, action) {
-        startLoading(ctx, 'getAll');
         const state = ctx.getState();
         const moduleType = state.moduleType ?? undefined;
         const moduleId = state.moduleId ?? undefined;
@@ -261,67 +269,57 @@ let PropertiesState = class PropertiesState {
         ctx.patchState({
             lastQueryParams: params ?? null,
         });
-        return this.http
-            .get(`${this.baseUrl}${parentPath}/${moduleType}/${moduleId}`, {
-            params: params,
-        })
-            .pipe(tap((response) => {
-            const properties = Array.isArray(response?.data) ? response.data : [];
-            ctx.patchState({ properties });
-        }), catchError((error) => {
-            const message = error?.error?.message ??
-                error?.message ??
-                'Failed to load properties';
-            setLoadingError(ctx, 'getAll', message);
-            return of(null);
-        }), finalize(() => endLoading(ctx, 'getAll')));
+        const req$ = this.http.get(`${this.baseUrl}${parentPath}/${moduleType}/${moduleId}`, { params });
+        return handleApiRequest({
+            ctx,
+            key: PropertiesActionKey.GetAll,
+            request$: req$,
+            onSuccess: (response) => ({
+                properties: response.data ?? [],
+            }),
+        });
     }
     getOne(ctx, action) {
-        startLoading(ctx, 'getOne');
         const params = { mode: action.mode ?? 'edit' };
-        return this.http
-            .get(`${this.baseUrl}/${action.id}`, { params })
-            .pipe(tap((response) => {
-            ctx.patchState({
-                selectedProperty: response?.data ?? null,
-            });
-        }), catchError((error) => {
-            const message = error?.error?.message ??
-                error?.message ??
-                'Failed to load property';
-            setLoadingError(ctx, 'getOne', message);
-            return of(null);
-        }), finalize(() => endLoading(ctx, 'getOne')));
+        const req$ = this.http.get(`${this.baseUrl}/${action.id}`, { params });
+        return handleApiRequest({
+            ctx,
+            key: PropertiesActionKey.GetOne,
+            request$: req$,
+            onSuccess: (response) => ({
+                selectedProperty: response.data ?? null,
+            }),
+        });
     }
     getLookups(ctx, _action) {
         const state = ctx.getState();
         if (state.lookups.length) {
             return of(state.lookups);
         }
-        startLoading(ctx, 'getLookups');
-        return this.http.get(this.lookupsUrl).pipe(tap((response) => {
-            const lookups = Array.isArray(response?.data) ? response.data : [];
-            ctx.patchState({ lookups });
-        }), catchError((error) => {
-            const message = error?.error?.message ?? error?.message ?? 'Failed to load lookups';
-            setLoadingError(ctx, 'getLookups', message);
-            return of([]);
-        }), finalize(() => endLoading(ctx, 'getLookups')));
+        const req$ = this.http.get(this.lookupsUrl);
+        return handleApiRequest({
+            ctx,
+            key: PropertiesActionKey.GetLookups,
+            request$: req$,
+            onSuccess: (response) => ({
+                lookups: response.data ?? [],
+            }),
+        });
     }
     getGroups(ctx, _action) {
         const state = ctx.getState();
         if (state.groups.length) {
             return of(state.groups);
         }
-        startLoading(ctx, 'getGroups');
-        return this.http.get(this.groupsUrl).pipe(tap((response) => {
-            const groups = Array.isArray(response?.data) ? response.data : [];
-            ctx.patchState({ groups });
-        }), catchError((error) => {
-            const message = error?.error?.message ?? error?.message ?? 'Failed to load groups';
-            setLoadingError(ctx, 'getGroups', message);
-            return of([]);
-        }), finalize(() => endLoading(ctx, 'getGroups')));
+        const req$ = this.http.get(this.groupsUrl);
+        return handleApiRequest({
+            ctx,
+            key: PropertiesActionKey.GetGroups,
+            request$: req$,
+            onSuccess: (response) => ({
+                groups: response.data ?? [],
+            }),
+        });
     }
     getConfigAsType(ctx, action) {
         const state = ctx.getState();
@@ -329,41 +327,41 @@ let PropertiesState = class PropertiesState {
         if (state.configScopes.length) {
             return of(state.configScopes);
         }
-        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 configuration scopes';
-            setLoadingError(ctx, 'getConfigAsType', message);
-            return of([]);
-        }), finalize(() => endLoading(ctx, 'getConfigAsType')));
+        const req$ = this.http.get(url);
+        return handleApiRequest({
+            ctx,
+            key: PropertiesActionKey.GetConfigAsType,
+            request$: req$,
+            onSuccess: (response) => ({
+                configScopes: response.data ?? [],
+            }),
+        });
     }
     getCountries(ctx, _action) {
         const state = ctx.getState();
         if (state.countries.length) {
             return of(state.countries);
         }
-        startLoading(ctx, 'getCountries');
-        return this.http.get(this.countriesUrl).pipe(tap((response) => {
-            const countries = Array.isArray(response) ? response : [];
-            ctx.patchState({ countries });
-        }), catchError((error) => {
-            const message = error?.error?.message ?? error?.message ?? 'Failed to load countries';
-            setLoadingError(ctx, 'getCountries', message);
-            return of([]);
-        }), finalize(() => endLoading(ctx, 'getCountries')));
+        const req$ = this.http.get(this.countriesUrl);
+        return handleApiRequest({
+            ctx,
+            key: PropertiesActionKey.GetCountries,
+            request$: req$,
+            onSuccess: (response) => ({
+                countries: Array.isArray(response) ? response : [],
+            }),
+            errorMessage: 'Failed to load countries',
+        });
     }
     testApiConfiguration(ctx, action) {
-        startLoading(ctx, 'testApiConfiguration');
         ctx.patchState({
             apiSchema: null,
             apiProperties: [],
         });
-        return this.http.post(this.apiTestUrl, action.payload).pipe(switchMap((testResponse) => {
+        const req$ = this.http
+            .post(this.apiTestUrl, action.payload)
+            .pipe(switchMap((testResponse) => {
             const rawData = testResponse?.data;
             if (!rawData) {
                 return of(null);
@@ -380,49 +378,29 @@ let PropertiesState = class PropertiesState {
                     apiProperties,
                 });
             }));
-        }), catchError((error) => {
-            const message = error?.error?.message ?? error?.message ?? 'Failed to test API';
-            setLoadingError(ctx, 'testApiConfiguration', message);
-            return of(null);
-        }), finalize(() => endLoading(ctx, 'testApiConfiguration')));
-    }
-    resetApiConfiguration(ctx) {
-        ctx.patchState({
-            apiSchema: null,
-            apiProperties: [],
-        });
-    }
-    mapSchemaToOptions(schema) {
-        if (!schema?.properties) {
-            return [];
-        }
-        return Object.entries(schema.properties).map(([key, definition]) => {
-            const typeLabel = definition?.type ? ` | ${definition.type}` : '';
-            return {
-                key,
-                name: `${key}${typeLabel}`,
-                type: definition?.type,
-            };
+        }));
+        return handleApiRequest({
+            ctx,
+            key: PropertiesActionKey.TestApiConfiguration,
+            request$: req$,
+            onSuccess: () => ({}),
         });
     }
     getPropertiesForConfigType(ctx, action) {
-        startLoading(ctx, 'getConfigProperties');
         const { moduleType, moduleId } = action;
-        return this.http
-            .get(`${this.configPropertiesUrl}/${moduleType}/${moduleId}`)
-            .pipe(tap((response) => {
-            const configTypeProperties = Array.isArray(response?.data)
-                ? response.data
-                : [];
-            ctx.patchState({ configTypeProperties });
-        }), catchError((error) => {
-            const message = error?.error?.message ??
-                error?.message ??
-                'Failed to load properties';
-            setLoadingError(ctx, 'getConfigProperties', message);
-            return of([]);
-        }), finalize(() => endLoading(ctx, 'getConfigProperties')));
+        const req$ = this.http.get(`${this.configPropertiesUrl}/${moduleType}/${moduleId}`);
+        return handleApiRequest({
+            ctx,
+            key: PropertiesActionKey.GetConfigProperties,
+            request$: req$,
+            onSuccess: (response) => ({
+                configTypeProperties: response.data ?? [],
+            }),
+        });
     }
+    // ============================================================================
+    // Simple State Updates (No HTTP)
+    // ============================================================================
     resetConfigProperties(ctx) {
         ctx.patchState({ configTypeProperties: [] });
     }
@@ -432,6 +410,12 @@ let PropertiesState = class PropertiesState {
     resetSelectedProperty(ctx) {
         ctx.patchState({ selectedProperty: null });
     }
+    resetApiConfiguration(ctx) {
+        ctx.patchState({
+            apiSchema: null,
+            apiProperties: [],
+        });
+    }
     setModuleInfo(ctx, action) {
         let parentPath = '';
         if (action.parentModuleType && action.parentModuleId) {
@@ -448,106 +432,107 @@ let PropertiesState = class PropertiesState {
             parentPath: parentPath ?? '',
         });
     }
-    create(ctx, action) {
-        startLoading(ctx, 'create');
+    SetPropertyTypes(ctx, action) {
+        ctx.patchState({
+            propertyTypes: action.payload,
+        });
+    }
+    setBreadcrumb(ctx, action) {
+        ctx.patchState({
+            breadcrumbItems: action.items,
+        });
+    }
+    setDefaultViewType(ctx, action) {
+        ctx.patchState({
+            defaultViewType: action.viewType,
+        });
+    }
+    createProperty(ctx, action) {
         const state = ctx.getState();
         const moduleType = state.moduleType ?? undefined;
         const moduleId = state.moduleId ?? undefined;
         const parentPath = state.parentPath ?? '';
         if (!moduleType || moduleId === undefined || moduleId === null) {
-            const message = 'Missing module context for creating property';
-            setLoadingError(ctx, 'create', message);
-            endLoading(ctx, 'create');
+            console.error('Missing module context for creating property');
             return of(null);
         }
-        return this.http
-            .post(`${this.baseUrl}${parentPath}/${moduleType}/${moduleId}`, action.payload)
-            .pipe(tap((response) => {
-            const created = response?.data;
-            if (!created) {
-                return;
-            }
-            const state = ctx.getState();
-            ctx.patchState({
-                properties: [...state.properties, created],
-                selectedProperty: created,
-            });
-        }), finalize(() => endLoading(ctx, 'create')));
+        const req$ = this.http.post(`${this.baseUrl}${parentPath}/${moduleType}/${moduleId}`, action.payload);
+        return handleApiRequest({
+            ctx,
+            key: PropertiesActionKey.Create,
+            request$: req$,
+            onSuccess: (response, state) => {
+                const created = response.data;
+                if (!created)
+                    return {};
+                return {
+                    properties: this.adapter.addOne(state.properties, created),
+                    selectedProperty: created,
+                };
+            },
+        });
     }
-    update(ctx, action) {
-        startLoading(ctx, 'update');
+    updateProperty(ctx, action) {
         const state = ctx.getState();
         const moduleType = state.moduleType ?? undefined;
         const moduleId = state.moduleId ?? undefined;
         const parentPath = state.parentPath ?? '';
         if (!moduleType || moduleId === undefined || moduleId === null) {
-            const message = 'Missing module context for updating property';
-            setLoadingError(ctx, 'update', message);
-            endLoading(ctx, 'update');
+            console.error('Missing module context for updating property');
             return of(null);
         }
-        return this.http
-            .put(`${this.baseUrl}${parentPath}/${moduleType}/${moduleId}/${action.id}`, action.payload)
-            .pipe(tap((response) => {
-            const updated = response?.data;
-            if (!updated) {
-                return;
-            }
-            const updatedId = updated.id ?? Number(action.id);
-            const state = ctx.getState();
-            const properties = state.properties.some((item) => item.id === updatedId)
-                ? state.properties.map((item) => item.id === updatedId ? { ...item, ...updated } : item)
-                : [...state.properties, updated];
-            ctx.patchState({
-                properties,
-                selectedProperty: updated,
-            });
-        }), catchError((error) => {
-            const message = error?.error?.message ??
-                error?.message ??
-                'Failed to update property';
-            setLoadingError(ctx, 'update', message);
-            return of(null);
-        }), finalize(() => endLoading(ctx, 'update')));
-    }
-    delete(ctx, action) {
-        startLoading(ctx, 'delete');
-        return this.http
-            .delete(`${this.baseUrl}/${encodeURIComponent(String(action.id))}`)
-            .pipe(tap(() => {
-            const { properties, selectedProperty } = ctx.getState();
-            const remaining = properties.filter((item) => item.id !== Number(action.id));
-            const nextSelected = selectedProperty && selectedProperty.id === Number(action.id)
-                ? null
-                : selectedProperty;
-            ctx.patchState({
-                properties: remaining,
-                selectedProperty: nextSelected,
-            });
-        }), catchError((error) => {
-            const message = error?.error?.message ??
-                error?.message ??
-                'Failed to delete property';
-            setLoadingError(ctx, 'delete', message);
-            return of(null);
-        }), finalize(() => endLoading(ctx, 'delete')));
-    }
-    SetPropertyTypes(ctx, action) {
-        ctx.patchState({
-            propertyTypes: action.payload,
+        const req$ = this.http.put(`${this.baseUrl}${parentPath}/${moduleType}/${moduleId}/${action.id}`, action.payload);
+        return handleApiRequest({
+            ctx,
+            key: PropertiesActionKey.Update,
+            request$: req$,
+            onSuccess: (response, state) => {
+                const updated = response.data;
+                if (!updated)
+                    return {};
+                return {
+                    properties: this.adapter.upsertOne(state.properties, updated, 'id'),
+                    selectedProperty: updated,
+                };
+            },
         });
     }
-    setBreadcrumb(ctx, action) {
-        ctx.patchState({
-            breadcrumbItems: action.items,
+    deleteProperty(ctx, action) {
+        const req$ = this.http.delete(`${this.baseUrl}/${encodeURIComponent(String(action.id))}`);
+        return handleApiRequest({
+            ctx,
+            key: PropertiesActionKey.Delete,
+            request$: req$,
+            onSuccess: (_, state) => {
+                const remaining = this.adapter.removeOne(state.properties, Number(action.id), 'id');
+                const nextSelected = state.selectedProperty &&
+                    state.selectedProperty.id === Number(action.id)
+                    ? null
+                    : state.selectedProperty;
+                return {
+                    properties: remaining,
+                    selectedProperty: nextSelected,
+                };
+            },
         });
     }
-    setDefaultViewType(ctx, action) {
-        ctx.patchState({
-            defaultViewType: action.viewType,
+    // ============================================================================
+    // Helper Methods
+    // ============================================================================
+    mapSchemaToOptions(schema) {
+        if (!schema?.properties) {
+            return [];
+        }
+        return Object.entries(schema.properties).map(([key, definition]) => {
+            const typeLabel = definition?.type ? ` | ${definition.type}` : '';
+            return {
+                key,
+                name: `${key}${typeLabel}`,
+                type: definition?.type,
+            };
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertiesState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertiesState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertiesState });
 };
 __decorate([
@@ -571,9 +556,6 @@ __decorate([
 __decorate([
     Action(TestApiConfiguration)
 ], PropertiesState.prototype, "testApiConfiguration", null);
-__decorate([
-    Action(ResetApiConfiguration)
-], PropertiesState.prototype, "resetApiConfiguration", null);
 __decorate([
     Action(GetPropertiesForConfigType)
 ], PropertiesState.prototype, "getPropertiesForConfigType", null);
@@ -586,18 +568,12 @@ __decorate([
 __decorate([
     Action(ResetSelectedProperty)
 ], PropertiesState.prototype, "resetSelectedProperty", null);
+__decorate([
+    Action(ResetApiConfiguration)
+], PropertiesState.prototype, "resetApiConfiguration", null);
 __decorate([
     Action(SetPropertiesModuleInfo)
 ], PropertiesState.prototype, "setModuleInfo", null);
-__decorate([
-    Action(CreateProperty)
-], PropertiesState.prototype, "create", null);
-__decorate([
-    Action(UpdateProperty)
-], PropertiesState.prototype, "update", null);
-__decorate([
-    Action(DeleteProperty)
-], PropertiesState.prototype, "delete", null);
 __decorate([
     Action(SetPropertyTypes)
 ], PropertiesState.prototype, "SetPropertyTypes", null);
@@ -607,12 +583,27 @@ __decorate([
 __decorate([
     Action(SetDefaultViewType)
 ], PropertiesState.prototype, "setDefaultViewType", null);
+__decorate([
+    Action(CreateProperty)
+], PropertiesState.prototype, "createProperty", null);
+__decorate([
+    Action(UpdateProperty)
+], PropertiesState.prototype, "updateProperty", null);
+__decorate([
+    Action(DeleteProperty)
+], PropertiesState.prototype, "deleteProperty", null);
 __decorate([
     Selector()
 ], PropertiesState, "properties", null);
 __decorate([
     Selector()
 ], PropertiesState, "selectedProperty", null);
+__decorate([
+    Selector()
+], PropertiesState, "moduleId", null);
+__decorate([
+    Selector()
+], PropertiesState, "parentModuleId", null);
 __decorate([
     Selector()
 ], PropertiesState, "lookups", null);
@@ -645,10 +636,10 @@ __decorate([
 ], PropertiesState, "defaultViewType", null);
 __decorate([
     Selector()
-], PropertiesState, "isLoadingFactory", null);
+], PropertiesState, "getLoadingActive", null);
 __decorate([
     Selector()
-], PropertiesState, "errorFactory", null);
+], PropertiesState, "getErrors", null);
 __decorate([
     Selector()
 ], PropertiesState, "propertyById", null);
@@ -660,13 +651,18 @@ PropertiesState = __decorate([
 ], PropertiesState);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertiesState, decorators: [{
             type: Injectable
-        }], propDecorators: { getAll: [], getOne: [], getLookups: [], getGroups: [], getConfigAsType: [], getCountries: [], testApiConfiguration: [], resetApiConfiguration: [], getPropertiesForConfigType: [], resetConfigProperties: [], resetConfigScopes: [], resetSelectedProperty: [], setModuleInfo: [], create: [], update: [], delete: [], SetPropertyTypes: [], setBreadcrumb: [], setDefaultViewType: [] } });
+        }], propDecorators: { getAll: [], getOne: [], getLookups: [], getGroups: [], getConfigAsType: [], getCountries: [], testApiConfiguration: [], getPropertiesForConfigType: [], resetConfigProperties: [], resetConfigScopes: [], resetSelectedProperty: [], resetApiConfiguration: [], setModuleInfo: [], SetPropertyTypes: [], setBreadcrumb: [], setDefaultViewType: [], createProperty: [], updateProperty: [], deleteProperty: [] } });
 
 class PropertiesFacade {
     store = inject(Store);
+    // ============================================================================
+    // Data Selectors - Memoized by NGXS (fine-grained reactivity)
+    // ============================================================================
     list = select(PropertiesState.properties);
     propertyTypes = select(PropertiesState.propertyTypes);
     selected = select(PropertiesState.selectedProperty);
+    moduleId = select(PropertiesState.moduleId);
+    parentModuleId = select(PropertiesState.parentModuleId);
     lookups = select(PropertiesState.lookups);
     configProperties = select(PropertiesState.configTypeProperties);
     groups = select(PropertiesState.groups);
@@ -676,12 +672,47 @@ class PropertiesFacade {
     apiProperties = select(PropertiesState.apiProperties);
     breadcrumbItems = select(PropertiesState.breadcrumbItems);
     defaultViewType = select(PropertiesState.defaultViewType);
+    // ============================================================================
+    // Loading/Error Slices - Memoized by NGXS
+    // ============================================================================
+    loadingActive = select(PropertiesState.getLoadingActive);
+    errors = select(PropertiesState.getErrors);
+    // ============================================================================
+    // Loading Signals - Computed from slice (minimal reactivity)
+    // ============================================================================
+    isLoadingAll = computed(() => this.loadingActive().includes(PropertiesActionKey.GetAll), ...(ngDevMode ? [{ debugName: "isLoadingAll" }] : []));
+    isLoadingOne = computed(() => this.loadingActive().includes(PropertiesActionKey.GetOne), ...(ngDevMode ? [{ debugName: "isLoadingOne" }] : []));
+    isCreating = computed(() => this.loadingActive().includes(PropertiesActionKey.Create), ...(ngDevMode ? [{ debugName: "isCreating" }] : []));
+    isUpdating = computed(() => this.loadingActive().includes(PropertiesActionKey.Update), ...(ngDevMode ? [{ debugName: "isUpdating" }] : []));
+    isDeleting = computed(() => this.loadingActive().includes(PropertiesActionKey.Delete), ...(ngDevMode ? [{ debugName: "isDeleting" }] : []));
+    isLoadingLookups = computed(() => this.loadingActive().includes(PropertiesActionKey.GetLookups), ...(ngDevMode ? [{ debugName: "isLoadingLookups" }] : []));
+    isLoadingGroups = computed(() => this.loadingActive().includes(PropertiesActionKey.GetGroups), ...(ngDevMode ? [{ debugName: "isLoadingGroups" }] : []));
+    isLoadingConfigProperties = computed(() => this.loadingActive().includes(PropertiesActionKey.GetConfigProperties), ...(ngDevMode ? [{ debugName: "isLoadingConfigProperties" }] : []));
+    isLoadingConfigAsType = computed(() => this.loadingActive().includes(PropertiesActionKey.GetConfigAsType), ...(ngDevMode ? [{ debugName: "isLoadingConfigAsType" }] : []));
+    isLoadingCountries = computed(() => this.loadingActive().includes(PropertiesActionKey.GetCountries), ...(ngDevMode ? [{ debugName: "isLoadingCountries" }] : []));
+    isTestingApi = computed(() => this.loadingActive().includes(PropertiesActionKey.TestApiConfiguration), ...(ngDevMode ? [{ debugName: "isTestingApi" }] : []));
+    // ============================================================================
+    // Error Signals - Computed from slice (minimal reactivity)
+    // ============================================================================
+    allError = computed(() => this.errors()[PropertiesActionKey.GetAll] ?? null, ...(ngDevMode ? [{ debugName: "allError" }] : []));
+    oneError = computed(() => this.errors()[PropertiesActionKey.GetOne] ?? null, ...(ngDevMode ? [{ debugName: "oneError" }] : []));
+    createError = computed(() => this.errors()[PropertiesActionKey.Create] ?? null, ...(ngDevMode ? [{ debugName: "createError" }] : []));
+    updateError = computed(() => this.errors()[PropertiesActionKey.Update] ?? null, ...(ngDevMode ? [{ debugName: "updateError" }] : []));
+    deleteError = computed(() => this.errors()[PropertiesActionKey.Delete] ?? null, ...(ngDevMode ? [{ debugName: "deleteError" }] : []));
+    lookupsError = computed(() => this.errors()[PropertiesActionKey.GetLookups] ?? null, ...(ngDevMode ? [{ debugName: "lookupsError" }] : []));
+    groupsError = computed(() => this.errors()[PropertiesActionKey.GetGroups] ?? null, ...(ngDevMode ? [{ debugName: "groupsError" }] : []));
+    configPropertiesError = computed(() => this.errors()[PropertiesActionKey.GetConfigProperties] ?? null, ...(ngDevMode ? [{ debugName: "configPropertiesError" }] : []));
+    configAsTypeError = computed(() => this.errors()[PropertiesActionKey.GetConfigAsType] ?? null, ...(ngDevMode ? [{ debugName: "configAsTypeError" }] : []));
+    countriesError = computed(() => this.errors()[PropertiesActionKey.GetCountries] ?? null, ...(ngDevMode ? [{ debugName: "countriesError" }] : []));
+    apiTestError = computed(() => this.errors()[PropertiesActionKey.TestApiConfiguration] ?? null, ...(ngDevMode ? [{ debugName: "apiTestError" }] : []));
+    // ============================================================================
+    // Derived Data - Computed from data selectors
+    // ============================================================================
     systemProperties = computed(() => this.list().filter((property) => Boolean(property.isSystem)), ...(ngDevMode ? [{ debugName: "systemProperties" }] : []));
     customProperties = computed(() => this.list().filter((property) => !Boolean(property.isSystem)), ...(ngDevMode ? [{ debugName: "customProperties" }] : []));
-    isLoading(loadingName) {
-        const loadingFactory = select(PropertiesState.isLoadingFactory);
-        return computed(() => loadingFactory()(loadingName));
-    }
+    // ============================================================================
+    // Action Dispatchers
+    // ============================================================================
     loadAll(params) {
         return this.store.dispatch(new GetProperties(params));
     }
@@ -828,7 +859,7 @@ class PropertiesList {
     ], ...(ngDevMode ? [{ debugName: "propertyTypes" }] : []));
     tableColumns = signal([
         {
-            key: 'name',
+            key: 'name.display',
             label: this.transloco.translate('properties.list.columnName'),
             filterConfig: {
                 type: 'text',
@@ -896,7 +927,7 @@ class PropertiesList {
             loading: (row) => this.deletingRowIds().includes(row.id),
         },
     ], ...(ngDevMode ? [{ debugName: "rowActions" }] : []));
-    loading = this.facade.isLoading('getAll');
+    loading = this.facade.isLoadingAll;
     tableData = computed(() => {
         const tab = this.activeTab();
         const allProperties = this.facade.list();
@@ -924,7 +955,7 @@ class PropertiesList {
         this.deletingRowIds.update((ids) => [...ids, row.id]);
         this.facade
             .delete(row.id)
-            .pipe(finalize$1(() => {
+            .pipe(finalize(() => {
             this.deletingRowIds.update((ids) => ids.filter((id) => id !== row.id));
         }))
             .subscribe();
@@ -981,7 +1012,7 @@ class ApiConfiguration {
     schema = signal(null, ...(ngDevMode ? [{ debugName: "schema" }] : []));
     isWriting = false;
     touched = false;
-    isTesting = this.facade.isLoading('testApiConfiguration');
+    isTesting = this.facade.isTestingApi;
     apiProperties = this.facade.apiProperties;
     hasDetectedSchema = computed(() => this.apiProperties().length > 0, ...(ngDevMode ? [{ debugName: "hasDetectedSchema" }] : []));
     form = new FormGroup({
@@ -1200,7 +1231,7 @@ class CheckListFormConfiguration {
                         key: 'properties',
                         cssClass: 'md:col-span-2',
                         options: this.configProperties(),
-                        optionLabel: 'name',
+                        optionLabel: 'name.display',
                         optionValue: 'key',
                         sourceHeader: this.transloco.translate('properties.form.availableProperties'),
                         targetHeader: this.transloco.translate('properties.form.selectedProperties'),
@@ -1276,7 +1307,7 @@ class DynamicListConfiguration {
                         key: 'properties',
                         cssClass: 'md:col-span-2',
                         options: this.configProperties(),
-                        optionLabel: 'name',
+                        optionLabel: 'name.display',
                         optionValue: 'key',
                         sourceHeader: this.transloco.translate('properties.form.availableProperties'),
                         targetHeader: this.transloco.translate('properties.form.selectedProperties'),
@@ -1352,7 +1383,7 @@ class EditableListViewConfiguration {
                         key: 'Properties',
                         cssClass: 'md:col-span-2',
                         options: this.configProperties(),
-                        optionLabel: 'name',
+                        optionLabel: 'name.display',
                         optionValue: 'key',
                         sourceHeader: this.transloco.translate('properties.form.availableProperties'),
                         targetHeader: this.transloco.translate('properties.form.selectedProperties'),
@@ -1448,7 +1479,7 @@ class InternalModuleConfiguration {
                         type: 'select',
                         key: 'property',
                         label: this.transloco.translate('properties.form.valueProperty'),
-                        optionLabel: 'name',
+                        optionLabel: 'name.display',
                         optionValue: 'key',
                         options: this.configProperties(),
                     },
@@ -1456,7 +1487,7 @@ class InternalModuleConfiguration {
                         cssClass: 'md:col-span-2 mt-2',
                         key: 'propertyDetails',
                         options: this.configProperties(),
-                        optionLabel: 'name',
+                        optionLabel: 'name.display',
                         optionValue: 'key',
                         sourceHeader: this.transloco.translate('properties.form.availableProperties'),
                         targetHeader: this.transloco.translate('properties.form.selectedProperties'),
@@ -1567,7 +1598,7 @@ class LookupConfiguration {
                         key: 'lookup',
                         type: 'select',
                         label: this.transloco.translate('properties.form.selectLookup'),
-                        optionLabel: 'name',
+                        optionLabel: 'name.display',
                         optionValue: 'id',
                         options: this.lookups(),
                         filter: true,
@@ -1648,7 +1679,7 @@ class UserConfiguration {
                         key: 'group',
                         type: 'select',
                         label: this.transloco.translate('properties.form.selectGroup'),
-                        optionLabel: 'name',
+                        optionLabel: 'name.display',
                         optionValue: 'id',
                         options: this.groups(),
                         filter: true,
@@ -1849,14 +1880,20 @@ class PropertyForm {
             description: '',
         }),
         configuration: new FormControl(null),
+        formula: new FormControl(null),
     });
     mainControl = this.propertyForm.get('main');
     configurationControl = this.propertyForm.get('configuration');
-    creating = this.facade.isLoading('create');
-    updating = this.facade.isLoading('update');
-    loading = this.facade.isLoading('getOne');
+    formulaControl = this.propertyForm.get('formula');
+    creating = this.facade.isCreating;
+    updating = this.facade.isUpdating;
+    loading = this.facade.isLoadingOne;
     submitting = computed(() => this.creating() || this.updating(), ...(ngDevMode ? [{ debugName: "submitting" }] : []));
     propertyType = toSignal(this.mainControl.valueChanges.pipe(map((v) => v?.viewType), distinctUntilChanged()));
+    isCalculated = toSignal(this.mainControl.valueChanges.pipe(map((v) => Boolean(v?.isCalculated)), distinctUntilChanged()), {
+        initialValue: Boolean(this.mainControl.value?.isCalculated),
+    });
+    formulaSchemaId = computed(() => this.resolveSchemaId(this.facade.parentModuleId() ?? this.facade.moduleId()), ...(ngDevMode ? [{ debugName: "formulaSchemaId" }] : []));
     selectedPropertyTypeConfiguration = computed(() => {
         const propertyTypesSetting = this.propertyTypes();
         const selectedViewType = this.propertyType();
@@ -2135,12 +2172,20 @@ class PropertyForm {
         // Direct component type
         this.configurationComponentType.set(result);
     }
+    resolveSchemaId(value) {
+        if (value === null || value === undefined) {
+            return undefined;
+        }
+        const parsed = typeof value === 'string' ? Number(value) : value;
+        return Number.isFinite(parsed) ? parsed : undefined;
+    }
     createOrEditProperty() {
         const mainValue = this.mainControl.value;
         if (!mainValue)
             return;
         const payload = {
             ...mainValue,
+            formula: mainValue.isCalculated ? this.formulaControl.value : null,
             Configuration: this.configurationControl.value ?? mainValue.Configuration ?? null,
         };
         const request$ = this.propertyId()
@@ -2155,6 +2200,9 @@ class PropertyForm {
             emitEvent: false,
         });
         this.configurationControl.setValue(property?.configuration);
+        this.formulaControl.setValue(property.formula ?? null, {
+            emitEvent: false,
+        });
     }
     goBack() {
         const path = this.isEditing()
@@ -2171,15 +2219,17 @@ 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-1/2 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      }\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: 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: 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\") {\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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertyForm, decorators: [{
             type: Component,
             args: [{ selector: 'mt-property-form', imports: [
                         Page,
                         Button,
+                        Card,
                         DynamicForm,
                         ReactiveFormsModule,
+                        FormulaBuilder,
                         ApiConfiguration,
                         CheckListFormConfiguration,
                         DynamicListConfiguration,
@@ -2192,7 +2242,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-1/2 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      }\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\") {\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" }]
         }], ctorParameters: () => [], propDecorators: { propertyId: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyId", required: false }] }], configurationHost: [{
                 type: ViewChild,
                 args: ['configurationHost', { read: ViewContainerRef }]
@@ -2206,5 +2256,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CreateProperty, DeleteProperty, GetConfigAsType, GetCountries, GetGroups, GetLookups, GetProperties, GetPropertiesForConfigType, GetProperty, PropertiesFacade, PropertiesList, PropertiesState, PropertyForm, REQUEST_CONTEXT, ResetApiConfiguration, ResetConfigProperties, ResetConfigScopes, ResetSelectedProperty, SetBreadcrumb, SetDefaultViewType, SetPropertiesModuleInfo, SetPropertyTypes, TestApiConfiguration, UpdateProperty };
+export { CreateProperty, DeleteProperty, GetConfigAsType, GetCountries, GetGroups, GetLookups, GetProperties, GetPropertiesForConfigType, GetProperty, PropertiesActionKey, PropertiesFacade, PropertiesList, PropertiesState, PropertyForm, REQUEST_CONTEXT, ResetApiConfiguration, ResetConfigProperties, ResetConfigScopes, ResetSelectedProperty, SetBreadcrumb, SetDefaultViewType, SetPropertiesModuleInfo, SetPropertyTypes, TestApiConfiguration, UpdateProperty };
 //# sourceMappingURL=masterteam-properties.mjs.map