@masterteam/components 0.0.141 → 0.0.143

package/fesm2022/masterteam-components-entities.mjs

@@ -1,14 +1,15 @@
 import * as i0 from '@angular/core';
 import { input, computed, ChangeDetectionStrategy, Component, inject, signal, effect, ElementRef, NgZone, output, Directive, model } from '@angular/core';
-import { TruncateTooltip } from '@masterteam/components/tooltip';
+import { TruncateTooltip, Tooltip } from '@masterteam/components/tooltip';
+import { Icon } from '@masterteam/icons';
 import { HttpContext, HttpClient } from '@angular/common/http';
 import { Avatar } from '@masterteam/components/avatar';
-import { Button } from '@masterteam/components/button';
 import { SecureImagePipe, UploadField } from '@masterteam/components/upload-field';
 import { REQUEST_CONTEXT } from '@masterteam/components';
 import { Progress } from '@masterteam/components/progress';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { Button } from '@masterteam/components/button';
 import { forkJoin, finalize, of, take, switchMap, EMPTY, map, catchError } from 'rxjs';
 import * as i1$1 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
@@ -46,10 +47,17 @@ function resolveEntityLabelPosition(configuration) {
 
 class EntityField {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    labelIconName = input(null, ...(ngDevMode ? [{ debugName: "labelIconName" }] : /* istanbul ignore next */ []));
     configuration = input(...(ngDevMode ? [undefined, { debugName: "configuration" }] : /* istanbul ignore next */ []));
     gap = input('compact', ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
     hideLabel = computed(() => isEntityLabelHidden(this.configuration()), ...(ngDevMode ? [{ debugName: "hideLabel" }] : /* istanbul ignore next */ []));
     labelPosition = computed(() => resolveEntityLabelPosition(this.configuration()), ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    labelContainerClass = computed(() => {
+        const justifyClass = isEntityAlignEnd(this.configuration())
+            ? 'justify-end'
+            : '';
+        return `flex min-w-0 items-center gap-1 text-sm text-gray-500 ${justifyClass}`.trimEnd();
+    }, ...(ngDevMode ? [{ debugName: "labelContainerClass" }] : /* istanbul ignore next */ []));
     containerClass = computed(() => {
         const gapClass = this.gap() === 'relaxed'
             ? 'gap-2'
@@ -63,38 +71,48 @@ class EntityField {
         return `flex min-w-0 ${directionClass} ${gapClass} ${alignClass}`.trimEnd();
     }, ...(ngDevMode ? [{ debugName: "containerClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityField, isStandalone: true, selector: "mt-entity-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block min-w-0 w-full" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityField, isStandalone: true, selector: "mt-entity-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelIconName: { classPropertyName: "labelIconName", publicName: "labelIconName", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block min-w-0 w-full" }, ngImport: i0, template: `
     <div [class]="containerClass()">
       <ng-content />
       @if (!hideLabel()) {
-        <span
-          class="block min-w-0 truncate text-sm text-gray-500"
-          mtTruncateTooltip
-          tooltipPosition="top"
-        >
-          {{ label() }}
-        </span>
+        <div [class]="labelContainerClass()">
+          @if (labelIconName(); as iconName) {
+            <mt-icon [icon]="iconName" size="xs" class="shrink-0" />
+          }
+          <span
+            class="block min-w-0 truncate"
+            mtTruncateTooltip
+            tooltipPosition="top"
+          >
+            {{ label() }}
+          </span>
+        </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityField, decorators: [{
             type: Component,
             args: [{
                     selector: 'mt-entity-field',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [TruncateTooltip],
+                    imports: [TruncateTooltip, Icon],
                     template: `
     <div [class]="containerClass()">
       <ng-content />
       @if (!hideLabel()) {
-        <span
-          class="block min-w-0 truncate text-sm text-gray-500"
-          mtTruncateTooltip
-          tooltipPosition="top"
-        >
-          {{ label() }}
-        </span>
+        <div [class]="labelContainerClass()">
+          @if (labelIconName(); as iconName) {
+            <mt-icon [icon]="iconName" size="xs" class="shrink-0" />
+          }
+          <span
+            class="block min-w-0 truncate"
+            mtTruncateTooltip
+            tooltipPosition="top"
+          >
+            {{ label() }}
+          </span>
+        </div>
       }
     </div>
   `,
@@ -102,7 +120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         class: 'block min-w-0 w-full',
                     },
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelIconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelIconName", required: false }] }], configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }] } });
 
 class EntityText {
     /** Full entity data object */
@@ -119,7 +137,7 @@ class EntityText {
         return displayOrPlaceholder(this.value());
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EntityText, isStandalone: true, selector: "mt-entity-text", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n>\r\n  <div\r\n    class=\"min-w-0 truncate text-sm font-semibold\"\r\n    mtTruncateTooltip\r\n    tooltipPosition=\"top\"\r\n    [innerHTML]=\"displayValue()\"\r\n  ></div>\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "configuration", "gap"] }, { kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EntityText, isStandalone: true, selector: "mt-entity-text", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n>\r\n  <div\r\n    class=\"min-w-0 truncate text-sm font-semibold\"\r\n    mtTruncateTooltip\r\n    tooltipPosition=\"top\"\r\n    [innerHTML]=\"displayValue()\"\r\n  ></div>\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }, { kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityText, decorators: [{
             type: Component,
@@ -141,7 +159,7 @@ class EntityDate {
         return displayOrPlaceholder(this.value());
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityDate, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EntityDate, isStandalone: true, selector: "mt-entity-date", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n>\r\n  <span\r\n    class=\"block min-w-0 truncate text-sm font-semibold\"\r\n    mtTruncateTooltip\r\n    tooltipPosition=\"top\"\r\n  >\r\n    {{ displayValue() }}\r\n  </span>\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "configuration", "gap"] }, { kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EntityDate, isStandalone: true, selector: "mt-entity-date", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n>\r\n  <span\r\n    class=\"block min-w-0 truncate text-sm font-semibold\"\r\n    mtTruncateTooltip\r\n    tooltipPosition=\"top\"\r\n  >\r\n    {{ displayValue() }}\r\n  </span>\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }, { kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityDate, decorators: [{
             type: Component,
@@ -180,11 +198,11 @@ class EntityStatus {
         return `rgba(${r}, ${g}, ${b}, ${alpha})`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityStatus, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityStatus, isStandalone: true, selector: "mt-entity-status", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n  gap=\"normal\"\r\n>\r\n  @if (statusValue(); as status) {\r\n    <span\r\n      class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit\"\r\n      [style]=\"badgeStyle()\"\r\n    >\r\n      {{ statusLabel() }}\r\n    </span>\r\n  } @else {\r\n    <span\r\n      class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit text-gray-500 bg-gray-100\"\r\n    >\r\n      {{ emptyLabel }}\r\n    </span>\r\n  }\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "configuration", "gap"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityStatus, isStandalone: true, selector: "mt-entity-status", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n  gap=\"normal\"\r\n>\r\n  @if (statusValue(); as status) {\n    <span\n      class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit\"\n      [style]=\"badgeStyle()\"\n    >\n      {{ statusLabel() }}\n    </span>\n  } @else {\n    <span\n      class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit text-gray-500 bg-gray-100\"\n    >\n      {{ emptyLabel }}\n    </span>\n  }\n</mt-entity-field>\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityStatus, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entity-status', standalone: true, imports: [EntityField], template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n  gap=\"normal\"\r\n>\r\n  @if (statusValue(); as status) {\r\n    <span\r\n      class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit\"\r\n      [style]=\"badgeStyle()\"\r\n    >\r\n      {{ statusLabel() }}\r\n    </span>\r\n  } @else {\r\n    <span\r\n      class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit text-gray-500 bg-gray-100\"\r\n    >\r\n      {{ emptyLabel }}\r\n    </span>\r\n  }\r\n</mt-entity-field>\r\n" }]
+            args: [{ selector: 'mt-entity-status', standalone: true, imports: [EntityField], template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n  gap=\"normal\"\r\n>\r\n  @if (statusValue(); as status) {\n    <span\n      class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit\"\n      [style]=\"badgeStyle()\"\n    >\n      {{ statusLabel() }}\n    </span>\n  } @else {\n    <span\n      class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit text-gray-500 bg-gray-100\"\n    >\n      {{ emptyLabel }}\n    </span>\n  }\n</mt-entity-field>\n" }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
 class EntityUser {
@@ -215,11 +233,11 @@ class EntityUser {
     hasContactInfo = computed(() => (this.showPhoneNumber() && !!this.phoneNumber()) ||
         (this.showEmail() && !!this.email()), ...(ngDevMode ? [{ debugName: "hasContactInfo" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityUser, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityUser, isStandalone: true, selector: "mt-entity-user", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex items-center gap-2\">\r\n  <mt-avatar\r\n    [image]=\"\r\n      userPhoto()\r\n        ? (userPhoto() | secureImage: true : httpContext : 'avatar/')\r\n        : ''\r\n    \"\r\n    [icon]=\"'user.user-01'\"\r\n    styleClass=\"w-10! h-10! text-white! text-xl!  bg-primary-500!\"\r\n  ></mt-avatar>\r\n\r\n  @if (showDisplayName()) {\r\n    <div class=\"flex flex-col min-w-0 flex-1\">\r\n      <span class=\"text-sm text-gray-700 truncate\">{{ userName() }}</span>\r\n      @if (labelText()) {\r\n        <span class=\"text-xs text-gray-500 truncate\">{{ labelText() }}</span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (hasContactInfo()) {\r\n    <div class=\"flex items-center gap-1 ms-auto shrink-0\">\r\n      @if (showPhoneNumber() && phoneNumber()) {\r\n        <a [href]=\"'tel:' + phoneNumber()\" [title]=\"phoneNumber()\">\r\n          <mt-button\r\n            icon=\"communication.phone\"\r\n            [rounded]=\"true\"\r\n            [text]=\"true\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            [tooltip]=\"phoneNumber()\"\r\n          />\r\n        </a>\r\n      }\r\n      @if (showEmail() && email()) {\r\n        <a [href]=\"'mailto:' + email()\" [title]=\"email()\">\r\n          <mt-button\r\n            icon=\"communication.mail-01\"\r\n            [rounded]=\"true\"\r\n            [text]=\"true\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            [tooltip]=\"email()\"\r\n          />\r\n        </a>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityUser, isStandalone: true, selector: "mt-entity-user", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex items-center gap-2\">\r\n  <mt-avatar\r\n    [image]=\"\r\n      userPhoto()\r\n        ? (userPhoto() | secureImage: true : httpContext : 'avatar/')\r\n        : ''\r\n    \"\r\n    [icon]=\"'user.user-01'\"\r\n    styleClass=\"w-10! h-10! text-white! text-xxl!  bg-primary-500!\"\r\n  ></mt-avatar>\r\n\r\n  @if (showDisplayName()) {\r\n    <div class=\"flex flex-col min-w-0 flex-1\">\r\n      <span class=\"text-sm text-gray-700 truncate\">{{ userName() }}</span>\r\n      @if (labelText()) {\r\n        <span class=\"text-xs text-gray-500 truncate\">{{ labelText() }}</span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (hasContactInfo()) {\r\n    <div class=\"flex items-center gap-1 ms-auto shrink-0\">\r\n      @if (showPhoneNumber() && phoneNumber()) {\r\n        <a\r\n          [href]=\"'tel:' + phoneNumber()\"\r\n          [attr.aria-label]=\"phoneNumber()\"\r\n          [mtTooltip]=\"phoneNumber()\"\r\n          tooltipPosition=\"top\"\r\n          class=\"inline-flex\"\r\n        >\r\n          <mt-avatar\r\n            icon=\"communication.phone\"\r\n            badgeSeverity=\"secondary\"\r\n          />\r\n        </a>\r\n      }\r\n      @if (showEmail() && email()) {\r\n        <a\r\n          [href]=\"'mailto:' + email()\"\r\n          [attr.aria-label]=\"email()\"\r\n          [mtTooltip]=\"email()\"\r\n          tooltipPosition=\"top\"\r\n          class=\"inline-flex\"\r\n        >\r\n          <mt-avatar\r\n            icon=\"communication.mail-01\"\r\n            badgeSeverity=\"secondary\"\r\n          />\r\n        </a>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityUser, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entity-user', standalone: true, imports: [Avatar, Button, SecureImagePipe], template: "<div class=\"flex items-center gap-2\">\r\n  <mt-avatar\r\n    [image]=\"\r\n      userPhoto()\r\n        ? (userPhoto() | secureImage: true : httpContext : 'avatar/')\r\n        : ''\r\n    \"\r\n    [icon]=\"'user.user-01'\"\r\n    styleClass=\"w-10! h-10! text-white! text-xl!  bg-primary-500!\"\r\n  ></mt-avatar>\r\n\r\n  @if (showDisplayName()) {\r\n    <div class=\"flex flex-col min-w-0 flex-1\">\r\n      <span class=\"text-sm text-gray-700 truncate\">{{ userName() }}</span>\r\n      @if (labelText()) {\r\n        <span class=\"text-xs text-gray-500 truncate\">{{ labelText() }}</span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (hasContactInfo()) {\r\n    <div class=\"flex items-center gap-1 ms-auto shrink-0\">\r\n      @if (showPhoneNumber() && phoneNumber()) {\r\n        <a [href]=\"'tel:' + phoneNumber()\" [title]=\"phoneNumber()\">\r\n          <mt-button\r\n            icon=\"communication.phone\"\r\n            [rounded]=\"true\"\r\n            [text]=\"true\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            [tooltip]=\"phoneNumber()\"\r\n          />\r\n        </a>\r\n      }\r\n      @if (showEmail() && email()) {\r\n        <a [href]=\"'mailto:' + email()\" [title]=\"email()\">\r\n          <mt-button\r\n            icon=\"communication.mail-01\"\r\n            [rounded]=\"true\"\r\n            [text]=\"true\"\r\n            severity=\"secondary\"\r\n            size=\"small\"\r\n            [tooltip]=\"email()\"\r\n          />\r\n        </a>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'mt-entity-user', standalone: true, imports: [Avatar, Tooltip, SecureImagePipe], template: "<div class=\"flex items-center gap-2\">\r\n  <mt-avatar\r\n    [image]=\"\r\n      userPhoto()\r\n        ? (userPhoto() | secureImage: true : httpContext : 'avatar/')\r\n        : ''\r\n    \"\r\n    [icon]=\"'user.user-01'\"\r\n    styleClass=\"w-10! h-10! text-white! text-xxl!  bg-primary-500!\"\r\n  ></mt-avatar>\r\n\r\n  @if (showDisplayName()) {\r\n    <div class=\"flex flex-col min-w-0 flex-1\">\r\n      <span class=\"text-sm text-gray-700 truncate\">{{ userName() }}</span>\r\n      @if (labelText()) {\r\n        <span class=\"text-xs text-gray-500 truncate\">{{ labelText() }}</span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (hasContactInfo()) {\r\n    <div class=\"flex items-center gap-1 ms-auto shrink-0\">\r\n      @if (showPhoneNumber() && phoneNumber()) {\r\n        <a\r\n          [href]=\"'tel:' + phoneNumber()\"\r\n          [attr.aria-label]=\"phoneNumber()\"\r\n          [mtTooltip]=\"phoneNumber()\"\r\n          tooltipPosition=\"top\"\r\n          class=\"inline-flex\"\r\n        >\r\n          <mt-avatar\r\n            icon=\"communication.phone\"\r\n            badgeSeverity=\"secondary\"\r\n          />\r\n        </a>\r\n      }\r\n      @if (showEmail() && email()) {\r\n        <a\r\n          [href]=\"'mailto:' + email()\"\r\n          [attr.aria-label]=\"email()\"\r\n          [mtTooltip]=\"email()\"\r\n          tooltipPosition=\"top\"\r\n          class=\"inline-flex\"\r\n        >\r\n          <mt-avatar\r\n            icon=\"communication.mail-01\"\r\n            badgeSeverity=\"secondary\"\r\n          />\r\n        </a>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 class EntityPercentage {
@@ -272,11 +290,11 @@ class EntityPercentage {
         return Number.isNaN(numericValue) ? null : numericValue;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityPercentage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityPercentage, isStandalone: true, selector: "mt-entity-percentage", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rawValue: { classPropertyName: "rawValue", publicName: "rawValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-1\">\r\n  <div class=\"flex items-center justify-between\">\r\n    @if (!hideName()) {\r\n      <span class=\"text-xs font-semibold\">{{ displayName() }}</span>\r\n    }\r\n    <span class=\"text-xs font-bold\" [class.ms-auto]=\"hideName()\">{{\r\n      displayValue()\r\n    }}</span>\r\n  </div>\r\n  @if (hasNumericValue()) {\r\n    <mt-progress\r\n      [value]=\"numericValue()\"\r\n      [showLabel]=\"false\"\r\n      [height]=\"9\"\r\n      [maxValue]=\"maxValue()\"\r\n      [color]=\"progressColor()\"\r\n    >\r\n    </mt-progress>\r\n  } @else {\r\n    <div class=\"h-[9px] rounded-full bg-gray-200\"></div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: Progress, selector: "mt-progress", inputs: ["value", "mode", "showLabel", "unit", "color", "minValue", "maxValue", "height", "circleSize", "strokeWidth", "customClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityPercentage, isStandalone: true, selector: "mt-entity-percentage", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rawValue: { classPropertyName: "rawValue", publicName: "rawValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-1\">\n  <div class=\"flex items-center justify-between\">\n    @if (!hideName()) {\n      <span class=\"text-xs font-semibold\">{{ displayName() }}</span>\n    }\n    <span class=\"text-xs font-bold\" [class.ms-auto]=\"hideName()\">{{\n      displayValue()\n    }}</span>\n  </div>\n  @if (hasNumericValue()) {\n    <mt-progress\n      [value]=\"numericValue()\"\n      [showLabel]=\"false\"\n      [height]=\"9\"\n      [maxValue]=\"maxValue()\"\n      [color]=\"progressColor()\"\n    >\n    </mt-progress>\n  } @else {\n    <div class=\"h-[9px] rounded-full bg-gray-200\"></div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Progress, selector: "mt-progress", inputs: ["value", "mode", "showLabel", "unit", "color", "minValue", "maxValue", "height", "circleSize", "strokeWidth", "customClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityPercentage, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entity-percentage', standalone: true, imports: [Progress], template: "<div class=\"flex flex-col gap-1\">\r\n  <div class=\"flex items-center justify-between\">\r\n    @if (!hideName()) {\r\n      <span class=\"text-xs font-semibold\">{{ displayName() }}</span>\r\n    }\r\n    <span class=\"text-xs font-bold\" [class.ms-auto]=\"hideName()\">{{\r\n      displayValue()\r\n    }}</span>\r\n  </div>\r\n  @if (hasNumericValue()) {\r\n    <mt-progress\r\n      [value]=\"numericValue()\"\r\n      [showLabel]=\"false\"\r\n      [height]=\"9\"\r\n      [maxValue]=\"maxValue()\"\r\n      [color]=\"progressColor()\"\r\n    >\r\n    </mt-progress>\r\n  } @else {\r\n    <div class=\"h-[9px] rounded-full bg-gray-200\"></div>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'mt-entity-percentage', standalone: true, imports: [Progress], template: "<div class=\"flex flex-col gap-1\">\n  <div class=\"flex items-center justify-between\">\n    @if (!hideName()) {\n      <span class=\"text-xs font-semibold\">{{ displayName() }}</span>\n    }\n    <span class=\"text-xs font-bold\" [class.ms-auto]=\"hideName()\">{{\n      displayValue()\n    }}</span>\n  </div>\n  @if (hasNumericValue()) {\n    <mt-progress\n      [value]=\"numericValue()\"\n      [showLabel]=\"false\"\n      [height]=\"9\"\n      [maxValue]=\"maxValue()\"\n      [color]=\"progressColor()\"\n    >\n    </mt-progress>\n  } @else {\n    <div class=\"h-[9px] rounded-full bg-gray-200\"></div>\n  }\n</div>\n" }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], rawValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rawValue", required: false }] }] } });
 
 class EntityCurrency {
@@ -294,7 +312,7 @@ class EntityCurrency {
         return displayOrPlaceholder(this.value());
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityCurrency, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EntityCurrency, isStandalone: true, selector: "mt-entity-currency", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n>\r\n  <span\r\n    class=\"block min-w-0 truncate text-sm font-semibold\"\r\n    mtTruncateTooltip\r\n    tooltipPosition=\"top\"\r\n  >\r\n    {{ displayValue() }}\r\n  </span>\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "configuration", "gap"] }, { kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EntityCurrency, isStandalone: true, selector: "mt-entity-currency", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n>\r\n  <span\r\n    class=\"block min-w-0 truncate text-sm font-semibold\"\r\n    mtTruncateTooltip\r\n    tooltipPosition=\"top\"\r\n  >\r\n    {{ displayValue() }}\r\n  </span>\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }, { kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityCurrency, decorators: [{
             type: Component,
@@ -363,7 +381,7 @@ class EntityLongText {
         return raw;
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityLongText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EntityLongText, isStandalone: true, selector: "mt-entity-long-text", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n>\r\n  <div class=\"text-sm font-semibold\" [innerHTML]=\"displayValue()\"></div>\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "configuration", "gap"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EntityLongText, isStandalone: true, selector: "mt-entity-long-text", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n>\r\n  <div class=\"text-sm font-semibold\" [innerHTML]=\"displayValue()\"></div>\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityLongText, decorators: [{
             type: Component,
@@ -402,7 +420,7 @@ class EntityLookup {
         return `rgba(${r}, ${g}, ${b}, ${alpha})`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityLookup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityLookup, isStandalone: true, selector: "mt-entity-lookup", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n  gap=\"normal\"\r\n>\r\n  @if (lookupValue(); as lookup) {\r\n    <span\r\n      class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit\"\r\n      [style]=\"badgeStyle()\"\r\n    >\r\n      {{ lookupLabel() }}\r\n    </span>\r\n  } @else {\r\n    <span\r\n      class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit text-gray-500 bg-gray-100\"\r\n    >\r\n      {{ emptyLabel }}\r\n    </span>\r\n  }\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "configuration", "gap"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityLookup, isStandalone: true, selector: "mt-entity-lookup", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n  gap=\"normal\"\r\n>\r\n  @if (lookupValue(); as lookup) {\r\n    <span\r\n      class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit\"\r\n      [style]=\"badgeStyle()\"\r\n    >\r\n      {{ lookupLabel() }}\r\n    </span>\r\n  } @else {\r\n    <span\r\n      class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit text-gray-500 bg-gray-100\"\r\n    >\r\n      {{ emptyLabel }}\r\n    </span>\r\n  }\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityLookup, decorators: [{
             type: Component,
@@ -636,7 +654,7 @@ class EntityAttachment {
         return `.${fileName.split('.').pop().toLowerCase()}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityAttachment, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityAttachment, isStandalone: true, selector: "mt-entity-attachment", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, endPoint: { classPropertyName: "endPoint", publicName: "endPoint", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n  gap=\"relaxed\"\r\n>\r\n  @if (hasAttachments()) {\r\n    @if (shape() === \"compact\") {\r\n      <div class=\"flex flex-wrap items-center gap-2\">\r\n        @for (\r\n          attachment of attachments();\r\n          track attachmentTrackBy($index, attachment)\r\n        ) {\r\n          <mt-button\r\n            iconPos=\"top\"\r\n            size=\"small\"\r\n            severity=\"secondary\"\r\n            variant=\"outlined\"\r\n            [icon]=\"attachmentIcon(attachment)\"\r\n            [tooltip]=\"attachmentTooltip(attachment)\"\r\n            styleClass=\"h-9! w-9! rounded-lg!\"\r\n            (onClick)=\"onCompactAttachmentClick($event, attachment)\"\r\n          />\r\n        }\r\n      </div>\r\n    } @else {\r\n      <mt-upload-field\r\n        class=\"w-full\"\r\n        [ngModel]=\"uploadValue()\"\r\n        [ngModelOptions]=\"{ standalone: true }\"\r\n        [shape]=\"'card'\"\r\n        [multiple]=\"isMultiple()\"\r\n        [readonly]=\"true\"\r\n        [endPoint]=\"endPoint()\"\r\n        [context]=\"context()\"\r\n      />\r\n    }\r\n  } @else {\r\n    <span class=\"text-sm font-semibold\">{{ empty }}</span>\r\n  }\r\n</mt-entity-field>\r\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: "component", type: UploadField, selector: "mt-upload-field", inputs: ["label", "title", "description", "endPoint", "size", "userImgClass", "shape", "multiple", "accept", "isDragging", "fileSizeLimit", "readonly", "context"], outputs: ["isDraggingChange", "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: EntityField, selector: "mt-entity-field", inputs: ["label", "configuration", "gap"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityAttachment, isStandalone: true, selector: "mt-entity-attachment", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, endPoint: { classPropertyName: "endPoint", publicName: "endPoint", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n  [label]=\"displayName()\"\r\n  [configuration]=\"data()?.configuration\"\r\n  gap=\"relaxed\"\r\n>\r\n  @if (hasAttachments()) {\r\n    @if (shape() === \"compact\") {\r\n      <div class=\"flex flex-wrap items-center gap-2\">\r\n        @for (\r\n          attachment of attachments();\r\n          track attachmentTrackBy($index, attachment)\r\n        ) {\r\n          <mt-button\r\n            iconPos=\"top\"\r\n            size=\"small\"\r\n            severity=\"secondary\"\r\n            variant=\"outlined\"\r\n            [icon]=\"attachmentIcon(attachment)\"\r\n            [tooltip]=\"attachmentTooltip(attachment)\"\r\n            styleClass=\"h-9! w-9! rounded-lg!\"\r\n            (onClick)=\"onCompactAttachmentClick($event, attachment)\"\r\n          />\r\n        }\r\n      </div>\r\n    } @else {\r\n      <mt-upload-field\r\n        class=\"w-full\"\r\n        [ngModel]=\"uploadValue()\"\r\n        [ngModelOptions]=\"{ standalone: true }\"\r\n        [shape]=\"'card'\"\r\n        [multiple]=\"isMultiple()\"\r\n        [readonly]=\"true\"\r\n        [endPoint]=\"endPoint()\"\r\n        [context]=\"context()\"\r\n      />\r\n    }\r\n  } @else {\r\n    <span class=\"text-sm font-semibold\">{{ empty }}</span>\r\n  }\r\n</mt-entity-field>\r\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: "component", type: UploadField, selector: "mt-upload-field", inputs: ["label", "title", "description", "endPoint", "size", "userImgClass", "shape", "multiple", "accept", "isDragging", "fileSizeLimit", "readonly", "context"], outputs: ["isDraggingChange", "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: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityAttachment, decorators: [{
             type: Component,
@@ -661,22 +679,214 @@ class EntityLeafDetails {
         const total = leaf.statuses.reduce((sum, s) => sum + s.count, 0);
         return `${name} (${total})`;
     }, ...(ngDevMode ? [{ debugName: "labelWithTotal" }] : /* istanbul ignore next */ []));
-    /** Always force label to top position, merged with any saved config */
-    labelTopConfig = computed(() => ({
-        ...this.data().configuration,
-        labelPosition: 'top',
-    }), ...(ngDevMode ? [{ debugName: "labelTopConfig" }] : /* istanbul ignore next */ []));
+    labelIcon = computed(() => this.leafValue()?.levelIcon ?? null, ...(ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []));
+    /** Default LeafDetails labels to top, while still honoring saved configuration */
+    fieldConfig = computed(() => {
+        const configuration = this.data().configuration;
+        if (configuration?.labelPosition || configuration?.labelPostion) {
+            return configuration;
+        }
+        return {
+            ...configuration,
+            labelPosition: 'top',
+        };
+    }, ...(ngDevMode ? [{ debugName: "fieldConfig" }] : /* istanbul ignore next */ []));
     statusColor(color) {
         return color ?? '#9CA3AF';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityLeafDetails, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityLeafDetails, isStandalone: true, selector: "mt-entity-leaf-details", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\n  [label]=\"labelWithTotal()\"\n  [configuration]=\"labelTopConfig()\"\n  gap=\"normal\"\n>\n  @if (leafValue(); as leaf) {\n    <div class=\"flex flex-wrap gap-1.5\">\n      @for (status of leaf.statuses; track status.key) {\n        <div\n          class=\"flex items-center justify-center min-w-7 h-7 px-1.5 rounded-lg text-xs font-bold text-white\"\n          [style.background-color]=\"statusColor(status.color)\"\n          [pTooltip]=\"status.display\"\n          tooltipPosition=\"top\"\n        >\n          {{ status.count }}\n        </div>\n      }\n      @if (leaf.statuses.length === 0) {\n        <span class=\"text-sm text-muted-color\">\u2014</span>\n      }\n    </div>\n  }\n</mt-entity-field>\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "configuration", "gap"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityLeafDetails, isStandalone: true, selector: "mt-entity-leaf-details", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n  [label]=\"labelWithTotal()\"\r\n  [labelIconName]=\"labelIcon()\"\r\n  [configuration]=\"fieldConfig()\"\r\n  gap=\"normal\"\r\n>\r\n  @if (leafValue(); as leaf) {\r\n    <div class=\"flex flex-wrap gap-1.5\">\r\n      @for (status of leaf.statuses; track status.key) {\r\n        <div\r\n          class=\"flex items-center justify-center min-w-7 h-7 px-1.5 rounded-lg text-xs font-bold text-white\"\r\n          [style.background-color]=\"statusColor(status.color)\"\r\n          [pTooltip]=\"status.display\"\r\n          tooltipPosition=\"top\"\r\n        >\r\n          {{ status.count }}\r\n        </div>\r\n      }\r\n      @if (leaf.statuses.length === 0) {\r\n        <span class=\"text-sm text-muted-color\">\u2014</span>\r\n      }\r\n    </div>\r\n  }\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityLeafDetails, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entity-leaf-details', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [EntityField, TooltipModule], template: "<mt-entity-field\n  [label]=\"labelWithTotal()\"\n  [configuration]=\"labelTopConfig()\"\n  gap=\"normal\"\n>\n  @if (leafValue(); as leaf) {\n    <div class=\"flex flex-wrap gap-1.5\">\n      @for (status of leaf.statuses; track status.key) {\n        <div\n          class=\"flex items-center justify-center min-w-7 h-7 px-1.5 rounded-lg text-xs font-bold text-white\"\n          [style.background-color]=\"statusColor(status.color)\"\n          [pTooltip]=\"status.display\"\n          tooltipPosition=\"top\"\n        >\n          {{ status.count }}\n        </div>\n      }\n      @if (leaf.statuses.length === 0) {\n        <span class=\"text-sm text-muted-color\">\u2014</span>\n      }\n    </div>\n  }\n</mt-entity-field>\n" }]
+            args: [{ selector: 'mt-entity-leaf-details', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [EntityField, TooltipModule], template: "<mt-entity-field\r\n  [label]=\"labelWithTotal()\"\r\n  [labelIconName]=\"labelIcon()\"\r\n  [configuration]=\"fieldConfig()\"\r\n  gap=\"normal\"\r\n>\r\n  @if (leafValue(); as leaf) {\r\n    <div class=\"flex flex-wrap gap-1.5\">\r\n      @for (status of leaf.statuses; track status.key) {\r\n        <div\r\n          class=\"flex items-center justify-center min-w-7 h-7 px-1.5 rounded-lg text-xs font-bold text-white\"\r\n          [style.background-color]=\"statusColor(status.color)\"\r\n          [pTooltip]=\"status.display\"\r\n          tooltipPosition=\"top\"\r\n        >\r\n          {{ status.count }}\r\n        </div>\r\n      }\r\n      @if (leaf.statuses.length === 0) {\r\n        <span class=\"text-sm text-muted-color\">\u2014</span>\r\n      }\r\n    </div>\r\n  }\r\n</mt-entity-field>\r\n" }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
 
+const LEAF_DETAILS_KEY_SEPARATOR = '::leaflevel::';
+function isLeafDetailsStatusSummary(value) {
+    return (!!value &&
+        typeof value === 'object' &&
+        'key' in value &&
+        'display' in value &&
+        'count' in value);
+}
+function isLeafDetailsCatalogStatusValue(value) {
+    return (!!value &&
+        typeof value === 'object' &&
+        'key' in value &&
+        'display' in value);
+}
+function isLeafDetailsCatalogLevelValue(value) {
+    return (!!value &&
+        typeof value === 'object' &&
+        'levelId' in value &&
+        'levelName' in value &&
+        'levelIcon' in value &&
+        'statuses' in value &&
+        Array.isArray(value.statuses) &&
+        value.statuses.every(isLeafDetailsCatalogStatusValue));
+}
+function isLeafDetailsRuntimeStatusDetails(value) {
+    return (!!value &&
+        typeof value === 'object' &&
+        'key' in value &&
+        'display' in value);
+}
+function isLeafDetailsRuntimeStatusCount(value) {
+    return (!!value &&
+        typeof value === 'object' &&
+        'details' in value &&
+        isLeafDetailsRuntimeStatusDetails(value.details) &&
+        'count' in value);
+}
+function isLeafDetailsRuntimeChildSchema(value) {
+    return (!!value &&
+        typeof value === 'object' &&
+        'levelId' in value &&
+        'levelName' in value &&
+        'levelIcon' in value &&
+        'statuses' in value &&
+        Array.isArray(value.statuses) &&
+        value.statuses.every(isLeafDetailsRuntimeStatusCount));
+}
+function isLeafDetailsValue(value) {
+    return (!!value &&
+        typeof value === 'object' &&
+        !Array.isArray(value) &&
+        'levelId' in value &&
+        'statuses' in value &&
+        Array.isArray(value.statuses) &&
+        value.statuses.every(isLeafDetailsStatusSummary));
+}
+function isLeafDetailsCollectionValue(value) {
+    return Array.isArray(value) && value.every(isLeafDetailsValue);
+}
+function isLeafDetailsCatalogConfiguration(value) {
+    return Array.isArray(value) && value.every(isLeafDetailsCatalogLevelValue);
+}
+function isLeafDetailsRuntimeValue(value) {
+    return (!!value &&
+        typeof value === 'object' &&
+        !Array.isArray(value) &&
+        'childSchemas' in value &&
+        Array.isArray(value.childSchemas) &&
+        value.childSchemas.every(isLeafDetailsRuntimeChildSchema));
+}
+function isLeafDetailsSyntheticKey(key) {
+    return key?.includes(LEAF_DETAILS_KEY_SEPARATOR) ?? false;
+}
+function toLeafDetailsStatusSummary(status) {
+    return {
+        key: status.details.key,
+        display: status.details.display,
+        color: status.details.color ?? null,
+        count: status.count,
+    };
+}
+function normalizeLeafDetailsCollection(value) {
+    if (isLeafDetailsCollectionValue(value)) {
+        return value;
+    }
+    if (isLeafDetailsValue(value)) {
+        return [value];
+    }
+    if (isLeafDetailsRuntimeValue(value)) {
+        return value.childSchemas.map((schema) => ({
+            levelId: schema.levelId,
+            levelName: schema.levelName,
+            levelIcon: schema.levelIcon,
+            statuses: schema.statuses.map(toLeafDetailsStatusSummary),
+        }));
+    }
+    if (typeof value === 'string' && value.trim().length > 0) {
+        try {
+            return normalizeLeafDetailsCollection(JSON.parse(value));
+        }
+        catch {
+            return [];
+        }
+    }
+    return [];
+}
+function normalizeLeafDetailsCatalogConfiguration(value) {
+    if (isLeafDetailsCatalogConfiguration(value)) {
+        return value.map((level) => ({
+            levelId: level.levelId,
+            levelName: level.levelName,
+            levelIcon: level.levelIcon,
+            statuses: level.statuses.map((status) => ({
+                key: status.key,
+                display: status.display,
+                color: status.color ?? null,
+                count: 0,
+            })),
+        }));
+    }
+    if (typeof value === 'string' && value.trim().length > 0) {
+        try {
+            return normalizeLeafDetailsCatalogConfiguration(JSON.parse(value));
+        }
+        catch {
+            return [];
+        }
+    }
+    return [];
+}
+function expandLeafDetailsEntity(entity) {
+    if (entity.viewType !== 'LeafDetails') {
+        return [entity];
+    }
+    if (isLeafDetailsSyntheticKey(entity.key) && isLeafDetailsValue(entity.value)) {
+        return [entity];
+    }
+    const configuration = entity.configuration;
+    const levels = normalizeLeafDetailsCollection(entity.value);
+    const fallbackLevels = levels.length
+        ? levels
+        : normalizeLeafDetailsCollection(entity.rawValue);
+    const resolvedLevels = fallbackLevels.length
+        ? fallbackLevels
+        : normalizeLeafDetailsCatalogConfiguration(entity.propertyConfiguration);
+    if (resolvedLevels.length === 0) {
+        return [entity];
+    }
+    const expanded = resolvedLevels.flatMap((level) => {
+        const levelConfig = configuration?.leafLevels?.[String(level.levelId)];
+        if (configuration?.leafLevels && !levelConfig) {
+            return [];
+        }
+        const selectedStatuses = levelConfig?.selectedStatuses?.length
+            ? new Set(levelConfig.selectedStatuses)
+            : null;
+        return [
+            {
+                ...entity,
+                key: entity.key
+                    ? `${entity.key}${LEAF_DETAILS_KEY_SEPARATOR}${level.levelId}`
+                    : entity.key,
+                name: level.levelName,
+                value: {
+                    ...level,
+                    statuses: selectedStatuses
+                        ? level.statuses.filter((status) => selectedStatuses.has(status.key))
+                        : level.statuses,
+                },
+                order: levelConfig?.order ?? entity.order,
+                configuration: {
+                    ...configuration,
+                    size: levelConfig?.size ?? configuration?.size,
+                },
+            },
+        ];
+    });
+    return expanded.length > 0 ? expanded : [entity];
+}
+function buildDisplayEntities(entities) {
+    return entities
+        .flatMap((entity) => expandLeafDetailsEntity(entity))
+        .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+}
+
 class EntityPreview {
     /** Single entity data to display */
     data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
@@ -711,19 +921,19 @@ class EntitiesPreview {
     /** Array of entity data to display */
     entities = input.required(...(ngDevMode ? [{ debugName: "entities" }] : /* istanbul ignore next */ []));
     attachmentShape = input('default', ...(ngDevMode ? [{ debugName: "attachmentShape" }] : /* istanbul ignore next */ []));
-    /** Entities sorted by order */
-    sortedEntities = computed(() => [...this.entities()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), ...(ngDevMode ? [{ debugName: "sortedEntities" }] : /* istanbul ignore next */ []));
+    /** Entities expanded and sorted by order */
+    displayEntities = computed(() => buildDisplayEntities(this.entities()), ...(ngDevMode ? [{ debugName: "displayEntities" }] : /* istanbul ignore next */ []));
     /** Returns the grid-column span for a given entity size (1-24) */
     getColSpan(entity) {
         const size = entity.configuration?.size ?? 8;
         return `span ${size}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntitiesPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntitiesPreview, isStandalone: true, selector: "mt-entities-preview", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, attachmentShape: { classPropertyName: "attachmentShape", publicName: "attachmentShape", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid grid-cols-24 gap-x-3 gap-y-5\">\r\n  @for (entity of sortedEntities(); track $index) {\r\n    <div\r\n      class=\"min-w-0 flex items-center p-3\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-200]=\"entity.configuration?.showBorder\"\r\n      [class.rounded-lg]=\"entity.configuration?.showBorder\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <mt-entity-preview\r\n        [data]=\"entity\"\r\n        [attachmentShape]=\"attachmentShape()\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntitiesPreview, isStandalone: true, selector: "mt-entities-preview", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, attachmentShape: { classPropertyName: "attachmentShape", publicName: "attachmentShape", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid grid-cols-24 gap-x-3 gap-y-5\">\r\n  @for (entity of displayEntities(); track entity.key ?? entity.order ?? $index) {\r\n    <div\r\n      class=\"min-w-0 flex items-center\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.p-3]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-200]=\"entity.configuration?.showBorder\"\r\n      [class.rounded-lg]=\"entity.configuration?.showBorder\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <mt-entity-preview\r\n        [data]=\"entity\"\r\n        [attachmentShape]=\"attachmentShape()\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntitiesPreview, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entities-preview', standalone: true, imports: [EntityPreview], template: "<div class=\"grid grid-cols-24 gap-x-3 gap-y-5\">\r\n  @for (entity of sortedEntities(); track $index) {\r\n    <div\r\n      class=\"min-w-0 flex items-center p-3\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-200]=\"entity.configuration?.showBorder\"\r\n      [class.rounded-lg]=\"entity.configuration?.showBorder\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <mt-entity-preview\r\n        [data]=\"entity\"\r\n        [attachmentShape]=\"attachmentShape()\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'mt-entities-preview', standalone: true, imports: [EntityPreview], template: "<div class=\"grid grid-cols-24 gap-x-3 gap-y-5\">\r\n  @for (entity of displayEntities(); track entity.key ?? entity.order ?? $index) {\r\n    <div\r\n      class=\"min-w-0 flex items-center\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.p-3]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-200]=\"entity.configuration?.showBorder\"\r\n      [class.rounded-lg]=\"entity.configuration?.showBorder\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <mt-entity-preview\r\n        [data]=\"entity\"\r\n        [attachmentShape]=\"attachmentShape()\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }], attachmentShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachmentShape", required: false }] }] } });
 
 /**
@@ -849,8 +1059,8 @@ class EntitiesManage extends EntitiesResizeBase {
     entitiesReordered = output();
     /** Emits when an entity cell is clicked (for opening edit drawer) */
     entityClicked = output();
-    /** Entities sorted by their order field */
-    sortedEntities = computed(() => [...this.entities()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), ...(ngDevMode ? [{ debugName: "sortedEntities" }] : /* istanbul ignore next */ []));
+    /** Entities expanded and sorted by their configured order */
+    displayEntities = computed(() => buildDisplayEntities(this.entities()), ...(ngDevMode ? [{ debugName: "displayEntities" }] : /* istanbul ignore next */ []));
     /** Returns the grid-column span for a given entity size (1-24) */
     getColSpan(entity) {
         return this.getResizeColSpan(entity);
@@ -859,7 +1069,7 @@ class EntitiesManage extends EntitiesResizeBase {
     onDrop(event) {
         if (event.previousIndex === event.currentIndex)
             return;
-        const items = [...this.sortedEntities()];
+        const items = [...this.displayEntities()];
         const [moved] = items.splice(event.previousIndex, 1);
         items.splice(event.currentIndex, 0, moved);
         // Reassign order based on new positions
@@ -874,8 +1084,11 @@ class EntitiesManage extends EntitiesResizeBase {
     }
     // ── Resize completion (from EntitiesResizeBase) ──
     onResizeComplete(entity, previousSize, newSize) {
-        // Update entity in the list
-        const updated = this.entities().map((e) => e === entity
+        const currentEntities = this.entities();
+        const sourceEntities = currentEntities.some((e) => e === entity)
+            ? currentEntities
+            : this.displayEntities();
+        const updated = sourceEntities.map((e) => e === entity || (isLeafDetailsSyntheticKey(e.key) && e.key === entity.key)
             ? {
                 ...e,
                 configuration: {
@@ -895,16 +1108,16 @@ class EntitiesManage extends EntitiesResizeBase {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntitiesManage, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntitiesManage, isStandalone: true, selector: "mt-entities-manage", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { entities: "entitiesChange", entitiesReordered: "entitiesReordered", entityClicked: "entityClicked" }, usesInheritance: true, ngImport: i0, template: "<div\r\n  cdkDropList\r\n  cdkDropListOrientation=\"mixed\"\r\n  [cdkDropListData]=\"sortedEntities()\"\r\n  (cdkDropListDropped)=\"onDrop($event)\"\r\n  class=\"grid grid-cols-24 gap-x-4 gap-y-6\"\r\n>\r\n  @for (entity of sortedEntities(); track entity.order) {\r\n    <div\r\n      cdkDrag\r\n      [cdkDragData]=\"entity\"\r\n      class=\"entity-cell group relative min-w-0 flex items-center p-3 cursor-grab active:cursor-grabbing rounded-lg transition-colors bg-surface-100/60\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-300]=\"entity.configuration?.showBorder\"\r\n      [class.resizing]=\"resizingEntity() === entity\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <!-- Drag placeholder -->\r\n      <div\r\n        *cdkDragPlaceholder\r\n        class=\"h-full min-h-12 bg-black/10 rounded-xl\"\r\n        [style.grid-column]=\"getColSpan(entity)\"\r\n      ></div>\r\n\r\n      <mt-entity-preview\r\n        [data]=\"entity\"\r\n        class=\"flex-1 min-w-0 cursor-pointer\"\r\n        (click)=\"entityClicked.emit(entity)\"\r\n      />\r\n\r\n      <!-- Resize handle (right edge) -->\r\n      <div\r\n        class=\"resize-handle\"\r\n        (mousedown)=\"onResizeStart($event, entity)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <div class=\"resize-handle-bar\"></div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active{cursor:grabbing}.cdk-drag-preview{cursor:grabbing;overflow:hidden}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}.entity-cell{position:relative}.resize-handle{position:absolute;top:0;inset-inline-end:-4px;width:8px;height:100%;cursor:col-resize;z-index:10;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease}.entity-cell:hover .resize-handle,.entity-cell.resizing .resize-handle{opacity:1}.resize-handle-bar{width:3px;height:24px;border-radius:2px;background-color:var(--p-primary-color, #6366f1);transition:height .15s ease,background-color .15s ease}.resize-handle:hover .resize-handle-bar{height:36px;background-color:var(--p-primary-color, #4f46e5)}.entity-cell.resizing{outline:2px dashed var(--p-primary-color, #6366f1);outline-offset:-1px;border-radius:8px;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntitiesManage, isStandalone: true, selector: "mt-entities-manage", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { entities: "entitiesChange", entitiesReordered: "entitiesReordered", entityClicked: "entityClicked" }, usesInheritance: true, ngImport: i0, template: "<div\r\n  cdkDropList\r\n  cdkDropListOrientation=\"mixed\"\r\n  [cdkDropListData]=\"displayEntities()\"\r\n  (cdkDropListDropped)=\"onDrop($event)\"\r\n  class=\"grid grid-cols-24 gap-x-4 gap-y-6\"\r\n>\r\n  @for (entity of displayEntities(); track entity.key ?? entity.order ?? $index) {\r\n    <div\r\n      cdkDrag\r\n      [cdkDragData]=\"entity\"\r\n      class=\"entity-cell group relative min-w-0 flex items-center p-3 cursor-grab active:cursor-grabbing rounded-lg transition-colors bg-surface-100/60\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-300]=\"entity.configuration?.showBorder\"\r\n      [class.resizing]=\"resizingEntity() === entity\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <!-- Drag placeholder -->\r\n      <div\r\n        *cdkDragPlaceholder\r\n        class=\"h-full min-h-12 bg-black/10 rounded-xl\"\r\n        [style.grid-column]=\"getColSpan(entity)\"\r\n      ></div>\r\n\r\n      <mt-entity-preview\r\n        [data]=\"entity\"\r\n        class=\"flex-1 min-w-0 cursor-pointer\"\r\n        (click)=\"entityClicked.emit(entity)\"\r\n      />\r\n\r\n      <!-- Resize handle (right edge) -->\r\n      <div\r\n        class=\"resize-handle\"\r\n        (mousedown)=\"onResizeStart($event, entity)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <div class=\"resize-handle-bar\"></div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active{cursor:grabbing}.cdk-drag-preview{cursor:grabbing;overflow:hidden}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}.entity-cell{position:relative}.resize-handle{position:absolute;top:0;inset-inline-end:-4px;width:8px;height:100%;cursor:col-resize;z-index:10;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease}.entity-cell:hover .resize-handle,.entity-cell.resizing .resize-handle{opacity:1}.resize-handle-bar{width:3px;height:24px;border-radius:2px;background-color:var(--p-primary-color, #6366f1);transition:height .15s ease,background-color .15s ease}.resize-handle:hover .resize-handle-bar{height:36px;background-color:var(--p-primary-color, #4f46e5)}.entity-cell.resizing{outline:2px dashed var(--p-primary-color, #6366f1);outline-offset:-1px;border-radius:8px;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntitiesManage, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entities-manage', standalone: true, imports: [EntityPreview, CdkDrag, CdkDropList, CdkDragPlaceholder], template: "<div\r\n  cdkDropList\r\n  cdkDropListOrientation=\"mixed\"\r\n  [cdkDropListData]=\"sortedEntities()\"\r\n  (cdkDropListDropped)=\"onDrop($event)\"\r\n  class=\"grid grid-cols-24 gap-x-4 gap-y-6\"\r\n>\r\n  @for (entity of sortedEntities(); track entity.order) {\r\n    <div\r\n      cdkDrag\r\n      [cdkDragData]=\"entity\"\r\n      class=\"entity-cell group relative min-w-0 flex items-center p-3 cursor-grab active:cursor-grabbing rounded-lg transition-colors bg-surface-100/60\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-300]=\"entity.configuration?.showBorder\"\r\n      [class.resizing]=\"resizingEntity() === entity\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <!-- Drag placeholder -->\r\n      <div\r\n        *cdkDragPlaceholder\r\n        class=\"h-full min-h-12 bg-black/10 rounded-xl\"\r\n        [style.grid-column]=\"getColSpan(entity)\"\r\n      ></div>\r\n\r\n      <mt-entity-preview\r\n        [data]=\"entity\"\r\n        class=\"flex-1 min-w-0 cursor-pointer\"\r\n        (click)=\"entityClicked.emit(entity)\"\r\n      />\r\n\r\n      <!-- Resize handle (right edge) -->\r\n      <div\r\n        class=\"resize-handle\"\r\n        (mousedown)=\"onResizeStart($event, entity)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <div class=\"resize-handle-bar\"></div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active{cursor:grabbing}.cdk-drag-preview{cursor:grabbing;overflow:hidden}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}.entity-cell{position:relative}.resize-handle{position:absolute;top:0;inset-inline-end:-4px;width:8px;height:100%;cursor:col-resize;z-index:10;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease}.entity-cell:hover .resize-handle,.entity-cell.resizing .resize-handle{opacity:1}.resize-handle-bar{width:3px;height:24px;border-radius:2px;background-color:var(--p-primary-color, #6366f1);transition:height .15s ease,background-color .15s ease}.resize-handle:hover .resize-handle-bar{height:36px;background-color:var(--p-primary-color, #4f46e5)}.entity-cell.resizing{outline:2px dashed var(--p-primary-color, #6366f1);outline-offset:-1px;border-radius:8px;-webkit-user-select:none;user-select:none}\n"] }]
+            args: [{ selector: 'mt-entities-manage', standalone: true, imports: [EntityPreview, CdkDrag, CdkDropList, CdkDragPlaceholder], template: "<div\r\n  cdkDropList\r\n  cdkDropListOrientation=\"mixed\"\r\n  [cdkDropListData]=\"displayEntities()\"\r\n  (cdkDropListDropped)=\"onDrop($event)\"\r\n  class=\"grid grid-cols-24 gap-x-4 gap-y-6\"\r\n>\r\n  @for (entity of displayEntities(); track entity.key ?? entity.order ?? $index) {\r\n    <div\r\n      cdkDrag\r\n      [cdkDragData]=\"entity\"\r\n      class=\"entity-cell group relative min-w-0 flex items-center p-3 cursor-grab active:cursor-grabbing rounded-lg transition-colors bg-surface-100/60\"\r\n      [class.border]=\"entity.configuration?.showBorder\"\r\n      [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n      [class.border-gray-300]=\"entity.configuration?.showBorder\"\r\n      [class.resizing]=\"resizingEntity() === entity\"\r\n      [style.grid-column]=\"getColSpan(entity)\"\r\n    >\r\n      <!-- Drag placeholder -->\r\n      <div\r\n        *cdkDragPlaceholder\r\n        class=\"h-full min-h-12 bg-black/10 rounded-xl\"\r\n        [style.grid-column]=\"getColSpan(entity)\"\r\n      ></div>\r\n\r\n      <mt-entity-preview\r\n        [data]=\"entity\"\r\n        class=\"flex-1 min-w-0 cursor-pointer\"\r\n        (click)=\"entityClicked.emit(entity)\"\r\n      />\r\n\r\n      <!-- Resize handle (right edge) -->\r\n      <div\r\n        class=\"resize-handle\"\r\n        (mousedown)=\"onResizeStart($event, entity)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        <div class=\"resize-handle-bar\"></div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active{cursor:grabbing}.cdk-drag-preview{cursor:grabbing;overflow:hidden}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}.entity-cell{position:relative}.resize-handle{position:absolute;top:0;inset-inline-end:-4px;width:8px;height:100%;cursor:col-resize;z-index:10;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease}.entity-cell:hover .resize-handle,.entity-cell.resizing .resize-handle{opacity:1}.resize-handle-bar{width:3px;height:24px;border-radius:2px;background-color:var(--p-primary-color, #6366f1);transition:height .15s ease,background-color .15s ease}.resize-handle:hover .resize-handle-bar{height:36px;background-color:var(--p-primary-color, #4f46e5)}.entity-cell.resizing{outline:2px dashed var(--p-primary-color, #6366f1);outline-offset:-1px;border-radius:8px;-webkit-user-select:none;user-select:none}\n"] }]
         }], propDecorators: { entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }, { type: i0.Output, args: ["entitiesChange"] }], entitiesReordered: [{ type: i0.Output, args: ["entitiesReordered"] }], entityClicked: [{ type: i0.Output, args: ["entityClicked"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { EntitiesManage, EntitiesPreview, EntitiesResizeBase, EntityAttachment, EntityCheckbox, EntityCurrency, EntityDate, EntityField, EntityLeafDetails, EntityLongText, EntityLookup, EntityPercentage, EntityPreview, EntityStatus, EntityText, EntityUser };
+export { EntitiesManage, EntitiesPreview, EntitiesResizeBase, EntityAttachment, EntityCheckbox, EntityCurrency, EntityDate, EntityField, EntityLeafDetails, EntityLongText, EntityLookup, EntityPercentage, EntityPreview, EntityStatus, EntityText, EntityUser, LEAF_DETAILS_KEY_SEPARATOR, buildDisplayEntities, expandLeafDetailsEntity, isLeafDetailsCatalogConfiguration, isLeafDetailsCollectionValue, isLeafDetailsRuntimeValue, isLeafDetailsSyntheticKey, isLeafDetailsValue };
 //# sourceMappingURL=masterteam-components-entities.mjs.map