@masterteam/components 0.0.95 → 0.0.98

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,8 +2,10 @@ import * as i0 from '@angular/core';
2
2
  import { input, computed, Component, inject, ElementRef, NgZone, output, signal, Directive, model } from '@angular/core';
3
3
  import { Avatar } from '@masterteam/components/avatar';
4
4
  import { Button } from '@masterteam/components/button';
5
- import { SecureImagePipe } from '@masterteam/components/upload-field';
5
+ import { SecureImagePipe, UploadField } from '@masterteam/components/upload-field';
6
6
  import { Progress } from '@masterteam/components/progress';
7
+ import * as i1 from '@angular/forms';
8
+ import { FormsModule } from '@angular/forms';
7
9
  import { CdkDrag, CdkDropList, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
8
10
  import { DOCUMENT } from '@angular/common';
9
11
 
@@ -38,12 +40,13 @@ class EntityText {
38
40
  }
39
41
  return displayOrPlaceholder(this.value());
40
42
  }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
43
+ hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
41
44
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityText, deps: [], target: i0.ɵɵFactoryTarget.Component });
42
- 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: "<div class=\"flex flex-col gap-0.5\">\r\n <span class=\"text-sm font-semibold\">{{ displayValue() }}</span>\r\n <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n</div>\r\n" });
45
+ 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 <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" });
43
46
  }
44
47
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityText, decorators: [{
45
48
  type: Component,
46
- args: [{ selector: 'mt-entity-text', standalone: true, template: "<div class=\"flex flex-col gap-0.5\">\r\n <span class=\"text-sm font-semibold\">{{ displayValue() }}</span>\r\n <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n</div>\r\n" }]
49
+ args: [{ selector: 'mt-entity-text', 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" }]
47
50
  }], 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 }] }] } });
48
51
 
49
52
  class EntityDate {
@@ -60,12 +63,13 @@ class EntityDate {
60
63
  }
61
64
  return displayOrPlaceholder(this.value());
62
65
  }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
66
+ hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
63
67
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityDate, deps: [], target: i0.ɵɵFactoryTarget.Component });
64
- 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: "<div class=\"flex flex-col gap-0.5\">\r\n <span class=\"text-sm font-semibold\">{{ displayValue() }}</span>\r\n <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n</div>\r\n" });
68
+ 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" });
65
69
  }
66
70
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityDate, decorators: [{
67
71
  type: Component,
68
- 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 <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n</div>\r\n" }]
72
+ 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" }]
69
73
  }], 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 }] }] } });
70
74
 
