@masterteam/components 0.0.94 → 0.0.97
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.
- package/assets/common.css +1 -1
- package/fesm2022/masterteam-components-drawer.mjs +23 -5
- package/fesm2022/masterteam-components-drawer.mjs.map +1 -1
- package/fesm2022/masterteam-components-entities.mjs +115 -37
- package/fesm2022/masterteam-components-entities.mjs.map +1 -1
- package/fesm2022/masterteam-components-formula.mjs.map +1 -1
- package/fesm2022/masterteam-components-table.mjs +91 -4
- package/fesm2022/masterteam-components-table.mjs.map +1 -1
- package/fesm2022/masterteam-components-topbar.mjs +2 -2
- package/fesm2022/masterteam-components-topbar.mjs.map +1 -1
- package/package.json +2 -2
- package/types/masterteam-components-drawer.d.ts +6 -2
- package/types/masterteam-components-entities.d.ts +71 -24
- package/types/masterteam-components-table.d.ts +16 -2
|
@@ -38,12 +38,13 @@ class EntityText {
|
|
|
38
38
|
}
|
|
39
39
|
return displayOrPlaceholder(this.value());
|
|
40
40
|
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
|
|
41
|
+
hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
|
|
41
42
|
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.
|
|
43
|
+
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
44
|
}
|
|
44
45
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityText, decorators: [{
|
|
45
46
|
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" }]
|
|
47
|
+
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
48
|
}], 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
49
|
|
|
49
50
|
class EntityDate {
|
|
@@ -60,12 +61,13 @@ class EntityDate {
|
|
|
60
61
|
}
|
|
61
62
|
return displayOrPlaceholder(this.value());
|
|
62
63
|
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
|
|
64
|
+
hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
|
|
63
65
|
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.
|
|
66
|
+
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
67
|
}
|
|
66
68
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityDate, decorators: [{
|
|
67
69
|
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" }]
|
|
70
|
+
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
71
|
}], 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
72
|
|
|
71
73
|
class EntityStatus {
|
|
@@ -110,12 +112,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
110
112
|
class EntityUser {
|
|
111
113
|
/** Full entity data object */
|
|
112
114
|
data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
|
|
113
|
-
/**
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
115
|
+
/** Resolved user value object from data().value */
|
|
116
|
+
userValue = computed(() => {
|
|
117
|
+
const val = this.data()?.value;
|
|
118
|
+
if (val && typeof val === 'object' && 'displayName' in val) {
|
|
119
|
+
return val;
|
|
120
|
+
}
|
|
121
|
+
return null;
|
|
122
|
+
}, ...(ngDevMode ? [{ debugName: "userValue" }] : []));
|
|
123
|
+
rawUserName = computed(() => this.userValue()?.displayName ?? null, ...(ngDevMode ? [{ debugName: "rawUserName" }] : []));
|
|
117
124
|
userName = computed(() => displayOrPlaceholder(this.rawUserName()), ...(ngDevMode ? [{ debugName: "userName" }] : []));
|
|
118
|
-
userPhoto = computed(() => this.
|
|
125
|
+
userPhoto = computed(() => this.userValue()?.photoUrl ?? '', ...(ngDevMode ? [{ debugName: "userPhoto" }] : []));
|
|
119
126
|
labelText = computed(() => '', ...(ngDevMode ? [{ debugName: "labelText" }] : []));
|
|
120
127
|
initials = computed(() => {
|
|
121
128
|
const rawName = this.rawUserName();
|
|
@@ -133,17 +140,17 @@ class EntityUser {
|
|
|
133
140
|
showDisplayName = computed(() => this.config().showDisplayName ?? true, ...(ngDevMode ? [{ debugName: "showDisplayName" }] : []));
|
|
134
141
|
showPhoneNumber = computed(() => this.config().showPhoneNumber ?? false, ...(ngDevMode ? [{ debugName: "showPhoneNumber" }] : []));
|
|
135
142
|
showEmail = computed(() => this.config().showEmail ?? false, ...(ngDevMode ? [{ debugName: "showEmail" }] : []));
|
|
136
|
-
phoneNumber = computed(() => this.
|
|
137
|
-
email = computed(() => this.
|
|
143
|
+
phoneNumber = computed(() => this.userValue()?.phoneNumber ?? '', ...(ngDevMode ? [{ debugName: "phoneNumber" }] : []));
|
|
144
|
+
email = computed(() => this.userValue()?.email ?? '', ...(ngDevMode ? [{ debugName: "email" }] : []));
|
|
138
145
|
hasContactInfo = computed(() => (this.showPhoneNumber() && !!this.phoneNumber()) ||
|
|
139
146
|
(this.showEmail() && !!this.email()), ...(ngDevMode ? [{ debugName: "hasContactInfo" }] : []));
|
|
140
147
|
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 }
|
|
148
|
+
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
149
|
}
|
|
143
150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityUser, decorators: [{
|
|
144
151
|
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-
|
|
146
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }]
|
|
152
|
+
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" }]
|
|
153
|
+
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
|
|
147
154
|
|
|
148
155
|
class EntityPercentage {
|
|
149
156
|
/** Full entity data object */
|
|
@@ -181,14 +188,13 @@ class EntityPercentage {
|
|
|
181
188
|
return num > 100 ? Math.ceil(num) : 100;
|
|
182
189
|
}, ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
|
|
183
190
|
// ── Configuration-driven visibility ──
|
|
184
|
-
|
|
185
|
-
showName = computed(() => this.config().showName ?? true, ...(ngDevMode ? [{ debugName: "showName" }] : []));
|
|
191
|
+
hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
|
|
186
192
|
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 (
|
|
193
|
+
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
194
|
}
|
|
189
195
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityPercentage, decorators: [{
|
|
190
196
|
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 (
|
|
197
|
+
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
198
|
}], 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
199
|
|
|
194
200
|
class EntityCurrency {
|
|
@@ -205,12 +211,13 @@ class EntityCurrency {
|
|
|
205
211
|
}
|
|
206
212
|
return displayOrPlaceholder(this.value());
|
|
207
213
|
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
|
|
214
|
+
hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
|
|
208
215
|
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.
|
|
216
|
+
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
217
|
}
|
|
211
218
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityCurrency, decorators: [{
|
|
212
219
|
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" }]
|
|
220
|
+
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
221
|
}], 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
222
|
|
|
216
223
|
class EntityCheckbox {
|
|
@@ -222,6 +229,7 @@ class EntityCheckbox {
|
|
|
222
229
|
rawValue = input(...(ngDevMode ? [undefined, { debugName: "rawValue" }] : []));
|
|
223
230
|
displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
|
|
224
231
|
emptyLabel = ENTITY_EMPTY_VALUE_PLACEHOLDER;
|
|
232
|
+
hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
|
|
225
233
|
checkboxState = computed(() => {
|
|
226
234
|
const raw = this.data()?.rawValue ?? this.rawValue();
|
|
227
235
|
if (raw !== undefined && raw !== null) {
|
|
@@ -247,32 +255,102 @@ class EntityCheckbox {
|
|
|
247
255
|
return null;
|
|
248
256
|
}
|
|
249
257
|
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" });
|
|
258
|
+
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
259
|
}
|
|
252
260
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityCheckbox, decorators: [{
|
|
253
261
|
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" }]
|
|
262
|
+
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
263
|
}], 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
264
|
|
|
265
|
+
class EntityLongText {
|
|
266
|
+
/** Full entity data object */
|
|
267
|
+
data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
|
|
268
|
+
/** Individual inputs (used when data is not provided) */
|
|
269
|
+
name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
|
|
270
|
+
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
271
|
+
displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
|
|
272
|
+
displayValue = computed(() => {
|
|
273
|
+
const d = this.data();
|
|
274
|
+
const raw = d
|
|
275
|
+
? typeof d.value === 'string'
|
|
276
|
+
? d.value
|
|
277
|
+
: null
|
|
278
|
+
: this.value();
|
|
279
|
+
if (isValueMissing(raw)) {
|
|
280
|
+
return ENTITY_EMPTY_VALUE_PLACEHOLDER;
|
|
281
|
+
}
|
|
282
|
+
return raw;
|
|
283
|
+
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
|
|
284
|
+
hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
|
|
285
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityLongText, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
286
|
+
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" });
|
|
287
|
+
}
|
|
288
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityLongText, decorators: [{
|
|
289
|
+
type: Component,
|
|
290
|
+
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" }]
|
|
291
|
+
}], 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 }] }] } });
|
|
292
|
+
|
|
293
|
+
class EntityLookup {
|
|
294
|
+
/** Full entity data object */
|
|
295
|
+
data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
|
|
296
|
+
/** Individual inputs (used when data is not provided) */
|
|
297
|
+
name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
|
|
298
|
+
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
299
|
+
displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : []));
|
|
300
|
+
lookupValue = computed(() => {
|
|
301
|
+
const d = this.data();
|
|
302
|
+
if (d && typeof d.value === 'object' && d.value !== null) {
|
|
303
|
+
return d.value;
|
|
304
|
+
}
|
|
305
|
+
return this.value() ?? null;
|
|
306
|
+
}, ...(ngDevMode ? [{ debugName: "lookupValue" }] : []));
|
|
307
|
+
badgeStyle = computed(() => {
|
|
308
|
+
const lookup = this.lookupValue();
|
|
309
|
+
if (!lookup?.color)
|
|
310
|
+
return {};
|
|
311
|
+
return {
|
|
312
|
+
color: lookup.color,
|
|
313
|
+
backgroundColor: this.hexToRgba(lookup.color, 0.12),
|
|
314
|
+
};
|
|
315
|
+
}, ...(ngDevMode ? [{ debugName: "badgeStyle" }] : []));
|
|
316
|
+
emptyLabel = ENTITY_EMPTY_VALUE_PLACEHOLDER;
|
|
317
|
+
lookupLabel = computed(() => displayOrPlaceholder(this.lookupValue()?.display), ...(ngDevMode ? [{ debugName: "lookupLabel" }] : []));
|
|
318
|
+
hideName = computed(() => this.data()?.configuration?.hideName ?? false, ...(ngDevMode ? [{ debugName: "hideName" }] : []));
|
|
319
|
+
hexToRgba(hex, alpha) {
|
|
320
|
+
const r = parseInt(hex.slice(1, 3), 16);
|
|
321
|
+
const g = parseInt(hex.slice(3, 5), 16);
|
|
322
|
+
const b = parseInt(hex.slice(5, 7), 16);
|
|
323
|
+
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
324
|
+
}
|
|
325
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityLookup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
326
|
+
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" });
|
|
327
|
+
}
|
|
328
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityLookup, decorators: [{
|
|
329
|
+
type: Component,
|
|
330
|
+
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" }]
|
|
331
|
+
}], 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 }] }] } });
|
|
332
|
+
|
|
257
333
|
class EntityPreview {
|
|
258
334
|
/** Single entity data to display */
|
|
259
335
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
260
336
|
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:
|
|
337
|
+
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 <mt-entity-lookup [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"] }] });
|
|
262
338
|
}
|
|
263
339
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntityPreview, decorators: [{
|
|
264
340
|
type: Component,
|
|
265
341
|
args: [{ selector: 'mt-entity-preview', standalone: true, imports: [
|
|
266
342
|
EntityText,
|
|
343
|
+
EntityLongText,
|
|
267
344
|
EntityDate,
|
|
268
345
|
EntityStatus,
|
|
269
346
|
EntityUser,
|
|
270
347
|
EntityPercentage,
|
|
271
348
|
EntityCurrency,
|
|
272
349
|
EntityCheckbox,
|
|
350
|
+
EntityLookup,
|
|
273
351
|
], host: {
|
|
274
352
|
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" }]
|
|
353
|
+
}, 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 <mt-entity-lookup [data]=\"data()\" />\r\n }\r\n @default {\r\n <mt-entity-text [data]=\"data()\" />\r\n }\r\n}\r\n" }]
|
|
276
354
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
|
|
277
355
|
|
|
278
356
|
class EntitiesPreview {
|
|
@@ -280,24 +358,24 @@ class EntitiesPreview {
|
|
|
280
358
|
entities = input.required(...(ngDevMode ? [{ debugName: "entities" }] : []));
|
|
281
359
|
/** Entities sorted by order */
|
|
282
360
|
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-
|
|
361
|
+
/** Returns the grid-column span for a given entity size (1-24) */
|
|
284
362
|
getColSpan(entity) {
|
|
285
|
-
const size = entity.configuration?.size ??
|
|
363
|
+
const size = entity.configuration?.size ?? 8;
|
|
286
364
|
return `span ${size}`;
|
|
287
365
|
}
|
|
288
366
|
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-
|
|
367
|
+
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
368
|
}
|
|
291
369
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntitiesPreview, decorators: [{
|
|
292
370
|
type: Component,
|
|
293
|
-
args: [{ selector: 'mt-entities-preview', standalone: true, imports: [EntityPreview], template: "<div class=\"grid grid-cols-
|
|
371
|
+
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
372
|
}], propDecorators: { entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }] } });
|
|
295
373
|
|
|
296
374
|
/**
|
|
297
375
|
* Base class that encapsulates all entity resize-via-drag logic.
|
|
298
376
|
*
|
|
299
377
|
* Extend this directive in any component that needs column-resize behaviour
|
|
300
|
-
* on a
|
|
378
|
+
* on a 24-column CSS grid. The subclass must:
|
|
301
379
|
* - Provide a `model.required<EntityData[]>()` (or equivalent) for the
|
|
302
380
|
* entity list so `updateEntitySize()` can be called after resize.
|
|
303
381
|
* - Contain a `.grid` element (or override `getGridElement()`).
|
|
@@ -337,7 +415,7 @@ class EntitiesResizeBase {
|
|
|
337
415
|
if (this.resizingEntity() === entity && this.resizePreviewSize() !== null) {
|
|
338
416
|
return `span ${this.resizePreviewSize()}`;
|
|
339
417
|
}
|
|
340
|
-
const size = entity.configuration?.size ??
|
|
418
|
+
const size = entity.configuration?.size ?? 8;
|
|
341
419
|
return `span ${size}`;
|
|
342
420
|
}
|
|
343
421
|
/** Starts a resize operation from the right-edge handle */
|
|
@@ -350,8 +428,8 @@ class EntitiesResizeBase {
|
|
|
350
428
|
return;
|
|
351
429
|
const gridRect = gridEl.getBoundingClientRect();
|
|
352
430
|
const gridWidth = gridRect.width;
|
|
353
|
-
const columnWidth = gridWidth /
|
|
354
|
-
const previousSize = entity.configuration?.size ??
|
|
431
|
+
const columnWidth = gridWidth / 24;
|
|
432
|
+
const previousSize = entity.configuration?.size ?? 8;
|
|
355
433
|
// Left edge of the entity cell
|
|
356
434
|
const cellEl = event.target.closest('.entity-cell');
|
|
357
435
|
if (!cellEl)
|
|
@@ -365,7 +443,7 @@ class EntitiesResizeBase {
|
|
|
365
443
|
const rawWidth = e.clientX - cellLeft;
|
|
366
444
|
// Snap to nearest full column (min 1, max 12)
|
|
367
445
|
let cols = Math.round(rawWidth / columnWidth);
|
|
368
|
-
cols = Math.max(1, Math.min(
|
|
446
|
+
cols = Math.max(1, Math.min(24, cols));
|
|
369
447
|
const current = this.resizePreviewSize();
|
|
370
448
|
if (current !== cols) {
|
|
371
449
|
this.zone.run(() => this.resizePreviewSize.set(cols));
|
|
@@ -411,7 +489,7 @@ class EntitiesManage extends EntitiesResizeBase {
|
|
|
411
489
|
entitiesReordered = output();
|
|
412
490
|
/** Entities sorted by their order field */
|
|
413
491
|
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-
|
|
492
|
+
/** Returns the grid-column span for a given entity size (1-24) */
|
|
415
493
|
getColSpan(entity) {
|
|
416
494
|
return this.getResizeColSpan(entity);
|
|
417
495
|
}
|
|
@@ -455,16 +533,16 @@ class EntitiesManage extends EntitiesResizeBase {
|
|
|
455
533
|
});
|
|
456
534
|
}
|
|
457
535
|
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-
|
|
536
|
+
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
537
|
}
|
|
460
538
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: EntitiesManage, decorators: [{
|
|
461
539
|
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-
|
|
540
|
+
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
541
|
}], propDecorators: { entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }, { type: i0.Output, args: ["entitiesChange"] }], entitiesReordered: [{ type: i0.Output, args: ["entitiesReordered"] }] } });
|
|
464
542
|
|
|
465
543
|
/**
|
|
466
544
|
* Generated bundle index. Do not edit.
|
|
467
545
|
*/
|
|
468
546
|
|
|
469
|
-
export { EntitiesManage, EntitiesPreview, EntitiesResizeBase, EntityCheckbox, EntityCurrency, EntityDate, EntityPercentage, EntityPreview, EntityStatus, EntityText, EntityUser };
|
|
547
|
+
export { EntitiesManage, EntitiesPreview, EntitiesResizeBase, EntityCheckbox, EntityCurrency, EntityDate, EntityLongText, EntityLookup, EntityPercentage, EntityPreview, EntityStatus, EntityText, EntityUser };
|
|
470
548
|
//# sourceMappingURL=masterteam-components-entities.mjs.map
|