@masterteam/customization 0.0.13 → 0.0.15

package/fesm2022/masterteam-customization.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, computed, input, signal, effect, Component } from '@angular/core';
+import { inject, Injectable, computed, input, signal, effect, Component, output } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { TranslocoDirective } from '@jsverse/transloco';
@@ -10,10 +10,12 @@ import { Button } from '@masterteam/components/button';
 import { Tabs } from '@masterteam/components/tabs';
 import { EntitiesManage } from '@masterteam/components/entities';
 import { ModalService } from '@masterteam/components/modal';
+import { Icon } from '@masterteam/icons';
 import { Skeleton } from 'primeng/skeleton';
 import { HttpClient } from '@angular/common/http';
 import { Action, Selector, State, Store, select } from '@ngxs/store';
 import { CrudStateBase, handleApiRequest } from '@masterteam/components';
+import { DOCUMENT } from '@angular/common';
 import { ModalRef } from '@masterteam/components/dialog';
 
 /** ViewTypes that support the 'showBorder' toggle */
@@ -248,8 +250,8 @@ let CustomizationState = class CustomizationState extends CrudStateBase {
         }
         return contextParts.join('/');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CustomizationState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CustomizationState });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CustomizationState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CustomizationState });
 };
 __decorate([
     Action(GetManagePreviewAreas)
@@ -293,7 +295,7 @@ CustomizationState = __decorate([
         defaults: DEFAULT_STATE,
     })
 ], CustomizationState);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CustomizationState, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CustomizationState, decorators: [{
             type: Injectable
         }], propDecorators: { getAreas: [], getProperties: [], getConfigurations: [], setModuleInfo: [], bulkReplaceConfigurations: [] } });
 function mapCatalogPropertyToManagePreview(property) {
@@ -329,17 +331,17 @@ class CustomizationFacade {
     // ============================================================================
     // Loading Signals - Computed from slice (minimal reactivity)
     // ============================================================================
-    isLoadingProperties = computed(() => this.loadingActive().includes(CustomizationActionKey.GetProperties), ...(ngDevMode ? [{ debugName: "isLoadingProperties" }] : []));
-    isLoadingAreas = computed(() => this.loadingActive().includes(CustomizationActionKey.GetAreas), ...(ngDevMode ? [{ debugName: "isLoadingAreas" }] : []));
-    isLoadingConfigurations = computed(() => this.loadingActive().includes(CustomizationActionKey.GetConfigurations), ...(ngDevMode ? [{ debugName: "isLoadingConfigurations" }] : []));
-    isBulkReplacing = computed(() => this.loadingActive().includes(CustomizationActionKey.BulkReplaceConfigurations), ...(ngDevMode ? [{ debugName: "isBulkReplacing" }] : []));
+    isLoadingProperties = computed(() => this.loadingActive().includes(CustomizationActionKey.GetProperties), ...(ngDevMode ? [{ debugName: "isLoadingProperties" }] : /* istanbul ignore next */ []));
+    isLoadingAreas = computed(() => this.loadingActive().includes(CustomizationActionKey.GetAreas), ...(ngDevMode ? [{ debugName: "isLoadingAreas" }] : /* istanbul ignore next */ []));
+    isLoadingConfigurations = computed(() => this.loadingActive().includes(CustomizationActionKey.GetConfigurations), ...(ngDevMode ? [{ debugName: "isLoadingConfigurations" }] : /* istanbul ignore next */ []));
+    isBulkReplacing = computed(() => this.loadingActive().includes(CustomizationActionKey.BulkReplaceConfigurations), ...(ngDevMode ? [{ debugName: "isBulkReplacing" }] : /* istanbul ignore next */ []));
     // ============================================================================
     // Error Signals - Computed from slice (minimal reactivity)
     // ============================================================================
-    propertiesError = computed(() => this.errors()[CustomizationActionKey.GetProperties] ?? null, ...(ngDevMode ? [{ debugName: "propertiesError" }] : []));
-    areasError = computed(() => this.errors()[CustomizationActionKey.GetAreas] ?? null, ...(ngDevMode ? [{ debugName: "areasError" }] : []));
-    configurationsError = computed(() => this.errors()[CustomizationActionKey.GetConfigurations] ?? null, ...(ngDevMode ? [{ debugName: "configurationsError" }] : []));
-    bulkReplaceError = computed(() => this.errors()[CustomizationActionKey.BulkReplaceConfigurations] ?? null, ...(ngDevMode ? [{ debugName: "bulkReplaceError" }] : []));
+    propertiesError = computed(() => this.errors()[CustomizationActionKey.GetProperties] ?? null, ...(ngDevMode ? [{ debugName: "propertiesError" }] : /* istanbul ignore next */ []));
+    areasError = computed(() => this.errors()[CustomizationActionKey.GetAreas] ?? null, ...(ngDevMode ? [{ debugName: "areasError" }] : /* istanbul ignore next */ []));
+    configurationsError = computed(() => this.errors()[CustomizationActionKey.GetConfigurations] ?? null, ...(ngDevMode ? [{ debugName: "configurationsError" }] : /* istanbul ignore next */ []));
+    bulkReplaceError = computed(() => this.errors()[CustomizationActionKey.BulkReplaceConfigurations] ?? null, ...(ngDevMode ? [{ debugName: "bulkReplaceError" }] : /* istanbul ignore next */ []));
     // ============================================================================
     // Action Dispatchers
     // ============================================================================
@@ -358,10 +360,10 @@ class CustomizationFacade {
     setModuleInfo(moduleType, moduleId, parentModuleType, parentModuleId, parentPath) {
         return this.store.dispatch(new SetManagePreviewModuleInfo(moduleType, moduleId, parentModuleType, parentModuleId, parentPath));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CustomizationFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CustomizationFacade, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CustomizationFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CustomizationFacade, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CustomizationFacade, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CustomizationFacade, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -372,31 +374,38 @@ class PropertyConfigDrawer {
     modalService = inject(ModalService);
     ref = inject(ModalRef);
     facade = inject(CustomizationFacade);
+    doc = inject(DOCUMENT);
     // ─── Inputs (passed via drawer inputValues) ───
-    propertyKey = input('', ...(ngDevMode ? [{ debugName: "propertyKey" }] : []));
-    propertyName = input('', ...(ngDevMode ? [{ debugName: "propertyName" }] : []));
-    viewType = input('Text', ...(ngDevMode ? [{ debugName: "viewType" }] : []));
-    areaKey = input('card', ...(ngDevMode ? [{ debugName: "areaKey" }] : []));
-    currentOrder = input(1, ...(ngDevMode ? [{ debugName: "currentOrder" }] : []));
+    propertyKey = input('', ...(ngDevMode ? [{ debugName: "propertyKey" }] : /* istanbul ignore next */ []));
+    propertyName = input('', ...(ngDevMode ? [{ debugName: "propertyName" }] : /* istanbul ignore next */ []));
+    viewType = input('Text', ...(ngDevMode ? [{ debugName: "viewType" }] : /* istanbul ignore next */ []));
+    areaKey = input('card', ...(ngDevMode ? [{ debugName: "areaKey" }] : /* istanbul ignore next */ []));
+    currentOrder = input(1, ...(ngDevMode ? [{ debugName: "currentOrder" }] : /* istanbul ignore next */ []));
     initialConfig = input({
         hideName: false,
         labelPosition: 'bottom',
         showBorder: false,
+        alignEnd: false,
         showDisplayName: true,
         showPhoneNumber: false,
         showEmail: false,
-    }, ...(ngDevMode ? [{ debugName: "initialConfig" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "initialConfig" }] : /* istanbul ignore next */ []));
     // ─── UI state ───
-    submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
+    submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []));
     hideNameControl = new FormControl(false);
     labelOnTopControl = new FormControl(false);
     showBorderControl = new FormControl(false);
+    alignEndControl = new FormControl(false);
     showDisplayNameControl = new FormControl(false);
     showPhoneNumberControl = new FormControl(false);
     showEmailControl = new FormControl(false);
     // ─── Computed visibility flags ───
-    isBorderViewType = computed(() => BORDER_VIEW_TYPES.includes(this.viewType()), ...(ngDevMode ? [{ debugName: "isBorderViewType" }] : []));
-    isUserViewType = computed(() => USER_VIEW_TYPES.includes(this.viewType()), ...(ngDevMode ? [{ debugName: "isUserViewType" }] : []));
+    isBorderViewType = computed(() => BORDER_VIEW_TYPES.includes(this.viewType()), ...(ngDevMode ? [{ debugName: "isBorderViewType" }] : /* istanbul ignore next */ []));
+    isUserViewType = computed(() => USER_VIEW_TYPES.includes(this.viewType()), ...(ngDevMode ? [{ debugName: "isUserViewType" }] : /* istanbul ignore next */ []));
+    /** True when the document direction is RTL */
+    isRtl = signal(this.doc.documentElement.getAttribute('dir') === 'rtl', ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
+    /** Align-end icon: right in LTR, left in RTL */
+    alignEndIcon = computed(() => this.isRtl() ? 'layout.align-left-01' : 'layout.align-right-01', ...(ngDevMode ? [{ debugName: "alignEndIcon" }] : /* istanbul ignore next */ []));
     constructor() {
         // Initialize form from input config
         effect(() => {
@@ -404,6 +413,7 @@ class PropertyConfigDrawer {
             this.hideNameControl.patchValue(config.hideName ?? false);
             this.labelOnTopControl.patchValue(config.labelPosition === 'top');
             this.showBorderControl.patchValue(config.showBorder ?? false);
+            this.alignEndControl.patchValue(config.alignEnd ?? false);
             this.showDisplayNameControl.patchValue(config.showDisplayName ?? true);
             this.showPhoneNumberControl.patchValue(config.showPhoneNumber ?? false);
             this.showEmailControl.patchValue(config.showEmail ?? false);
@@ -427,6 +437,7 @@ class PropertyConfigDrawer {
         configuration['labelPosition'] = this.labelOnTopControl.value
             ? 'top'
             : 'bottom';
+        configuration['alignEnd'] = this.alignEndControl.value ?? false;
         if (this.isBorderViewType()) {
             configuration['showBorder'] = this.showBorderControl.value ?? false;
         }
@@ -475,33 +486,94 @@ class PropertyConfigDrawer {
     onCancel() {
         this.ref.close(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertyConfigDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PropertyConfigDrawer, isStandalone: true, selector: "mt-property-config-drawer", inputs: { propertyKey: { classPropertyName: "propertyKey", publicName: "propertyKey", isSignal: true, isRequired: false, transformFunction: null }, propertyName: { classPropertyName: "propertyName", publicName: "propertyName", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, areaKey: { classPropertyName: "areaKey", publicName: "areaKey", isSignal: true, isRequired: false, transformFunction: null }, currentOrder: { classPropertyName: "currentOrder", publicName: "currentOrder", isSignal: true, isRequired: false, transformFunction: null }, initialConfig: { classPropertyName: "initialConfig", publicName: "initialConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'customization'\">\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-hidden!']\">\n    <div class=\"mt-2 h-full overflow-y-auto pb-10 flex flex-col gap-5\">\n      <!-- Hide Name Toggle (all entity types) -->\n      <mt-toggle-field\n        toggleShape=\"card\"\n        [label]=\"t('hide-name')\"\n        icon=\"general.eye-off\"\n        [formControl]=\"hideNameControl\"\n      ></mt-toggle-field>\n\n      <mt-toggle-field\n        toggleShape=\"card\"\n        [label]=\"t('label-on-top')\"\n        [formControl]=\"labelOnTopControl\"\n      ></mt-toggle-field>\n\n      <!-- Show Border Toggle (Text, Currency, Date, DateTime) -->\n      @if (isBorderViewType()) {\n        <mt-toggle-field\n          toggleShape=\"card\"\n          [label]=\"t('show-border')\"\n          icon=\"layout.layout-grid-01\"\n          [formControl]=\"showBorderControl\"\n        ></mt-toggle-field>\n      }\n\n      <!-- User-specific Toggles -->\n      @if (isUserViewType()) {\n        <mt-toggle-field\n          toggleShape=\"card\"\n          [label]=\"t('show-display-name')\"\n          icon=\"user.user-circle\"\n          [formControl]=\"showDisplayNameControl\"\n        ></mt-toggle-field>\n\n        <mt-toggle-field\n          toggleShape=\"card\"\n          [label]=\"t('show-phone-number')\"\n          icon=\"communication.phone\"\n          [formControl]=\"showPhoneNumberControl\"\n        ></mt-toggle-field>\n\n        <mt-toggle-field\n          toggleShape=\"card\"\n          [label]=\"t('show-email')\"\n          icon=\"communication.mail-01\"\n          [formControl]=\"showEmailControl\"\n        ></mt-toggle-field>\n      }\n    </div>\n  </div>\n\n  <div [class]=\"modalService.footerClass\">\n    <mt-button\n      [label]=\"t('cancel')\"\n      severity=\"secondary\"\n      [disabled]=\"submitting()\"\n      (onClick)=\"onCancel()\"\n    ></mt-button>\n    <mt-button\n      [label]=\"t('save')\"\n      severity=\"primary\"\n      [loading]=\"submitting()\"\n      (onClick)=\"onSave()\"\n    ></mt-button>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PropertyConfigDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: PropertyConfigDrawer, isStandalone: true, selector: "mt-property-config-drawer", inputs: { propertyKey: { classPropertyName: "propertyKey", publicName: "propertyKey", isSignal: true, isRequired: false, transformFunction: null }, propertyName: { classPropertyName: "propertyName", publicName: "propertyName", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, areaKey: { classPropertyName: "areaKey", publicName: "areaKey", isSignal: true, isRequired: false, transformFunction: null }, currentOrder: { classPropertyName: "currentOrder", publicName: "currentOrder", isSignal: true, isRequired: false, transformFunction: null }, initialConfig: { classPropertyName: "initialConfig", publicName: "initialConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'customization'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-hidden!']\">\r\n    <div class=\"mt-2 h-full overflow-y-auto pb-10 flex flex-col gap-5\">\r\n      <!-- Hide Name Toggle (all entity types) -->\r\n      <mt-toggle-field\r\n        toggleShape=\"card\"\r\n        [label]=\"t('hide-name')\"\r\n        icon=\"general.eye-off\"\r\n        [formControl]=\"hideNameControl\"\r\n      ></mt-toggle-field>\r\n\r\n      <mt-toggle-field\r\n        toggleShape=\"card\"\r\n        [label]=\"t('label-on-top')\"\r\n        icon=\"layout.align-right-02\"\r\n        [formControl]=\"labelOnTopControl\"\r\n      ></mt-toggle-field>\r\n\r\n      <!-- Align End Toggle (all entity types) -->\r\n      <mt-toggle-field\r\n        toggleShape=\"card\"\r\n        [label]=\"t('align-end')\"\r\n        [icon]=\"alignEndIcon()\"\r\n        [formControl]=\"alignEndControl\"\r\n      ></mt-toggle-field>\r\n\r\n      <!-- Show Border Toggle (Text, Currency, Date, DateTime) -->\r\n      @if (isBorderViewType()) {\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-border')\"\r\n          icon=\"layout.layout-grid-01\"\r\n          [formControl]=\"showBorderControl\"\r\n        ></mt-toggle-field>\r\n      }\r\n\r\n      <!-- User-specific Toggles -->\r\n      @if (isUserViewType()) {\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-display-name')\"\r\n          icon=\"user.user-circle\"\r\n          [formControl]=\"showDisplayNameControl\"\r\n        ></mt-toggle-field>\r\n\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-phone-number')\"\r\n          icon=\"communication.phone\"\r\n          [formControl]=\"showPhoneNumberControl\"\r\n        ></mt-toggle-field>\r\n\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-email')\"\r\n          icon=\"communication.mail-01\"\r\n          [formControl]=\"showEmailControl\"\r\n        ></mt-toggle-field>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"modalService.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      [disabled]=\"submitting()\"\r\n      (onClick)=\"onCancel()\"\r\n    ></mt-button>\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      severity=\"primary\"\r\n      [loading]=\"submitting()\"\r\n      (onClick)=\"onSave()\"\r\n    ></mt-button>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertyConfigDrawer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PropertyConfigDrawer, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-property-config-drawer', standalone: true, imports: [TranslocoDirective, ReactiveFormsModule, Button, ToggleField], template: "<ng-container *transloco=\"let t; prefix: 'customization'\">\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-hidden!']\">\n    <div class=\"mt-2 h-full overflow-y-auto pb-10 flex flex-col gap-5\">\n      <!-- Hide Name Toggle (all entity types) -->\n      <mt-toggle-field\n        toggleShape=\"card\"\n        [label]=\"t('hide-name')\"\n        icon=\"general.eye-off\"\n        [formControl]=\"hideNameControl\"\n      ></mt-toggle-field>\n\n      <mt-toggle-field\n        toggleShape=\"card\"\n        [label]=\"t('label-on-top')\"\n        [formControl]=\"labelOnTopControl\"\n      ></mt-toggle-field>\n\n      <!-- Show Border Toggle (Text, Currency, Date, DateTime) -->\n      @if (isBorderViewType()) {\n        <mt-toggle-field\n          toggleShape=\"card\"\n          [label]=\"t('show-border')\"\n          icon=\"layout.layout-grid-01\"\n          [formControl]=\"showBorderControl\"\n        ></mt-toggle-field>\n      }\n\n      <!-- User-specific Toggles -->\n      @if (isUserViewType()) {\n        <mt-toggle-field\n          toggleShape=\"card\"\n          [label]=\"t('show-display-name')\"\n          icon=\"user.user-circle\"\n          [formControl]=\"showDisplayNameControl\"\n        ></mt-toggle-field>\n\n        <mt-toggle-field\n          toggleShape=\"card\"\n          [label]=\"t('show-phone-number')\"\n          icon=\"communication.phone\"\n          [formControl]=\"showPhoneNumberControl\"\n        ></mt-toggle-field>\n\n        <mt-toggle-field\n          toggleShape=\"card\"\n          [label]=\"t('show-email')\"\n          icon=\"communication.mail-01\"\n          [formControl]=\"showEmailControl\"\n        ></mt-toggle-field>\n      }\n    </div>\n  </div>\n\n  <div [class]=\"modalService.footerClass\">\n    <mt-button\n      [label]=\"t('cancel')\"\n      severity=\"secondary\"\n      [disabled]=\"submitting()\"\n      (onClick)=\"onCancel()\"\n    ></mt-button>\n    <mt-button\n      [label]=\"t('save')\"\n      severity=\"primary\"\n      [loading]=\"submitting()\"\n      (onClick)=\"onSave()\"\n    ></mt-button>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'mt-property-config-drawer', standalone: true, imports: [TranslocoDirective, ReactiveFormsModule, Button, ToggleField], template: "<ng-container *transloco=\"let t; prefix: 'customization'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-hidden!']\">\r\n    <div class=\"mt-2 h-full overflow-y-auto pb-10 flex flex-col gap-5\">\r\n      <!-- Hide Name Toggle (all entity types) -->\r\n      <mt-toggle-field\r\n        toggleShape=\"card\"\r\n        [label]=\"t('hide-name')\"\r\n        icon=\"general.eye-off\"\r\n        [formControl]=\"hideNameControl\"\r\n      ></mt-toggle-field>\r\n\r\n      <mt-toggle-field\r\n        toggleShape=\"card\"\r\n        [label]=\"t('label-on-top')\"\r\n        icon=\"layout.align-right-02\"\r\n        [formControl]=\"labelOnTopControl\"\r\n      ></mt-toggle-field>\r\n\r\n      <!-- Align End Toggle (all entity types) -->\r\n      <mt-toggle-field\r\n        toggleShape=\"card\"\r\n        [label]=\"t('align-end')\"\r\n        [icon]=\"alignEndIcon()\"\r\n        [formControl]=\"alignEndControl\"\r\n      ></mt-toggle-field>\r\n\r\n      <!-- Show Border Toggle (Text, Currency, Date, DateTime) -->\r\n      @if (isBorderViewType()) {\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-border')\"\r\n          icon=\"layout.layout-grid-01\"\r\n          [formControl]=\"showBorderControl\"\r\n        ></mt-toggle-field>\r\n      }\r\n\r\n      <!-- User-specific Toggles -->\r\n      @if (isUserViewType()) {\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-display-name')\"\r\n          icon=\"user.user-circle\"\r\n          [formControl]=\"showDisplayNameControl\"\r\n        ></mt-toggle-field>\r\n\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-phone-number')\"\r\n          icon=\"communication.phone\"\r\n          [formControl]=\"showPhoneNumberControl\"\r\n        ></mt-toggle-field>\r\n\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-email')\"\r\n          icon=\"communication.mail-01\"\r\n          [formControl]=\"showEmailControl\"\r\n        ></mt-toggle-field>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"modalService.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      [disabled]=\"submitting()\"\r\n      (onClick)=\"onCancel()\"\r\n    ></mt-button>\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      severity=\"primary\"\r\n      [loading]=\"submitting()\"\r\n      (onClick)=\"onSave()\"\r\n    ></mt-button>\r\n  </div>\r\n</ng-container>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { propertyKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyKey", required: false }] }], propertyName: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyName", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], areaKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaKey", required: false }] }], currentOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentOrder", required: false }] }], initialConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialConfig", required: false }] }] } });
 