71
75
  class EntityStatus {
@@ -110,12 +114,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
110
114
  class EntityUser {
111
115
  /** Full entity data object */
112
116
  data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
113
- /** Individual inputs (used when data is not provided) */
114
- displayName = input(...(ngDevMode ? [undefined, { debugName: "displayName" }] : []));
115
- photoUrl = input(...(ngDevMode ? [undefined, { debugName: "photoUrl" }] : []));
116
- rawUserName = computed(() => this.data()?.displayName ?? this.displayName() ?? null, ...(ngDevMode ? [{ debugName: "rawUserName" }] : []));
117
+ /** Resolved user value object from data().value */
118
+ userValue = computed(() => {
119
+ const val = this.data()?.value;
120
+ if (val && typeof val === 'object' && 'displayName' in val) {
121
+ return val;
122
+ }
123
+ return null;
124
+ }, ...(ngDevMode ? [{ debugName: "userValue" }] : []));
125
+ rawUserName = computed(() => this.userValue()?.displayName ?? null, ...(ngDevMode ? [{ debugName: "rawUserName" }] : []));
117
126
  userName = computed(() => displayOrPlaceholder(this.rawUserName()), ...(ngDevMode ? [{ debugName: "userName" }] : []));
118
- userPhoto = computed(() => this.data()?.photoUrl ?? this.photoUrl() ?? '', ...(ngDevMode ? [{ debugName: "userPhoto" }] : []));
127
+ userPhoto = computed(() => this.userValue()?.photoUrl ?? '', ...(ngDevMode ? [{ debugName: "userPhoto" }] : []));
119
128
  labelText = computed(() => '', ...(ngDevMode ? [{ debugName: "labelText" }] : []));
120
129
  initials = computed(() => {
121
130
  const rawName = this.rawUserName();
@@ -133,17 +142,17 @@ class EntityUser {
133
142
  showDisplayName = computed(() => this.config().showDisplayName ?? true, ...(ngDevMode ? [{ debugName: "showDisplayName" }] : []));
134
143
  showPhoneNumber = computed(() => this.config().showPhoneNumber ?? false, ...(ngDevMode ? [{ debugName: "showPhoneNumber" }] : []));
135
144
  showEmail = computed(() => this.config().showEmail ?? false, ...(ngDevMode ? [{ debugName: "showEmail" }] : []));
136
- phoneNumber = computed(() => this.data()?.phoneNumber ?? '', ...(ngDevMode ? [{ debugName: "phoneNumber" }] : []));
137
- email = computed(() => this.data()?.email ?? '', ...(ngDevMode ? [{ debugName: "email" }] : []));
145
+ phoneNumber = computed(() => this.userValue()?.phoneNumber ?? '', ...(ngDevMode ? [{ debugName: "phoneNumber" }] : []));
146
+ email = computed(() => this.userValue()?.email ?? '', ...(ngDevMode ? [{ debugName: "email" }] : []));
138
147
  hasContactInfo = computed(() => (this.showPhoneNumber() && !!this.phoneNumber()) ||
139
148
  (this.showEmail() && !!this.email()), ...(ngDevMode ? [{ debugName: "hasContactInfo" }] : []));
140
149
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityUser, deps: [], target: i0.ɵɵFactoryTarget.Component });
141
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityUser, isStandalone: true, selector: "mt-entity-user", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, displayName: { classPropertyName: "displayName", publicName: "displayName", isSignal: true, isRequired: false, transformFunction: null }, photoUrl: { classPropertyName: "photoUrl", publicName: "photoUrl", 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 : undefined : 'avatar/')\r\n : ''\r\n \"\r\n [label]=\"initials()\"\r\n styleClass=\"w-11! h-11! text-lg! text-white! 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 font-semibold 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" }] });
150
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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 : undefined : 'avatar/')\r\n : ''\r\n \"\r\n [label]=\"initials()\"\r\n styleClass=\"w-10! h-10! text-white! 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" }] });
142
151
  }
143
152
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityUser, decorators: [{
144
153
  type: Component,
145
- 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 : undefined : 'avatar/')\r\n : ''\r\n \"\r\n [label]=\"initials()\"\r\n styleClass=\"w-11! h-11! text-lg! text-white! 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 font-semibold 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" }]
146
- }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], displayName: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayName", required: false }] }], photoUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "photoUrl", required: false }] }] } });
154
+ 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 : undefined : 'avatar/')\r\n : ''\r\n \"\r\n [label]=\"initials()\"\r\n styleClass=\"w-10! h-10! text-white! 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" }]
155
+ }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
147
156
 
148
157
  class EntityPercentage {
149
158
  /** Full entity data object */
@@ -181,14 +190,13 @@ class EntityPercentage {
181
190
  return num > 100 ? Math.ceil(num) : 100;
182
191
  }, ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
183
192
  // ── Configuration-driven visibility ──
184
- config = computed(() => this.data()?.configuration ?? {}, ...(ngDevMode ? [{ debugName: "config" }] : []));
185
- showName = computed(() => this.config().showName ?? true, ...(ngDevMode ? [{ debugName: "showName" }] : []));
193
+ hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
186
194
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityPercentage, deps: [], target: i0.ɵɵFactoryTarget.Component });
187
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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 (showName()) {\r\n <span class=\"text-xs font-semibold\">{{ displayName() }}</span>\r\n }\r\n <span class=\"text-xs font-bold\" [class.ms-auto]=\"!showName()\">{{\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 >\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"] }] });
195
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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 >\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"] }] });
188
196
  }
189
197
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityPercentage, decorators: [{
190
198
  type: Component,
191
- 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 (showName()) {\r\n <span class=\"text-xs font-semibold\">{{ displayName() }}</span>\r\n }\r\n <span class=\"text-xs font-bold\" [class.ms-auto]=\"!showName()\">{{\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 >\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" }]
199
+ 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 >\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" }]
192
200
  }], 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 }] }] } });
193
201
 
194
202
  class EntityCurrency {
@@ -205,12 +213,13 @@ class EntityCurrency {
205
213
  }
206
214
  return displayOrPlaceholder(this.value());
207
215
  }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
