@masterteam/components 0.0.125 → 0.0.126

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.
@@ -1,5 +1,6 @@
1
1
  import * as i0 from '@angular/core';
2
- import { input, computed, Component, inject, signal, effect, ChangeDetectionStrategy, ElementRef, NgZone, output, Directive, model } from '@angular/core';
2
+ import { input, computed, ChangeDetectionStrategy, Component, inject, signal, effect, ElementRef, NgZone, output, Directive, model } from '@angular/core';
3
+ import { TruncateTooltip } from '@masterteam/components/tooltip';
3
4
  import { HttpContext, HttpClient } from '@angular/common/http';
4
5
  import { Avatar } from '@masterteam/components/avatar';
5
6
  import { Button } from '@masterteam/components/button';
@@ -28,6 +29,71 @@ function displayOrPlaceholder(value) {
28
29
  }
29
30
  return String(value);
30
31
  }
32
+ function isEntityLabelHidden(configuration) {
33
+ const config = configuration;
34
+ return config?.hideLabel ?? config?.hideName ?? false;
35
+ }
36
+ function resolveEntityLabelPosition(configuration) {
37
+ const config = configuration;
38
+ return config?.labelPosition ?? config?.labelPostion ?? 'bottom';
39
+ }
40
+
41
+ class EntityField {
42
+ label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
43
+ configuration = input(...(ngDevMode ? [undefined, { debugName: "configuration" }] : []));
44
+ gap = input('compact', ...(ngDevMode ? [{ debugName: "gap" }] : []));
45
+ hideLabel = computed(() => isEntityLabelHidden(this.configuration()), ...(ngDevMode ? [{ debugName: "hideLabel" }] : []));
46
+ labelPosition = computed(() => resolveEntityLabelPosition(this.configuration()), ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
47
+ containerClass = computed(() => {
48
+ const gapClass = this.gap() === 'relaxed'
49
+ ? 'gap-2'
50
+ : this.gap() === 'normal'
51
+ ? 'gap-1'
52
+ : 'gap-0.5';
53
+ const directionClass = this.labelPosition() === 'top' ? 'flex-col-reverse' : 'flex-col';
54
+ return `flex min-w-0 ${directionClass} ${gapClass}`;
55
+ }, ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
56
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityField, deps: [], target: i0.ɵɵFactoryTarget.Component });
57
+ 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: `
58
+ <div [class]="containerClass()">
59
+ <ng-content />
60
+ @if (!hideLabel()) {
61
+ <span
62
+ class="block min-w-0 truncate text-sm text-gray-500"
63
+ mtTruncateTooltip
64
+ tooltipPosition="top"
65
+ >
66
+ {{ label() }}
67
+ </span>
68
+ }
69
+ </div>
70
+ `, isInline: true, dependencies: [{ kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
71
+ }
72
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityField, decorators: [{
73
+ type: Component,
74
+ args: [{
75
+ selector: 'mt-entity-field',
76
+ changeDetection: ChangeDetectionStrategy.OnPush,
77
+ imports: [TruncateTooltip],
78
+ template: `
79
+ <div [class]="containerClass()">
80
+ <ng-content />
81
+ @if (!hideLabel()) {
82
+ <span
83
+ class="block min-w-0 truncate text-sm text-gray-500"
84
+ mtTruncateTooltip
85
+ tooltipPosition="top"
86
+ >
87
+ {{ label() }}
88
+ </span>
89
+ }
90
+ </div>
91
+ `,
92
+ host: {
93
+ class: 'block min-w-0 w-full',
94
+ },
95
+ }]
96
+ }], 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 }] }] } });
31
97
 
32
98
  class EntityText {
33
99
  /** Full entity data object */
@@ -43,13 +109,12 @@ class EntityText {
43
109
  }
44
110
  return displayOrPlaceholder(this.value());
45
111
  }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
46
- hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
47
112
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityText, deps: [], target: i0.ɵɵFactoryTarget.Component });
48
- 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" });
113
+ 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]" }] });
49
114
  }
50
115
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityText, decorators: [{
51
116
  type: Component,
52
- 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" }]
117
+ 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" }]
53
118
  }], 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 }] }] } });
54
119
 
55
120
  class EntityDate {
@@ -66,13 +131,12 @@ class EntityDate {
66
131
  }
67
132
  return displayOrPlaceholder(this.value());
68
133
  }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
69
- hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
70
134
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityDate, deps: [], target: i0.ɵɵFactoryTarget.Component });
71
- 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" });
135
+ 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]" }] });
72
136
  }
73
137
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityDate, decorators: [{
74
138
  type: Component,
75
- 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" }]
139
+ 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" }]
76
140
  }], 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 }] }] } });
77
141
 
78
142
  class EntityStatus {
@@ -100,7 +164,6 @@ class EntityStatus {
100
164
  }, ...(ngDevMode ? [{ debugName: "badgeStyle" }] : []));
101
165
  emptyLabel = ENTITY_EMPTY_VALUE_PLACEHOLDER;
102
166
  statusLabel = computed(() => displayOrPlaceholder(this.statusValue()?.display), ...(ngDevMode ? [{ debugName: "statusLabel" }] : []));
103
- hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
104
167
  hexToRgba(hex, alpha) {
105
168
  const r = parseInt(hex.slice(1, 3), 16);
106
169
  const g = parseInt(hex.slice(3, 5), 16);
@@ -108,11 +171,11 @@ class EntityStatus {
108
171
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
109
172
  }
110
173
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityStatus, deps: [], target: i0.ɵɵFactoryTarget.Component });
111
- 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" });
174
+ 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"] }] });
112
175
  }
