@masterteam/properties 0.0.29 → 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,7 +18,6 @@ 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';
@@ -27,30 +27,20 @@ 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;
@@ -198,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';
@@ -207,6 +197,9 @@ 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;
     }
@@ -241,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;
@@ -249,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;
@@ -268,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();
@@ -336,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);
@@ -387,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: [] });
     }
@@ -439,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) {
@@ -455,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([
@@ -578,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);
@@ -593,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);
@@ -614,6 +583,15 @@ __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);
@@ -658,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);
@@ -673,10 +651,13 @@ 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);
@@ -691,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));
     }
@@ -843,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',
@@ -911,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();
@@ -939,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();
@@ -996,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({
@@ -1215,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'),
@@ -1291,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'),
@@ -1367,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'),
@@ -1463,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(),
                     },
@@ -1471,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'),
@@ -1582,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,
@@ -1663,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,
@@ -1869,9 +1885,9 @@ class PropertyForm {
     mainControl = this.propertyForm.get('main');
     configurationControl = this.propertyForm.get('configuration');
     formulaControl = this.propertyForm.get('formula');
-    creating = this.facade.isLoading('create');
-    updating = this.facade.isLoading('update');
-    loading = this.facade.isLoading('getOne');
+    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()), {
@@ -2240,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