216
+ hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
208
217
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityCurrency, deps: [], target: i0.ɵɵFactoryTarget.Component });
209
- 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: "<div class=\"flex flex-col gap-0.5\">\r\n <span class=\"text-sm font-semibold\">{{ displayValue() }}</span>\r\n <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n</div>\r\n" });
218
+ 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" });
210
219
  }
211
220
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityCurrency, decorators: [{
212
221
  type: Component,
213
- 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 <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\r\n</div>\r\n" }]
222
+ 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" }]
214
223
  }], 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 }] }] } });
215
224
 
216
225
  class EntityCheckbox {
@@ -222,6 +231,7 @@ class EntityCheckbox {
222
231
  rawValue = input(...(ngDevMode ? [undefined, { debugName: "rawValue" }] : []));
223
232
  displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
224
233
  emptyLabel = ENTITY_EMPTY_VALUE_PLACEHOLDER;
234
+ hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
225
235
  checkboxState = computed(() => {
226
236
  const raw = this.data()?.rawValue ?? this.rawValue();
227
237
  if (raw !== undefined && raw !== null) {
@@ -247,32 +257,142 @@ class EntityCheckbox {
247
257
  return null;
248
258
  }
249
259
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
250
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityCheckbox, isStandalone: true, selector: "mt-entity-checkbox", 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 items-center gap-2\">\r\n @if (checkboxState() === true) {\r\n <svg class=\"w-5 h-5 text-green-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path\r\n fill-rule=\"evenodd\"\r\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\r\n clip-rule=\"evenodd\"\r\n />\r\n </svg>\r\n } @else if (checkboxState() === false) {\r\n <svg class=\"w-5 h-5 text-gray-300\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path\r\n fill-rule=\"evenodd\"\r\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm-1-5.414l-2.293-2.293a1 1 0 011.414-1.414L10 11.172l3.879-3.879a1 1 0 111.414 1.414L10 13.414l-.707-.707-.293-.293z\"\r\n clip-rule=\"evenodd\"\r\n />\r\n </svg>\r\n } @else {\r\n <span\r\n class=\"inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-gray-100 px-1 text-[10px] font-semibold text-gray-500\"\r\n >\r\n {{ emptyLabel }}\r\n </span>\r\n }\r\n <span class=\"text-sm font-semibold\">{{ displayName() }}</span>\r\n</div>\r\n" });
260
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityCheckbox, isStandalone: true, selector: "mt-entity-checkbox", 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 items-center gap-2\">\r\n @if (checkboxState() === true) {\r\n <svg class=\"w-5 h-5 text-green-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path\r\n fill-rule=\"evenodd\"\r\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\r\n clip-rule=\"evenodd\"\r\n />\r\n </svg>\r\n } @else if (checkboxState() === false) {\r\n <svg class=\"w-5 h-5 text-gray-300\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path\r\n fill-rule=\"evenodd\"\r\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm-1-5.414l-2.293-2.293a1 1 0 011.414-1.414L10 11.172l3.879-3.879a1 1 0 111.414 1.414L10 13.414l-.707-.707-.293-.293z\"\r\n clip-rule=\"evenodd\"\r\n />\r\n </svg>\r\n } @else {\r\n <span\r\n class=\"inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-gray-100 px-1 text-[10px] font-semibold text-gray-500\"\r\n >\r\n {{ emptyLabel }}\r\n </span>\r\n }\r\n @if (!hideName()) {\r\n <span class=\"text-sm font-semibold\">{{ displayName() }}</span>\r\n }\r\n</div>\r\n" });
251
261
  }
