@masterteam/properties 0.0.31 → 0.0.33

package/fesm2022/masterteam-properties.mjs

@@ -1,31 +1,32 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, computed, input, linkedSignal, signal, Component, DestroyRef, effect, forwardRef, ChangeDetectionStrategy, EnvironmentInjector, ViewContainerRef, ViewChild } from '@angular/core';
+import { inject, Injectable, computed, input, linkedSignal, signal, Component, DestroyRef, effect, forwardRef, ChangeDetectionStrategy, viewChild, EnvironmentInjector, ViewContainerRef, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 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, startWith, map, distinctUntilChanged, Subscription } from 'rxjs';
-import { switchMap, tap } from 'rxjs/operators';
-import { CrudStateBase, handleApiRequest, PickListFieldConfig, ValidatorConfig } from '@masterteam/components';
+import { CrudStateBase, handleApiRequest, PickListFieldConfig, ValidatorConfig, ColorPickerFieldConfig, IconFieldConfig } from '@masterteam/components';
 import { Breadcrumb } from '@masterteam/components/breadcrumb';
 import { Card } from '@masterteam/components/card';
 import { Avatar } from '@masterteam/components/avatar';
 import { Divider } from 'primeng/divider';
 import { Button } from '@masterteam/components/button';
-import * as i1 from '@jsverse/transloco';
+import * as i2 from '@jsverse/transloco';
 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 * 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 * as i1 from '@angular/forms';
+import { FormGroup, FormControl, Validators, FormArray, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, ControlContainer, FormGroupDirective } from '@angular/forms';
+import * as i2$1 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';
+import { ModalService } from '@masterteam/components/modal';
+import { ModalRef } from '@masterteam/components/dialog';
 
 var PropertiesActionKey;
 (function (PropertiesActionKey) {
@@ -40,6 +41,11 @@ var PropertiesActionKey;
     PropertiesActionKey["GetConfigAsType"] = "getConfigAsType";
     PropertiesActionKey["GetCountries"] = "getCountries";
     PropertiesActionKey["TestApiConfiguration"] = "testApiConfiguration";
+    PropertiesActionKey["GetPropertyStatuses"] = "getPropertyStatuses";
+    PropertiesActionKey["CreatePropertyStatus"] = "createPropertyStatus";
+    PropertiesActionKey["UpdatePropertyStatus"] = "updatePropertyStatus";
+    PropertiesActionKey["DeletePropertyStatus"] = "deletePropertyStatus";
+    PropertiesActionKey["ReorderPropertyStatuses"] = "reorderPropertyStatuses";
 })(PropertiesActionKey || (PropertiesActionKey = {}));
 
 class GetProperties {
@@ -84,6 +90,52 @@ class TestApiConfiguration {
 class ResetApiConfiguration {
     static type = '[Properties] Reset API Configuration';
 }
+class GetPropertyStatuses {
+    propertyId;
+    static type = '[Properties] Get Property Statuses';
+    constructor(propertyId) {
+        this.propertyId = propertyId;
+    }
+}
+class CreatePropertyStatus {
+    propertyId;
+    payload;
+    static type = '[Properties] Create Property Status';
+    constructor(propertyId, payload) {
+        this.propertyId = propertyId;
+        this.payload = payload;
+    }
+}
+class UpdatePropertyStatus {
+    propertyId;
+    statusId;
+    payload;
+    static type = '[Properties] Update Property Status';
+    constructor(propertyId, statusId, payload) {
+        this.propertyId = propertyId;
+        this.statusId = statusId;
+        this.payload = payload;
+    }
+}
+class DeletePropertyStatus {
+    propertyId;
+    statusId;
+    static type = '[Properties] Delete Property Status';
+    constructor(propertyId, statusId) {
+        this.propertyId = propertyId;
+        this.statusId = statusId;
+    }
+}
+class ReorderPropertyStatuses {
+    payload;
+    static type = '[Properties] Reorder Property Statuses';
+    constructor(payload) {
+        this.payload = payload;
+    }
+}
+class ResetPropertyStatuses {
+    static type = '[Properties] Reset Property Statuses';
+}
 class GetPropertiesForConfigType {
     moduleType;
     moduleId;
@@ -185,6 +237,7 @@ const DEFAULT_STATE = {
     countries: [],
     apiSchema: null,
     apiProperties: [],
+    propertyStatuses: [],
     breadcrumbItems: [],
     defaultViewType: null,
 };
@@ -196,7 +249,7 @@ let PropertiesState = class PropertiesState extends CrudStateBase {
     groupsUrl = 'identity/Groups';
     countriesUrl = '/assets/countries/countries.json';
     apiTestUrl = 'app/testAPI';
-    apiDetectUrl = 'app/detect';
+    propertyStatusOrderUrl = 'Properties/Status/Order';
     // ============================================================================
     // Data Selectors - Individual for fine-grained reactivity
     // ============================================================================
@@ -233,6 +286,9 @@ let PropertiesState = class PropertiesState extends CrudStateBase {
     static apiProperties(state) {
         return state.apiProperties;
     }
+    static propertyStatuses(state) {
+        return state.propertyStatuses;
+    }
     static propertyTypes(state) {
         return state.propertyTypes ?? {};
     }
@@ -368,31 +424,97 @@ let PropertiesState = class PropertiesState extends CrudStateBase {
             apiSchema: null,
             apiProperties: [],
         });
-        const req$ = this.http
-            .post(this.apiTestUrl, action.payload)
-            .pipe(switchMap((testResponse) => {
-            const rawData = testResponse?.data;
-            if (!rawData) {
-                return of(null);
-            }
-            const formData = new FormData();
-            formData.append('jsonData', JSON.stringify(rawData));
-            return this.http
-                .post(this.apiDetectUrl, formData)
-                .pipe(tap((detectResponse) => {
-                const schema = detectResponse?.data ?? null;
-                const apiProperties = this.mapSchemaToOptions(schema);
-                ctx.patchState({
-                    apiSchema: schema,
-                    apiProperties,
-                });
-            }));
-        }));
+        const req$ = this.http.post(this.apiTestUrl, action.payload);
         return handleApiRequest({
             ctx,
             key: PropertiesActionKey.TestApiConfiguration,
             request$: req$,
-            onSuccess: () => ({}),
+            onSuccess: (response) => {
+                const schema = this.buildSchemaFromRecord(response.data);
+                return {
+                    apiSchema: schema,
+                    apiProperties: this.mapSchemaToOptions(schema),
+                };
+            },
+        });
+    }
+    getPropertyStatuses(ctx, action) {
+        const req$ = this.http.get(`${this.baseUrl}/${action.propertyId}/Status`);
+        return handleApiRequest({
+            ctx,
+            key: PropertiesActionKey.GetPropertyStatuses,
+            request$: req$,
+            onSuccess: (response) => ({
+                propertyStatuses: Array.isArray(response.data) ? response.data : [],
+            }),
+        });
+    }
+    createPropertyStatus(ctx, action) {
+        const req$ = this.http.post(`${this.baseUrl}/${action.propertyId}/Status`, action.payload);
+        return handleApiRequest({
+            ctx,
+            key: PropertiesActionKey.CreatePropertyStatus,
+            request$: req$,
+            onSuccess: (response, state) => {
+                const created = response.data;
+                if (!created) {
+                    return {};
+                }
+                return {
+                    propertyStatuses: [...state.propertyStatuses, created],
+                };
+            },
+        });
+    }
+    updatePropertyStatus(ctx, action) {
+        const req$ = this.http.put(`${this.baseUrl}/${action.propertyId}/Status/${action.statusId}`, action.payload);
+        return handleApiRequest({
+            ctx,
+            key: PropertiesActionKey.UpdatePropertyStatus,
+            request$: req$,
+            onSuccess: (response, state) => {
+                const updated = response.data;
+                if (!updated) {
+                    return {};
+                }
+                return {
+                    propertyStatuses: state.propertyStatuses.map((status) => status.id === updated.id ? updated : status),
+                };
+            },
+        });
+    }
+    deletePropertyStatus(ctx, action) {
+        const req$ = this.http.delete(`${this.baseUrl}/${action.propertyId}/Status/${action.statusId}`);
+        return handleApiRequest({
+            ctx,
+            key: PropertiesActionKey.DeletePropertyStatus,
+            request$: req$,
+            onSuccess: (_, state) => ({
+                propertyStatuses: state.propertyStatuses.filter((status) => status.id !== Number(action.statusId)),
+            }),
+        });
+    }
+    reorderPropertyStatuses(ctx, action) {
+        const req$ = this.http.put(this.propertyStatusOrderUrl, action.payload);
+        return handleApiRequest({
+            ctx,
+            key: PropertiesActionKey.ReorderPropertyStatuses,
+            request$: req$,
+            onSuccess: (_, state) => {
+                const orderMap = new Map(action.payload.orders.map((item) => [item.statusId, item.order]));
+                return {
+                    propertyStatuses: [...state.propertyStatuses]
+                        .map((status) => ({
+                        ...status,
+                        order: orderMap.get(status.id) ?? status.order ?? null,
+                    }))
+                        .sort((left, right) => {
+                        const leftOrder = left.order ?? Number.MAX_SAFE_INTEGER;
+                        const rightOrder = right.order ?? Number.MAX_SAFE_INTEGER;
+                        return leftOrder - rightOrder || left.id - right.id;
+                    }),
+                };
+            },
         });
     }
     getPropertiesForConfigType(ctx, action) {
@@ -425,6 +547,11 @@ let PropertiesState = class PropertiesState extends CrudStateBase {
             apiProperties: [],
         });
     }
+    resetPropertyStatuses(ctx) {
+        ctx.patchState({
+            propertyStatuses: [],
+        });
+    }
     setModuleInfo(ctx, action) {
         let parentPath = '';
         if (action.parentModuleType && action.parentModuleId) {
@@ -541,6 +668,34 @@ let PropertiesState = class PropertiesState extends CrudStateBase {
             };
         });
     }
+    buildSchemaFromRecord(record) {
+        if (!record) {
+            return null;
+        }
+        const properties = Object.entries(record).reduce((acc, [key, value]) => {
+            acc[key] = { type: this.inferApiFieldType(value) };
+            return acc;
+        }, {});
+        return Object.keys(properties).length ? { properties } : null;
+    }
+    inferApiFieldType(value) {
+        if (Array.isArray(value)) {
+            return 'array';
+        }
+        if (value === null) {
+            return 'null';
+        }
+        switch (typeof value) {
+            case 'string':
+            case 'number':
+            case 'boolean':
+                return typeof value;
+            case 'object':
+                return 'object';
+            default:
+                return undefined;
+        }
+    }
     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 });
 };
