@masterteam/components 0.0.125 → 0.0.127

package/fesm2022/masterteam-components-entities.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component, inject, signal, effect, ChangeDetectionStrategy, ElementRef, NgZone, output, Directive, model } 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 { HttpContext, HttpClient } from '@angular/common/http';
 import { Avatar } from '@masterteam/components/avatar';
 import { Button } from '@masterteam/components/button';
@@ -28,6 +29,71 @@ function displayOrPlaceholder(value) {
     }
     return String(value);
 }
+function isEntityLabelHidden(configuration) {
+    const config = configuration;
+    return config?.hideLabel ?? config?.hideName ?? false;
+}
+function resolveEntityLabelPosition(configuration) {
+    const config = configuration;
+    return config?.labelPosition ?? config?.labelPostion ?? 'bottom';
+}
+
+class EntityField {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    configuration = input(...(ngDevMode ? [undefined, { debugName: "configuration" }] : []));
+    gap = input('compact', ...(ngDevMode ? [{ debugName: "gap" }] : []));
+    hideLabel = computed(() => isEntityLabelHidden(this.configuration()), ...(ngDevMode ? [{ debugName: "hideLabel" }] : []));
+    labelPosition = computed(() => resolveEntityLabelPosition(this.configuration()), ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
+    containerClass = computed(() => {
+        const gapClass = this.gap() === 'relaxed'
+            ? 'gap-2'
+            : this.gap() === 'normal'
+                ? 'gap-1'
+                : 'gap-0.5';
+        const directionClass = this.labelPosition() === 'top' ? 'flex-col-reverse' : 'flex-col';
+        return `flex min-w-0 ${directionClass} ${gapClass}`;
+    }, ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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: `
+    <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>
+  `, isInline: true, dependencies: [{ kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mt-entity-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [TruncateTooltip],
+                    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>
+  `,
+                    host: {
+                        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 }] }] } });
 
 class EntityText {
     /** Full entity data object */
@@ -43,13 +109,12 @@ class EntityText {
         }
         return displayOrPlaceholder(this.value());
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
-    hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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: "<div class=\"flex flex-col gap-0.5\">\r\n  <div\r\n    class=\"text-sm font-semibold truncate\"\r\n    [innerHTML]=\"displayValue()\"\r\n  ></div>\r\n  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500 truncate\">{{ displayName() }}</span>\r\n  }\r\n</div>\r\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", 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\n  [label]=\"displayName()\"\n  [configuration]=\"data()?.configuration\"\n>\n  <div\n    class=\"min-w-0 truncate text-sm font-semibold\"\n    mtTruncateTooltip\n    tooltipPosition=\"top\"\n    [innerHTML]=\"displayValue()\"\n  ></div>\n</mt-entity-field>\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "configuration", "gap"] }, { kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityText, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entity-text', standalone: true, template: "<div class=\"flex flex-col gap-0.5\">\r\n  <div\r\n    class=\"text-sm font-semibold truncate\"\r\n    [innerHTML]=\"displayValue()\"\r\n  ></div>\r\n  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500 truncate\">{{ displayName() }}</span>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'mt-entity-text', standalone: true, imports: [EntityField, TruncateTooltip], template: "<mt-entity-field\n  [label]=\"displayName()\"\n  [configuration]=\"data()?.configuration\"\n>\n  <div\n    class=\"min-w-0 truncate text-sm font-semibold\"\n    mtTruncateTooltip\n    tooltipPosition=\"top\"\n    [innerHTML]=\"displayValue()\"\n  ></div>\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 EntityDate {
@@ -66,13 +131,12 @@ class EntityDate {
         }
         return displayOrPlaceholder(this.value());
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
-    hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityDate, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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: "<div class=\"flex flex-col gap-0.5\">\r\n  <span class=\"text-sm font-semibold\">{{ displayValue() }}</span>\r\n  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n  }\r\n</div>\r\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", 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\n  [label]=\"displayName()\"\n  [configuration]=\"data()?.configuration\"\n>\n  <span\n    class=\"block min-w-0 truncate text-sm font-semibold\"\n    mtTruncateTooltip\n    tooltipPosition=\"top\"\n  >\n    {{ displayValue() }}\n  </span>\n</mt-entity-field>\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "configuration", "gap"] }, { kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityDate, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entity-date', standalone: true, template: "<div class=\"flex flex-col gap-0.5\">\r\n  <span class=\"text-sm font-semibold\">{{ displayValue() }}</span>\r\n  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'mt-entity-date', standalone: true, imports: [EntityField, TruncateTooltip], template: "<mt-entity-field\n  [label]=\"displayName()\"\n  [configuration]=\"data()?.configuration\"\n>\n  <span\n    class=\"block min-w-0 truncate text-sm font-semibold\"\n    mtTruncateTooltip\n    tooltipPosition=\"top\"\n  >\n    {{ displayValue() }}\n  </span>\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 EntityStatus {
@@ -100,7 +164,6 @@ class EntityStatus {
     }, ...(ngDevMode ? [{ debugName: "badgeStyle" }] : []));
     emptyLabel = ENTITY_EMPTY_VALUE_PLACEHOLDER;
     statusLabel = computed(() => displayOrPlaceholder(this.statusValue()?.display), ...(ngDevMode ? [{ debugName: "statusLabel" }] : []));
-    hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
     hexToRgba(hex, alpha) {
         const r = parseInt(hex.slice(1, 3), 16);
         const g = parseInt(hex.slice(3, 5), 16);
@@ -108,11 +171,11 @@ class EntityStatus {
         return `rgba(${r}, ${g}, ${b}, ${alpha})`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityStatus, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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: "<div class=\"flex flex-col gap-1\">\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  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n  }\r\n</div>\r\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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\n  [label]=\"displayName()\"\n  [configuration]=\"data()?.configuration\"\n  gap=\"normal\"\n>\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", "configuration", "gap"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityStatus, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entity-status', standalone: true, template: "<div class=\"flex flex-col gap-1\">\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  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'mt-entity-status', standalone: true, imports: [EntityField], template: "<mt-entity-field\n  [label]=\"displayName()\"\n  [configuration]=\"data()?.configuration\"\n  gap=\"normal\"\n>\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 {
@@ -183,7 +246,7 @@ class EntityPercentage {
         return num > 100 ? Math.ceil(num) : 100;
     }, ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
     // ── Configuration-driven visibility ──
-    hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
+    hideName = computed(() => isEntityLabelHidden(this.data()?.configuration), ...(ngDevMode ? [{ debugName: "hideName" }] : []));
     progressColor = computed(() => {
         const configuration = this.data()?.configuration;
         return configuration?.color?.trim() || 'primary';
@@ -221,13 +284,12 @@ class EntityCurrency {
         }
         return displayOrPlaceholder(this.value());
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
-    hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityCurrency, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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: "<div class=\"flex flex-col gap-0.5\">\r\n  <span class=\"text-sm font-semibold\">{{ displayValue() }}</span>\r\n  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n  }\r\n</div>\r\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", 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\n  [label]=\"displayName()\"\n  [configuration]=\"data()?.configuration\"\n>\n  <span\n    class=\"block min-w-0 truncate text-sm font-semibold\"\n    mtTruncateTooltip\n    tooltipPosition=\"top\"\n  >\n    {{ displayValue() }}\n  </span>\n</mt-entity-field>\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "configuration", "gap"] }, { kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityCurrency, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entity-currency', standalone: true, template: "<div class=\"flex flex-col gap-0.5\">\r\n  <span class=\"text-sm font-semibold\">{{ displayValue() }}</span>\r\n  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'mt-entity-currency', standalone: true, imports: [EntityField, TruncateTooltip], template: "<mt-entity-field\n  [label]=\"displayName()\"\n  [configuration]=\"data()?.configuration\"\n>\n  <span\n    class=\"block min-w-0 truncate text-sm font-semibold\"\n    mtTruncateTooltip\n    tooltipPosition=\"top\"\n  >\n    {{ displayValue() }}\n  </span>\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 EntityCheckbox {
@@ -239,7 +301,7 @@ class EntityCheckbox {
     rawValue = input(...(ngDevMode ? [undefined, { debugName: "rawValue" }] : []));
     displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
     emptyLabel = ENTITY_EMPTY_VALUE_PLACEHOLDER;
-    hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
+    hideName = computed(() => isEntityLabelHidden(this.data()?.configuration), ...(ngDevMode ? [{ debugName: "hideName" }] : []));
     checkboxState = computed(() => {
         const raw = this.data()?.rawValue ?? this.rawValue();
         if (raw !== undefined && raw !== null) {
@@ -291,13 +353,12 @@ class EntityLongText {
         }
         return raw;
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
-    hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityLongText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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: "<div class=\"flex flex-col gap-0.5\">\r\n  <div class=\"text-sm font-semibold\" [innerHTML]=\"displayValue()\"></div>\r\n  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n  }\r\n</div>\r\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", 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\n  [label]=\"displayName()\"\n  [configuration]=\"data()?.configuration\"\n>\n  <div class=\"text-sm font-semibold\" [innerHTML]=\"displayValue()\"></div>\n</mt-entity-field>\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "configuration", "gap"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityLongText, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entity-long-text', standalone: true, template: "<div class=\"flex flex-col gap-0.5\">\r\n  <div class=\"text-sm font-semibold\" [innerHTML]=\"displayValue()\"></div>\r\n  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'mt-entity-long-text', standalone: true, imports: [EntityField], template: "<mt-entity-field\n  [label]=\"displayName()\"\n  [configuration]=\"data()?.configuration\"\n>\n  <div class=\"text-sm font-semibold\" [innerHTML]=\"displayValue()\"></div>\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 EntityLookup {
@@ -325,7 +386,6 @@ class EntityLookup {
     }, ...(ngDevMode ? [{ debugName: "badgeStyle" }] : []));
     emptyLabel = ENTITY_EMPTY_VALUE_PLACEHOLDER;
     lookupLabel = computed(() => displayOrPlaceholder(this.lookupValue()?.display), ...(ngDevMode ? [{ debugName: "lookupLabel" }] : []));
-    hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
     hexToRgba(hex, alpha) {
         const r = parseInt(hex.slice(1, 3), 16);
         const g = parseInt(hex.slice(3, 5), 16);
@@ -333,11 +393,11 @@ class EntityLookup {
         return `rgba(${r}, ${g}, ${b}, ${alpha})`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityLookup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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: "<div class=\"flex flex-col gap-1\">\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  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n  }\r\n</div>\r\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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\n  [label]=\"displayName()\"\n  [configuration]=\"data()?.configuration\"\n  gap=\"normal\"\n>\n  @if (lookupValue(); as lookup) {\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      {{ lookupLabel() }}\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", "configuration", "gap"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityLookup, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entity-lookup', standalone: true, template: "<div class=\"flex flex-col gap-1\">\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  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'mt-entity-lookup', standalone: true, imports: [EntityField], template: "<mt-entity-field\n  [label]=\"displayName()\"\n  [configuration]=\"data()?.configuration\"\n  gap=\"normal\"\n>\n  @if (lookupValue(); as lookup) {\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      {{ lookupLabel() }}\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 EntityAttachment {
@@ -349,7 +409,6 @@ class EntityAttachment {
     context = input(undefined, ...(ngDevMode ? [{ debugName: "context" }] : []));
     httpClient = inject(HttpClient);
     displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
-    hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     attachments = signal([], ...(ngDevMode ? [{ debugName: "attachments" }] : []));
     attachmentReferences = computed(() => this.normalizeAttachmentValue(this.data()?.value ?? this.value()), ...(ngDevMode ? [{ debugName: "attachmentReferences" }] : []));
@@ -568,11 +627,11 @@ class EntityAttachment {
         return `.${fileName.split('.').pop().toLowerCase()}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityAttachment, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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: "<div class=\"flex w-full flex-col gap-2\">\r\n  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n  }\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</div>\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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\n  [label]=\"displayName()\"\n  [configuration]=\"data()?.configuration\"\n  gap=\"relaxed\"\n>\n  @if (hasAttachments()) {\n    @if (shape() === \"compact\") {\n      <div class=\"flex flex-wrap items-center gap-2\">\n        @for (\n          attachment of attachments();\n          track attachmentTrackBy($index, attachment)\n        ) {\n          <mt-button\n            iconPos=\"top\"\n            size=\"small\"\n            severity=\"secondary\"\n            variant=\"outlined\"\n            [icon]=\"attachmentIcon(attachment)\"\n            [tooltip]=\"attachmentTooltip(attachment)\"\n            styleClass=\"h-9! w-9! rounded-lg!\"\n            (onClick)=\"onCompactAttachmentClick($event, attachment)\"\n          />\n        }\n      </div>\n    } @else {\n      <mt-upload-field\n        class=\"w-full\"\n        [ngModel]=\"uploadValue()\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        [shape]=\"'card'\"\n        [multiple]=\"isMultiple()\"\n        [readonly]=\"true\"\n        [endPoint]=\"endPoint()\"\n        [context]=\"context()\"\n      />\n    }\n  } @else {\n    <span class=\"text-sm font-semibold\">{{ empty }}</span>\n  }\n</mt-entity-field>\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityAttachment, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-entity-attachment', standalone: true, imports: [FormsModule, UploadField, Button], template: "<div class=\"flex w-full flex-col gap-2\">\r\n  @if (!hideName()) {\r\n    <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n  }\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</div>\r\n" }]
+            args: [{ selector: 'mt-entity-attachment', standalone: true, imports: [FormsModule, UploadField, Button, EntityField], template: "<mt-entity-field\n  [label]=\"displayName()\"\n  [configuration]=\"data()?.configuration\"\n  gap=\"relaxed\"\n>\n  @if (hasAttachments()) {\n    @if (shape() === \"compact\") {\n      <div class=\"flex flex-wrap items-center gap-2\">\n        @for (\n          attachment of attachments();\n          track attachmentTrackBy($index, attachment)\n        ) {\n          <mt-button\n            iconPos=\"top\"\n            size=\"small\"\n            severity=\"secondary\"\n            variant=\"outlined\"\n            [icon]=\"attachmentIcon(attachment)\"\n            [tooltip]=\"attachmentTooltip(attachment)\"\n            styleClass=\"h-9! w-9! rounded-lg!\"\n            (onClick)=\"onCompactAttachmentClick($event, attachment)\"\n          />\n        }\n      </div>\n    } @else {\n      <mt-upload-field\n        class=\"w-full\"\n        [ngModel]=\"uploadValue()\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        [shape]=\"'card'\"\n        [multiple]=\"isMultiple()\"\n        [readonly]=\"true\"\n        [endPoint]=\"endPoint()\"\n        [context]=\"context()\"\n      />\n    }\n  } @else {\n    <span class=\"text-sm font-semibold\">{{ empty }}</span>\n  }\n</mt-entity-field>\n" }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], endPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPoint", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }] } });
 
 class EntityPreview {
@@ -616,11 +675,11 @@ class EntitiesPreview {
         return `span ${size}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntitiesPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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-7\">\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.0.3", 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", 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-7\">\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 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" }]
         }], propDecorators: { entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }], attachmentShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachmentShape", required: false }] }] } });
 
 /**
@@ -801,5 +860,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { EntitiesManage, EntitiesPreview, EntitiesResizeBase, EntityAttachment, EntityCheckbox, EntityCurrency, EntityDate, EntityLongText, EntityLookup, EntityPercentage, EntityPreview, EntityStatus, EntityText, EntityUser };
+export { EntitiesManage, EntitiesPreview, EntitiesResizeBase, EntityAttachment, EntityCheckbox, EntityCurrency, EntityDate, EntityField, EntityLongText, EntityLookup, EntityPercentage, EntityPreview, EntityStatus, EntityText, EntityUser };
 //# sourceMappingURL=masterteam-components-entities.mjs.map