252
262
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityCheckbox, decorators: [{
253
263
  type: Component,
254
- args: [{ selector: 'mt-entity-checkbox', standalone: true, template: "<div class=\"flex items-center gap-2\">\r\n @if (checkboxState() === true) {\r\n <svg class=\"w-5 h-5 text-green-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path\r\n fill-rule=\"evenodd\"\r\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\r\n clip-rule=\"evenodd\"\r\n />\r\n </svg>\r\n } @else if (checkboxState() === false) {\r\n <svg class=\"w-5 h-5 text-gray-300\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path\r\n fill-rule=\"evenodd\"\r\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm-1-5.414l-2.293-2.293a1 1 0 011.414-1.414L10 11.172l3.879-3.879a1 1 0 111.414 1.414L10 13.414l-.707-.707-.293-.293z\"\r\n clip-rule=\"evenodd\"\r\n />\r\n </svg>\r\n } @else {\r\n <span\r\n class=\"inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-gray-100 px-1 text-[10px] font-semibold text-gray-500\"\r\n >\r\n {{ emptyLabel }}\r\n </span>\r\n }\r\n <span class=\"text-sm font-semibold\">{{ displayName() }}</span>\r\n</div>\r\n" }]
264
+ args: [{ selector: 'mt-entity-checkbox', standalone: true, template: "<div class=\"flex items-center gap-2\">\r\n @if (checkboxState() === true) {\r\n <svg class=\"w-5 h-5 text-green-500\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path\r\n fill-rule=\"evenodd\"\r\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\r\n clip-rule=\"evenodd\"\r\n />\r\n </svg>\r\n } @else if (checkboxState() === false) {\r\n <svg class=\"w-5 h-5 text-gray-300\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n <path\r\n fill-rule=\"evenodd\"\r\n d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm-1-5.414l-2.293-2.293a1 1 0 011.414-1.414L10 11.172l3.879-3.879a1 1 0 111.414 1.414L10 13.414l-.707-.707-.293-.293z\"\r\n clip-rule=\"evenodd\"\r\n />\r\n </svg>\r\n } @else {\r\n <span\r\n class=\"inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-gray-100 px-1 text-[10px] font-semibold text-gray-500\"\r\n >\r\n {{ emptyLabel }}\r\n </span>\r\n }\r\n @if (!hideName()) {\r\n <span class=\"text-sm font-semibold\">{{ displayName() }}</span>\r\n }\r\n</div>\r\n" }]
255
265
  }], 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 }] }] } });
256
266
 