113
176
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityStatus, decorators: [{
114
177
  type: Component,
115
- 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" }]
178
+ 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" }]
116
179
  }], 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 }] }] } });
117
180
 
118
181
  class EntityUser {
@@ -183,7 +246,7 @@ class EntityPercentage {
183
246
  return num > 100 ? Math.ceil(num) : 100;
184
247
  }, ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
185
248
  // ── Configuration-driven visibility ──
186
- hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
249
+ hideName = computed(() => isEntityLabelHidden(this.data()?.configuration), ...(ngDevMode ? [{ debugName: "hideName" }] : []));
187
250
  progressColor = computed(() => {
188
251
  const configuration = this.data()?.configuration;
189
252
  return configuration?.color?.trim() || 'primary';
@@ -221,13 +284,12 @@ class EntityCurrency {
221
284
  }
222
285
  return displayOrPlaceholder(this.value());
223
286
  }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
224
- hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
225
287
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityCurrency, deps: [], target: i0.ɵɵFactoryTarget.Component });
226
- 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" });
288
+ 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]" }] });
227
289
  }
228
290
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityCurrency, decorators: [{
229
291
  type: Component,
230
- 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" }]
292
+ 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" }]
231
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 }] }] } });
232
294
 
233
295
  class EntityCheckbox {
@@ -239,7 +301,7 @@ class EntityCheckbox {
239
301
  rawValue = input(...(ngDevMode ? [undefined, { debugName: "rawValue" }] : []));
240
302
  displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
241
303
  emptyLabel = ENTITY_EMPTY_VALUE_PLACEHOLDER;
242
- hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
304
+ hideName = computed(() => isEntityLabelHidden(this.data()?.configuration), ...(ngDevMode ? [{ debugName: "hideName" }] : []));
243
305
  checkboxState = computed(() => {
244
306
  const raw = this.data()?.rawValue ?? this.rawValue();
245
307
  if (raw !== undefined && raw !== null) {
@@ -291,13 +353,12 @@ class EntityLongText {
291
353
  }
292
354
  return raw;
293
355
  }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
294
- hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
295
356
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityLongText, deps: [], target: i0.ɵɵFactoryTarget.Component });
296
- 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" });
357
+ 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"] }] });
297
358
  }
298
359
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityLongText, decorators: [{
299
360
  type: Component,
300
- 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" }]
361
+ 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" }]
301
362
  }], 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 }] }] } });
302
363
 
303
364
  class EntityLookup {
@@ -325,7 +386,6 @@ class EntityLookup {
325
386
  }, ...(ngDevMode ? [{ debugName: "badgeStyle" }] : []));
326
387
  emptyLabel = ENTITY_EMPTY_VALUE_PLACEHOLDER;
327
388
  lookupLabel = computed(() => displayOrPlaceholder(this.lookupValue()?.display), ...(ngDevMode ? [{ debugName: "lookupLabel" }] : []));
328
- hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
329
389
  hexToRgba(hex, alpha) {
330
390
  const r = parseInt(hex.slice(1, 3), 16);
331
391
  const g = parseInt(hex.slice(3, 5), 16);
@@ -333,11 +393,11 @@ class EntityLookup {
333
393
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
334
394
  }
335
395
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityLookup, deps: [], target: i0.ɵɵFactoryTarget.Component });
336
- 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" });
396
+ 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"] }] });
337
397
  }
338
398
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityLookup, decorators: [{
339
399
  type: Component,
340
- 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" }]
400
+ 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" }]
341
401
  }], 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 }] }] } });
342
402
 
343
403
  class EntityAttachment {
@@ -349,7 +409,6 @@ class EntityAttachment {
349
409
  context = input(undefined, ...(ngDevMode ? [{ debugName: "context" }] : []));
350
410
  httpClient = inject(HttpClient);
351
411
  displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
352
- hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
353
412
  loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
354
413
  attachments = signal([], ...(ngDevMode ? [{ debugName: "attachments" }] : []));
355
414
  attachmentReferences = computed(() => this.normalizeAttachmentValue(this.data()?.value ?? this.value()), ...(ngDevMode ? [{ debugName: "attachmentReferences" }] : []));
@@ -568,11 +627,11 @@ class EntityAttachment {
568
627
  return `.${fileName.split('.').pop().toLowerCase()}`;
569
628
  }
570
629
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityAttachment, deps: [], target: i0.ɵɵFactoryTarget.Component });
571
- 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"] }] });
630
+ 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"] }] });
572
631
  }
573
632
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityAttachment, decorators: [{
574
633
  type: Component,
575
- 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" }]
634
+ 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" }]
576
635
  }], 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 }] }] } });
577
636
 
578
637
  class EntityPreview {
@@ -801,5 +860,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
801
860
  * Generated bundle index. Do not edit.
802
861
  */
803
862
 
804
- export { EntitiesManage, EntitiesPreview, EntitiesResizeBase, EntityAttachment, EntityCheckbox, EntityCurrency, EntityDate, EntityLongText, EntityLookup, EntityPercentage, EntityPreview, EntityStatus, EntityText, EntityUser };
863
+ export { EntitiesManage, EntitiesPreview, EntitiesResizeBase, EntityAttachment, EntityCheckbox, EntityCurrency, EntityDate, EntityField, EntityLongText, EntityLookup, EntityPercentage, EntityPreview, EntityStatus, EntityText, EntityUser };
805
864
  //# sourceMappingURL=masterteam-components-entities.mjs.map