@@ -565,6 +720,21 @@ __decorate([
 __decorate([
     Action(TestApiConfiguration)
 ], PropertiesState.prototype, "testApiConfiguration", null);
+__decorate([
+    Action(GetPropertyStatuses)
+], PropertiesState.prototype, "getPropertyStatuses", null);
+__decorate([
+    Action(CreatePropertyStatus)
+], PropertiesState.prototype, "createPropertyStatus", null);
+__decorate([
+    Action(UpdatePropertyStatus)
+], PropertiesState.prototype, "updatePropertyStatus", null);
+__decorate([
+    Action(DeletePropertyStatus)
+], PropertiesState.prototype, "deletePropertyStatus", null);
+__decorate([
+    Action(ReorderPropertyStatuses)
+], PropertiesState.prototype, "reorderPropertyStatuses", null);
 __decorate([
     Action(GetPropertiesForConfigType)
 ], PropertiesState.prototype, "getPropertiesForConfigType", null);
@@ -580,6 +750,9 @@ __decorate([
 __decorate([
     Action(ResetApiConfiguration)
 ], PropertiesState.prototype, "resetApiConfiguration", null);
+__decorate([
+    Action(ResetPropertyStatuses)
+], PropertiesState.prototype, "resetPropertyStatuses", null);
 __decorate([
     Action(SetPropertiesModuleInfo)
 ], PropertiesState.prototype, "setModuleInfo", null);
@@ -634,6 +807,9 @@ __decorate([
 __decorate([
     Selector()
 ], PropertiesState, "apiProperties", null);
+__decorate([
+    Selector()
+], PropertiesState, "propertyStatuses", null);
 __decorate([
     Selector()
 ], PropertiesState, "propertyTypes", null);
@@ -660,7 +836,7 @@ 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: [], getPropertiesForConfigType: [], resetConfigProperties: [], resetConfigScopes: [], resetSelectedProperty: [], resetApiConfiguration: [], setModuleInfo: [], SetPropertyTypes: [], setBreadcrumb: [], setDefaultViewType: [], createProperty: [], updateProperty: [], deleteProperty: [] } });
+        }], propDecorators: { getAll: [], getOne: [], getLookups: [], getGroups: [], getConfigAsType: [], getCountries: [], testApiConfiguration: [], getPropertyStatuses: [], createPropertyStatus: [], updatePropertyStatus: [], deletePropertyStatus: [], reorderPropertyStatuses: [], getPropertiesForConfigType: [], resetConfigProperties: [], resetConfigScopes: [], resetSelectedProperty: [], resetApiConfiguration: [], resetPropertyStatuses: [], setModuleInfo: [], SetPropertyTypes: [], setBreadcrumb: [], setDefaultViewType: [], createProperty: [], updateProperty: [], deleteProperty: [] } });
 
 class PropertiesFacade {
     store = inject(Store);
@@ -679,6 +855,7 @@ class PropertiesFacade {
     countries = select(PropertiesState.countries);
     apiSchema = select(PropertiesState.apiSchema);
     apiProperties = select(PropertiesState.apiProperties);
+    propertyStatuses = select(PropertiesState.propertyStatuses);
     breadcrumbItems = select(PropertiesState.breadcrumbItems);
     defaultViewType = select(PropertiesState.defaultViewType);
     // ============================================================================
@@ -700,6 +877,11 @@ class PropertiesFacade {
     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" }] : []));
+    isLoadingPropertyStatuses = computed(() => this.loadingActive().includes(PropertiesActionKey.GetPropertyStatuses), ...(ngDevMode ? [{ debugName: "isLoadingPropertyStatuses" }] : []));
+    isCreatingPropertyStatus = computed(() => this.loadingActive().includes(PropertiesActionKey.CreatePropertyStatus), ...(ngDevMode ? [{ debugName: "isCreatingPropertyStatus" }] : []));
+    isUpdatingPropertyStatus = computed(() => this.loadingActive().includes(PropertiesActionKey.UpdatePropertyStatus), ...(ngDevMode ? [{ debugName: "isUpdatingPropertyStatus" }] : []));
+    isDeletingPropertyStatus = computed(() => this.loadingActive().includes(PropertiesActionKey.DeletePropertyStatus), ...(ngDevMode ? [{ debugName: "isDeletingPropertyStatus" }] : []));
+    isReorderingPropertyStatuses = computed(() => this.loadingActive().includes(PropertiesActionKey.ReorderPropertyStatuses), ...(ngDevMode ? [{ debugName: "isReorderingPropertyStatuses" }] : []));
     // ============================================================================
     // Error Signals - Computed from slice (minimal reactivity)
     // ============================================================================
@@ -714,6 +896,7 @@ class PropertiesFacade {
     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" }] : []));
+    propertyStatusesError = computed(() => this.errors()[PropertiesActionKey.GetPropertyStatuses] ?? null, ...(ngDevMode ? [{ debugName: "propertyStatusesError" }] : []));
     // ============================================================================
     // Derived Data - Computed from data selectors
     // ============================================================================
@@ -758,6 +941,24 @@ class PropertiesFacade {
     resetApiConfiguration() {
         return this.store.dispatch(new ResetApiConfiguration());
     }
+    loadPropertyStatuses(propertyId) {
+        return this.store.dispatch(new GetPropertyStatuses(propertyId));
+    }
+    createPropertyStatus(propertyId, payload) {
+        return this.store.dispatch(new CreatePropertyStatus(propertyId, payload));
+    }
+    updatePropertyStatus(propertyId, statusId, payload) {
+        return this.store.dispatch(new UpdatePropertyStatus(propertyId, statusId, payload));
+    }
+    deletePropertyStatus(propertyId, statusId) {
+        return this.store.dispatch(new DeletePropertyStatus(propertyId, statusId));
+    }
+    reorderPropertyStatuses(payload) {
+        return this.store.dispatch(new ReorderPropertyStatuses(payload));
+    }
+    resetPropertyStatuses() {
+        return this.store.dispatch(new ResetPropertyStatuses());
+    }
     setPropertyTypes(propertyTypes) {
         return this.store.dispatch(new SetPropertyTypes(propertyTypes));
     }
@@ -998,7 +1199,7 @@ class PropertiesList {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertiesList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PropertiesList, isStandalone: true, selector: "mt-properties-list", inputs: { tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"space-y-3\">\r\n  <div class=\"flex items-center justify-between\">\r\n    <div class=\"space-y-1\">\r\n      <h1 class=\"text-xl font-semibold text-slate-900 tracking-tight\">\r\n        {{ \"properties.list.pageTitle\" | transloco }}\r\n      </h1>\r\n      <mt-breadcrumb\r\n        [items]=\"breadcrumbItems()\"\r\n        [styleClass]=\"'flex justify-center'\"\r\n      >\r\n      </mt-breadcrumb>\r\n    </div>\r\n  </div>\r\n  <mt-card paddingless>\r\n    <mt-table\r\n      [tabs]=\"tabs()\"\r\n      [(activeTab)]=\"activeTab\"\r\n      (onTabChange)=\"onTabChange($event)\"\r\n      [data]=\"tableData()\"\r\n      [actions]=\"tableActions()\"\r\n      [columns]=\"tableColumns()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [loading]=\"loading()\"\r\n    >\r\n      <ng-template #empty>\r\n        <div headless class=\"flex-col justify-center items-center w-full p-5\">\r\n          <div\r\n            class=\"content flex flex-col gap-5 items-center text-center mb-5\"\r\n          >\r\n            <svg\r\n              width=\"152\"\r\n              height=\"120\"\r\n              viewBox=\"0 0 152 120\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n            >\r\n              <circle cx=\"76\" cy=\"52\" r=\"52\" fill=\"#E9EAEB\" />\r\n              <g filter=\"url(#filter0_ddd_2474_28277)\">\r\n                <path\r\n                  d=\"M77.6 16C66.8273 16 57.2978 21.3233 51.4987 29.4829C49.605 29.0363 47.6301 28.8 45.6 28.8C31.4615 28.8 20 40.2615 20 54.4C20 68.5385 31.4615 80 45.6 80L109.6 80C121.971 80 132 69.9712 132 57.6C132 45.2288 121.971 35.2 109.6 35.2C108.721 35.2 107.854 35.2506 107.002 35.349C102.098 23.9677 90.7797 16 77.6 16Z\"\r\n                  fill=\"#FAFAFA\"\r\n                />\r\n                <ellipse\r\n                  cx=\"45.6\"\r\n                  cy=\"54.3998\"\r\n                  rx=\"25.6\"\r\n                  ry=\"25.6\"\r\n                  fill=\"url(#paint0_linear_2474_28277)\"\r\n                />\r\n                <circle\r\n                  cx=\"77.6016\"\r\n                  cy=\"48\"\r\n                  r=\"32\"\r\n                  fill=\"url(#paint1_linear_2474_28277)\"\r\n                />\r\n                <ellipse\r\n                  cx=\"109.599\"\r\n                  cy=\"57.6002\"\r\n                  rx=\"22.4\"\r\n                  ry=\"22.4\"\r\n                  fill=\"url(#paint2_linear_2474_28277)\"\r\n                />\r\n              </g>\r\n              <circle cx=\"21\" cy=\"19\" r=\"5\" fill=\"#F5F5F5\" />\r\n              <circle cx=\"18\" cy=\"109\" r=\"7\" fill=\"#F5F5F5\" />\r\n              <circle cx=\"145\" cy=\"35\" r=\"7\" fill=\"#F5F5F5\" />\r\n              <circle cx=\"134\" cy=\"8\" r=\"4\" fill=\"#F5F5F5\" />\r\n              <foreignObject x=\"44\" y=\"54\" width=\"64\" height=\"64\">\r\n                <div\r\n                  xmlns=\"http://www.w3.org/1999/xhtml\"\r\n                  style=\"\r\n                    backdrop-filter: blur(4px);\r\n                    clip-path: url(#bgblur_0_2474_28277_clip_path);\r\n                    height: 100%;\r\n                    width: 100%;\r\n                  \"\r\n                ></div>\r\n              </foreignObject>\r\n              <g data-figma-bg-blur-radius=\"8\">\r\n                <path\r\n                  d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\r\n                  fill=\"#344054\"\r\n                  fill-opacity=\"0.4\"\r\n                />\r\n                <path\r\n                  d=\"M85 95L81.5001 91.5M84 85.5C84 90.1944 80.1944 94 75.5 94C70.8056 94 67 90.1944 67 85.5C67 80.8056 70.8056 77 75.5 77C80.1944 77 84 80.8056 84 85.5Z\"\r\n                  stroke=\"white\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </g>\r\n              <defs>\r\n                <filter\r\n                  id=\"filter0_ddd_2474_28277\"\r\n                  x=\"0\"\r\n                  y=\"16\"\r\n                  width=\"152\"\r\n                  height=\"104\"\r\n                  filterUnits=\"userSpaceOnUse\"\r\n                  color-interpolation-filters=\"sRGB\"\r\n                >\r\n                  <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                  <feColorMatrix\r\n                    in=\"SourceAlpha\"\r\n                    type=\"matrix\"\r\n                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                    result=\"hardAlpha\"\r\n                  />\r\n                  <feMorphology\r\n                    radius=\"1.5\"\r\n                    operator=\"erode\"\r\n                    in=\"SourceAlpha\"\r\n                    result=\"effect1_dropShadow_2474_28277\"\r\n                  />\r\n                  <feOffset dy=\"3\" />\r\n                  <feGaussianBlur stdDeviation=\"1.5\" />\r\n                  <feComposite in2=\"hardAlpha\" operator=\"out\" />\r\n                  <feColorMatrix\r\n                    type=\"matrix\"\r\n                    values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0\"\r\n                  />\r\n                  <feBlend\r\n                    mode=\"normal\"\r\n                    in2=\"BackgroundImageFix\"\r\n                    result=\"effect1_dropShadow_2474_28277\"\r\n                  />\r\n                  <feColorMatrix\r\n                    in=\"SourceAlpha\"\r\n                    type=\"matrix\"\r\n                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                    result=\"hardAlpha\"\r\n                  />\r\n                  <feMorphology\r\n                    radius=\"4\"\r\n                    operator=\"erode\"\r\n                    in=\"SourceAlpha\"\r\n                    result=\"effect2_dropShadow_2474_28277\"\r\n                  />\r\n                  <feOffset dy=\"8\" />\r\n                  <feGaussianBlur stdDeviation=\"4\" />\r\n                  <feComposite in2=\"hardAlpha\" operator=\"out\" />\r\n                  <feColorMatrix\r\n                    type=\"matrix\"\r\n                    values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0\"\r\n                  />\r\n                  <feBlend\r\n                    mode=\"normal\"\r\n                    in2=\"effect1_dropShadow_2474_28277\"\r\n                    result=\"effect2_dropShadow_2474_28277\"\r\n                  />\r\n                  <feColorMatrix\r\n                    in=\"SourceAlpha\"\r\n                    type=\"matrix\"\r\n                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                    result=\"hardAlpha\"\r\n                  />\r\n                  <feMorphology\r\n                    radius=\"4\"\r\n                    operator=\"erode\"\r\n                    in=\"SourceAlpha\"\r\n                    result=\"effect3_dropShadow_2474_28277\"\r\n                  />\r\n                  <feOffset dy=\"20\" />\r\n                  <feGaussianBlur stdDeviation=\"12\" />\r\n                  <feComposite in2=\"hardAlpha\" operator=\"out\" />\r\n                  <feColorMatrix\r\n                    type=\"matrix\"\r\n                    values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0\"\r\n                  />\r\n                  <feBlend\r\n                    mode=\"normal\"\r\n                    in2=\"effect2_dropShadow_2474_28277\"\r\n                    result=\"effect3_dropShadow_2474_28277\"\r\n                  />\r\n                  <feBlend\r\n                    mode=\"normal\"\r\n                    in=\"SourceGraphic\"\r\n                    in2=\"effect3_dropShadow_2474_28277\"\r\n                    result=\"shape\"\r\n                  />\r\n                </filter>\r\n                <clipPath\r\n                  id=\"bgblur_0_2474_28277_clip_path\"\r\n                  transform=\"translate(-44 -54)\"\r\n                >\r\n                  <path\r\n                    d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\r\n                  />\r\n                </clipPath>\r\n                <linearGradient\r\n                  id=\"paint0_linear_2474_28277\"\r\n                  x1=\"25.9429\"\r\n                  y1=\"37.4855\"\r\n                  x2=\"71.2\"\r\n                  y2=\"79.9998\"\r\n                  gradientUnits=\"userSpaceOnUse\"\r\n                >\r\n                  <stop stop-color=\"#D0D5DD\" />\r\n                  <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\r\n                </linearGradient>\r\n                <linearGradient\r\n                  id=\"paint1_linear_2474_28277\"\r\n                  x1=\"53.0301\"\r\n                  y1=\"26.8571\"\r\n                  x2=\"109.602\"\r\n                  y2=\"80\"\r\n                  gradientUnits=\"userSpaceOnUse\"\r\n                >\r\n                  <stop stop-color=\"#D0D5DD\" />\r\n                  <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\r\n                </linearGradient>\r\n                <linearGradient\r\n                  id=\"paint2_linear_2474_28277\"\r\n                  x1=\"92.3992\"\r\n                  y1=\"42.8002\"\r\n                  x2=\"131.999\"\r\n                  y2=\"80.0002\"\r\n                  gradientUnits=\"userSpaceOnUse\"\r\n                >\r\n                  <stop stop-color=\"#D0D5DD\" />\r\n                  <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\r\n                </linearGradient>\r\n              </defs>\r\n            </svg>\r\n\r\n            <div class=\"flex flex-col gap-1\">\r\n              <div class=\"text-md text-surface-600\">\r\n                {{ \"properties.list.emptyStateNoData\" | transloco }}\r\n              </div>\r\n            </div>\r\n            <div>\r\n              <mt-button\r\n                [label]=\"'properties.list.addNewProperty' | transloco\"\r\n                icon=\"general.plus\"\r\n                (click)=\"createProperty()\"\r\n              />\r\n            </div>\r\n          </div>\r\n          <p-divider type=\"solid\">\r\n            <div class=\"text-lg text-surface-600\">\r\n              {{ \"properties.list.emptyStateTemplate\" | transloco }}\r\n            </div>\r\n          </p-divider>\r\n          <div class=\"flex gap-3 mt-5 justify-center\">\r\n            @for (card of propertyTypes(); track card.label) {\r\n              <mt-card\r\n                headless\r\n                class=\"w-25 tailwind-4 cursor-pointer\"\r\n                style=\"background-color: #fafafa\"\r\n                (click)=\"createPropertyWithType(card.value)\"\r\n              >\r\n                <div\r\n                  class=\"content flex flex-col gap-3 items-center text-center\"\r\n                >\r\n                  <mt-avatar\r\n                    [style.--p-avatar-background]=\"\r\n                      'var(--p-' + card.color + '-100)'\r\n                    \"\r\n                    [style.--p-avatar-color]=\"'var(--p-' + card.color + '-600)'\"\r\n                    [icon]=\"card.icon\"\r\n                    shape=\"square\"\r\n                  ></mt-avatar>\r\n                  <div class=\"flex flex-col gap-1\">\r\n                    <div class=\"text-xs font-normal\">{{ card.label }}</div>\r\n                  </div>\r\n                </div>\r\n              </mt-card>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </mt-table>\r\n  </mt-card>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PropertiesList, isStandalone: true, selector: "mt-properties-list", inputs: { tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"space-y-3\">\r\n  <div class=\"flex items-center justify-between\">\r\n    <div class=\"space-y-1\">\r\n      <h1 class=\"text-xl font-semibold text-slate-900 tracking-tight\">\r\n        {{ \"properties.list.pageTitle\" | transloco }}\r\n      </h1>\r\n      <mt-breadcrumb\r\n        [items]=\"breadcrumbItems()\"\r\n        [styleClass]=\"'flex justify-center'\"\r\n      >\r\n      </mt-breadcrumb>\r\n    </div>\r\n  </div>\r\n  <mt-card paddingless>\r\n    <mt-table\r\n      [tabs]=\"tabs()\"\r\n      [(activeTab)]=\"activeTab\"\r\n      (onTabChange)=\"onTabChange($event)\"\r\n      [data]=\"tableData()\"\r\n      [actions]=\"tableActions()\"\r\n      [columns]=\"tableColumns()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [loading]=\"loading()\"\r\n    >\r\n      <ng-template #empty>\r\n        <div headless class=\"flex-col justify-center items-center w-full p-5\">\r\n          <div\r\n            class=\"content flex flex-col gap-5 items-center text-center mb-5\"\r\n          >\r\n            <svg\r\n              width=\"152\"\r\n              height=\"120\"\r\n              viewBox=\"0 0 152 120\"\r\n              fill=\"none\"\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n            >\r\n              <circle cx=\"76\" cy=\"52\" r=\"52\" fill=\"#E9EAEB\" />\r\n              <g filter=\"url(#filter0_ddd_2474_28277)\">\r\n                <path\r\n                  d=\"M77.6 16C66.8273 16 57.2978 21.3233 51.4987 29.4829C49.605 29.0363 47.6301 28.8 45.6 28.8C31.4615 28.8 20 40.2615 20 54.4C20 68.5385 31.4615 80 45.6 80L109.6 80C121.971 80 132 69.9712 132 57.6C132 45.2288 121.971 35.2 109.6 35.2C108.721 35.2 107.854 35.2506 107.002 35.349C102.098 23.9677 90.7797 16 77.6 16Z\"\r\n                  fill=\"#FAFAFA\"\r\n                />\r\n                <ellipse\r\n                  cx=\"45.6\"\r\n                  cy=\"54.3998\"\r\n                  rx=\"25.6\"\r\n                  ry=\"25.6\"\r\n                  fill=\"url(#paint0_linear_2474_28277)\"\r\n                />\r\n                <circle\r\n                  cx=\"77.6016\"\r\n                  cy=\"48\"\r\n                  r=\"32\"\r\n                  fill=\"url(#paint1_linear_2474_28277)\"\r\n                />\r\n                <ellipse\r\n                  cx=\"109.599\"\r\n                  cy=\"57.6002\"\r\n                  rx=\"22.4\"\r\n                  ry=\"22.4\"\r\n                  fill=\"url(#paint2_linear_2474_28277)\"\r\n                />\r\n              </g>\r\n              <circle cx=\"21\" cy=\"19\" r=\"5\" fill=\"#F5F5F5\" />\r\n              <circle cx=\"18\" cy=\"109\" r=\"7\" fill=\"#F5F5F5\" />\r\n              <circle cx=\"145\" cy=\"35\" r=\"7\" fill=\"#F5F5F5\" />\r\n              <circle cx=\"134\" cy=\"8\" r=\"4\" fill=\"#F5F5F5\" />\r\n              <foreignObject x=\"44\" y=\"54\" width=\"64\" height=\"64\">\r\n                <div\r\n                  xmlns=\"http://www.w3.org/1999/xhtml\"\r\n                  style=\"\r\n                    backdrop-filter: blur(4px);\r\n                    clip-path: url(#bgblur_0_2474_28277_clip_path);\r\n                    height: 100%;\r\n                    width: 100%;\r\n                  \"\r\n                ></div>\r\n              </foreignObject>\r\n              <g data-figma-bg-blur-radius=\"8\">\r\n                <path\r\n                  d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\r\n                  fill=\"#344054\"\r\n                  fill-opacity=\"0.4\"\r\n                />\r\n                <path\r\n                  d=\"M85 95L81.5001 91.5M84 85.5C84 90.1944 80.1944 94 75.5 94C70.8056 94 67 90.1944 67 85.5C67 80.8056 70.8056 77 75.5 77C80.1944 77 84 80.8056 84 85.5Z\"\r\n                  stroke=\"white\"\r\n                  stroke-width=\"2\"\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                />\r\n              </g>\r\n              <defs>\r\n                <filter\r\n                  id=\"filter0_ddd_2474_28277\"\r\n                  x=\"0\"\r\n                  y=\"16\"\r\n                  width=\"152\"\r\n                  height=\"104\"\r\n                  filterUnits=\"userSpaceOnUse\"\r\n                  color-interpolation-filters=\"sRGB\"\r\n                >\r\n                  <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                  <feColorMatrix\r\n                    in=\"SourceAlpha\"\r\n                    type=\"matrix\"\r\n                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                    result=\"hardAlpha\"\r\n                  />\r\n                  <feMorphology\r\n                    radius=\"1.5\"\r\n                    operator=\"erode\"\r\n                    in=\"SourceAlpha\"\r\n                    result=\"effect1_dropShadow_2474_28277\"\r\n                  />\r\n                  <feOffset dy=\"3\" />\r\n                  <feGaussianBlur stdDeviation=\"1.5\" />\r\n                  <feComposite in2=\"hardAlpha\" operator=\"out\" />\r\n                  <feColorMatrix\r\n                    type=\"matrix\"\r\n                    values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.04 0\"\r\n                  />\r\n                  <feBlend\r\n                    mode=\"normal\"\r\n                    in2=\"BackgroundImageFix\"\r\n                    result=\"effect1_dropShadow_2474_28277\"\r\n                  />\r\n                  <feColorMatrix\r\n                    in=\"SourceAlpha\"\r\n                    type=\"matrix\"\r\n                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                    result=\"hardAlpha\"\r\n                  />\r\n                  <feMorphology\r\n                    radius=\"4\"\r\n                    operator=\"erode\"\r\n                    in=\"SourceAlpha\"\r\n                    result=\"effect2_dropShadow_2474_28277\"\r\n                  />\r\n                  <feOffset dy=\"8\" />\r\n                  <feGaussianBlur stdDeviation=\"4\" />\r\n                  <feComposite in2=\"hardAlpha\" operator=\"out\" />\r\n                  <feColorMatrix\r\n                    type=\"matrix\"\r\n                    values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.03 0\"\r\n                  />\r\n                  <feBlend\r\n                    mode=\"normal\"\r\n                    in2=\"effect1_dropShadow_2474_28277\"\r\n                    result=\"effect2_dropShadow_2474_28277\"\r\n                  />\r\n                  <feColorMatrix\r\n                    in=\"SourceAlpha\"\r\n                    type=\"matrix\"\r\n                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                    result=\"hardAlpha\"\r\n                  />\r\n                  <feMorphology\r\n                    radius=\"4\"\r\n                    operator=\"erode\"\r\n                    in=\"SourceAlpha\"\r\n                    result=\"effect3_dropShadow_2474_28277\"\r\n                  />\r\n                  <feOffset dy=\"20\" />\r\n                  <feGaussianBlur stdDeviation=\"12\" />\r\n                  <feComposite in2=\"hardAlpha\" operator=\"out\" />\r\n                  <feColorMatrix\r\n                    type=\"matrix\"\r\n                    values=\"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.08 0\"\r\n                  />\r\n                  <feBlend\r\n                    mode=\"normal\"\r\n                    in2=\"effect2_dropShadow_2474_28277\"\r\n                    result=\"effect3_dropShadow_2474_28277\"\r\n                  />\r\n                  <feBlend\r\n                    mode=\"normal\"\r\n                    in=\"SourceGraphic\"\r\n                    in2=\"effect3_dropShadow_2474_28277\"\r\n                    result=\"shape\"\r\n                  />\r\n                </filter>\r\n                <clipPath\r\n                  id=\"bgblur_0_2474_28277_clip_path\"\r\n                  transform=\"translate(-44 -54)\"\r\n                >\r\n                  <path\r\n                    d=\"M52 86C52 72.7452 62.7452 62 76 62C89.2548 62 100 72.7452 100 86C100 99.2548 89.2548 110 76 110C62.7452 110 52 99.2548 52 86Z\"\r\n                  />\r\n                </clipPath>\r\n                <linearGradient\r\n                  id=\"paint0_linear_2474_28277\"\r\n                  x1=\"25.9429\"\r\n                  y1=\"37.4855\"\r\n                  x2=\"71.2\"\r\n                  y2=\"79.9998\"\r\n                  gradientUnits=\"userSpaceOnUse\"\r\n                >\r\n                  <stop stop-color=\"#D0D5DD\" />\r\n                  <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\r\n                </linearGradient>\r\n                <linearGradient\r\n                  id=\"paint1_linear_2474_28277\"\r\n                  x1=\"53.0301\"\r\n                  y1=\"26.8571\"\r\n                  x2=\"109.602\"\r\n                  y2=\"80\"\r\n                  gradientUnits=\"userSpaceOnUse\"\r\n                >\r\n                  <stop stop-color=\"#D0D5DD\" />\r\n                  <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\r\n                </linearGradient>\r\n                <linearGradient\r\n                  id=\"paint2_linear_2474_28277\"\r\n                  x1=\"92.3992\"\r\n                  y1=\"42.8002\"\r\n                  x2=\"131.999\"\r\n                  y2=\"80.0002\"\r\n                  gradientUnits=\"userSpaceOnUse\"\r\n                >\r\n                  <stop stop-color=\"#D0D5DD\" />\r\n                  <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\r\n                </linearGradient>\r\n              </defs>\r\n            </svg>\r\n\r\n            <div class=\"flex flex-col gap-1\">\r\n              <div class=\"text-md text-surface-600\">\r\n                {{ \"properties.list.emptyStateNoData\" | transloco }}\r\n              </div>\r\n            </div>\r\n            <div>\r\n              <mt-button\r\n                [label]=\"'properties.list.addNewProperty' | transloco\"\r\n                icon=\"general.plus\"\r\n                (click)=\"createProperty()\"\r\n              />\r\n            </div>\r\n          </div>\r\n          <p-divider type=\"solid\">\r\n            <div class=\"text-lg text-surface-600\">\r\n              {{ \"properties.list.emptyStateTemplate\" | transloco }}\r\n            </div>\r\n          </p-divider>\r\n          <div class=\"flex gap-3 mt-5 justify-center\">\r\n            @for (card of propertyTypes(); track card.label) {\r\n              <mt-card\r\n                headless\r\n                class=\"w-25 tailwind-4 cursor-pointer\"\r\n                style=\"background-color: #fafafa\"\r\n                (click)=\"createPropertyWithType(card.value)\"\r\n              >\r\n                <div\r\n                  class=\"content flex flex-col gap-3 items-center text-center\"\r\n                >\r\n                  <mt-avatar\r\n                    [style.--p-avatar-background]=\"\r\n                      'var(--p-' + card.color + '-100)'\r\n                    \"\r\n                    [style.--p-avatar-color]=\"'var(--p-' + card.color + '-600)'\"\r\n                    [icon]=\"card.icon\"\r\n                    shape=\"square\"\r\n                  ></mt-avatar>\r\n                  <div class=\"flex flex-col gap-1\">\r\n                    <div class=\"text-xs font-normal\">{{ card.label }}</div>\r\n                  </div>\r\n                </div>\r\n              </mt-card>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n    </mt-table>\r\n  </mt-card>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertiesList, decorators: [{
             type: Component,
@@ -1019,23 +1220,38 @@ class ApiConfiguration {
     destroyRef = inject(DestroyRef);
     transloco = inject(TranslocoService);
     schema = signal(null, ...(ngDevMode ? [{ debugName: "schema" }] : []));
+    lastLoadedPayloadSignature = null;
     isWriting = false;
     touched = false;
     isTesting = this.facade.isTestingApi;
     apiProperties = this.facade.apiProperties;
-    hasDetectedSchema = computed(() => this.apiProperties().length > 0, ...(ngDevMode ? [{ debugName: "hasDetectedSchema" }] : []));
+    resolvedApiProperties = computed(() => {
+        const loadedProperties = this.apiProperties();
+        if (loadedProperties.length) {
+            return loadedProperties;
+        }
+        return this.mapSchemaToOptions(this.schema());
+    }, ...(ngDevMode ? [{ debugName: "resolvedApiProperties" }] : []));
+    hasDetectedSchema = computed(() => this.resolvedApiProperties().length > 0, ...(ngDevMode ? [{ debugName: "hasDetectedSchema" }] : []));
     form = new FormGroup({
         endpoint: new FormControl('', {
             nonNullable: true,
             validators: [Validators.required],
         }),
         headers: new FormArray([]),
-        key: new FormControl(null),
-        value: new FormControl(null),
+        key: new FormControl('', {
+            nonNullable: true,
+            validators: [Validators.required],
+        }),
+        value: new FormControl('', {
+            nonNullable: true,
+            validators: [Validators.required],
+        }),
         supportMultiSelect: new FormControl(false, { nonNullable: true }),
     });
     onChange = () => { };
     onTouched = () => { };
+    onValidatorChange = () => { };
     formChanges = toSignal(this.form.valueChanges, {
         initialValue: this.form.getRawValue(),
     });
@@ -1044,6 +1260,7 @@ class ApiConfiguration {
         effect(() => {
             this.formChanges();
             this.emitValue();
+            this.onValidatorChange();
         });
         effect(() => {
             const latestSchema = this.facade.apiSchema();
@@ -1067,11 +1284,13 @@ class ApiConfiguration {
             if (!value) {
                 this.form.reset({
                     endpoint: '',
-                    key: null,
-                    value: null,
+                    key: '',
+                    value: '',
                     supportMultiSelect: false,
                 }, { emitEvent: false });
                 this.setHeadersFromRecord({});
+                this.lastLoadedPayloadSignature = null;
+                this.facade.resetApiConfiguration().subscribe();
                 this.schema.set(null);
                 this.touched = false;
                 return;
@@ -1079,16 +1298,18 @@ class ApiConfiguration {
             this.schema.set(value.schema ?? null);
             this.form.patchValue({
                 endpoint: value.endpoint ?? '',
-                key: value.key ?? null,
-                value: value.value ?? null,
+                key: value.key ?? '',
+                value: value.value ?? '',
                 supportMultiSelect: !!value.supportMultiSelect,
             }, { emitEvent: false });
             this.setHeadersFromRecord(value.headers ?? {});
             this.touched = false;
+            this.loadApiFields(value.endpoint ?? '', value.headers ?? {});
         }
         finally {
             this.isWriting = false;
             this.emitValue(false);
+            this.onValidatorChange();
         }
     }
     registerOnChange(fn) {
@@ -1097,6 +1318,12 @@ class ApiConfiguration {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    validate(_) {
+        return this.form.valid ? null : { apiConfigurationInvalid: true };
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
     setDisabledState(isDisabled) {
         if (isDisabled) {
             this.form.disable({ emitEvent: false });
@@ -1118,11 +1345,7 @@ class ApiConfiguration {
             return;
         }
         const headers = this.headersToRecord();
-        const payload = {
-            endpoint: this.form.controls.endpoint.value,
-            headers: Object.keys(headers).length ? headers : undefined,
-        };
-        this.facade.testApiConfiguration(payload).subscribe();
+        this.loadApiFields(this.form.controls.endpoint.value, headers, true);
     }
     emitValue(triggerTouched = true) {
         if (this.isWriting) {
@@ -1132,8 +1355,8 @@ class ApiConfiguration {
         const value = {
             endpoint: this.form.controls.endpoint.value,
             headers,
-            key: this.form.controls.key.value ?? undefined,
-            value: this.form.controls.value.value ?? undefined,
+            key: this.form.controls.key.value,
+            value: this.form.controls.value.value,
             supportMultiSelect: this.form.controls.supportMultiSelect.value,
             schema: this.schema(),
         };
@@ -1166,6 +1389,35 @@ class ApiConfiguration {
             return acc;
         }, {});
     }
+    loadApiFields(endpoint, headers, force = false) {
+        const trimmedEndpoint = endpoint.trim();
+        if (!trimmedEndpoint) {
+            return;
+        }
+        const payload = {
+            endpoint: trimmedEndpoint,
+            headers: Object.keys(headers).length ? headers : undefined,
+        };
+        const payloadSignature = JSON.stringify(payload);
+        if (!force && payloadSignature === this.lastLoadedPayloadSignature) {
+            return;
+        }
+        this.lastLoadedPayloadSignature = payloadSignature;
+        this.facade.testApiConfiguration(payload).subscribe();
+    }
+    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: ApiConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ApiConfiguration, isStandalone: true, selector: "mt-api-configuration", providers: [
             {
@@ -1173,7 +1425,12 @@ class ApiConfiguration {
                 useExisting: forwardRef(() => ApiConfiguration),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div [formGroup]=\"form\" class=\"space-y-6\">\r\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\r\n    <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_auto]\">\r\n      <mt-text-field\r\n        formControlName=\"endpoint\"\r\n        [label]=\"'properties.form.endpoint' | transloco\"\r\n        [placeholder]=\"'properties.form.endpointPlaceholder' | transloco\"\r\n      />\r\n      <div class=\"flex justify-end gap-2\">\r\n        <mt-button\r\n          type=\"button\"\r\n          [text]=\"true\"\r\n          icon=\"general.plus\"\r\n          [label]=\"'properties.form.addHeader' | transloco\"\r\n          (click)=\"addHeader()\"\r\n        />\r\n        <mt-button\r\n          type=\"button\"\r\n          [label]=\"'properties.form.testApi' | transloco\"\r\n          [loading]=\"isTesting()\"\r\n          (click)=\"testApi()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (headers.controls.length) {\r\n      <div class=\"space-y-3\">\r\n        <div class=\"text-sm font-medium text-surface-500\">\r\n          {{ \"properties.form.headers\" | transloco }}\r\n        </div>\r\n        <div class=\"space-y-3\">\r\n          @for (\r\n            headerCtrl of headers.controls;\r\n            track headerCtrl;\r\n            let i = $index\r\n          ) {\r\n            <div\r\n              [formGroup]=\"headerCtrl\"\r\n              class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]\"\r\n            >\r\n              <mt-text-field\r\n                formControlName=\"key\"\r\n                [label]=\"'properties.form.headerKey' | transloco\"\r\n              />\r\n              <mt-text-field\r\n                formControlName=\"value\"\r\n                [label]=\"'properties.form.headerValue' | transloco\"\r\n              />\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                icon=\"general.trash-01\"\r\n                (click)=\"removeHeader(i)\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.noHeadersMessage\" | transloco }}\r\n      </p>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\r\n    @if (hasDetectedSchema()) {\r\n      <div class=\"grid gap-4 md:grid-cols-2\">\r\n        <mt-select-field\r\n          formControlName=\"key\"\r\n          [options]=\"apiProperties()\"\r\n          [showClear]=\"true\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"key\"\r\n          [label]=\"'properties.form.keyField' | transloco\"\r\n        />\r\n        <mt-select-field\r\n          formControlName=\"value\"\r\n          [options]=\"apiProperties()\"\r\n          [showClear]=\"true\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"key\"\r\n          [label]=\"'properties.form.valueField' | transloco\"\r\n        />\r\n      </div>\r\n    } @else {\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.messageTestApiPrompt\" | transloco }}\r\n      </p>\r\n    }\r\n\r\n    <div class=\"flex items-center justify-between gap-4\">\r\n      <mt-toggle-field\r\n        formControlName=\"supportMultiSelect\"\r\n        [label]=\"'properties.form.labelSupportMultiSelect' | transloco\"\r\n      />\r\n      @if (isTesting()) {\r\n        <span class=\"text-xs text-surface-400\">\r\n          {{ \"properties.form.messageTesting\" | transloco }}\r\n        </span>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => ApiConfiguration),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div [formGroup]=\"form\" class=\"space-y-6\">\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\n    <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_auto]\">\n      <mt-text-field\n        formControlName=\"endpoint\"\n        [label]=\"'properties.form.endpoint' | transloco\"\n        [placeholder]=\"'properties.form.endpointPlaceholder' | transloco\"\n      />\n      <div class=\"flex justify-end gap-2\">\n        <mt-button\n          type=\"button\"\n          [text]=\"true\"\n          icon=\"general.plus\"\n          [label]=\"'properties.form.addHeader' | transloco\"\n          (click)=\"addHeader()\"\n        />\n        <mt-button\n          type=\"button\"\n          [label]=\"'properties.form.testApi' | transloco\"\n          [loading]=\"isTesting()\"\n          (click)=\"testApi()\"\n        />\n      </div>\n    </div>\n\n    @if (headers.controls.length) {\n      <div class=\"space-y-3\">\n        <div class=\"text-sm font-medium text-surface-500\">\n          {{ \"properties.form.headers\" | transloco }}\n        </div>\n        <div class=\"space-y-3\">\n          @for (\n            headerCtrl of headers.controls;\n            track headerCtrl;\n            let i = $index\n          ) {\n            <div\n              [formGroup]=\"headerCtrl\"\n              class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]\"\n            >\n              <mt-text-field\n                formControlName=\"key\"\n                [label]=\"'properties.form.headerKey' | transloco\"\n              />\n              <mt-text-field\n                formControlName=\"value\"\n                [label]=\"'properties.form.headerValue' | transloco\"\n              />\n              <mt-button\n                type=\"button\"\n                [text]=\"true\"\n                icon=\"general.trash-01\"\n                (click)=\"removeHeader(i)\"\n              />\n            </div>\n          }\n        </div>\n      </div>\n    } @else {\n      <p class=\"text-xs text-surface-400\">\n        {{ \"properties.form.noHeadersMessage\" | transloco }}\n      </p>\n    }\n  </div>\n\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\n    @if (hasDetectedSchema()) {\n      <div class=\"grid gap-4 md:grid-cols-2\">\n        <mt-select-field\n          formControlName=\"key\"\n          [options]=\"resolvedApiProperties()\"\n          [showClear]=\"true\"\n          optionLabel=\"name\"\n          optionValue=\"key\"\n          [label]=\"'properties.form.keyField' | transloco\"\n        />\n        <mt-select-field\n          formControlName=\"value\"\n          [options]=\"resolvedApiProperties()\"\n          [showClear]=\"true\"\n          optionLabel=\"name\"\n          optionValue=\"key\"\n          [label]=\"'properties.form.valueField' | transloco\"\n        />\n      </div>\n    } @else {\n      <p class=\"text-xs text-surface-400\">\n        {{ \"properties.form.messageTestApiPrompt\" | transloco }}\n      </p>\n    }\n\n    <div class=\"flex items-center justify-between gap-4\">\n      <mt-toggle-field\n        formControlName=\"supportMultiSelect\"\n        [label]=\"'properties.form.labelSupportMultiSelect' | transloco\"\n      />\n      @if (isTesting()) {\n        <span class=\"text-xs text-surface-400\">\n          {{ \"properties.form.messageTesting\" | transloco }}\n        </span>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ApiConfiguration, decorators: [{
             type: Component,
@@ -1191,7 +1448,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                             useExisting: forwardRef(() => ApiConfiguration),
                             multi: true,
                         },
-                    ], template: "<div [formGroup]=\"form\" class=\"space-y-6\">\r\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\r\n    <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_auto]\">\r\n      <mt-text-field\r\n        formControlName=\"endpoint\"\r\n        [label]=\"'properties.form.endpoint' | transloco\"\r\n        [placeholder]=\"'properties.form.endpointPlaceholder' | transloco\"\r\n      />\r\n      <div class=\"flex justify-end gap-2\">\r\n        <mt-button\r\n          type=\"button\"\r\n          [text]=\"true\"\r\n          icon=\"general.plus\"\r\n          [label]=\"'properties.form.addHeader' | transloco\"\r\n          (click)=\"addHeader()\"\r\n        />\r\n        <mt-button\r\n          type=\"button\"\r\n          [label]=\"'properties.form.testApi' | transloco\"\r\n          [loading]=\"isTesting()\"\r\n          (click)=\"testApi()\"\r\n        />\r\n      </div>\r\n    </div>\r\n\r\n    @if (headers.controls.length) {\r\n      <div class=\"space-y-3\">\r\n        <div class=\"text-sm font-medium text-surface-500\">\r\n          {{ \"properties.form.headers\" | transloco }}\r\n        </div>\r\n        <div class=\"space-y-3\">\r\n          @for (\r\n            headerCtrl of headers.controls;\r\n            track headerCtrl;\r\n            let i = $index\r\n          ) {\r\n            <div\r\n              [formGroup]=\"headerCtrl\"\r\n              class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]\"\r\n            >\r\n              <mt-text-field\r\n                formControlName=\"key\"\r\n                [label]=\"'properties.form.headerKey' | transloco\"\r\n              />\r\n              <mt-text-field\r\n                formControlName=\"value\"\r\n                [label]=\"'properties.form.headerValue' | transloco\"\r\n              />\r\n              <mt-button\r\n                type=\"button\"\r\n                [text]=\"true\"\r\n                icon=\"general.trash-01\"\r\n                (click)=\"removeHeader(i)\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.noHeadersMessage\" | transloco }}\r\n      </p>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\r\n    @if (hasDetectedSchema()) {\r\n      <div class=\"grid gap-4 md:grid-cols-2\">\r\n        <mt-select-field\r\n          formControlName=\"key\"\r\n          [options]=\"apiProperties()\"\r\n          [showClear]=\"true\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"key\"\r\n          [label]=\"'properties.form.keyField' | transloco\"\r\n        />\r\n        <mt-select-field\r\n          formControlName=\"value\"\r\n          [options]=\"apiProperties()\"\r\n          [showClear]=\"true\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"key\"\r\n          [label]=\"'properties.form.valueField' | transloco\"\r\n        />\r\n      </div>\r\n    } @else {\r\n      <p class=\"text-xs text-surface-400\">\r\n        {{ \"properties.form.messageTestApiPrompt\" | transloco }}\r\n      </p>\r\n    }\r\n\r\n    <div class=\"flex items-center justify-between gap-4\">\r\n      <mt-toggle-field\r\n        formControlName=\"supportMultiSelect\"\r\n        [label]=\"'properties.form.labelSupportMultiSelect' | transloco\"\r\n      />\r\n      @if (isTesting()) {\r\n        <span class=\"text-xs text-surface-400\">\r\n          {{ \"properties.form.messageTesting\" | transloco }}\r\n        </span>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => ApiConfiguration),
+                            multi: true,
+                        },
+                    ], template: "<div [formGroup]=\"form\" class=\"space-y-6\">\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\n    <div class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_auto]\">\n      <mt-text-field\n        formControlName=\"endpoint\"\n        [label]=\"'properties.form.endpoint' | transloco\"\n        [placeholder]=\"'properties.form.endpointPlaceholder' | transloco\"\n      />\n      <div class=\"flex justify-end gap-2\">\n        <mt-button\n          type=\"button\"\n          [text]=\"true\"\n          icon=\"general.plus\"\n          [label]=\"'properties.form.addHeader' | transloco\"\n          (click)=\"addHeader()\"\n        />\n        <mt-button\n          type=\"button\"\n          [label]=\"'properties.form.testApi' | transloco\"\n          [loading]=\"isTesting()\"\n          (click)=\"testApi()\"\n        />\n      </div>\n    </div>\n\n    @if (headers.controls.length) {\n      <div class=\"space-y-3\">\n        <div class=\"text-sm font-medium text-surface-500\">\n          {{ \"properties.form.headers\" | transloco }}\n        </div>\n        <div class=\"space-y-3\">\n          @for (\n            headerCtrl of headers.controls;\n            track headerCtrl;\n            let i = $index\n          ) {\n            <div\n              [formGroup]=\"headerCtrl\"\n              class=\"grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]\"\n            >\n              <mt-text-field\n                formControlName=\"key\"\n                [label]=\"'properties.form.headerKey' | transloco\"\n              />\n              <mt-text-field\n                formControlName=\"value\"\n                [label]=\"'properties.form.headerValue' | transloco\"\n              />\n              <mt-button\n                type=\"button\"\n                [text]=\"true\"\n                icon=\"general.trash-01\"\n                (click)=\"removeHeader(i)\"\n              />\n            </div>\n          }\n        </div>\n      </div>\n    } @else {\n      <p class=\"text-xs text-surface-400\">\n        {{ \"properties.form.noHeadersMessage\" | transloco }}\n      </p>\n    }\n  </div>\n\n  <div class=\"space-y-4 rounded-xl bg-content px-6 py-4 shadow-sm\">\n    @if (hasDetectedSchema()) {\n      <div class=\"grid gap-4 md:grid-cols-2\">\n        <mt-select-field\n          formControlName=\"key\"\n          [options]=\"resolvedApiProperties()\"\n          [showClear]=\"true\"\n          optionLabel=\"name\"\n          optionValue=\"key\"\n          [label]=\"'properties.form.keyField' | transloco\"\n        />\n        <mt-select-field\n          formControlName=\"value\"\n          [options]=\"resolvedApiProperties()\"\n          [showClear]=\"true\"\n          optionLabel=\"name\"\n          optionValue=\"key\"\n          [label]=\"'properties.form.valueField' | transloco\"\n        />\n      </div>\n    } @else {\n      <p class=\"text-xs text-surface-400\">\n        {{ \"properties.form.messageTestApiPrompt\" | transloco }}\n      </p>\n    }\n\n    <div class=\"flex items-center justify-between gap-4\">\n      <mt-toggle-field\n        formControlName=\"supportMultiSelect\"\n        [label]=\"'properties.form.labelSupportMultiSelect' | transloco\"\n      />\n      @if (isTesting()) {\n        <span class=\"text-xs text-surface-400\">\n          {{ \"properties.form.messageTesting\" | transloco }}\n        </span>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 class CheckListFormConfiguration {
@@ -1222,7 +1484,7 @@ class CheckListFormConfiguration {
                         key: 'lookup',
                         type: 'select',
                         label: this.transloco.translate('properties.form.selectLookup'),
-                        optionLabel: 'name',
+                        optionLabel: 'name.display',
                         optionValue: 'id',
                         filter: true,
                         options: this.lookups(),
@@ -1269,7 +1531,7 @@ class CheckListFormConfiguration {
         this.propertiesFacade.resetConfigProperties();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CheckListFormConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: CheckListFormConfiguration, isStandalone: true, selector: "mt-check-list-form-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: CheckListFormConfiguration, isStandalone: true, selector: "mt-check-list-form-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1280,18 +1542,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                     ], template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n" }]
         }], ctorParameters: () => [] });
 
-class DynamicListConfiguration {
+class EntityListConfiguration {
     propertiesFacade = inject(PropertiesFacade);
     controlContainer = inject(ControlContainer);
     parentGroup = this.controlContainer.control;
     transloco = inject(TranslocoService);
+    previousModuleId = signal(null, ...(ngDevMode ? [{ debugName: "previousModuleId" }] : []));
+    configurationControl = this.parentGroup.get('configuration');
     configScopes = this.propertiesFacade.configScopes;
     configProperties = this.propertiesFacade.configProperties;
     configuration = toSignal(this.parentGroup.valueChanges.pipe(startWith(this.parentGroup.value), map((value) => value?.configuration), distinctUntilChanged()), { initialValue: this.parentGroup.value?.configuration });
-    scopeItems = computed(() => {
+    moduleItems = computed(() => {
         const scope = this.configScopes()[0];
         return scope?.items ?? [];
-    }, ...(ngDevMode ? [{ debugName: "scopeItems" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "moduleItems" }] : []));
+    accessOptions = [
+        { label: 'Auto', value: 'Auto' },
+        { label: 'Read', value: 'Read' },
+        { label: 'Write', value: 'Write' },
+        { label: 'ReadWrite', value: 'ReadWrite' },
+        { label: 'None', value: 'None' },
+    ];
+    snapshotModeOptions = [
+        { label: 'Snapshot', value: 'Snapshot' },
+        { label: 'Realtime', value: 'Realtime' },
+    ];
     formConfig = linkedSignal(() => ({
         sections: [
             {
@@ -1304,239 +1579,99 @@ class DynamicListConfiguration {
                 bodyClass: 'grid grid-cols-1 md:grid-cols-2 gap-3',
                 fields: [
                     {
-                        key: 'scopeId',
+                        key: 'moduleId',
                         type: 'select',
                         label: this.transloco.translate('properties.form.selectScope'),
                         optionLabel: 'name',
                         optionValue: 'id',
+                        options: this.moduleItems(),
                         filter: true,
-                        options: this.scopeItems(),
                     },
-                    new PickListFieldConfig({
-                        key: 'properties',
-                        cssClass: 'md:col-span-2',
-                        options: this.configProperties(),
-                        optionLabel: 'name.display',
-                        optionValue: 'key',
-                        sourceHeader: this.transloco.translate('properties.form.availableProperties'),
-                        targetHeader: this.transloco.translate('properties.form.selectedProperties'),
-                    }),
                     {
-                        key: 'mappingBehaviour',
-                        type: 'toggle',
-                        label: this.transloco.translate('properties.form.mapToActual'),
-                        cssClass: 'md:col-span-2',
+                        key: 'access',
+                        type: 'select',
+                        label: 'Access',
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        options: this.accessOptions,
                     },
-                ],
-            },
-        ],
-    }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
-    constructor() {
-        effect(() => {
-            const scopeId = this.configuration()?.scopeId;
-            if (scopeId) {
-                const scopeType = this.configScopes()[0]?.scope;
-                if (scopeType) {
-                    this.propertiesFacade.loadPropertiesForConfigType(scopeType, scopeId);
-                }
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.propertiesFacade.resetConfigProperties();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicListConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: DynamicListConfiguration, isStandalone: true, selector: "mt-dynamic-list-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
-            { provide: ControlContainer, useExisting: FormGroupDirective },
-        ] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicListConfiguration, decorators: [{
-            type: Component,
-            args: [{ selector: 'mt-dynamic-list-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
-                        { provide: ControlContainer, useExisting: FormGroupDirective },
-                    ], template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n" }]
-        }], ctorParameters: () => [] });
-
-class EditableListViewConfiguration {
-    propertiesFacade = inject(PropertiesFacade);
-    controlContainer = inject(ControlContainer);
-    parentGroup = this.controlContainer.control;
-    transloco = inject(TranslocoService);
-    configScopes = this.propertiesFacade.configScopes;
-    configProperties = this.propertiesFacade.configProperties;
-    configuration = toSignal(this.parentGroup.valueChanges.pipe(startWith(this.parentGroup.value), map((value) => value?.configuration), distinctUntilChanged()), { initialValue: this.parentGroup.value?.configuration });
-    scopeItems = computed(() => {
-        const scope = this.configScopes()[0];
-        return scope?.items ?? [];
-    }, ...(ngDevMode ? [{ debugName: "scopeItems" }] : []));
-    formConfig = linkedSignal(() => ({
-        sections: [
-            {
-                key: 'configuration',
-                label: this.transloco.translate('properties.form.configurationSection'),
-                cssClass: ' rounded-xl bg-content \
-    shadow-sm \
-   px-6 py-4',
-                type: 'header',
-                bodyClass: 'grid grid-cols-1 md:grid-cols-2 gap-3',
-                fields: [
                     {
-                        key: 'scopeId',
+                        key: 'snapshotMode',
                         type: 'select',
-                        label: this.transloco.translate('properties.form.selectScope'),
-                        optionLabel: 'name',
-                        optionValue: 'id',
-                        options: this.scopeItems(),
+                        label: 'Snapshot Mode',
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        options: this.snapshotModeOptions,
                     },
                     new PickListFieldConfig({
-                        key: 'Properties',
+                        key: 'readFields',
                         cssClass: 'md:col-span-2',
                         options: this.configProperties(),
                         optionLabel: 'name.display',
                         optionValue: 'key',
-                        sourceHeader: this.transloco.translate('properties.form.availableProperties'),
-                        targetHeader: this.transloco.translate('properties.form.selectedProperties'),
+                        sourceHeader: 'Available Read Fields',
+                        targetHeader: 'Selected Read Fields',
                     }),
-                    {
-                        key: 'isEditable',
-                        type: 'toggle',
-                        label: this.transloco.translate('properties.form.isEditable'),
-                    },
-                    {
-                        key: 'preserveValue',
-                        type: 'toggle',
-                        label: this.transloco.translate('properties.form.preserveValue'),
-                    },
-                ],
-            },
-        ],
-    }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
-    constructor() {
-        effect(() => {
-            const scopeId = this.configuration()?.scopeId;
-            if (scopeId) {
-                const scopeType = this.configScopes()[0]?.scope;
-                if (scopeType) {
-                    this.propertiesFacade.loadPropertiesForConfigType(scopeType, scopeId);
-                }
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.propertiesFacade.resetConfigProperties();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EditableListViewConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: EditableListViewConfiguration, isStandalone: true, selector: "mt-editable-list-view-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
-            { provide: ControlContainer, useExisting: FormGroupDirective },
-        ] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EditableListViewConfiguration, decorators: [{
-            type: Component,
-            args: [{ selector: 'mt-editable-list-view-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
-                        { provide: ControlContainer, useExisting: FormGroupDirective },
-                    ], template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n" }]
-        }], ctorParameters: () => [] });
-
-class InternalModuleConfiguration {
-    // private readonly workspaceStructureFacade = inject(WorkspaceStructureFacade);
-    //  = this.workspaceStructureFacade.workspaceNodes;
-    levels;
-    propertiesFacade = inject(PropertiesFacade);
-    cc = inject(ControlContainer);
-    transloco = inject(TranslocoService);
-    parentGroup = this.cc.control;
-    configProperties = this.propertiesFacade.configProperties;
-    configScopes = this.propertiesFacade.configScopes;
-    configuration = toSignal(this.parentGroup.valueChanges.pipe(startWith(this.parentGroup.value), map((v) => v?.configuration), distinctUntilChanged()), { initialValue: this.parentGroup.value?.configuration });
-    PrevModuleId = signal(null, ...(ngDevMode ? [{ debugName: "PrevModuleId" }] : []));
-    scopeItems = computed(() => {
-        const selectedType = this.configuration()?.type;
-        if (!selectedType)
-            return [];
-        const scope = this.configScopes().find((s) => s.scope === selectedType);
-        return scope?.items ?? [];
-    }, ...(ngDevMode ? [{ debugName: "scopeItems" }] : []));
-    formConfig = linkedSignal(() => ({
-        sections: [
-            {
-                key: 'configuration',
-                label: this.transloco.translate('properties.form.configurationSection'),
-                cssClass: ' rounded-xl bg-content \
-    shadow-sm \
-   px-6 py-4',
-                type: 'header',
-                bodyClass: 'grid grid-cols-1 md:grid-cols-2 gap-3 align-items-end ',
-                fields: [
-                    {
-                        key: 'type',
-                        type: 'select',
-                        label: this.transloco.translate('properties.form.type'),
-                        optionLabel: 'scope',
-                        optionValue: 'scope',
-                        options: this.configScopes(),
-                    },
-                    {
-                        key: 'scopeId',
-                        type: 'select',
-                        label: this.transloco.translate('properties.form.selectScope'),
-                        optionLabel: 'name',
-                        optionValue: 'id',
-                        filter: true,
-                        options: this.scopeItems(),
-                    },
-                    {
-                        type: 'select',
-                        key: 'property',
-                        label: this.transloco.translate('properties.form.valueProperty'),
-                        optionLabel: 'name.display',
-                        optionValue: 'key',
-                        options: this.configProperties(),
-                    },
                     new PickListFieldConfig({
-                        cssClass: 'md:col-span-2 mt-2',
-                        key: 'propertyDetails',
+                        key: 'writeFields',
+                        cssClass: 'md:col-span-2',
                         options: this.configProperties(),
                         optionLabel: 'name.display',
                         optionValue: 'key',
-                        sourceHeader: this.transloco.translate('properties.form.availableProperties'),
-                        targetHeader: this.transloco.translate('properties.form.selectedProperties'),
+                        sourceHeader: 'Available Write Fields',
+                        targetHeader: 'Selected Write Fields',
+                        relations: [
+                            { action: 'show', key: 'access', value: 'Write' },
+                            { action: 'show', key: 'access', value: 'ReadWrite' },
+                            { action: 'show', key: 'access', value: 'Auto' },
+                        ],
                     }),
-                    {
-                        cssClass: 'md:col-span-2',
-                        key: 'preserveValue',
-                        type: 'toggle',
-                        label: this.transloco.translate('properties.form.labelPreserveValue'),
-                    },
                 ],
             },
         ],
     }), ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     constructor() {
+        this.applyEntityListDefaults();
+        this.loadModuleProperties();
+    }
+    applyEntityListDefaults() {
+        const config = this.configurationControl.value;
+        if (config)
+            return;
+        this.configurationControl.setValue({
+            moduleId: 0,
+            access: 'Auto',
+            snapshotMode: 'Snapshot',
+            readFields: [],
+            writeFields: [],
+        }, { emitEvent: true });
+    }
+    loadModuleProperties() {
         effect(() => {
-            if (this.configuration()?.scopeId) {
-                const moduleType = this.configuration()?.type;
-                const moduleId = this.configuration()?.scopeId;
-                if (moduleId == this.PrevModuleId()) {
-                    return;
-                }
-                if (moduleType && moduleId) {
-                    this.PrevModuleId.set(moduleId);
-                    this.propertiesFacade.loadPropertiesForConfigType(moduleType, moduleId);
-                }
+            const config = this.configuration();
+            const moduleId = config?.moduleId;
+            if (!moduleId || moduleId === this.previousModuleId()) {
+                return;
             }
+            const scopeType = this.configScopes()[0]?.scope;
+            if (!scopeType) {
+                return;
+            }
+            this.previousModuleId.set(moduleId);
+            this.propertiesFacade.loadPropertiesForConfigType(scopeType, moduleId);
         });
     }
     ngOnDestroy() {
         this.propertiesFacade.resetConfigProperties();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: InternalModuleConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: InternalModuleConfiguration, isStandalone: true, selector: "mt-internal-module-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityListConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: EntityListConfiguration, isStandalone: true, selector: "mt-entity-list-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: InternalModuleConfiguration, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityListConfiguration, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-internal-module-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
+            args: [{ selector: 'mt-entity-list-configuration', imports: [DynamicForm, ReactiveFormsModule], viewProviders: [
                         { provide: ControlContainer, useExisting: FormGroupDirective },
                     ], template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n" }]
         }], ctorParameters: () => [] });
@@ -1577,7 +1712,7 @@ class LocationConfiguration {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LocationConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: LocationConfiguration, isStandalone: true, selector: "mt-location-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: LocationConfiguration, isStandalone: true, selector: "mt-location-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1624,7 +1759,7 @@ class LookupConfiguration {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LookupConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: LookupConfiguration, isStandalone: true, selector: "mt-lookup-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: LookupConfiguration, isStandalone: true, selector: "mt-lookup-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1658,7 +1793,7 @@ class PercentageConfiguration {
         ],
     }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PercentageConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: PercentageConfiguration, isStandalone: true, selector: "mt-percentage-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: PercentageConfiguration, isStandalone: true, selector: "mt-percentage-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1669,6 +1804,344 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                     ], template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n" }]
         }] });
 
+class StatusItemForm {
+    modal = inject(ModalService);
+    ref = inject(ModalRef);
+    facade = inject(PropertiesFacade);
+    transloco = inject(TranslocoService);
+    propertyId = input.required(...(ngDevMode ? [{ debugName: "propertyId" }] : []));
+    levelSchemaId = input(undefined, ...(ngDevMode ? [{ debugName: "levelSchemaId" }] : []));
+    statusData = input(null, ...(ngDevMode ? [{ debugName: "statusData" }] : []));
+    editMode = computed(() => !!this.statusData(), ...(ngDevMode ? [{ debugName: "editMode" }] : []));
+    isSubmitting = computed(() => this.editMode()
+        ? this.facade.isUpdatingPropertyStatus()
+        : this.facade.isCreatingPropertyStatus(), ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
+    buttonLabel = computed(() => this.editMode()
+        ? this.transloco.translate('properties.form.statusUpdateButton')
+        : this.transloco.translate('properties.form.statusCreateButton'), ...(ngDevMode ? [{ debugName: "buttonLabel" }] : []));
+    statusFormConfig = linkedSignal(() => ({
+        sections: [
+            {
+                key: 'statusItemForm',
+                type: 'header',
+                columns: 12,
+                fields: [
+                    {
+                        key: 'display.en',
+                        colSpan: 6,
+                        label: this.transloco.translate('properties.form.statusEnglishDisplay'),
+                        validators: [ValidatorConfig.required()],
+                    },
+                    {
+                        key: 'display.ar',
+                        colSpan: 6,
+                        label: this.transloco.translate('properties.form.statusArabicDisplay'),
+                        validators: [ValidatorConfig.required()],
+                    },
+                    {
+                        key: 'description.en',
+                        type: 'textarea',
+                        colSpan: 6,
+                        label: this.transloco.translate('properties.form.statusEnglishDescription'),
+                    },
+                    {
+                        key: 'description.ar',
+                        type: 'textarea',
+                        colSpan: 6,
+                        label: this.transloco.translate('properties.form.statusArabicDescription'),
+                    },
+                    {
+                        key: 'type',
+                        type: 'select',
+                        colSpan: 4,
+                        label: this.transloco.translate('properties.form.statusType'),
+                        optionLabel: 'label',
+                        optionValue: 'value',
+                        options: [
+                            { label: 'Performance', value: 'Performance' },
+                            { label: 'NonePerformance', value: 'NonePerformance' },
+                        ],
+                    },
+                    new ColorPickerFieldConfig({
+                        key: 'color',
+                        colSpan: 4,
+                        label: this.transloco.translate('properties.form.statusColor'),
+                    }),
+                    new IconFieldConfig({
+                        key: 'icon',
+                        colSpan: 4,
+                        label: this.transloco.translate('properties.form.statusIcon'),
+                    }),
+                ],
+            },
+        ],
+    }), ...(ngDevMode ? [{ debugName: "statusFormConfig" }] : []));
+    statusFormControl = new FormControl({
+        display: {
+            en: '',
+            ar: '',
+        },
+        description: {
+            en: '',
+            ar: '',
+        },
+        type: 'Performance',
+        color: '#64748b',
+        icon: '',
+    }, { nonNullable: true });
+    formulaControl = new FormControl(null);
+    statusType = toSignal(this.statusFormControl.valueChanges.pipe(startWith(this.statusFormControl.value), map((value) => value?.type ?? 'Performance')), {
+        initialValue: this.statusFormControl.value?.type ?? 'Performance',
+    });
+    showFormula = computed(() => this.statusType() === 'Performance', ...(ngDevMode ? [{ debugName: "showFormula" }] : []));
+    constructor() {
+        effect(() => {
+            if (this.showFormula()) {
+                this.formulaControl.setValidators(Validators.required);
+            }
+            else {
+                this.formulaControl.clearValidators();
+            }
+            this.formulaControl.updateValueAndValidity({ emitEvent: false });
+        });
+        effect(() => {
+            const status = this.statusData();
+            if (!status) {
+                this.statusFormControl.patchValue({
+                    display: {
+                        en: '',
+                        ar: '',
+                    },
+                    description: {
+                        en: '',
+                        ar: '',
+                    },
+                    type: 'Performance',
+                    color: '#64748b',
+                    icon: '',
+                }, {
+                    emitEvent: false,
+                });
+                this.formulaControl.patchValue(null, {
+                    emitEvent: false,
+                });
+                return;
+            }
+            this.statusFormControl.patchValue({
+                display: {
+                    en: status.display?.['en'] ?? '',
+                    ar: status.display?.['ar'] ?? '',
+                },
+                description: {
+                    en: status.description?.['en'] ?? '',
+                    ar: status.description?.['ar'] ?? '',
+                },
+                type: status.type ?? 'Performance',
+                color: status.color ?? '#64748b',
+                icon: status.icon ?? '',
+            }, { emitEvent: false });
+            this.formulaControl.patchValue(status.formula, {
+                emitEvent: false,
+            });
+        });
+    }
+    onSubmit() {
+        if (this.statusFormControl.invalid || this.isSubmitting()) {
+            this.statusFormControl.markAllAsTouched();
+            return;
+        }
+        if (this.showFormula() && this.formulaControl.invalid) {
+            this.formulaControl.markAsTouched();
+            return;
+        }
+        const value = this.statusFormControl.value;
+        const payload = {
+            type: value.type,
+            display: value.display,
+            description: value.description,
+            color: value.color,
+            icon: value.icon,
+            formula: this.showFormula() ? this.formulaControl.value : null,
+        };
+        const request$ = this.editMode() && this.statusData()
+            ? this.facade.updatePropertyStatus(this.propertyId(), this.statusData().id, payload)
+            : this.facade.createPropertyStatus(this.propertyId(), payload);
+        request$.subscribe(() => {
+            this.ref.close({ success: true });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: StatusItemForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: StatusItemForm, isStandalone: true, selector: "mt-status-item-form", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: true, transformFunction: null }, levelSchemaId: { classPropertyName: "levelSchemaId", publicName: "levelSchemaId", isSignal: true, isRequired: false, transformFunction: null }, statusData: { classPropertyName: "statusData", publicName: "statusData", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  [class]=\"\n    'flex max-h-[75vh] flex-col gap-4 overflow-y-auto p-4 my-4 ' +\n    modal.contentClass\n  \"\n>\n  <form class=\"space-y-6\">\n    <mt-dynamic-form\n      class=\"block\"\n      [formConfig]=\"statusFormConfig()\"\n      [formControl]=\"statusFormControl\"\n    />\n\n    @if (showFormula()) {\n      <div class=\"rounded-xl border border-surface-200 bg-content px-4 py-4\">\n        <div class=\"mb-3 text-sm font-medium text-surface-700\">\n          {{ \"properties.form.statusFormula\" | transloco }}\n        </div>\n\n        <mt-formula-builder\n          [formControl]=\"formulaControl\"\n          [levelSchemaId]=\"levelSchemaId()\"\n        />\n      </div>\n    }\n  </form>\n</div>\n\n<div [class]=\"modal.footerClass\" class=\"mt-7\">\n  <mt-button\n    [label]=\"buttonLabel()\"\n    (click)=\"onSubmit()\"\n    [loading]=\"isSubmitting()\"\n    [disabled]=\"\n      statusFormControl.invalid ||\n      (showFormula() && formulaControl.invalid) ||\n      isSubmitting()\n    \"\n  />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: FormulaBuilder, selector: "mt-formula-builder", inputs: ["propertiesByPath", "levelSchemaId", "templateId", "placeholder", "hideToolbar", "hideStatusBar"], outputs: ["validationChange", "tokensChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: StatusItemForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-status-item-form', standalone: true, imports: [
+                        CommonModule,
+                        Button,
+                        DynamicForm,
+                        FormulaBuilder,
+                        ReactiveFormsModule,
+                        TranslocoModule,
+                    ], template: "<div\n  [class]=\"\n    'flex max-h-[75vh] flex-col gap-4 overflow-y-auto p-4 my-4 ' +\n    modal.contentClass\n  \"\n>\n  <form class=\"space-y-6\">\n    <mt-dynamic-form\n      class=\"block\"\n      [formConfig]=\"statusFormConfig()\"\n      [formControl]=\"statusFormControl\"\n    />\n\n    @if (showFormula()) {\n      <div class=\"rounded-xl border border-surface-200 bg-content px-4 py-4\">\n        <div class=\"mb-3 text-sm font-medium text-surface-700\">\n          {{ \"properties.form.statusFormula\" | transloco }}\n        </div>\n\n        <mt-formula-builder\n          [formControl]=\"formulaControl\"\n          [levelSchemaId]=\"levelSchemaId()\"\n        />\n      </div>\n    }\n  </form>\n</div>\n\n<div [class]=\"modal.footerClass\" class=\"mt-7\">\n  <mt-button\n    [label]=\"buttonLabel()\"\n    (click)=\"onSubmit()\"\n    [loading]=\"isSubmitting()\"\n    [disabled]=\"\n      statusFormControl.invalid ||\n      (showFormula() && formulaControl.invalid) ||\n      isSubmitting()\n    \"\n  />\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { propertyId: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyId", required: true }] }], levelSchemaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelSchemaId", required: false }] }], statusData: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusData", required: false }] }] } });
+
+class StatusConfiguration {
+    facade = inject(PropertiesFacade);
+    modalService = inject(ModalService);
+    transloco = inject(TranslocoService);
+    lastLoadedPropertyId = signal(null, ...(ngDevMode ? [{ debugName: "lastLoadedPropertyId" }] : []));
+    propertyId = input(null, ...(ngDevMode ? [{ debugName: "propertyId" }] : []));
+    levelSchemaId = input(undefined, ...(ngDevMode ? [{ debugName: "levelSchemaId" }] : []));
+    deletingRowIds = signal([], ...(ngDevMode ? [{ debugName: "deletingRowIds" }] : []));
+    statuses = computed(() => [...this.facade.propertyStatuses()].sort((left, right) => {
+        const leftOrder = left.order ?? Number.MAX_SAFE_INTEGER;
+        const rightOrder = right.order ?? Number.MAX_SAFE_INTEGER;
+        if (leftOrder !== rightOrder) {
+            return leftOrder - rightOrder;
+        }
+        return left.id - right.id;
+    }), ...(ngDevMode ? [{ debugName: "statuses" }] : []));
+    loading = this.facade.isLoadingPropertyStatuses;
+    reordering = this.facade.isReorderingPropertyStatuses;
+    resolvedPropertyId = computed(() => this.normalizePropertyId(this.propertyId()), ...(ngDevMode ? [{ debugName: "resolvedPropertyId" }] : []));
+    canManageStatuses = computed(() => !!this.resolvedPropertyId(), ...(ngDevMode ? [{ debugName: "canManageStatuses" }] : []));
+    tableColumns = linkedSignal(() => [
+        {
+            key: 'display.en',
+            label: this.transloco.translate('properties.form.statusColumnDisplay'),
+        },
+        {
+            key: 'key',
+            label: this.transloco.translate('properties.form.statusColumnKey'),
+        },
+        {
+            key: 'type',
+            label: this.transloco.translate('properties.form.statusColumnType'),
+        },
+        {
+            key: 'color',
+            label: this.transloco.translate('properties.form.statusColumnColor'),
+        },
+        {
+            key: 'icon',
+            label: this.transloco.translate('properties.form.statusColumnIcon'),
+        },
+    ], ...(ngDevMode ? [{ debugName: "tableColumns" }] : []));
+    tableActions = computed(() => {
+        if (!this.canManageStatuses()) {
+            return [];
+        }
+        return [
+            {
+                icon: 'general.plus',
+                label: this.transloco.translate('properties.form.statusAddAction'),
+                color: 'primary',
+                action: () => this.openStatusDialog(),
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "tableActions" }] : []));
+    rowActions = computed(() => {
+        const propertyId = this.resolvedPropertyId();
+        if (!propertyId) {
+            return [];
+        }
+        return [
+            {
+                icon: 'custom.pencil',
+                tooltip: this.transloco.translate('properties.form.statusEditAction'),
+                color: 'primary',
+                action: (row) => this.openStatusDialog(row),
+            },
+            {
+                icon: 'general.trash-01',
+                tooltip: this.transloco.translate('properties.form.statusDeleteAction'),
+                color: 'danger',
+                variant: 'outlined',
+                action: (row) => this.deleteStatus(row),
+                confirmation: {
+                    type: 'popup',
+                    confirmationType: 'delete',
+                },
+                loading: (row) => this.deletingRowIds().includes(row.id),
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "rowActions" }] : []));
+    constructor() {
+        effect(() => {
+            const propertyId = this.resolvedPropertyId();
+            if (!propertyId) {
+                this.lastLoadedPropertyId.set(null);
+                this.facade.resetPropertyStatuses().subscribe();
+                return;
+            }
+            if (this.lastLoadedPropertyId() === propertyId) {
+                return;
+            }
+            this.lastLoadedPropertyId.set(propertyId);
+            this.facade.resetPropertyStatuses().subscribe();
+            this.facade.loadPropertyStatuses(propertyId).subscribe();
+        });
+    }
+    ngOnDestroy() {
+        this.facade.resetPropertyStatuses().subscribe();
+    }
+    openStatusDialog(statusData = null) {
+        const propertyId = this.resolvedPropertyId();
+        if (!propertyId) {
+            return;
+        }
+        this.modalService.openModal(StatusItemForm, 'dialog', {
+            header: statusData
+                ? this.transloco.translate('properties.form.statusEditTitle')
+                : this.transloco.translate('properties.form.statusCreateTitle'),
+            styleClass: '!w-[72vw] max-w-6xl',
+            appendTo: 'body',
+            dismissableMask: true,
+            inputValues: {
+                propertyId,
+                levelSchemaId: this.levelSchemaId(),
+                statusData,
+            },
+        });
+    }
+    deleteStatus(status) {
+        const propertyId = this.resolvedPropertyId();
+        if (!propertyId || !status?.id) {
+            return;
+        }
+        this.deletingRowIds.update((ids) => [...ids, status.id]);
+        this.facade
+            .deletePropertyStatus(propertyId, status.id)
+            .pipe(finalize(() => {
+            this.deletingRowIds.update((ids) => ids.filter((id) => id !== status.id));
+        }))
+            .subscribe();
+    }
+    onRowReorder(event) {
+        const reordered = Array.isArray(event.value)
+            ? event.value
+            : this.statuses();
+        const orders = reordered.map((status, index) => ({
+            statusId: status.id,
+            order: index + 1,
+        }));
+        this.facade.reorderPropertyStatuses({ orders }).subscribe();
+    }
+    normalizePropertyId(value) {
+        if (value === null || value === undefined || value === '') {
+            return null;
+        }
+        const parsed = typeof value === 'string' ? Number(value) : value;
+        return Number.isFinite(parsed) ? parsed : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: StatusConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: StatusConfiguration, isStandalone: true, selector: "mt-status-configuration", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null }, levelSchemaId: { classPropertyName: "levelSchemaId", publicName: "levelSchemaId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-card [title]=\"'properties.form.statusesSection' | transloco\">\n  @if (canManageStatuses()) {\n    <mt-table\n      [data]=\"statuses()\"\n      [columns]=\"tableColumns()\"\n      [actions]=\"tableActions()\"\n      [rowActions]=\"rowActions()\"\n      [generalSearch]=\"true\"\n      [loading]=\"loading()\"\n      [updating]=\"reordering()\"\n      [reorderableRows]=\"true\"\n      dataKey=\"id\"\n      (rowReorder)=\"onRowReorder($event)\"\n    />\n  } @else {\n    <div\n      class=\"rounded-xl border border-dashed border-surface-300 bg-surface-50 px-4 py-6 text-sm text-surface-600\"\n    >\n      {{ \"properties.form.statusesSavePrompt\" | transloco }}\n    </div>\n  }\n</mt-card>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: StatusConfiguration, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-status-configuration', standalone: true, imports: [CommonModule, Card, Table, TranslocoModule], template: "<mt-card [title]=\"'properties.form.statusesSection' | transloco\">\n  @if (canManageStatuses()) {\n    <mt-table\n      [data]=\"statuses()\"\n      [columns]=\"tableColumns()\"\n      [actions]=\"tableActions()\"\n      [rowActions]=\"rowActions()\"\n      [generalSearch]=\"true\"\n      [loading]=\"loading()\"\n      [updating]=\"reordering()\"\n      [reorderableRows]=\"true\"\n      dataKey=\"id\"\n      (rowReorder)=\"onRowReorder($event)\"\n    />\n  } @else {\n    <div\n      class=\"rounded-xl border border-dashed border-surface-300 bg-surface-50 px-4 py-6 text-sm text-surface-600\"\n    >\n      {{ \"properties.form.statusesSavePrompt\" | transloco }}\n    </div>\n  }\n</mt-card>\n" }]
+        }], ctorParameters: () => [], propDecorators: { propertyId: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyId", required: false }] }], levelSchemaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelSchemaId", required: false }] }] } });
+
 class UserConfiguration {
     facade = inject(PropertiesFacade);
     transloco = inject(TranslocoService);
@@ -1705,7 +2178,7 @@ class UserConfiguration {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: UserConfiguration, isStandalone: true, selector: "mt-user-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: UserConfiguration, isStandalone: true, selector: "mt-user-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1858,7 +2331,7 @@ class AttachmentConfiguration {
         ],
     }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AttachmentConfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: AttachmentConfiguration, isStandalone: true, selector: "mt-attachment-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: AttachmentConfiguration, isStandalone: true, selector: "mt-attachment-configuration", ngImport: i0, template: "<mt-dynamic-form formControlName=\"configuration\" [formConfig]=\"formConfig()\" />\r\n", styles: [""], dependencies: [{ kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [
             { provide: ControlContainer, useExisting: FormGroupDirective },
         ] });
 }
@@ -1876,6 +2349,11 @@ class PropertyForm {
     transloco = inject(TranslocoService);
     propertyId = input('', ...(ngDevMode ? [{ debugName: "propertyId" }] : []));
     propertyTypes = this.facade.propertyTypes;
+    legacyReplacedViewTypes = [
+        'DynamicList',
+        'EditableListView',
+        'InternalModule',
+    ];
     submitLabel = computed(() => this.propertyId()
         ? this.transloco.translate('properties.form.updateButton')
         : this.transloco.translate('properties.form.createButton'), ...(ngDevMode ? [{ debugName: "submitLabel" }] : []));
@@ -1903,6 +2381,13 @@ class PropertyForm {
         initialValue: Boolean(this.mainControl.value?.isCalculated),
     });
     formulaSchemaId = computed(() => this.resolveSchemaId(this.facade.parentModuleId() ?? this.facade.moduleId()), ...(ngDevMode ? [{ debugName: "formulaSchemaId" }] : []));
+    selectedViewType = computed(() => this.propertyType() ??
+        this.facade.selected()?.viewType, ...(ngDevMode ? [{ debugName: "selectedViewType" }] : []));
+    statusPropertyId = computed(() => this.resolveSchemaId(this.facade.selected()?.id ?? this.propertyId()), ...(ngDevMode ? [{ debugName: "statusPropertyId" }] : []));
+    availablePropertyTypes = computed(() => {
+        const allTypes = this.propertyTypes()?.value ?? [];
+        return allTypes.filter((item) => !this.legacyReplacedViewTypes.includes(item?.viewType ?? ''));
+    }, ...(ngDevMode ? [{ debugName: "availablePropertyTypes" }] : []));
     selectedPropertyTypeConfiguration = computed(() => {
         const propertyTypesSetting = this.propertyTypes();
         const selectedViewType = this.propertyType();
@@ -1913,13 +2398,18 @@ class PropertyForm {
     }, ...(ngDevMode ? [{ debugName: "selectedPropertyTypeConfiguration" }] : []));
     configurationFormConfig = computed(() => this.selectedPropertyTypeConfiguration()?.configurationForm ?? null, ...(ngDevMode ? [{ debugName: "configurationFormConfig" }] : []));
     configurationHost;
+    statusConfigurationSection = viewChild('statusConfigurationSection', ...(ngDevMode ? [{ debugName: "statusConfigurationSection" }] : []));
     environmentInjector = inject(EnvironmentInjector);
+    routeFragment = toSignal(this.route.fragment, {
+        initialValue: this.route.snapshot.fragment,
+    });
     configurationComponentType = signal(null, ...(ngDevMode ? [{ debugName: "configurationComponentType" }] : []));
     configurationComponentRef = null;
     configurationComponentLoadId = 0;
     externalConfigurationForm = signal(null, ...(ngDevMode ? [{ debugName: "externalConfigurationForm" }] : []));
     externalConfigurationSubscriptions = null;
     externalConfigurationInvalid = signal(false, ...(ngDevMode ? [{ debugName: "externalConfigurationInvalid" }] : []));
+    lastStatusScrollKey = signal(null, ...(ngDevMode ? [{ debugName: "lastStatusScrollKey" }] : []));
     configurationComponentExists = computed(() => !!this.configurationComponentType(), ...(ngDevMode ? [{ debugName: "configurationComponentExists" }] : []));
     configurationFormInvalid = computed(() => this.externalConfigurationInvalid(), ...(ngDevMode ? [{ debugName: "configurationFormInvalid" }] : []));
     submitDisabled = computed(() => this.submitting() || this.configurationFormInvalid(), ...(ngDevMode ? [{ debugName: "submitDisabled" }] : []));
@@ -1942,7 +2432,7 @@ class PropertyForm {
                         optionLabel: 'label.en',
                         optionValue: 'viewType',
                         cssClass: 'w-1/2',
-                        options: this.propertyTypes()?.value,
+                        options: this.availablePropertyTypes(),
                         disabled: this.isEditing(),
                         filter: true,
                         hasPlaceholderPrefix: false,
@@ -2076,12 +2566,7 @@ class PropertyForm {
             // Reset config scopes before loading new ones
             this.facade.resetConfigScopes();
             // Load config scopes for specific property types
-            const supportedTypes = [
-                'InternalModule',
-                'DynamicList',
-                'EditableListView',
-                'LookupLog',
-            ];
+            const supportedTypes = ['EntityList', 'LookupModuleCheckList'];
             if (supportedTypes.includes(currentPropertyType)) {
                 this.facade.loadConfigAsType(currentPropertyType);
             }
@@ -2096,6 +2581,29 @@ class PropertyForm {
         effect(() => {
             this.renderConfigurationComponent(this.configurationComponentType());
         });
+        effect(() => {
+            const fragment = this.routeFragment();
+            const section = this.statusConfigurationSection();
+            const propertyId = this.statusPropertyId();
+            const viewType = this.selectedViewType();
+            if (fragment !== 'status-configuration' ||
+                !section ||
+                !propertyId ||
+                viewType !== 'Status') {
+                return;
+            }
+            const scrollKey = `${propertyId}:${fragment}`;
+            if (this.lastStatusScrollKey() === scrollKey) {
+                return;
+            }
+            this.lastStatusScrollKey.set(scrollKey);
+            setTimeout(() => {
+                section.nativeElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start',
+                });
+            });
+        });
     }
     renderConfigurationComponent(componentType) {
         if (!this.configurationHost)
@@ -2204,7 +2712,13 @@ class PropertyForm {
         const request$ = this.propertyId()
             ? this.facade.update(this.propertyId(), payload)
             : this.facade.create(payload);
-        request$.subscribe(() => this.goBack());
+        request$.subscribe(() => {
+            if (mainValue.viewType === 'Status') {
+                this.handleStatusPropertySave();
+                return;
+            }
+            this.goBack();
+        });
     }
     syncFormWithSelectedProperty(property) {
         if (!property)
@@ -2226,13 +2740,50 @@ class PropertyForm {
             queryParamsHandling: 'preserve',
         });
     }
+    handleStatusPropertySave() {
+        const savedId = this.statusPropertyId();
+        if (!savedId) {
+            return;
+        }
+        if (this.propertyId()) {
+            this.facade.loadOne(savedId).subscribe(() => {
+                this.router
+                    .navigate([], {
+                    relativeTo: this.route,
+                    queryParamsHandling: 'preserve',
+                    fragment: 'status-configuration',
+                    replaceUrl: true,
+                })
+                    .then(() => this.scrollToStatusConfiguration());
+            });
+            return;
+        }
+        this.router.navigate([savedId], {
+            relativeTo: this.route,
+            queryParamsHandling: 'preserve',
+            fragment: 'status-configuration',
+            replaceUrl: true,
+        });
+    }
+    scrollToStatusConfiguration() {
+        const section = this.statusConfigurationSection();
+        if (!section) {
+            return;
+        }
+        setTimeout(() => {
+            section.nativeElement.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+            });
+        });
+    }
     ngOnDestroy() {
         this.facade.resetSelectedProperty();
         this.facade.setDefaultViewType('');
         this.destroyConfigurationComponent();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertyForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PropertyForm, isStandalone: true, selector: "mt-property-form", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "configurationHost", first: true, predicate: ["configurationHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<mt-page\r\n  [title]=\"\r\n    propertyId()\r\n      ? ('properties.form.editProperty' | transloco)\r\n      : ('properties.form.createNewProperty' | transloco)\r\n  \"\r\n  avatarIcon=\"custom.products-and-services\"\r\n  [avatarStyle]=\"{\r\n    '--p-avatar-background': 'var(--p-sky-50)',\r\n    '--p-avatar-color': 'var(--p-sky-700)',\r\n  }\"\r\n  (backButtonClick)=\"goBack()\"\r\n  backButton\r\n  class=\"h-full\"\r\n>\r\n  <ng-template #headerEnd>\r\n    <mt-button\r\n      class=\"mx-2\"\r\n      [label]=\"submitLabel()\"\r\n      [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\r\n      [loading]=\"submitting()\"\r\n      [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\r\n      (click)=\"createOrEditProperty()\"\r\n    />\r\n  </ng-template>\r\n  <div\r\n    [formGroup]=\"propertyForm\"\r\n    class=\"h-full py-4 h-full overflow-y-auto flex justify-center\"\r\n  >\r\n    <div class=\"w-2/3 flex flex-col gap-6\">\r\n      @if (loading()) {\r\n        <!-- Skeleton Loading State -->\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <div class=\"flex justify-between items-center gap-6\">\r\n            <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\r\n            <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"12rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"10rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <mt-dynamic-form\r\n          [formConfig]=\"dynamicFormConfigMain()\"\r\n          [formControlName]=\"'main'\"\r\n        />\r\n        @if (configurationFormConfig()) {\r\n          <mt-dynamic-form\r\n            formControlName=\"configuration\"\r\n            [formConfig]=\"configurationFormConfig()!\"\r\n          />\r\n        } @else {\r\n          <ng-container #configurationHost></ng-container>\r\n          @if (!configurationComponentExists()) {\r\n            @switch (propertyType()) {\r\n              @case (\"User\") {\r\n                <mt-user-configuration />\r\n              }\r\n              @case (\"Percentage\") {\r\n                <mt-percentage-configuration />\r\n              }\r\n              @case (\"Lookup\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"LookupMultiSelect\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"InternalModule\") {\r\n                <mt-internal-module-configuration />\r\n              }\r\n              @case (\"DynamicList\") {\r\n                <mt-dynamic-list-configuration />\r\n              }\r\n              @case (\"API\") {\r\n                <mt-api-configuration formControlName=\"configuration\" />\r\n              }\r\n              <!-- @case('ViewList') { REMOVED FOR NOW\r\n                  <mt-view-list-configuration />\r\n                  } -->\r\n              @case (\"Attachment\") {\r\n                <mt-attachment-configuration />\r\n              }\r\n              <!-- @case('ReferenceProperty') { REMOVED FOR NOW\r\n                   } -->\r\n              @case (\"EditableListView\") {\r\n                <mt-editable-list-view-configuration />\r\n              }\r\n              @case (\"LookupLog\") {\r\n                <mt-check-list-form-configuration />\r\n              }\r\n              <!-- @case('LookupMatrix') { REMOVED FOR NOW\r\n                  <mt-lookup-configuration />\r\n                  } -->\r\n              @case (\"Location\") {\r\n                <mt-location-configuration />\r\n              }\r\n            }\r\n          }\r\n        }\r\n        @if (isCalculated()) {\r\n          <mt-card title=\"Formula\">\r\n            <mt-formula-builder\r\n              formControlName=\"formula\"\r\n              [levelSchemaId]=\"formulaSchemaId()\"\r\n            />\r\n          </mt-card>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</mt-page>\r\n", styles: [""], dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormulaBuilder, selector: "mt-formula-builder", inputs: ["propertiesByPath", "levelSchemaId", "templateId", "placeholder", "hideToolbar", "hideStatusBar"], outputs: ["validationChange", "tokensChange"] }, { kind: "component", type: ApiConfiguration, selector: "mt-api-configuration" }, { kind: "component", type: CheckListFormConfiguration, selector: "mt-check-list-form-configuration" }, { kind: "component", type: DynamicListConfiguration, selector: "mt-dynamic-list-configuration" }, { kind: "component", type: EditableListViewConfiguration, selector: "mt-editable-list-view-configuration" }, { kind: "component", type: InternalModuleConfiguration, selector: "mt-internal-module-configuration" }, { kind: "component", type: LocationConfiguration, selector: "mt-location-configuration" }, { kind: "component", type: LookupConfiguration, selector: "mt-lookup-configuration" }, { kind: "component", type: PercentageConfiguration, selector: "mt-percentage-configuration" }, { kind: "component", type: UserConfiguration, selector: "mt-user-configuration" }, { kind: "component", type: AttachmentConfiguration, selector: "mt-attachment-configuration" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PropertyForm, isStandalone: true, selector: "mt-property-form", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "statusConfigurationSection", first: true, predicate: ["statusConfigurationSection"], descendants: true, isSignal: true }, { propertyName: "configurationHost", first: true, predicate: ["configurationHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<mt-page\n  [title]=\"\n    propertyId()\n      ? ('properties.form.editProperty' | transloco)\n      : ('properties.form.createNewProperty' | transloco)\n  \"\n  avatarIcon=\"custom.products-and-services\"\n  [avatarStyle]=\"{\n    '--p-avatar-background': 'var(--p-sky-50)',\n    '--p-avatar-color': 'var(--p-sky-700)',\n  }\"\n  (backButtonClick)=\"goBack()\"\n  backButton\n  class=\"h-full\"\n>\n  <ng-template #headerEnd>\n    <mt-button\n      class=\"mx-2\"\n      [label]=\"submitLabel()\"\n      [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\n      [loading]=\"submitting()\"\n      [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\n      (click)=\"createOrEditProperty()\"\n    />\n  </ng-template>\n  <div\n    [formGroup]=\"propertyForm\"\n    class=\"h-full py-4 h-full overflow-y-auto flex justify-center\"\n  >\n    <div class=\"w-2/3 flex flex-col gap-6\">\n      @if (loading()) {\n        <!-- Skeleton Loading State -->\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n          <div class=\"flex justify-between items-center gap-6\">\n            <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\n            <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\n          </div>\n        </div>\n\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n          <p-skeleton\n            width=\"12rem\"\n            height=\"1.5rem\"\n            styleClass=\"mb-4\"\n          ></p-skeleton>\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            <p-skeleton height=\"3rem\"></p-skeleton>\n            <p-skeleton height=\"3rem\"></p-skeleton>\n            <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n            <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n          </div>\n        </div>\n\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n          <p-skeleton\n            width=\"10rem\"\n            height=\"1.5rem\"\n            styleClass=\"mb-4\"\n          ></p-skeleton>\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            <p-skeleton height=\"3rem\"></p-skeleton>\n            <p-skeleton height=\"3rem\"></p-skeleton>\n            <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n          </div>\n        </div>\n      } @else {\n        <mt-dynamic-form\n          [formConfig]=\"dynamicFormConfigMain()\"\n          [formControlName]=\"'main'\"\n        />\n        @if (configurationFormConfig()) {\n          <mt-dynamic-form\n            formControlName=\"configuration\"\n            [formConfig]=\"configurationFormConfig()!\"\n          />\n        } @else {\n          <ng-container #configurationHost></ng-container>\n          @if (!configurationComponentExists()) {\n            @switch (propertyType()) {\n              @case (\"User\") {\n                <mt-user-configuration />\n              }\n              @case (\"Percentage\") {\n                <mt-percentage-configuration />\n              }\n              @case (\"Lookup\") {\n                <mt-lookup-configuration />\n              }\n              @case (\"LookupMultiSelect\") {\n                <mt-lookup-configuration />\n              }\n              @case (\"EntityList\") {\n                <mt-entity-list-configuration />\n              }\n              @case (\"API\") {\n                <mt-api-configuration formControlName=\"configuration\" />\n              }\n              @case (\"Status\") {\n                <section #statusConfigurationSection>\n                  <mt-status-configuration\n                    [propertyId]=\"statusPropertyId()\"\n                    [levelSchemaId]=\"formulaSchemaId()\"\n                  />\n                </section>\n              }\n              <!-- @case('ViewList') { REMOVED FOR NOW\n                  <mt-view-list-configuration />\n                  } -->\n              @case (\"Attachment\") {\n                <mt-attachment-configuration />\n              }\n              <!-- @case('ReferenceProperty') { REMOVED FOR NOW\n                   } -->\n              @case (\"LookupModuleCheckList\") {\n                <mt-check-list-form-configuration />\n              }\n              <!-- @case('LookupMatrix') { REMOVED FOR NOW\n                  <mt-lookup-configuration />\n                  } -->\n              @case (\"Location\") {\n                <mt-location-configuration />\n              }\n            }\n          }\n        }\n        @if (isCalculated()) {\n          <mt-card title=\"Formula\">\n            <mt-formula-builder\n              formControlName=\"formula\"\n              [levelSchemaId]=\"formulaSchemaId()\"\n            />\n          </mt-card>\n        }\n      }\n    </div>\n  </div>\n</mt-page>\n", styles: [""], dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormulaBuilder, selector: "mt-formula-builder", inputs: ["propertiesByPath", "levelSchemaId", "templateId", "placeholder", "hideToolbar", "hideStatusBar"], outputs: ["validationChange", "tokensChange"] }, { kind: "component", type: ApiConfiguration, selector: "mt-api-configuration" }, { kind: "component", type: CheckListFormConfiguration, selector: "mt-check-list-form-configuration" }, { kind: "component", type: EntityListConfiguration, selector: "mt-entity-list-configuration" }, { kind: "component", type: LocationConfiguration, selector: "mt-location-configuration" }, { kind: "component", type: LookupConfiguration, selector: "mt-lookup-configuration" }, { kind: "component", type: PercentageConfiguration, selector: "mt-percentage-configuration" }, { kind: "component", type: StatusConfiguration, selector: "mt-status-configuration", inputs: ["propertyId", "levelSchemaId"] }, { kind: "component", type: UserConfiguration, selector: "mt-user-configuration" }, { kind: "component", type: AttachmentConfiguration, selector: "mt-attachment-configuration" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertyForm, decorators: [{
             type: Component,
@@ -2245,21 +2796,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         FormulaBuilder,
                         ApiConfiguration,
                         CheckListFormConfiguration,
-                        DynamicListConfiguration,
-                        EditableListViewConfiguration,
-                        InternalModuleConfiguration,
+                        EntityListConfiguration,
                         LocationConfiguration,
                         LookupConfiguration,
                         PercentageConfiguration,
+                        StatusConfiguration,
                         UserConfiguration,
                         AttachmentConfiguration,
                         SkeletonModule,
                         TranslocoModule,
-                    ], template: "<mt-page\r\n  [title]=\"\r\n    propertyId()\r\n      ? ('properties.form.editProperty' | transloco)\r\n      : ('properties.form.createNewProperty' | transloco)\r\n  \"\r\n  avatarIcon=\"custom.products-and-services\"\r\n  [avatarStyle]=\"{\r\n    '--p-avatar-background': 'var(--p-sky-50)',\r\n    '--p-avatar-color': 'var(--p-sky-700)',\r\n  }\"\r\n  (backButtonClick)=\"goBack()\"\r\n  backButton\r\n  class=\"h-full\"\r\n>\r\n  <ng-template #headerEnd>\r\n    <mt-button\r\n      class=\"mx-2\"\r\n      [label]=\"submitLabel()\"\r\n      [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\r\n      [loading]=\"submitting()\"\r\n      [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\r\n      (click)=\"createOrEditProperty()\"\r\n    />\r\n  </ng-template>\r\n  <div\r\n    [formGroup]=\"propertyForm\"\r\n    class=\"h-full py-4 h-full overflow-y-auto flex justify-center\"\r\n  >\r\n    <div class=\"w-2/3 flex flex-col gap-6\">\r\n      @if (loading()) {\r\n        <!-- Skeleton Loading State -->\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <div class=\"flex justify-between items-center gap-6\">\r\n            <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\r\n            <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"12rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\r\n          <p-skeleton\r\n            width=\"10rem\"\r\n            height=\"1.5rem\"\r\n            styleClass=\"mb-4\"\r\n          ></p-skeleton>\r\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"3rem\"></p-skeleton>\r\n            <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <mt-dynamic-form\r\n          [formConfig]=\"dynamicFormConfigMain()\"\r\n          [formControlName]=\"'main'\"\r\n        />\r\n        @if (configurationFormConfig()) {\r\n          <mt-dynamic-form\r\n            formControlName=\"configuration\"\r\n            [formConfig]=\"configurationFormConfig()!\"\r\n          />\r\n        } @else {\r\n          <ng-container #configurationHost></ng-container>\r\n          @if (!configurationComponentExists()) {\r\n            @switch (propertyType()) {\r\n              @case (\"User\") {\r\n                <mt-user-configuration />\r\n              }\r\n              @case (\"Percentage\") {\r\n                <mt-percentage-configuration />\r\n              }\r\n              @case (\"Lookup\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"LookupMultiSelect\") {\r\n                <mt-lookup-configuration />\r\n              }\r\n              @case (\"InternalModule\") {\r\n                <mt-internal-module-configuration />\r\n              }\r\n              @case (\"DynamicList\") {\r\n                <mt-dynamic-list-configuration />\r\n              }\r\n              @case (\"API\") {\r\n                <mt-api-configuration formControlName=\"configuration\" />\r\n              }\r\n              <!-- @case('ViewList') { REMOVED FOR NOW\r\n                  <mt-view-list-configuration />\r\n                  } -->\r\n              @case (\"Attachment\") {\r\n                <mt-attachment-configuration />\r\n              }\r\n              <!-- @case('ReferenceProperty') { REMOVED FOR NOW\r\n                   } -->\r\n              @case (\"EditableListView\") {\r\n                <mt-editable-list-view-configuration />\r\n              }\r\n              @case (\"LookupLog\") {\r\n                <mt-check-list-form-configuration />\r\n              }\r\n              <!-- @case('LookupMatrix') { REMOVED FOR NOW\r\n                  <mt-lookup-configuration />\r\n                  } -->\r\n              @case (\"Location\") {\r\n                <mt-location-configuration />\r\n              }\r\n            }\r\n          }\r\n        }\r\n        @if (isCalculated()) {\r\n          <mt-card title=\"Formula\">\r\n            <mt-formula-builder\r\n              formControlName=\"formula\"\r\n              [levelSchemaId]=\"formulaSchemaId()\"\r\n            />\r\n          </mt-card>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</mt-page>\r\n" }]
+                    ], template: "<mt-page\n  [title]=\"\n    propertyId()\n      ? ('properties.form.editProperty' | transloco)\n      : ('properties.form.createNewProperty' | transloco)\n  \"\n  avatarIcon=\"custom.products-and-services\"\n  [avatarStyle]=\"{\n    '--p-avatar-background': 'var(--p-sky-50)',\n    '--p-avatar-color': 'var(--p-sky-700)',\n  }\"\n  (backButtonClick)=\"goBack()\"\n  backButton\n  class=\"h-full\"\n>\n  <ng-template #headerEnd>\n    <mt-button\n      class=\"mx-2\"\n      [label]=\"submitLabel()\"\n      [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\n      [loading]=\"submitting()\"\n      [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\n      (click)=\"createOrEditProperty()\"\n    />\n  </ng-template>\n  <div\n    [formGroup]=\"propertyForm\"\n    class=\"h-full py-4 h-full overflow-y-auto flex justify-center\"\n  >\n    <div class=\"w-2/3 flex flex-col gap-6\">\n      @if (loading()) {\n        <!-- Skeleton Loading State -->\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n          <div class=\"flex justify-between items-center gap-6\">\n            <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\n            <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\n          </div>\n        </div>\n\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n          <p-skeleton\n            width=\"12rem\"\n            height=\"1.5rem\"\n            styleClass=\"mb-4\"\n          ></p-skeleton>\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            <p-skeleton height=\"3rem\"></p-skeleton>\n            <p-skeleton height=\"3rem\"></p-skeleton>\n            <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n            <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n          </div>\n        </div>\n\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n          <p-skeleton\n            width=\"10rem\"\n            height=\"1.5rem\"\n            styleClass=\"mb-4\"\n          ></p-skeleton>\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            <p-skeleton height=\"3rem\"></p-skeleton>\n            <p-skeleton height=\"3rem\"></p-skeleton>\n            <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n          </div>\n        </div>\n      } @else {\n        <mt-dynamic-form\n          [formConfig]=\"dynamicFormConfigMain()\"\n          [formControlName]=\"'main'\"\n        />\n        @if (configurationFormConfig()) {\n          <mt-dynamic-form\n            formControlName=\"configuration\"\n            [formConfig]=\"configurationFormConfig()!\"\n          />\n        } @else {\n          <ng-container #configurationHost></ng-container>\n          @if (!configurationComponentExists()) {\n            @switch (propertyType()) {\n              @case (\"User\") {\n                <mt-user-configuration />\n              }\n              @case (\"Percentage\") {\n                <mt-percentage-configuration />\n              }\n              @case (\"Lookup\") {\n                <mt-lookup-configuration />\n              }\n              @case (\"LookupMultiSelect\") {\n                <mt-lookup-configuration />\n              }\n              @case (\"EntityList\") {\n                <mt-entity-list-configuration />\n              }\n              @case (\"API\") {\n                <mt-api-configuration formControlName=\"configuration\" />\n              }\n              @case (\"Status\") {\n                <section #statusConfigurationSection>\n                  <mt-status-configuration\n                    [propertyId]=\"statusPropertyId()\"\n                    [levelSchemaId]=\"formulaSchemaId()\"\n                  />\n                </section>\n              }\n              <!-- @case('ViewList') { REMOVED FOR NOW\n                  <mt-view-list-configuration />\n                  } -->\n              @case (\"Attachment\") {\n                <mt-attachment-configuration />\n              }\n              <!-- @case('ReferenceProperty') { REMOVED FOR NOW\n                   } -->\n              @case (\"LookupModuleCheckList\") {\n                <mt-check-list-form-configuration />\n              }\n              <!-- @case('LookupMatrix') { REMOVED FOR NOW\n                  <mt-lookup-configuration />\n                  } -->\n              @case (\"Location\") {\n                <mt-location-configuration />\n              }\n            }\n          }\n        }\n        @if (isCalculated()) {\n          <mt-card title=\"Formula\">\n            <mt-formula-builder\n              formControlName=\"formula\"\n              [levelSchemaId]=\"formulaSchemaId()\"\n            />\n          </mt-card>\n        }\n      }\n    </div>\n  </div>\n</mt-page>\n" }]
         }], ctorParameters: () => [], propDecorators: { propertyId: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyId", required: false }] }], configurationHost: [{
                 type: ViewChild,
                 args: ['configurationHost', { read: ViewContainerRef }]
-            }] } });
+            }], statusConfigurationSection: [{ type: i0.ViewChild, args: ['statusConfigurationSection', { isSignal: true }] }] } });
 
 /*
  * Public API Surface of structure-builder
@@ -2269,5 +2819,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, PropertiesActionKey, PropertiesFacade, PropertiesList, PropertiesState, PropertyForm, REQUEST_CONTEXT, ResetApiConfiguration, ResetConfigProperties, ResetConfigScopes, ResetSelectedProperty, SetBreadcrumb, SetDefaultViewType, SetPropertiesModuleInfo, SetPropertyTypes, TestApiConfiguration, UpdateProperty };
+export { CreateProperty, CreatePropertyStatus, DeleteProperty, DeletePropertyStatus, GetConfigAsType, GetCountries, GetGroups, GetLookups, GetProperties, GetPropertiesForConfigType, GetProperty, GetPropertyStatuses, PropertiesActionKey, PropertiesFacade, PropertiesList, PropertiesState, PropertyForm, REQUEST_CONTEXT, ReorderPropertyStatuses, ResetApiConfiguration, ResetConfigProperties, ResetConfigScopes, ResetPropertyStatuses, ResetSelectedProperty, SetBreadcrumb, SetDefaultViewType, SetPropertiesModuleInfo, SetPropertyTypes, TestApiConfiguration, UpdateProperty, UpdatePropertyStatus };
 //# sourceMappingURL=masterteam-properties.mjs.map