267
+ class EntityLongText {
268
+ /** Full entity data object */
269
+ data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
270
+ /** Individual inputs (used when data is not provided) */
271
+ name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
272
+ value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
273
+ displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
274
+ displayValue = computed(() => {
275
+ const d = this.data();
276
+ const raw = d
277
+ ? typeof d.value === 'string'
278
+ ? d.value
279
+ : null
280
+ : this.value();
281
+ if (isValueMissing(raw)) {
282
+ return ENTITY_EMPTY_VALUE_PLACEHOLDER;
283
+ }
284
+ return raw;
285
+ }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
286
+ hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
287
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityLongText, deps: [], target: i0.ɵɵFactoryTarget.Component });
288
+ 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" });
289
+ }
290
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityLongText, decorators: [{
291
+ type: Component,
292
+ 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" }]
293
+ }], 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 }] }] } });
294
+
295
+ class EntityLookup {
296
+ /** Full entity data object */
297
+ data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
298
+ /** Individual inputs (used when data is not provided) */
299
+ name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
300
+ value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
301
+ displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
302
+ lookupValue = computed(() => {
303
+ const d = this.data();
304
+ if (d && typeof d.value === 'object' && d.value !== null) {
305
+ return d.value;
306
+ }
307
+ return this.value() ?? null;
308
+ }, ...(ngDevMode ? [{ debugName: "lookupValue" }] : []));
309
+ badgeStyle = computed(() => {
310
+ const lookup = this.lookupValue();
311
+ if (!lookup?.color)
312
+ return {};
313
+ return {
314
+ color: lookup.color,
315
+ backgroundColor: this.hexToRgba(lookup.color, 0.12),
316
+ };
317
+ }, ...(ngDevMode ? [{ debugName: "badgeStyle" }] : []));
318
+ emptyLabel = ENTITY_EMPTY_VALUE_PLACEHOLDER;
319
+ lookupLabel = computed(() => displayOrPlaceholder(this.lookupValue()?.display), ...(ngDevMode ? [{ debugName: "lookupLabel" }] : []));
320
+ hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
321
+ hexToRgba(hex, alpha) {
322
+ const r = parseInt(hex.slice(1, 3), 16);
323
+ const g = parseInt(hex.slice(3, 5), 16);
324
+ const b = parseInt(hex.slice(5, 7), 16);
325
+ return `rgba(${r}, ${g}, ${b}, ${alpha})`;
326
+ }
327
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityLookup, deps: [], target: i0.ɵɵFactoryTarget.Component });
328
+ 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" });
329
+ }
330
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityLookup, decorators: [{
331
+ type: Component,
332
+ 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" }]
333
+ }], 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 }] }] } });
334
+
335
+ class EntityAttachment {
336
+ data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
337
+ name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
338
+ value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
339
+ displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
340
+ hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
341
+ attachments = computed(() => {
342
+ const value = this.data()?.value ?? this.value();
343
+ if (Array.isArray(value)) {
344
+ return value.filter((item) => {
345
+ return !!item && typeof item === 'object';
346
+ });
347
+ }
348
+ if (value && typeof value === 'object') {
349
+ return [value];
350
+ }
351
+ return [];
352
+ }, ...(ngDevMode ? [{ debugName: "attachments" }] : []));
353
+ empty = '-';
354
+ toUploadValue(attachment) {
355
+ if (attachment.contentType || attachment.extension) {
356
+ return attachment;
357
+ }
358
+ return attachment.fileName || attachment.id || attachment.name || null;
359
+ }
360
+ trackAttachment(index, attachment) {
361
+ return (attachment.fileName ||
362
+ attachment.id ||
363
+ attachment.name ||
364
+ `attachment-${index}`);
365
+ }
366
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityAttachment, deps: [], target: i0.ɵɵFactoryTarget.Component });
367
+ 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex w-full flex-col gap-2\">\n @if (!hideName()) {\n <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\n }\n\n @if (attachments().length) {\n <div class=\"grid gap-2\">\n @for (attachment of attachments(); track trackAttachment($index, attachment)) {\n <mt-upload-field\n class=\"w-full\"\n [ngModel]=\"toUploadValue(attachment)\"\n [ngModelOptions]=\"{ standalone: true }\"\n [shape]=\"'card'\"\n [readonly]=\"true\"\n />\n }\n </div>\n } @else {\n <span class=\"text-sm font-semibold\">{{ empty }}</span>\n }\n</div>\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", "accept", "isDragging", "fileSizeLimit", "readonly", "context"], outputs: ["isDraggingChange", "onChange"] }] });
368
+ }
369
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityAttachment, decorators: [{
370
+ type: Component,
371
+ args: [{ selector: 'mt-entity-attachment', standalone: true, imports: [FormsModule, UploadField], template: "<div class=\"flex w-full flex-col gap-2\">\n @if (!hideName()) {\n <span class=\"text-sm text-gray-500\">{{ displayName() }}</span>\n }\n\n @if (attachments().length) {\n <div class=\"grid gap-2\">\n @for (attachment of attachments(); track trackAttachment($index, attachment)) {\n <mt-upload-field\n class=\"w-full\"\n [ngModel]=\"toUploadValue(attachment)\"\n [ngModelOptions]=\"{ standalone: true }\"\n [shape]=\"'card'\"\n [readonly]=\"true\"\n />\n }\n </div>\n } @else {\n <span class=\"text-sm font-semibold\">{{ empty }}</span>\n }\n</div>\n" }]
372
+ }], 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 }] }] } });
373
+
257
374
  class EntityPreview {
258
375
  /** Single entity data to display */
259
376
  data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
260
377
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
261
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityPreview, isStandalone: true, selector: "mt-entity-preview", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "w-full" }, ngImport: i0, template: "@switch (data().viewType) {\r\n @case (\"Text\") {\r\n <mt-entity-text [data]=\"data()\" />\r\n }\r\n @case (\"Date\") {\r\n <mt-entity-date [data]=\"data()\" />\r\n }\r\n @case (\"DateTime\") {\r\n <mt-entity-date [data]=\"data()\" />\r\n }\r\n @case (\"Status\") {\r\n <mt-entity-status [data]=\"data()\" />\r\n }\r\n @case (\"User\") {\r\n <mt-entity-user [data]=\"data()\" />\r\n }\r\n @case (\"Percentage\") {\r\n <mt-entity-percentage [data]=\"data()\" />\r\n }\r\n @case (\"Currency\") {\r\n <mt-entity-currency [data]=\"data()\" />\r\n }\r\n @case (\"Checkbox\") {\r\n <mt-entity-checkbox [data]=\"data()\" />\r\n }\r\n @default {\r\n <mt-entity-text [data]=\"data()\" />\r\n }\r\n}\r\n", dependencies: [{ kind: "component", type: EntityText, selector: "mt-entity-text", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityDate, selector: "mt-entity-date", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityStatus, selector: "mt-entity-status", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityUser, selector: "mt-entity-user", inputs: ["data", "displayName", "photoUrl"] }, { kind: "component", type: EntityPercentage, selector: "mt-entity-percentage", inputs: ["data", "name", "value", "rawValue"] }, { kind: "component", type: EntityCurrency, selector: "mt-entity-currency", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityCheckbox, selector: "mt-entity-checkbox", inputs: ["data", "name", "value", "rawValue"] }] });
378
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: EntityPreview, isStandalone: true, selector: "mt-entity-preview", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "w-full" }, ngImport: i0, template: "@switch (data().viewType) {\r\n@case (\"Text\") {\r\n<mt-entity-text [data]=\"data()\" />\r\n}\r\n@case (\"LongText\") {\r\n<mt-entity-long-text [data]=\"data()\" />\r\n}\r\n@case (\"Date\") {\r\n<mt-entity-date [data]=\"data()\" />\r\n}\r\n@case (\"DateTime\") {\r\n<mt-entity-date [data]=\"data()\" />\r\n}\r\n@case (\"Status\") {\r\n<mt-entity-status [data]=\"data()\" />\r\n}\r\n@case (\"User\") {\r\n<mt-entity-user [data]=\"data()\" />\r\n}\r\n@case (\"Percentage\") {\r\n<mt-entity-percentage [data]=\"data()\" />\r\n}\r\n@case (\"Currency\") {\r\n<mt-entity-currency [data]=\"data()\" />\r\n}\r\n@case (\"Checkbox\") {\r\n<mt-entity-checkbox [data]=\"data()\" />\r\n}\r\n@case (\"Lookup\") {\r\n\r\n<mt-entity-lookup [data]=\"data()\" />\r\n}\r\n@case (\"Attachment\") {\r\n<mt-entity-attachment [data]=\"data()\" />\r\n}\r\n@default {\r\n<mt-entity-text [data]=\"data()\" />\r\n}\r\n}\r\n", dependencies: [{ kind: "component", type: EntityText, selector: "mt-entity-text", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityLongText, selector: "mt-entity-long-text", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityDate, selector: "mt-entity-date", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityStatus, selector: "mt-entity-status", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityUser, selector: "mt-entity-user", inputs: ["data"] }, { kind: "component", type: EntityPercentage, selector: "mt-entity-percentage", inputs: ["data", "name", "value", "rawValue"] }, { kind: "component", type: EntityCurrency, selector: "mt-entity-currency", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityCheckbox, selector: "mt-entity-checkbox", inputs: ["data", "name", "value", "rawValue"] }, { kind: "component", type: EntityLookup, selector: "mt-entity-lookup", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityAttachment, selector: "mt-entity-attachment", inputs: ["data", "name", "value"] }] });
262
379
  }