+class LeafDetailsSelector {
+    property = input.required(...(ngDevMode ? [{ debugName: "property" }] : /* istanbul ignore next */ []));
+    leafLevels = input({}, ...(ngDevMode ? [{ debugName: "leafLevels" }] : /* istanbul ignore next */ []));
+    configChange = output();
+    levels = computed(() => this.property().configuration ?? [], ...(ngDevMode ? [{ debugName: "levels" }] : /* istanbul ignore next */ []));
+    isLevelEnabled(levelId) {
+        return this.leafLevels()[String(levelId)] != null;
+    }
+    isStatusSelected(levelId, statusKey) {
+        return this.leafLevels()[String(levelId)]?.selectedStatuses.includes(statusKey) ?? false;
+    }
+    /** Section toggle — show or hide the entire level in the preview */
+    toggleLevel(levelId, enabled) {
+        const current = { ...this.leafLevels() };
+        if (enabled) {
+            const level = this.levels().find((l) => l.levelId === levelId);
+            current[String(levelId)] = {
+                order: Object.keys(current).length + 1,
+                selectedStatuses: level?.statuses.map((s) => s.key) ?? [],
+            };
+        }
+        else {
+            delete current[String(levelId)];
+        }
+        this.configChange.emit(current);
+    }
+    /** Status toggle — show or hide a single status badge in the level preview */
+    toggleStatus(levelId, statusKey) {
+        const current = { ...this.leafLevels() };
+        const saved = current[String(levelId)];
+        if (!saved)
+            return;
+        const idx = saved.selectedStatuses.indexOf(statusKey);
+        current[String(levelId)] = {
+            ...saved,
+            selectedStatuses: idx >= 0
+                ? saved.selectedStatuses.filter((k) => k !== statusKey)
+                : [...saved.selectedStatuses, statusKey],
+        };
+        this.configChange.emit(current);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafDetailsSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: LeafDetailsSelector, isStandalone: true, selector: "mt-leaf-details-selector", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, leafLevels: { classPropertyName: "leafLevels", publicName: "leafLevels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { configChange: "configChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'customization'\">\n  <div class=\"space-y-2 pt-1\">\n\n    <p class=\"text-sm font-semibold text-color px-1\">\n      {{ t('leaf-details-target-statuses') }}\n    </p>\n\n    @for (level of levels(); track $index) {\n      <div class=\"rounded-lg border border-surface-200 overflow-hidden\">\n\n        <!-- Level header: icon + name | section toggle (show/hide this level) -->\n        <div class=\"flex items-center gap-2 px-3 py-2.5\">\n          <mt-icon [name]=\"level.levelIcon\" size=\"xs\" class=\"text-color-secondary shrink-0\" />\n          <span class=\"flex-1 text-sm font-medium truncate\">{{ level.levelName }}</span>\n          <mt-toggle-field\n            [ngModel]=\"isLevelEnabled(level.levelId)\"\n            (ngModelChange)=\"toggleLevel(level.levelId, $event)\"\n            size=\"small\"\n            class=\"shrink-0\"\n          />\n        </div>\n\n        <!-- Status rows: each toggle shows/hides that status badge in the preview -->\n        @if (isLevelEnabled(level.levelId)) {\n          <div class=\"border-t border-surface-200 divide-y divide-surface-100\">\n            @for (status of level.statuses; track $index) {\n              <div class=\"flex items-center gap-2.5 px-3 py-2\">\n                <span\n                  class=\"w-2.5 h-2.5 rounded-full shrink-0 border border-black/10\"\n                  [style.background-color]=\"status.color ?? '#9CA3AF'\"\n                ></span>\n                <span class=\"text-sm flex-1 truncate\">{{ status.display }}</span>\n                <mt-toggle-field\n                  [ngModel]=\"isStatusSelected(level.levelId, status.key)\"\n                  (ngModelChange)=\"toggleStatus(level.levelId, status.key)\"\n                  size=\"small\"\n                  class=\"shrink-0\"\n                />\n              </div>\n            }\n          </div>\n        }\n\n      </div>\n    }\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafDetailsSelector, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-leaf-details-selector', standalone: true, imports: [FormsModule, TranslocoDirective, Icon, ToggleField], template: "<ng-container *transloco=\"let t; prefix: 'customization'\">\n  <div class=\"space-y-2 pt-1\">\n\n    <p class=\"text-sm font-semibold text-color px-1\">\n      {{ t('leaf-details-target-statuses') }}\n    </p>\n\n    @for (level of levels(); track $index) {\n      <div class=\"rounded-lg border border-surface-200 overflow-hidden\">\n\n        <!-- Level header: icon + name | section toggle (show/hide this level) -->\n        <div class=\"flex items-center gap-2 px-3 py-2.5\">\n          <mt-icon [name]=\"level.levelIcon\" size=\"xs\" class=\"text-color-secondary shrink-0\" />\n          <span class=\"flex-1 text-sm font-medium truncate\">{{ level.levelName }}</span>\n          <mt-toggle-field\n            [ngModel]=\"isLevelEnabled(level.levelId)\"\n            (ngModelChange)=\"toggleLevel(level.levelId, $event)\"\n            size=\"small\"\n            class=\"shrink-0\"\n          />\n        </div>\n\n        <!-- Status rows: each toggle shows/hides that status badge in the preview -->\n        @if (isLevelEnabled(level.levelId)) {\n          <div class=\"border-t border-surface-200 divide-y divide-surface-100\">\n            @for (status of level.statuses; track $index) {\n              <div class=\"flex items-center gap-2.5 px-3 py-2\">\n                <span\n                  class=\"w-2.5 h-2.5 rounded-full shrink-0 border border-black/10\"\n                  [style.background-color]=\"status.color ?? '#9CA3AF'\"\n                ></span>\n                <span class=\"text-sm flex-1 truncate\">{{ status.display }}</span>\n                <mt-toggle-field\n                  [ngModel]=\"isStatusSelected(level.levelId, status.key)\"\n                  (ngModelChange)=\"toggleStatus(level.levelId, status.key)\"\n                  size=\"small\"\n                  class=\"shrink-0\"\n                />\n              </div>\n            }\n          </div>\n        }\n\n      </div>\n    }\n  </div>\n</ng-container>\n" }]
+        }], propDecorators: { property: [{ type: i0.Input, args: [{ isSignal: true, alias: "property", required: true }] }], leafLevels: [{ type: i0.Input, args: [{ isSignal: true, alias: "leafLevels", required: false }] }], configChange: [{ type: i0.Output, args: ["configChange"] }] } });
+
+/** Separator used to build synthetic entity keys for LeafDetails sub-entities */
+const LEAF_DETAILS_SEP = '::leaflevel::';
 class Customization {
     facade = inject(CustomizationFacade);
     modalService = inject(ModalService);
     /** Set of viewTypes that have editable fields in the drawer (beyond size) */
     editableViewTypes = new Set(EDITABLE_VIEW_TYPES);
-    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
-    activeArea = signal(null, ...(ngDevMode ? [{ debugName: "activeArea" }] : []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    activeArea = signal(null, ...(ngDevMode ? [{ debugName: "activeArea" }] : /* istanbul ignore next */ []));
     // ── Derived signals ──
     properties = this.facade.properties;
     areas = this.facade.areas;
     isLoading = this.facade.isLoadingProperties;
     isLoadingAreas = this.facade.isLoadingAreas;
     isLoadingPreview = computed(() => this.facade.isLoadingConfigurations() ||
-        this.facade.isLoadingProperties(), ...(ngDevMode ? [{ debugName: "isLoadingPreview" }] : []));
-    areasTabs = computed(() => this.areas().map((area) => ({ label: area.name, value: area.key })), ...(ngDevMode ? [{ debugName: "areasTabs" }] : []));
+        this.facade.isLoadingProperties(), ...(ngDevMode ? [{ debugName: "isLoadingPreview" }] : /* istanbul ignore next */ []));
+    areasTabs = computed(() => this.areas().map((area) => ({ label: area.name, value: area.key })), ...(ngDevMode ? [{ debugName: "areasTabs" }] : /* istanbul ignore next */ []));
+    /**
+     * Configurations filtered to exclude properties that no longer exist in the catalog.
+     * Prevents sending orphaned property references on save.
+     */
+    validConfigurations = computed(() => {
+        const configs = this.facade.configurations();
+        const props = this.properties();
+        const propertyKeys = new Set(props.map((p) => p.key));
+        return configs.filter((c) => propertyKeys.has(c.propertyKey));
+    }, ...(ngDevMode ? [{ debugName: "validConfigurations" }] : /* istanbul ignore next */ []));
     /** Properties enriched with `enabled` based on current area configurations */
     propertiesWithEnabled = computed(() => {
         const props = this.properties();
-        const configs = this.facade.configurations();
+        const configs = this.validConfigurations();
         const area = this.activeArea();
         if (!area)
             return props.map((p) => ({ ...p, enabled: false }));
@@ -509,21 +581,45 @@ class Customization {
             ...p,
             enabled: configs.some((c) => c.areaKey === area && c.propertyKey === p.key),
         }));
-    }, ...(ngDevMode ? [{ debugName: "propertiesWithEnabled" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "propertiesWithEnabled" }] : /* istanbul ignore next */ []));
     filteredProperties = computed(() => {
         const query = this.searchQuery().toLowerCase().trim();
         const list = this.propertiesWithEnabled();
+        // LeafDetails always first in the list regardless of active state
+        const leaf = list.filter((p) => p.viewType === 'LeafDetails');
+        const regular = list.filter((p) => p.viewType !== 'LeafDetails');
+        const ordered = [...leaf, ...regular];
         if (!query)
-            return list;
-        return list.filter((prop) => {
+            return ordered;
+        return ordered.filter((prop) => {
             const name = typeof prop.name === 'string'
                 ? prop.name
                 : Object.values(prop.name).join(' ');
             return name.toLowerCase().includes(query);
         });
-    }, ...(ngDevMode ? [{ debugName: "filteredProperties" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "filteredProperties" }] : /* istanbul ignore next */ []));
+    /**
+     * LeafDetails saved configs indexed by propertyKey for the active area.
+     * Used by the inline selector in the property list.
+     */
+    leafConfigsByProp = computed(() => {
+        const configs = this.validConfigurations();
+        const area = this.activeArea();
+        if (!area)
+            return {};
+        const result = {};
+        for (const config of configs) {
+            if (config.areaKey !== area)
+                continue;
+            const leafLevels = config.configuration?.['leafLevels'];
+            if (leafLevels && typeof leafLevels === 'object' && !Array.isArray(leafLevels)) {
+                result[config.propertyKey] = leafLevels;
+            }
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "leafConfigsByProp" }] : /* istanbul ignore next */ []));
     /** Preview entities built from configurations + properties for the active area */
-    previewEntities = signal([], ...(ngDevMode ? [{ debugName: "previewEntities" }] : []));
+    previewEntities = signal([], ...(ngDevMode ? [{ debugName: "previewEntities" }] : /* istanbul ignore next */ []));
     constructor() {
         // Set default active area when areas load
         effect(() => {
@@ -534,7 +630,7 @@ class Customization {
         });
         // Rebuild preview entities when configs, properties, or active area change
         effect(() => {
-            const configs = this.facade.configurations();
+            const configs = this.validConfigurations();
             const props = this.properties();
             const area = this.activeArea();
             if (!area || !props.length) {
@@ -542,86 +638,245 @@ class Customization {
                 return;
             }
             const areaConfigs = configs.filter((c) => c.areaKey === area);
-            const entities = areaConfigs
-                .map((config) => this.buildEntityFromConfig(config, props))
-                .filter((e) => e !== null)
+            const all = areaConfigs.flatMap((config) => this.buildEntitiesFromConfig(config, props));
+            // Regular entities come first, LeafDetails always last.
+            // Orders are reassigned sequentially so EntitiesManage's internal sort stays consistent.
+            const regular = all
+                .filter((e) => !e.key?.includes(LEAF_DETAILS_SEP))
                 .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+            const leafEntities = all
+                .filter((e) => e.key?.includes(LEAF_DETAILS_SEP))
+                .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+            const entities = [
+                ...regular.map((e, i) => ({ ...e, order: i + 1 })),
+                ...leafEntities.map((e, i) => ({ ...e, order: regular.length + i + 1 })),
+            ];
             this.previewEntities.set(entities);
         });
     }
     ngOnInit() {
-        // Load display areas
         this.facade.loadAreas();
         this.facade.loadProperties();
         this.facade.loadConfigurations();
     }
     onPropertyToggle(prop, enabled) {
+        // LeafDetails is managed entirely via the inline status selector — skip
+        if (prop.viewType === 'LeafDetails')
+            return;
         if (enabled) {
             this.activateProperty(prop, this.editableViewTypes.has(prop.viewType));
             return;
         }
-        // Remove this property and bulk-replace with remaining checked props
         this.bulkSaveWithout(prop.key);
     }
     onEditProperty(prop) {
         const area = this.activeArea();
         if (!area)
             return;
-        const configs = this.facade.configurations();
+        const configs = this.validConfigurations();
         const existingConfig = configs.find((c) => c.areaKey === area && c.propertyKey === prop.key);
         this.openDrawer(prop, {
             currentOrder: existingConfig?.order,
             configuration: existingConfig?.configuration,
         });
     }
+    onEntityClicked(entity) {
+        // LeafDetails sub-entities are configured inline — not via drawer
+        if (entity.key?.includes(LEAF_DETAILS_SEP))
+            return;
+        const area = this.activeArea();
+        if (!area || !entity.key)
+            return;
+        if (!this.editableViewTypes.has(entity.viewType))
+            return;
+        const prop = this.properties().find((p) => p.key === entity.key);
+        if (!prop)
+            return;
+        const configs = this.validConfigurations();
+        const existingConfig = configs.find((c) => c.areaKey === area && c.propertyKey === entity.key);
+        this.openDrawer(prop, {
+            currentOrder: existingConfig?.order,
+            configuration: existingConfig?.configuration,
+        });
+    }
     onEntityResized(event) {
         const area = this.activeArea();
         if (!area)
             return;
-        const configs = this.facade.configurations();
-        // Update the configuration for the resized entity in the current area
+        const configs = this.validConfigurations();
+        // ── LeafDetails sub-entity resize ──
+        if (event.entity.key?.includes(LEAF_DETAILS_SEP)) {
+            const [propKey, levelId] = event.entity.key.split(LEAF_DETAILS_SEP);
+            const existingConfig = configs.find((c) => c.areaKey === area && c.propertyKey === propKey);
+            const leafLevels = {
+                ...(existingConfig?.configuration?.['leafLevels'] ?? {}),
+            };
+            if (leafLevels[levelId]) {
+                leafLevels[levelId] = { ...leafLevels[levelId], size: event.newSize };
+            }
+            const updatedConfigs = configs.map((c) => c.areaKey === area && c.propertyKey === propKey
+                ? { ...c, configuration: { ...c.configuration, leafLevels } }
+                : c);
+            this.facade.bulkReplaceConfigurations(this.groupConfigsByProperty(updatedConfigs)).subscribe();
+            return;
+        }
+        // ── Regular entity resize ──
         const updatedConfigs = configs.map((c) => c.areaKey === area && c.propertyKey === event.entity.key
             ? { ...c, configuration: { ...c.configuration, size: event.newSize } }
             : c);
-        // Build bulk-replace items from updated configs
-        const items = this.groupConfigsByProperty(updatedConfigs);
-        this.facade.bulkReplaceConfigurations(items).subscribe();
+        this.facade.bulkReplaceConfigurations(this.groupConfigsByProperty(updatedConfigs)).subscribe();
     }
     onEntitiesReordered(entities) {
         const area = this.activeArea();
         if (!area)
             return;
-        const configs = this.facade.configurations();
-        const items = entities.map((entity, index) => {
+        const configs = this.validConfigurations();
+        // Separate regular entities from LeafDetails sub-entities
+        const regularEntities = entities.filter((e) => !e.key?.includes(LEAF_DETAILS_SEP));
+        const leafEntities = entities.filter((e) => e.key?.includes(LEAF_DETAILS_SEP));
+        // Regular entities → BulkReplaceItems
+        const regularItems = regularEntities.map((entity) => {
             const existingConfig = configs.find((c) => c.areaKey === area && c.propertyKey === entity.key);
             return {
                 propertyKey: entity.key,
                 displayAreas: [
                     {
                         areaKey: area,
-                        order: index + 1,
+                        order: entity.order,
                         configuration: existingConfig?.configuration ?? {},
                     },
                 ],
             };
         });
-        // Include configs from other areas that are not being reordered
-        const otherAreaConfigs = configs.filter((c) => c.areaKey !== area);
-        const otherAreaItems = this.groupConfigsByProperty(otherAreaConfigs);
-        // Merge: for properties that exist in both, combine their displayAreas
-        const mergedItems = this.mergeItems(items, otherAreaItems);
-        this.facade.bulkReplaceConfigurations(mergedItems).subscribe();
+        // Leaf entities → group by parent propertyKey, update per-level order
+        const leafByProp = new Map();
+        for (const entity of leafEntities) {
+            const [propKey, levelId] = entity.key.split(LEAF_DETAILS_SEP);
+            if (!leafByProp.has(propKey))
+                leafByProp.set(propKey, []);
+            leafByProp.get(propKey).push({ levelId, order: entity.order });
+        }
+        const leafItems = [];
+        for (const [propKey, levelUpdates] of leafByProp) {
+            const existingConfig = configs.find((c) => c.areaKey === area && c.propertyKey === propKey);
+            const leafLevels = {
+                ...(existingConfig?.configuration?.['leafLevels'] ?? {}),
+            };
+            for (const { levelId, order } of levelUpdates) {
+                if (leafLevels[levelId]) {
+                    leafLevels[levelId] = { ...leafLevels[levelId], order };
+                }
+            }
+            const minOrder = Math.min(...levelUpdates.map((l) => l.order));
+            leafItems.push({
+                propertyKey: propKey,
+                displayAreas: [
+                    {
+                        areaKey: area,
+                        order: existingConfig?.order ?? minOrder,
+                        configuration: { ...existingConfig?.configuration, leafLevels },
+                    },
+                ],
+            });
+        }
+        // Configs from other areas (preserve as-is)
+        const otherAreaItems = this.groupConfigsByProperty(configs.filter((c) => c.areaKey !== area));
+        this.facade
+            .bulkReplaceConfigurations(this.mergeItems([...regularItems, ...leafItems], otherAreaItems))
+            .subscribe();
+    }
+    /**
+     * Called by the inline LeafDetailsSelector when the user changes status selections.
+     * Immediately persists the updated leafLevels configuration.
+     */
+    onLeafConfigChange(prop, leafLevels) {
+        const area = this.activeArea();
+        if (!area)
+            return;
+        const configs = this.validConfigurations();
+        const existingConfig = configs.find((c) => c.areaKey === area && c.propertyKey === prop.key);
+        // Ensure every level has an order assigned
+        let nextOrder = configs.filter((c) => c.areaKey === area && c.propertyKey !== prop.key).length + 1;
+        const normalizedLevels = {};
+        for (const [levelId, levelCfg] of Object.entries(leafLevels)) {
+            normalizedLevels[levelId] = levelCfg.order
+                ? levelCfg
+                : { ...levelCfg, order: nextOrder++ };
+        }
+        // Other configs excluding this leaf property in the current area
+        const otherItems = this.groupConfigsByProperty(configs.filter((c) => !(c.areaKey === area && c.propertyKey === prop.key)));
+        if (Object.keys(normalizedLevels).length === 0) {
+            // All levels deselected — remove property from display config
+            this.facade.bulkReplaceConfigurations(otherItems).subscribe();
+            return;
+        }
+        const minOrder = Math.min(...Object.values(normalizedLevels).map((l) => l.order));
+        const newItem = {
+            propertyKey: prop.key,
+            displayAreas: [
+                {
+                    areaKey: area,
+                    order: existingConfig?.order ?? minOrder,
+                    configuration: { leafLevels: normalizedLevels },
+                },
+            ],
+        };
+        this.facade.bulkReplaceConfigurations(this.mergeItems([newItem], otherItems)).subscribe();
     }
     // ── Private helpers ──
     /**
-     * Add a property to the active area immediately, then optionally open its configuration drawer.
-     * This keeps the property active even if the user closes the drawer without saving extra options.
+     * Builds zero or more EntityData entries from a single DisplayConfiguration.
+     * Regular properties → one entity. LeafDetails → one entity per enabled level.
      */
+    buildEntitiesFromConfig(config, props) {
+        const prop = props.find((p) => p.key === config.propertyKey);
+        if (!prop)
+            return [];
+        if (prop.viewType === 'LeafDetails') {
+            return this.buildLeafDetailsEntities(config, prop);
+        }
+        const entity = this.buildEntityFromConfig(config, props);
+        return entity ? [entity] : [];
+    }
+    /** Builds one EntityData per enabled level from a LeafDetails display config. */
+    buildLeafDetailsEntities(config, prop) {
+        const levels = prop.configuration ?? [];
+        const leafLevels = config.configuration?.['leafLevels'];
+        if (!leafLevels)
+            return [];
+        const result = [];
+        for (const level of levels) {
+            const levelCfg = leafLevels[String(level.levelId)];
+            if (!levelCfg)
+                continue;
+            const selectedKeys = new Set(levelCfg.selectedStatuses);
+            const value = {
+                levelId: level.levelId,
+                levelName: level.levelName,
+                levelIcon: level.levelIcon,
+                statuses: level.statuses
+                    .filter((s) => selectedKeys.has(s.key))
+                    .map((s) => ({ key: s.key, display: s.display, color: s.color, count: 0 })),
+            };
+            result.push({
+                id: prop.id,
+                propertyId: prop.id,
+                key: `${prop.key}${LEAF_DETAILS_SEP}${level.levelId}`,
+                name: level.levelName,
+                // Cast needed until entities package is rebuilt with LeafDetailsEntityValue in the union
+                value: value,
+                viewType: 'LeafDetails',
+                order: levelCfg.order,
+                configuration: levelCfg.size ? { size: levelCfg.size } : undefined,
+            });
+        }
+        return result;
+    }
     activateProperty(prop, openConfigAfterSave = false) {
         const area = this.activeArea();
         if (!area)
             return;
-        const configs = this.facade.configurations();
+        const configs = this.validConfigurations();
         const existingConfig = configs.find((c) => c.areaKey === area && c.propertyKey === prop.key);
         if (existingConfig) {
             if (openConfigAfterSave) {
@@ -635,60 +890,38 @@ class Customization {
         const areaConfigs = configs.filter((c) => c.areaKey === area);
         const nextOrder = areaConfigs.length + 1;
         const configuration = {};
-        const newDisplayArea = {
-            areaKey: area,
-            order: nextOrder,
-            configuration,
-        };
-        // Build bulk items from existing configs + new property
         const itemsMap = new Map();
         for (const c of configs) {
-            if (!itemsMap.has(c.propertyKey)) {
+            if (!itemsMap.has(c.propertyKey))
                 itemsMap.set(c.propertyKey, []);
-            }
             itemsMap.get(c.propertyKey).push({
                 areaKey: c.areaKey,
                 order: c.order,
                 configuration: c.configuration,
             });
         }
-        // Add the new property
-        if (!itemsMap.has(prop.key)) {
+        if (!itemsMap.has(prop.key))
             itemsMap.set(prop.key, []);
-        }
-        itemsMap.get(prop.key).push(newDisplayArea);
+        itemsMap.get(prop.key).push({ areaKey: area, order: nextOrder, configuration });
         const items = Array.from(itemsMap.entries()).map(([propertyKey, displayAreas]) => ({ propertyKey, displayAreas }));
         this.facade.bulkReplaceConfigurations(items).subscribe({
             next: () => {
-                if (!openConfigAfterSave) {
-                    return;
+                if (openConfigAfterSave) {
+                    this.openDrawer(prop, { currentOrder: nextOrder, configuration });
                 }
-                this.openDrawer(prop, {
-                    currentOrder: nextOrder,
-                    configuration,
-                });
             },
         });
     }
-    /**
-     * Build bulk items from all current configurations, excluding a specific property.
-     * Then call bulk-replace so the backend replaces the entire context atomically.
-     */
     bulkSaveWithout(excludePropertyKey) {
-        const configs = this.facade.configurations();
-        const remaining = configs.filter((c) => c.propertyKey !== excludePropertyKey);
-        const items = this.groupConfigsByProperty(remaining);
+        const configs = this.validConfigurations();
+        const items = this.groupConfigsByProperty(configs.filter((c) => c.propertyKey !== excludePropertyKey));
         this.facade.bulkReplaceConfigurations(items).subscribe();
     }
-    /**
-     * Group flat DisplayConfiguration[] into bulk-replace items grouped by propertyKey.
-     */
     groupConfigsByProperty(configs) {
         const map = new Map();
         for (const c of configs) {
-            if (!map.has(c.propertyKey)) {
+            if (!map.has(c.propertyKey))
                 map.set(c.propertyKey, []);
-            }
             map.get(c.propertyKey).push({
                 areaKey: c.areaKey,
                 order: c.order,
@@ -700,23 +933,16 @@ class Customization {
             displayAreas,
         }));
     }
-    /**
-     * Merge two sets of bulk items. If a propertyKey exists in both,
-     * combine their displayAreas arrays.
-     */
     mergeItems(primary, secondary) {
         const map = new Map();
-        for (const item of primary) {
+        for (const item of primary)
             map.set(item.propertyKey, [...item.displayAreas]);
-        }
         for (const item of secondary) {
             const existing = map.get(item.propertyKey);
-            if (existing) {
+            if (existing)
                 existing.push(...item.displayAreas);
-            }
-            else {
+            else
                 map.set(item.propertyKey, [...item.displayAreas]);
-            }
         }
         return Array.from(map.entries()).map(([propertyKey, displayAreas]) => ({
             propertyKey,
@@ -727,7 +953,7 @@ class Customization {
         const area = this.activeArea();
         if (!area)
             return;
-        const configs = this.facade.configurations();
+        const configs = this.validConfigurations();
         const areaConfigs = configs.filter((c) => c.areaKey === area);
         const nextOrder = existingConfig?.currentOrder ?? areaConfigs.length + 1;
         const displayName = this.getPropertyDisplayName(prop);
@@ -758,6 +984,7 @@ class Customization {
                 false,
             labelPosition,
             showBorder: configuration?.['showBorder'] ?? false,
+            alignEnd: configuration?.['alignEnd'] ?? false,
             showDisplayName: configuration?.['showDisplayName'] ?? true,
             showPhoneNumber: configuration?.['showPhoneNumber'] ?? false,
             showEmail: configuration?.['showEmail'] ?? false,
@@ -769,7 +996,7 @@ class Customization {
             return null;
         const displayName = this.getPropertyDisplayName(prop);
         const viewType = prop.viewType;
-        const entity = {
+        return {
             id: prop.id,
             propertyId: prop.id,
             key: prop.key,
@@ -780,7 +1007,6 @@ class Customization {
             order: config.order,
             configuration: config.configuration,
         };
-        return entity;
     }
     getPropertyDisplayName(prop) {
         if (typeof prop.name === 'string')
@@ -805,7 +1031,7 @@ class Customization {
             case 'Percentage':
                 return '75%';
             case 'Status':
-                return { key: 'sample', display: name, color: '#3B82F6' };
+                return { key: 'sample', display: 'in Progress', color: '#3B82F6' };
             case 'Lookup':
                 return {
                     key: 'sample',
@@ -838,10 +1064,10 @@ class Customization {
                 return name;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Customization, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Customization, isStandalone: true, selector: "mt-customization", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'customization'\">\r\n  <div\r\n    class=\"flex gap-6 h-full w-full overflow-hidden max-[1025px]:min-h-0 max-[1025px]:min-w-0 max-[1025px]:flex-col max-[1025px]:gap-4 max-[1025px]:overflow-x-hidden max-[1025px]:overflow-y-auto\"\r\n  >\r\n    <!-- \u2500\u2500\u2500 Left Sidebar: Attributes Panel \u2500\u2500\u2500 -->\r\n    <mt-card\r\n      class=\"w-1/5 h-full flex flex-col overflow-hidden pb-3 max-[1025px]:h-auto max-[1025px]:max-h-[42vh] max-[1025px]:min-h-0 max-[1025px]:w-full\"\r\n    >\r\n      <ng-template #headless>\r\n        <!-- Header -->\r\n        <h3 class=\"text-xl font-semibold px-4 pt-5 pb-3\">\r\n          {{ t(\"attributes\") }}\r\n        </h3>\r\n\r\n        <!-- Properties List -->\r\n        <div class=\"flex-1 overflow-y-auto px-4 pb-4 space-y-3\">\r\n          <!-- Search Field -->\r\n          <div class=\"sticky top-0 bg-surface-0 mb-0 py-3 pb-2 mb-1 z-10\">\r\n            <mt-text-field\r\n              [placeholder]=\"t('search-properties')\"\r\n              [(ngModel)]=\"searchQuery\"\r\n              icon=\"general.search-lg\"\r\n            />\r\n          </div>\r\n          @if (isLoading()) {\r\n            @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n              <div class=\"flex items-center gap-1 p-1 rounded-lg\">\r\n                <p-skeleton height=\"4rem\" />\r\n              </div>\r\n            }\r\n          } @else {\r\n            @for (prop of filteredProperties(); track prop.id) {\r\n              <div\r\n                class=\"flex items-center gap-3 px-4 rounded-lg border border-gray-300 border-dashed hover:bg-emphasis transition-colors\"\r\n              >\r\n                <!-- Property Name -->\r\n                <div class=\"flex-1 min-w-0 py-4\">\r\n                  <span\r\n                    class=\"text-sm font-medium truncate block\"\r\n                    [class.text-primary]=\"prop.enabled\"\r\n                  >\r\n                    {{ prop.name?.display }}\r\n                  </span>\r\n                </div>\r\n\r\n                <!-- Edit Button (visible when enabled and viewType has configurable fields) -->\r\n                @if (prop.enabled && editableViewTypes.has(prop.viewType)) {\r\n                  <mt-button\r\n                    icon=\"editor.pencil-01\"\r\n                    variant=\"text\"\r\n                    severity=\"primary\"\r\n                    (onClick)=\"onEditProperty(prop)\"\r\n                  />\r\n                }\r\n\r\n                <!-- Toggle -->\r\n                <mt-toggle-field\r\n                  [ngModel]=\"prop.enabled\"\r\n                  (ngModelChange)=\"onPropertyToggle(prop, $event)\"\r\n                  class=\"shrink-0\"\r\n                ></mt-toggle-field>\r\n              </div>\r\n            }\r\n\r\n            @if (filteredProperties().length === 0) {\r\n              <div class=\"py-8 text-center text-muted-color\">\r\n                <p class=\"text-sm\">{{ t(\"no-properties\") }}</p>\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      </ng-template>\r\n    </mt-card>\r\n\r\n    <!-- \u2500\u2500\u2500 Main Area: Preview \u2500\u2500\u2500 -->\r\n    <div\r\n      class=\"w-3/5 flex flex-col gap-4 h-full overflow-hidden items-center max-[1025px]:h-auto max-[1025px]:min-h-0 max-[1025px]:min-w-0 max-[1025px]:w-full max-[1025px]:flex-1 max-[1025px]:items-stretch max-[1025px]:overflow-visible max-[1025px]:pb-4\"\r\n    >\r\n      <!-- Area Tabs -->\r\n      @if (isLoadingAreas()) {\r\n        <div class=\"flex gap-2 py-1\">\r\n          @for (i of [1, 2, 3]; track i) {\r\n            <p-skeleton width=\"6rem\" height=\"2.25rem\" borderRadius=\"8px\" />\r\n          }\r\n        </div>\r\n      } @else if (areasTabs().length > 0) {\r\n        <div class=\"max-[1025px]:w-full\">\r\n          <div\r\n            class=\"max-[1025px]:w-full max-[1025px]:min-w-0 max-[1025px]:overflow-x-auto max-[1025px]:pb-1\"\r\n          >\r\n            <mt-tabs\r\n              class=\"max-[1025px]:min-w-max\"\r\n              [options]=\"areasTabs()\"\r\n              [(active)]=\"activeArea\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Entities Preview -->\r\n      <mt-card\r\n        class=\"w-150 flex-1 overflow-hidden max-[1025px]:w-full max-[1025px]:min-h-[24rem]\"\r\n      >\r\n        <div>\r\n          <ng-template #headless>\r\n            <div class=\"overflow-auto h-full my-2 py-3 px-4\">\r\n              @if (isLoadingPreview()) {\r\n                <div\r\n                  class=\"grid grid-cols-24 gap-x-4 gap-y-5 p-4 max-[640px]:grid-cols-1 max-[640px]:gap-4\"\r\n                >\r\n                  <div\r\n                    class=\"col-span-20 flex items-center gap-2.5 p-3 max-[640px]:col-span-1\"\r\n                  >\r\n                    <p-skeleton size=\"4rem\" shape=\"circle\" />\r\n                    <div class=\"flex flex-col gap-1 flex-1\">\r\n                      <p-skeleton height=\"2.5rem\" borderRadius=\"4px\" />\r\n                    </div>\r\n                  </div>\r\n                  @for (i of [1, 2, 3, 4]; track i) {\r\n                    <div\r\n                      class=\"col-span-8 flex flex-col gap-1.5 p-3 max-[640px]:col-span-1\"\r\n                    >\r\n                      <p-skeleton height=\"4rem\" borderRadius=\"6px\" />\r\n                    </div>\r\n                  }\r\n                </div>\r\n              } @else if (previewEntities().length > 0) {\r\n                <mt-entities-manage\r\n                  [(entities)]=\"previewEntities\"\r\n                  (entitiesReordered)=\"onEntitiesReordered($event)\"\r\n                  (entityResized)=\"onEntityResized($event)\"\r\n                />\r\n              } @else {\r\n                <div\r\n                  class=\"flex items-center justify-center h-full text-muted-color\"\r\n                >\r\n                  <p class=\"text-sm\">{{ t(\"no-preview-items\") }}</p>\r\n                </div>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      </mt-card>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%;width:100%;min-height:0;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { 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: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: EntitiesManage, selector: "mt-entities-manage", inputs: ["entities"], outputs: ["entitiesChange", "entitiesReordered"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Customization, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Customization, isStandalone: true, selector: "mt-customization", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'customization'\">\r\n  <div\r\n    class=\"flex gap-6 h-full w-full overflow-hidden max-[1025px]:min-h-0 max-[1025px]:min-w-0 max-[1025px]:flex-col max-[1025px]:gap-4 max-[1025px]:overflow-x-hidden max-[1025px]:overflow-y-auto\"\r\n  >\r\n    <!-- \u2500\u2500\u2500 Left Sidebar: Attributes Panel \u2500\u2500\u2500 -->\r\n    <mt-card\r\n      class=\"w-1/5 h-full flex flex-col overflow-hidden pb-3 max-[1025px]:h-auto max-[1025px]:max-h-[42vh] max-[1025px]:min-h-0 max-[1025px]:w-full\"\r\n    >\r\n      <ng-template #headless>\r\n        <!-- Header -->\r\n        <h3 class=\"text-xl font-semibold px-4 pt-5 pb-3\">\r\n          {{ t(\"attributes\") }}\r\n        </h3>\r\n\r\n        <!-- Properties List -->\r\n        <div class=\"flex-1 overflow-y-auto px-4 pb-4 space-y-3\">\r\n          <!-- Search Field -->\r\n          <div class=\"sticky top-0 bg-surface-0 mb-0 py-3 pb-2 mb-1 z-10\">\r\n            <mt-text-field\r\n              [placeholder]=\"t('search-properties')\"\r\n              [(ngModel)]=\"searchQuery\"\r\n              icon=\"general.search-lg\"\r\n            />\r\n          </div>\r\n          @if (isLoading()) {\r\n            @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n              <div class=\"flex items-center gap-1 p-1 rounded-lg\">\r\n                <p-skeleton height=\"4rem\" />\r\n              </div>\r\n            }\r\n          } @else {\r\n            @for (prop of filteredProperties(); track prop.id) {\r\n              @if (prop.viewType === 'LeafDetails') {\r\n                <!-- \u2500\u2500 LeafDetails: always first, title is \"Target Statuses\" inside the selector \u2500\u2500 -->\r\n                <div class=\"rounded-lg border border-gray-300 border-dashed px-4 py-3\">\r\n                  <mt-leaf-details-selector\r\n                    [property]=\"prop\"\r\n                    [leafLevels]=\"leafConfigsByProp()[prop.key] ?? {}\"\r\n                    (configChange)=\"onLeafConfigChange(prop, $event)\"\r\n                  />\r\n                </div>\r\n              } @else {\r\n                <!-- \u2500\u2500 Normal property toggle row \u2500\u2500 -->\r\n                <div\r\n                  class=\"flex items-center gap-3 px-4 rounded-lg border border-gray-300 border-dashed hover:bg-emphasis transition-colors\"\r\n                >\r\n                  <!-- Property Name -->\r\n                  <div class=\"flex-1 min-w-0 py-4\">\r\n                    <span\r\n                      class=\"text-sm font-medium truncate block\"\r\n                      [class.text-primary]=\"prop.enabled\"\r\n                    >\r\n                      {{ prop.name?.display }}\r\n                    </span>\r\n                  </div>\r\n\r\n                  <!-- Edit Button (visible when enabled and viewType has configurable fields) -->\r\n                  @if (prop.enabled && editableViewTypes.has(prop.viewType)) {\r\n                    <mt-button\r\n                      icon=\"editor.pencil-01\"\r\n                      variant=\"text\"\r\n                      severity=\"primary\"\r\n                      (onClick)=\"onEditProperty(prop)\"\r\n                    />\r\n                  }\r\n\r\n                  <!-- Toggle -->\r\n                  <mt-toggle-field\r\n                    [ngModel]=\"prop.enabled\"\r\n                    (ngModelChange)=\"onPropertyToggle(prop, $event)\"\r\n                    class=\"shrink-0\"\r\n                    size=\"small\"\r\n                  ></mt-toggle-field>\r\n                </div>\r\n              }\r\n            }\r\n\r\n            @if (filteredProperties().length === 0) {\r\n              <div class=\"py-8 text-center text-muted-color\">\r\n                <p class=\"text-sm\">{{ t(\"no-properties\") }}</p>\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      </ng-template>\r\n    </mt-card>\r\n\r\n    <!-- \u2500\u2500\u2500 Main Area: Preview \u2500\u2500\u2500 -->\r\n    <div\r\n      class=\"w-3/5 flex flex-col gap-4 h-full overflow-hidden items-center max-[1025px]:h-auto max-[1025px]:min-h-0 max-[1025px]:min-w-0 max-[1025px]:w-full max-[1025px]:flex-1 max-[1025px]:items-stretch max-[1025px]:overflow-visible max-[1025px]:pb-4\"\r\n    >\r\n      <!-- Area Tabs -->\r\n      @if (isLoadingAreas()) {\r\n        <div class=\"flex gap-2 py-1\">\r\n          @for (i of [1, 2, 3]; track i) {\r\n            <p-skeleton width=\"6rem\" height=\"2.25rem\" borderRadius=\"8px\" />\r\n          }\r\n        </div>\r\n      } @else if (areasTabs().length > 0) {\r\n        <div class=\"max-[1025px]:w-full\">\r\n          <div\r\n            class=\"max-[1025px]:w-full max-[1025px]:min-w-0 max-[1025px]:overflow-x-auto max-[1025px]:pb-1\"\r\n          >\r\n            <mt-tabs\r\n              class=\"max-[1025px]:min-w-max\"\r\n              [options]=\"areasTabs()\"\r\n              [(active)]=\"activeArea\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Entities Preview -->\r\n      <mt-card\r\n        class=\"w-130 flex-1 overflow-hidden max-[1025px]:w-full max-[1025px]:min-h-[24rem]\"\r\n      >\r\n        <div>\r\n          <ng-template #headless>\r\n            <div class=\"overflow-auto h-full my-2 py-3 px-4\">\r\n              @if (isLoadingPreview()) {\r\n                <div\r\n                  class=\"grid grid-cols-24 gap-x-4 gap-y-5 p-4 max-[640px]:grid-cols-1 max-[640px]:gap-4\"\r\n                >\r\n                  <div\r\n                    class=\"col-span-20 flex items-center gap-2.5 p-3 max-[640px]:col-span-1\"\r\n                  >\r\n                    <p-skeleton size=\"4rem\" shape=\"circle\" />\r\n                    <div class=\"flex flex-col gap-1 flex-1\">\r\n                      <p-skeleton height=\"2.5rem\" borderRadius=\"4px\" />\r\n                    </div>\r\n                  </div>\r\n                  @for (i of [1, 2, 3, 4]; track i) {\r\n                    <div\r\n                      class=\"col-span-8 flex flex-col gap-1.5 p-3 max-[640px]:col-span-1\"\r\n                    >\r\n                      <p-skeleton height=\"4rem\" borderRadius=\"6px\" />\r\n                    </div>\r\n                  }\r\n                </div>\r\n              } @else if (previewEntities().length > 0) {\r\n                <mt-entities-manage\r\n                  [(entities)]=\"previewEntities\"\r\n                  (entitiesReordered)=\"onEntitiesReordered($event)\"\r\n                  (entityResized)=\"onEntityResized($event)\"\r\n                  (entityClicked)=\"onEntityClicked($event)\"\r\n                />\r\n              } @else {\r\n                <div\r\n                  class=\"flex flex-col items-center justify-center h-full text-muted-color gap-3 text-center px-4\"\r\n                >\r\n                  <mt-icon\r\n                    name=\"general.eye-off\"\r\n                    size=\"xl\"\r\n                    class=\"opacity-40\"\r\n                  />\r\n                  <p class=\"text-sm font-medium\">{{ t(\"no-preview-items\") }}</p>\r\n                  <p class=\"text-xs\">{{ t(\"no-preview-items-hint\") }}</p>\r\n                </div>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      </mt-card>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%;width:100%;min-height:0;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "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: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: EntitiesManage, selector: "mt-entities-manage", inputs: ["entities"], outputs: ["entitiesChange", "entitiesReordered", "entityClicked"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: LeafDetailsSelector, selector: "mt-leaf-details-selector", inputs: ["property", "leafLevels"], outputs: ["configChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Customization, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Customization, decorators: [{
             type: Component,
             args: [{ selector: 'mt-customization', standalone: true, imports: [
                         FormsModule,
@@ -853,7 +1079,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         Tabs,
                         Skeleton,
                         EntitiesManage,
-                    ], template: "<ng-container *transloco=\"let t; prefix: 'customization'\">\r\n  <div\r\n    class=\"flex gap-6 h-full w-full overflow-hidden max-[1025px]:min-h-0 max-[1025px]:min-w-0 max-[1025px]:flex-col max-[1025px]:gap-4 max-[1025px]:overflow-x-hidden max-[1025px]:overflow-y-auto\"\r\n  >\r\n    <!-- \u2500\u2500\u2500 Left Sidebar: Attributes Panel \u2500\u2500\u2500 -->\r\n    <mt-card\r\n      class=\"w-1/5 h-full flex flex-col overflow-hidden pb-3 max-[1025px]:h-auto max-[1025px]:max-h-[42vh] max-[1025px]:min-h-0 max-[1025px]:w-full\"\r\n    >\r\n      <ng-template #headless>\r\n        <!-- Header -->\r\n        <h3 class=\"text-xl font-semibold px-4 pt-5 pb-3\">\r\n          {{ t(\"attributes\") }}\r\n        </h3>\r\n\r\n        <!-- Properties List -->\r\n        <div class=\"flex-1 overflow-y-auto px-4 pb-4 space-y-3\">\r\n          <!-- Search Field -->\r\n          <div class=\"sticky top-0 bg-surface-0 mb-0 py-3 pb-2 mb-1 z-10\">\r\n            <mt-text-field\r\n              [placeholder]=\"t('search-properties')\"\r\n              [(ngModel)]=\"searchQuery\"\r\n              icon=\"general.search-lg\"\r\n            />\r\n          </div>\r\n          @if (isLoading()) {\r\n            @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n              <div class=\"flex items-center gap-1 p-1 rounded-lg\">\r\n                <p-skeleton height=\"4rem\" />\r\n              </div>\r\n            }\r\n          } @else {\r\n            @for (prop of filteredProperties(); track prop.id) {\r\n              <div\r\n                class=\"flex items-center gap-3 px-4 rounded-lg border border-gray-300 border-dashed hover:bg-emphasis transition-colors\"\r\n              >\r\n                <!-- Property Name -->\r\n                <div class=\"flex-1 min-w-0 py-4\">\r\n                  <span\r\n                    class=\"text-sm font-medium truncate block\"\r\n                    [class.text-primary]=\"prop.enabled\"\r\n                  >\r\n                    {{ prop.name?.display }}\r\n                  </span>\r\n                </div>\r\n\r\n                <!-- Edit Button (visible when enabled and viewType has configurable fields) -->\r\n                @if (prop.enabled && editableViewTypes.has(prop.viewType)) {\r\n                  <mt-button\r\n                    icon=\"editor.pencil-01\"\r\n                    variant=\"text\"\r\n                    severity=\"primary\"\r\n                    (onClick)=\"onEditProperty(prop)\"\r\n                  />\r\n                }\r\n\r\n                <!-- Toggle -->\r\n                <mt-toggle-field\r\n                  [ngModel]=\"prop.enabled\"\r\n                  (ngModelChange)=\"onPropertyToggle(prop, $event)\"\r\n                  class=\"shrink-0\"\r\n                ></mt-toggle-field>\r\n              </div>\r\n            }\r\n\r\n            @if (filteredProperties().length === 0) {\r\n              <div class=\"py-8 text-center text-muted-color\">\r\n                <p class=\"text-sm\">{{ t(\"no-properties\") }}</p>\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      </ng-template>\r\n    </mt-card>\r\n\r\n    <!-- \u2500\u2500\u2500 Main Area: Preview \u2500\u2500\u2500 -->\r\n    <div\r\n      class=\"w-3/5 flex flex-col gap-4 h-full overflow-hidden items-center max-[1025px]:h-auto max-[1025px]:min-h-0 max-[1025px]:min-w-0 max-[1025px]:w-full max-[1025px]:flex-1 max-[1025px]:items-stretch max-[1025px]:overflow-visible max-[1025px]:pb-4\"\r\n    >\r\n      <!-- Area Tabs -->\r\n      @if (isLoadingAreas()) {\r\n        <div class=\"flex gap-2 py-1\">\r\n          @for (i of [1, 2, 3]; track i) {\r\n            <p-skeleton width=\"6rem\" height=\"2.25rem\" borderRadius=\"8px\" />\r\n          }\r\n        </div>\r\n      } @else if (areasTabs().length > 0) {\r\n        <div class=\"max-[1025px]:w-full\">\r\n          <div\r\n            class=\"max-[1025px]:w-full max-[1025px]:min-w-0 max-[1025px]:overflow-x-auto max-[1025px]:pb-1\"\r\n          >\r\n            <mt-tabs\r\n              class=\"max-[1025px]:min-w-max\"\r\n              [options]=\"areasTabs()\"\r\n              [(active)]=\"activeArea\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Entities Preview -->\r\n      <mt-card\r\n        class=\"w-150 flex-1 overflow-hidden max-[1025px]:w-full max-[1025px]:min-h-[24rem]\"\r\n      >\r\n        <div>\r\n          <ng-template #headless>\r\n            <div class=\"overflow-auto h-full my-2 py-3 px-4\">\r\n              @if (isLoadingPreview()) {\r\n                <div\r\n                  class=\"grid grid-cols-24 gap-x-4 gap-y-5 p-4 max-[640px]:grid-cols-1 max-[640px]:gap-4\"\r\n                >\r\n                  <div\r\n                    class=\"col-span-20 flex items-center gap-2.5 p-3 max-[640px]:col-span-1\"\r\n                  >\r\n                    <p-skeleton size=\"4rem\" shape=\"circle\" />\r\n                    <div class=\"flex flex-col gap-1 flex-1\">\r\n                      <p-skeleton height=\"2.5rem\" borderRadius=\"4px\" />\r\n                    </div>\r\n                  </div>\r\n                  @for (i of [1, 2, 3, 4]; track i) {\r\n                    <div\r\n                      class=\"col-span-8 flex flex-col gap-1.5 p-3 max-[640px]:col-span-1\"\r\n                    >\r\n                      <p-skeleton height=\"4rem\" borderRadius=\"6px\" />\r\n                    </div>\r\n                  }\r\n                </div>\r\n              } @else if (previewEntities().length > 0) {\r\n                <mt-entities-manage\r\n                  [(entities)]=\"previewEntities\"\r\n                  (entitiesReordered)=\"onEntitiesReordered($event)\"\r\n                  (entityResized)=\"onEntityResized($event)\"\r\n                />\r\n              } @else {\r\n                <div\r\n                  class=\"flex items-center justify-center h-full text-muted-color\"\r\n                >\r\n                  <p class=\"text-sm\">{{ t(\"no-preview-items\") }}</p>\r\n                </div>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      </mt-card>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%;width:100%;min-height:0;min-width:0}\n"] }]
+                        Icon,
+                        LeafDetailsSelector,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'customization'\">\r\n  <div\r\n    class=\"flex gap-6 h-full w-full overflow-hidden max-[1025px]:min-h-0 max-[1025px]:min-w-0 max-[1025px]:flex-col max-[1025px]:gap-4 max-[1025px]:overflow-x-hidden max-[1025px]:overflow-y-auto\"\r\n  >\r\n    <!-- \u2500\u2500\u2500 Left Sidebar: Attributes Panel \u2500\u2500\u2500 -->\r\n    <mt-card\r\n      class=\"w-1/5 h-full flex flex-col overflow-hidden pb-3 max-[1025px]:h-auto max-[1025px]:max-h-[42vh] max-[1025px]:min-h-0 max-[1025px]:w-full\"\r\n    >\r\n      <ng-template #headless>\r\n        <!-- Header -->\r\n        <h3 class=\"text-xl font-semibold px-4 pt-5 pb-3\">\r\n          {{ t(\"attributes\") }}\r\n        </h3>\r\n\r\n        <!-- Properties List -->\r\n        <div class=\"flex-1 overflow-y-auto px-4 pb-4 space-y-3\">\r\n          <!-- Search Field -->\r\n          <div class=\"sticky top-0 bg-surface-0 mb-0 py-3 pb-2 mb-1 z-10\">\r\n            <mt-text-field\r\n              [placeholder]=\"t('search-properties')\"\r\n              [(ngModel)]=\"searchQuery\"\r\n              icon=\"general.search-lg\"\r\n            />\r\n          </div>\r\n          @if (isLoading()) {\r\n            @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n              <div class=\"flex items-center gap-1 p-1 rounded-lg\">\r\n                <p-skeleton height=\"4rem\" />\r\n              </div>\r\n            }\r\n          } @else {\r\n            @for (prop of filteredProperties(); track prop.id) {\r\n              @if (prop.viewType === 'LeafDetails') {\r\n                <!-- \u2500\u2500 LeafDetails: always first, title is \"Target Statuses\" inside the selector \u2500\u2500 -->\r\n                <div class=\"rounded-lg border border-gray-300 border-dashed px-4 py-3\">\r\n                  <mt-leaf-details-selector\r\n                    [property]=\"prop\"\r\n                    [leafLevels]=\"leafConfigsByProp()[prop.key] ?? {}\"\r\n                    (configChange)=\"onLeafConfigChange(prop, $event)\"\r\n                  />\r\n                </div>\r\n              } @else {\r\n                <!-- \u2500\u2500 Normal property toggle row \u2500\u2500 -->\r\n                <div\r\n                  class=\"flex items-center gap-3 px-4 rounded-lg border border-gray-300 border-dashed hover:bg-emphasis transition-colors\"\r\n                >\r\n                  <!-- Property Name -->\r\n                  <div class=\"flex-1 min-w-0 py-4\">\r\n                    <span\r\n                      class=\"text-sm font-medium truncate block\"\r\n                      [class.text-primary]=\"prop.enabled\"\r\n                    >\r\n                      {{ prop.name?.display }}\r\n                    </span>\r\n                  </div>\r\n\r\n                  <!-- Edit Button (visible when enabled and viewType has configurable fields) -->\r\n                  @if (prop.enabled && editableViewTypes.has(prop.viewType)) {\r\n                    <mt-button\r\n                      icon=\"editor.pencil-01\"\r\n                      variant=\"text\"\r\n                      severity=\"primary\"\r\n                      (onClick)=\"onEditProperty(prop)\"\r\n                    />\r\n                  }\r\n\r\n                  <!-- Toggle -->\r\n                  <mt-toggle-field\r\n                    [ngModel]=\"prop.enabled\"\r\n                    (ngModelChange)=\"onPropertyToggle(prop, $event)\"\r\n                    class=\"shrink-0\"\r\n                    size=\"small\"\r\n                  ></mt-toggle-field>\r\n                </div>\r\n              }\r\n            }\r\n\r\n            @if (filteredProperties().length === 0) {\r\n              <div class=\"py-8 text-center text-muted-color\">\r\n                <p class=\"text-sm\">{{ t(\"no-properties\") }}</p>\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      </ng-template>\r\n    </mt-card>\r\n\r\n    <!-- \u2500\u2500\u2500 Main Area: Preview \u2500\u2500\u2500 -->\r\n    <div\r\n      class=\"w-3/5 flex flex-col gap-4 h-full overflow-hidden items-center max-[1025px]:h-auto max-[1025px]:min-h-0 max-[1025px]:min-w-0 max-[1025px]:w-full max-[1025px]:flex-1 max-[1025px]:items-stretch max-[1025px]:overflow-visible max-[1025px]:pb-4\"\r\n    >\r\n      <!-- Area Tabs -->\r\n      @if (isLoadingAreas()) {\r\n        <div class=\"flex gap-2 py-1\">\r\n          @for (i of [1, 2, 3]; track i) {\r\n            <p-skeleton width=\"6rem\" height=\"2.25rem\" borderRadius=\"8px\" />\r\n          }\r\n        </div>\r\n      } @else if (areasTabs().length > 0) {\r\n        <div class=\"max-[1025px]:w-full\">\r\n          <div\r\n            class=\"max-[1025px]:w-full max-[1025px]:min-w-0 max-[1025px]:overflow-x-auto max-[1025px]:pb-1\"\r\n          >\r\n            <mt-tabs\r\n              class=\"max-[1025px]:min-w-max\"\r\n              [options]=\"areasTabs()\"\r\n              [(active)]=\"activeArea\"\r\n              optionLabel=\"label\"\r\n              optionValue=\"value\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Entities Preview -->\r\n      <mt-card\r\n        class=\"w-130 flex-1 overflow-hidden max-[1025px]:w-full max-[1025px]:min-h-[24rem]\"\r\n      >\r\n        <div>\r\n          <ng-template #headless>\r\n            <div class=\"overflow-auto h-full my-2 py-3 px-4\">\r\n              @if (isLoadingPreview()) {\r\n                <div\r\n                  class=\"grid grid-cols-24 gap-x-4 gap-y-5 p-4 max-[640px]:grid-cols-1 max-[640px]:gap-4\"\r\n                >\r\n                  <div\r\n                    class=\"col-span-20 flex items-center gap-2.5 p-3 max-[640px]:col-span-1\"\r\n                  >\r\n                    <p-skeleton size=\"4rem\" shape=\"circle\" />\r\n                    <div class=\"flex flex-col gap-1 flex-1\">\r\n                      <p-skeleton height=\"2.5rem\" borderRadius=\"4px\" />\r\n                    </div>\r\n                  </div>\r\n                  @for (i of [1, 2, 3, 4]; track i) {\r\n                    <div\r\n                      class=\"col-span-8 flex flex-col gap-1.5 p-3 max-[640px]:col-span-1\"\r\n                    >\r\n                      <p-skeleton height=\"4rem\" borderRadius=\"6px\" />\r\n                    </div>\r\n                  }\r\n                </div>\r\n              } @else if (previewEntities().length > 0) {\r\n                <mt-entities-manage\r\n                  [(entities)]=\"previewEntities\"\r\n                  (entitiesReordered)=\"onEntitiesReordered($event)\"\r\n                  (entityResized)=\"onEntityResized($event)\"\r\n                  (entityClicked)=\"onEntityClicked($event)\"\r\n                />\r\n              } @else {\r\n                <div\r\n                  class=\"flex flex-col items-center justify-center h-full text-muted-color gap-3 text-center px-4\"\r\n                >\r\n                  <mt-icon\r\n                    name=\"general.eye-off\"\r\n                    size=\"xl\"\r\n                    class=\"opacity-40\"\r\n                  />\r\n                  <p class=\"text-sm font-medium\">{{ t(\"no-preview-items\") }}</p>\r\n                  <p class=\"text-xs\">{{ t(\"no-preview-items-hint\") }}</p>\r\n                </div>\r\n              }\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      </mt-card>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%;width:100%;min-height:0;min-width:0}\n"] }]
         }], ctorParameters: () => [] });
 
 /**