263
380
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityPreview, decorators: [{
264
381
  type: Component,
265
382
  args: [{ selector: 'mt-entity-preview', standalone: true, imports: [
266
383
  EntityText,
384
+ EntityLongText,
267
385
  EntityDate,
268
386
  EntityStatus,
269
387
  EntityUser,
270
388
  EntityPercentage,
271
389
  EntityCurrency,
272
390
  EntityCheckbox,
391
+ EntityLookup,
392
+ EntityAttachment,
273
393
  ], host: {
274
394
  class: 'w-full',
275
- }, template: "@switch (data().viewType) {\r\n @case (\"Text\") {\r\n <mt-entity-text [data]=\"data()\" />\r\n }\r\n @case (\"Date\") {\r\n <mt-entity-date [data]=\"data()\" />\r\n }\r\n @case (\"DateTime\") {\r\n <mt-entity-date [data]=\"data()\" />\r\n }\r\n @case (\"Status\") {\r\n <mt-entity-status [data]=\"data()\" />\r\n }\r\n @case (\"User\") {\r\n <mt-entity-user [data]=\"data()\" />\r\n }\r\n @case (\"Percentage\") {\r\n <mt-entity-percentage [data]=\"data()\" />\r\n }\r\n @case (\"Currency\") {\r\n <mt-entity-currency [data]=\"data()\" />\r\n }\r\n @case (\"Checkbox\") {\r\n <mt-entity-checkbox [data]=\"data()\" />\r\n }\r\n @default {\r\n <mt-entity-text [data]=\"data()\" />\r\n }\r\n}\r\n" }]
395
+ }, template: "@switch (data().viewType) {\r\n@case (\"Text\") {\r\n<mt-entity-text [data]=\"data()\" />\r\n}\r\n@case (\"LongText\") {\r\n<mt-entity-long-text [data]=\"data()\" />\r\n}\r\n@case (\"Date\") {\r\n<mt-entity-date [data]=\"data()\" />\r\n}\r\n@case (\"DateTime\") {\r\n<mt-entity-date [data]=\"data()\" />\r\n}\r\n@case (\"Status\") {\r\n<mt-entity-status [data]=\"data()\" />\r\n}\r\n@case (\"User\") {\r\n<mt-entity-user [data]=\"data()\" />\r\n}\r\n@case (\"Percentage\") {\r\n<mt-entity-percentage [data]=\"data()\" />\r\n}\r\n@case (\"Currency\") {\r\n<mt-entity-currency [data]=\"data()\" />\r\n}\r\n@case (\"Checkbox\") {\r\n<mt-entity-checkbox [data]=\"data()\" />\r\n}\r\n@case (\"Lookup\") {\r\n\r\n<mt-entity-lookup [data]=\"data()\" />\r\n}\r\n@case (\"Attachment\") {\r\n<mt-entity-attachment [data]=\"data()\" />\r\n}\r\n@default {\r\n<mt-entity-text [data]=\"data()\" />\r\n}\r\n}\r\n" }]
276
396
  }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
277
397
 
278
398
  class EntitiesPreview {
@@ -280,24 +400,24 @@ class EntitiesPreview {
280
400
  entities = input.required(...(ngDevMode ? [{ debugName: "entities" }] : []));
281
401
  /** Entities sorted by order */
282
402
  sortedEntities = computed(() => [...this.entities()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), ...(ngDevMode ? [{ debugName: "sortedEntities" }] : []));
283
- /** Returns the grid-column span for a given entity size (1-12) */
403
+ /** Returns the grid-column span for a given entity size (1-24) */
284
404
  getColSpan(entity) {
285
- const size = entity.configuration?.size ?? 4;
405
+ const size = entity.configuration?.size ?? 8;
286
406
  return `span ${size}`;
287
407
  }
288
408
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntitiesPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
289
- 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 } }, ngImport: i0, template: "<div class=\"grid grid-cols-12 gap-x-4 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 [data]=\"entity\" />\r\n </div>\r\n }\r\n</div>\r\n", dependencies: [{ kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data"] }] });
409
+ 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 } }, ngImport: i0, template: "<div class=\"grid grid-cols-24 gap-x-4 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 [data]=\"entity\" />\r\n </div>\r\n }\r\n</div>\r\n", dependencies: [{ kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data"] }] });
290
410
  }
291
411
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntitiesPreview, decorators: [{
292
412
  type: Component,
293
- args: [{ selector: 'mt-entities-preview', standalone: true, imports: [EntityPreview], template: "<div class=\"grid grid-cols-12 gap-x-4 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 [data]=\"entity\" />\r\n </div>\r\n }\r\n</div>\r\n" }]
413
+ args: [{ selector: 'mt-entities-preview', standalone: true, imports: [EntityPreview], template: "<div class=\"grid grid-cols-24 gap-x-4 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 [data]=\"entity\" />\r\n </div>\r\n }\r\n</div>\r\n" }]
294
414
  }], propDecorators: { entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }] } });
295
415
 
296
416
  /**
297
417
  * Base class that encapsulates all entity resize-via-drag logic.
298
418
  *
299
419
  * Extend this directive in any component that needs column-resize behaviour
300
- * on a 12-column CSS grid. The subclass must:
420
+ * on a 24-column CSS grid. The subclass must:
301
421
  * - Provide a `model.required<EntityData[]>()` (or equivalent) for the
302
422
  * entity list so `updateEntitySize()` can be called after resize.
303
423
  * - Contain a `.grid` element (or override `getGridElement()`).
@@ -337,7 +457,7 @@ class EntitiesResizeBase {
337
457
  if (this.resizingEntity() === entity && this.resizePreviewSize() !== null) {
338
458
  return `span ${this.resizePreviewSize()}`;
339
459
  }
340
- const size = entity.configuration?.size ?? 4;
460
+ const size = entity.configuration?.size ?? 8;
341
461
  return `span ${size}`;
342
462
  }
343
463
  /** Starts a resize operation from the right-edge handle */
@@ -350,8 +470,8 @@ class EntitiesResizeBase {
350
470
  return;
351
471
  const gridRect = gridEl.getBoundingClientRect();
352
472
  const gridWidth = gridRect.width;
353
- const columnWidth = gridWidth / 12;
354
- const previousSize = entity.configuration?.size ?? 4;
473
+ const columnWidth = gridWidth / 24;
474
+ const previousSize = entity.configuration?.size ?? 8;
355
475
  // Left edge of the entity cell
356
476
  const cellEl = event.target.closest('.entity-cell');
357
477
  if (!cellEl)
@@ -365,7 +485,7 @@ class EntitiesResizeBase {
365
485
  const rawWidth = e.clientX - cellLeft;
366
486
  // Snap to nearest full column (min 1, max 12)
367
487
  let cols = Math.round(rawWidth / columnWidth);
368
- cols = Math.max(1, Math.min(12, cols));
488
+ cols = Math.max(1, Math.min(24, cols));
369
489
  const current = this.resizePreviewSize();
370
490
  if (current !== cols) {
371
491
  this.zone.run(() => this.resizePreviewSize.set(cols));
@@ -411,7 +531,7 @@ class EntitiesManage extends EntitiesResizeBase {
411
531
  entitiesReordered = output();
412
532
  /** Entities sorted by their order field */
413
533
  sortedEntities = computed(() => [...this.entities()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), ...(ngDevMode ? [{ debugName: "sortedEntities" }] : []));
414
- /** Returns the grid-column span for a given entity size (1-12) */
534
+ /** Returns the grid-column span for a given entity size (1-24) */
415
535
  getColSpan(entity) {
416
536
  return this.getResizeColSpan(entity);
417
537
  }
@@ -455,16 +575,16 @@ class EntitiesManage extends EntitiesResizeBase {
455
575
  });
456
576
  }
457
577
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntitiesManage, deps: null, target: i0.ɵɵFactoryTarget.Component });
458
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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" }, 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-12 gap-x-4 gap-y-7\"\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\"\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 [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 [data]=\"entity\" class=\"flex-1 min-w-0\" />\r\n\r\n <!-- Resize handle (right edge) -->\r\n <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event, entity)\">\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;right:-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"] }, { 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"] }] });
578
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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" }, 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-7\"\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\"\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 [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 [data]=\"entity\" class=\"flex-1 min-w-0\" />\r\n\r\n <!-- Resize handle (right edge) -->\r\n <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event, entity)\">\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;right:-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"] }, { 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"] }] });
459
579
  }
460
580
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntitiesManage, decorators: [{
461
581
  type: Component,
462
- 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-12 gap-x-4 gap-y-7\"\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\"\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 [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 [data]=\"entity\" class=\"flex-1 min-w-0\" />\r\n\r\n <!-- Resize handle (right edge) -->\r\n <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event, entity)\">\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;right:-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"] }]
582
+ 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-7\"\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\"\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 [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 [data]=\"entity\" class=\"flex-1 min-w-0\" />\r\n\r\n <!-- Resize handle (right edge) -->\r\n <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event, entity)\">\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;right:-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"] }]
463
583
  }], propDecorators: { entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }, { type: i0.Output, args: ["entitiesChange"] }], entitiesReordered: [{ type: i0.Output, args: ["entitiesReordered"] }] } });
464
584
 
465
585
  /**
466
586
  * Generated bundle index. Do not edit.
467
587
  */
468
588
 
469
- export { EntitiesManage, EntitiesPreview, EntitiesResizeBase, EntityCheckbox, EntityCurrency, EntityDate, EntityPercentage, EntityPreview, EntityStatus, EntityText, EntityUser };
589
+ export { EntitiesManage, EntitiesPreview, EntitiesResizeBase, EntityAttachment, EntityCheckbox, EntityCurrency, EntityDate, EntityLongText, EntityLookup, EntityPercentage, EntityPreview, EntityStatus, EntityText, EntityUser };
470
590
  //# sourceMappingURL=masterteam-components-entities.mjs.map