@masterteam/components 0.0.143 → 0.0.145
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/fesm2022/masterteam-components-business-fields.mjs +1 -1
- package/fesm2022/masterteam-components-business-fields.mjs.map +1 -1
- package/fesm2022/masterteam-components-drawer.mjs +2 -2
- package/fesm2022/masterteam-components-drawer.mjs.map +1 -1
- package/fesm2022/masterteam-components-entities.mjs +27 -34
- package/fesm2022/masterteam-components-entities.mjs.map +1 -1
- package/fesm2022/masterteam-components-formula.mjs +2 -2
- package/fesm2022/masterteam-components-formula.mjs.map +1 -1
- package/fesm2022/masterteam-components-sidebar.mjs +2 -2
- package/fesm2022/masterteam-components-sidebar.mjs.map +1 -1
- package/fesm2022/masterteam-components-slider-field.mjs +2 -2
- package/fesm2022/masterteam-components-slider-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-statistic-card.mjs +2 -2
- package/fesm2022/masterteam-components-statistic-card.mjs.map +1 -1
- package/fesm2022/masterteam-components-table.mjs +47 -13
- package/fesm2022/masterteam-components-table.mjs.map +1 -1
- package/fesm2022/masterteam-components.mjs +48 -2
- package/fesm2022/masterteam-components.mjs.map +1 -1
- package/package.json +1 -1
- package/types/masterteam-components-entities.d.ts +5 -3
- package/types/masterteam-components-table.d.ts +4 -2
- package/types/masterteam-components.d.ts +22 -3
|
@@ -2,10 +2,10 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { input, computed, ChangeDetectionStrategy, Component, inject, signal, effect, ElementRef, NgZone, output, Directive, model } from '@angular/core';
|
|
3
3
|
import { TruncateTooltip, Tooltip } from '@masterteam/components/tooltip';
|
|
4
4
|
import { Icon } from '@masterteam/icons';
|
|
5
|
+
import { MTDateFormatPipe, REQUEST_CONTEXT } from '@masterteam/components';
|
|
5
6
|
import { HttpContext, HttpClient } from '@angular/common/http';
|
|
6
7
|
import { Avatar } from '@masterteam/components/avatar';
|
|
7
8
|
import { SecureImagePipe, UploadField } from '@masterteam/components/upload-field';
|
|
8
|
-
import { REQUEST_CONTEXT } from '@masterteam/components';
|
|
9
9
|
import { Progress } from '@masterteam/components/progress';
|
|
10
10
|
import * as i1 from '@angular/forms';
|
|
11
11
|
import { FormsModule } from '@angular/forms';
|
|
@@ -150,21 +150,19 @@ class EntityDate {
|
|
|
150
150
|
/** Individual inputs (used when data is not provided) */
|
|
151
151
|
name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
|
|
152
152
|
value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
153
|
+
viewType = input('Date', ...(ngDevMode ? [{ debugName: "viewType" }] : /* istanbul ignore next */ []));
|
|
153
154
|
displayName = computed(() => this.data()?.name ?? this.name() ?? '', ...(ngDevMode ? [{ debugName: "displayName" }] : /* istanbul ignore next */ []));
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
}
|
|
159
|
-
return displayOrPlaceholder(this.value());
|
|
160
|
-
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
|
|
155
|
+
resolvedViewType = computed(() => (this.data()?.viewType ?? this.viewType()) === 'DateTime'
|
|
156
|
+
? 'dateTime'
|
|
157
|
+
: 'date', ...(ngDevMode ? [{ debugName: "resolvedViewType" }] : /* istanbul ignore next */ []));
|
|
158
|
+
displayValue = computed(() => this.data()?.rawValue ?? this.data()?.value ?? this.value(), ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
|
|
161
159
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityDate, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
162
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
160
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityDate, isStandalone: true, selector: "mt-entity-date", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n [label]=\"displayName()\"\r\n [configuration]=\"data()?.configuration\"\r\n>\r\n <span\r\n class=\"block min-w-0 truncate text-sm font-semibold\"\r\n mtTruncateTooltip\r\n tooltipPosition=\"top\"\r\n >\r\n @if (displayValue()) {\r\n {{ displayValue() | mtDateFormat: resolvedViewType() }}\r\n } @else {\r\n -\r\n }\r\n </span>\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }, { kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }, { kind: "pipe", type: MTDateFormatPipe, name: "mtDateFormat" }] });
|
|
163
161
|
}
|
|
164
162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityDate, decorators: [{
|
|
165
163
|
type: Component,
|
|
166
|
-
args: [{ selector: 'mt-entity-date', standalone: true, imports: [EntityField, TruncateTooltip], template: "<mt-entity-field\r\n [label]=\"displayName()\"\r\n [configuration]=\"data()?.configuration\"\r\n>\r\n <span\r\n class=\"block min-w-0 truncate text-sm font-semibold\"\r\n mtTruncateTooltip\r\n tooltipPosition=\"top\"\r\n >\r\n {{ displayValue() }}\r\n </span>\r\n</mt-entity-field>\r\n" }]
|
|
167
|
-
}], 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 }] }] } });
|
|
164
|
+
args: [{ selector: 'mt-entity-date', standalone: true, imports: [EntityField, TruncateTooltip, MTDateFormatPipe], template: "<mt-entity-field\r\n [label]=\"displayName()\"\r\n [configuration]=\"data()?.configuration\"\r\n>\r\n <span\r\n class=\"block min-w-0 truncate text-sm font-semibold\"\r\n mtTruncateTooltip\r\n tooltipPosition=\"top\"\r\n >\r\n @if (displayValue()) {\r\n {{ displayValue() | mtDateFormat: resolvedViewType() }}\r\n } @else {\r\n -\r\n }\r\n </span>\r\n</mt-entity-field>\r\n" }]
|
|
165
|
+
}], 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 }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }] } });
|
|
168
166
|
|
|
169
167
|
class EntityStatus {
|
|
170
168
|
/** Full entity data object */
|
|
@@ -198,11 +196,11 @@ class EntityStatus {
|
|
|
198
196
|
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
199
197
|
}
|
|
200
198
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityStatus, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
201
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityStatus, isStandalone: true, selector: "mt-entity-status", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n [label]=\"displayName()\"\r\n [configuration]=\"data()?.configuration\"\r\n gap=\"normal\"\r\n>\r\n @if (statusValue(); as status) {\n <span\n class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit\"\n [style]=\"badgeStyle()\"\n >\n {{ statusLabel() }}\n </span>\n } @else {\n <span\n class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit text-gray-500 bg-gray-100\"\n >\n {{ emptyLabel }}\n </span>\n }\n</mt-entity-field>\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }] });
|
|
199
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityStatus, isStandalone: true, selector: "mt-entity-status", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n [label]=\"displayName()\"\r\n [configuration]=\"data()?.configuration\"\r\n gap=\"normal\"\r\n>\r\n @if (statusValue(); as status) {\r\n <span\r\n class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit\"\r\n [style]=\"badgeStyle()\"\r\n >\r\n {{ statusLabel() }}\r\n </span>\r\n } @else {\r\n <span\r\n class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit text-gray-500 bg-gray-100\"\r\n >\r\n {{ emptyLabel }}\r\n </span>\r\n }\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }] });
|
|
202
200
|
}
|
|
203
201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityStatus, decorators: [{
|
|
204
202
|
type: Component,
|
|
205
|
-
args: [{ selector: 'mt-entity-status', standalone: true, imports: [EntityField], template: "<mt-entity-field\r\n [label]=\"displayName()\"\r\n [configuration]=\"data()?.configuration\"\r\n gap=\"normal\"\r\n>\r\n @if (statusValue(); as status) {\n <span\n class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit\"\n [style]=\"badgeStyle()\"\n >\n {{ statusLabel() }}\n </span>\n } @else {\n <span\n class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit text-gray-500 bg-gray-100\"\n >\n {{ emptyLabel }}\n </span>\n }\n</mt-entity-field>\n" }]
|
|
203
|
+
args: [{ selector: 'mt-entity-status', standalone: true, imports: [EntityField], template: "<mt-entity-field\r\n [label]=\"displayName()\"\r\n [configuration]=\"data()?.configuration\"\r\n gap=\"normal\"\r\n>\r\n @if (statusValue(); as status) {\r\n <span\r\n class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit\"\r\n [style]=\"badgeStyle()\"\r\n >\r\n {{ statusLabel() }}\r\n </span>\r\n } @else {\r\n <span\r\n class=\"inline-flex items-center px-3 py-2 rounded-md text-xs font-semibold w-fit text-gray-500 bg-gray-100\"\r\n >\r\n {{ emptyLabel }}\r\n </span>\r\n }\r\n</mt-entity-field>\r\n" }]
|
|
206
204
|
}], 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 }] }] } });
|
|
207
205
|
|
|
208
206
|
class EntityUser {
|
|
@@ -233,11 +231,11 @@ class EntityUser {
|
|
|
233
231
|
hasContactInfo = computed(() => (this.showPhoneNumber() && !!this.phoneNumber()) ||
|
|
234
232
|
(this.showEmail() && !!this.email()), ...(ngDevMode ? [{ debugName: "hasContactInfo" }] : /* istanbul ignore next */ []));
|
|
235
233
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityUser, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
236
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityUser, isStandalone: true, selector: "mt-entity-user", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex items-center gap-2\">\r\n <mt-avatar\r\n [image]=\"\r\n userPhoto()\r\n ? (userPhoto() | secureImage: true : httpContext : 'avatar/')\r\n : ''\r\n \"\r\n [icon]=\"'user.user-01'\"\r\n styleClass=\"w-10! h-10! text-white! text-xxl! bg-primary-500!\"\r\n ></mt-avatar>\r\n\r\n @if (showDisplayName()) {\r\n <div class=\"flex flex-col min-w-0 flex-1\">\r\n <span class=\"text-sm text-gray-700 truncate\">{{ userName() }}</span>\r\n @if (labelText()) {\r\n <span class=\"text-xs text-gray-500 truncate\">{{ labelText() }}</span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (hasContactInfo()) {\r\n <div class=\"flex items-center gap-1 ms-auto shrink-0\">\r\n @if (showPhoneNumber() && phoneNumber()) {\r\n <a\r\n [href]=\"'tel:' + phoneNumber()\"\r\n [attr.aria-label]=\"phoneNumber()\"\r\n [mtTooltip]=\"phoneNumber()\"\r\n tooltipPosition=\"top\"\r\n class=\"inline-flex\"\r\n >\r\n <mt-avatar
|
|
234
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityUser, isStandalone: true, selector: "mt-entity-user", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex items-center gap-2\">\r\n <mt-avatar\r\n [image]=\"\r\n userPhoto()\r\n ? (userPhoto() | secureImage: true : httpContext : 'avatar/')\r\n : ''\r\n \"\r\n [icon]=\"'user.user-01'\"\r\n styleClass=\"w-10! h-10! text-white! text-xxl! bg-primary-500!\"\r\n ></mt-avatar>\r\n\r\n @if (showDisplayName()) {\r\n <div class=\"flex flex-col min-w-0 flex-1\">\r\n <span class=\"text-sm text-gray-700 truncate\">{{ userName() }}</span>\r\n @if (labelText()) {\r\n <span class=\"text-xs text-gray-500 truncate\">{{ labelText() }}</span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (hasContactInfo()) {\r\n <div class=\"flex items-center gap-1 ms-auto shrink-0\">\r\n @if (showPhoneNumber() && phoneNumber()) {\r\n <a\r\n [href]=\"'tel:' + phoneNumber()\"\r\n [attr.aria-label]=\"phoneNumber()\"\r\n [mtTooltip]=\"phoneNumber()\"\r\n tooltipPosition=\"top\"\r\n class=\"inline-flex\"\r\n >\r\n <mt-avatar icon=\"communication.phone\" badgeSeverity=\"secondary\" />\r\n </a>\r\n }\r\n @if (showEmail() && email()) {\r\n <a\r\n [href]=\"'mailto:' + email()\"\r\n [attr.aria-label]=\"email()\"\r\n [mtTooltip]=\"email()\"\r\n tooltipPosition=\"top\"\r\n class=\"inline-flex\"\r\n >\r\n <mt-avatar icon=\"communication.mail-01\" badgeSeverity=\"secondary\" />\r\n </a>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", dependencies: [{ kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }] });
|
|
237
235
|
}
|
|
238
236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityUser, decorators: [{
|
|
239
237
|
type: Component,
|
|
240
|
-
args: [{ selector: 'mt-entity-user', standalone: true, imports: [Avatar, Tooltip, SecureImagePipe], template: "<div class=\"flex items-center gap-2\">\r\n <mt-avatar\r\n [image]=\"\r\n userPhoto()\r\n ? (userPhoto() | secureImage: true : httpContext : 'avatar/')\r\n : ''\r\n \"\r\n [icon]=\"'user.user-01'\"\r\n styleClass=\"w-10! h-10! text-white! text-xxl! bg-primary-500!\"\r\n ></mt-avatar>\r\n\r\n @if (showDisplayName()) {\r\n <div class=\"flex flex-col min-w-0 flex-1\">\r\n <span class=\"text-sm text-gray-700 truncate\">{{ userName() }}</span>\r\n @if (labelText()) {\r\n <span class=\"text-xs text-gray-500 truncate\">{{ labelText() }}</span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (hasContactInfo()) {\r\n <div class=\"flex items-center gap-1 ms-auto shrink-0\">\r\n @if (showPhoneNumber() && phoneNumber()) {\r\n <a\r\n [href]=\"'tel:' + phoneNumber()\"\r\n [attr.aria-label]=\"phoneNumber()\"\r\n [mtTooltip]=\"phoneNumber()\"\r\n tooltipPosition=\"top\"\r\n class=\"inline-flex\"\r\n >\r\n <mt-avatar
|
|
238
|
+
args: [{ selector: 'mt-entity-user', standalone: true, imports: [Avatar, Tooltip, SecureImagePipe], template: "<div class=\"flex items-center gap-2\">\r\n <mt-avatar\r\n [image]=\"\r\n userPhoto()\r\n ? (userPhoto() | secureImage: true : httpContext : 'avatar/')\r\n : ''\r\n \"\r\n [icon]=\"'user.user-01'\"\r\n styleClass=\"w-10! h-10! text-white! text-xxl! bg-primary-500!\"\r\n ></mt-avatar>\r\n\r\n @if (showDisplayName()) {\r\n <div class=\"flex flex-col min-w-0 flex-1\">\r\n <span class=\"text-sm text-gray-700 truncate\">{{ userName() }}</span>\r\n @if (labelText()) {\r\n <span class=\"text-xs text-gray-500 truncate\">{{ labelText() }}</span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (hasContactInfo()) {\r\n <div class=\"flex items-center gap-1 ms-auto shrink-0\">\r\n @if (showPhoneNumber() && phoneNumber()) {\r\n <a\r\n [href]=\"'tel:' + phoneNumber()\"\r\n [attr.aria-label]=\"phoneNumber()\"\r\n [mtTooltip]=\"phoneNumber()\"\r\n tooltipPosition=\"top\"\r\n class=\"inline-flex\"\r\n >\r\n <mt-avatar icon=\"communication.phone\" badgeSeverity=\"secondary\" />\r\n </a>\r\n }\r\n @if (showEmail() && email()) {\r\n <a\r\n [href]=\"'mailto:' + email()\"\r\n [attr.aria-label]=\"email()\"\r\n [mtTooltip]=\"email()\"\r\n tooltipPosition=\"top\"\r\n class=\"inline-flex\"\r\n >\r\n <mt-avatar icon=\"communication.mail-01\" badgeSeverity=\"secondary\" />\r\n </a>\r\n }\r\n </div>\r\n }\r\n</div>\r\n" }]
|
|
241
239
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
|
|
242
240
|
|
|
243
241
|
class EntityPercentage {
|
|
@@ -290,11 +288,11 @@ class EntityPercentage {
|
|
|
290
288
|
return Number.isNaN(numericValue) ? null : numericValue;
|
|
291
289
|
}
|
|
292
290
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityPercentage, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
293
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityPercentage, isStandalone: true, selector: "mt-entity-percentage", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rawValue: { classPropertyName: "rawValue", publicName: "rawValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-1\">\n <div class=\"flex items-center justify-between\">\n @if (!hideName()) {\n <span class=\"text-xs font-semibold\">{{ displayName() }}</span>\n }\n <span class=\"text-xs font-bold\" [class.ms-auto]=\"hideName()\">{{\n displayValue()\n }}</span>\n </div>\n @if (hasNumericValue()) {\n <mt-progress\n [value]=\"numericValue()\"\n [showLabel]=\"false\"\n [height]=\"9\"\n [maxValue]=\"maxValue()\"\n [color]=\"progressColor()\"\n >\n </mt-progress>\n } @else {\n <div class=\"h-[9px] rounded-full bg-gray-200\"></div>\n }\n</div>\n", dependencies: [{ kind: "component", type: Progress, selector: "mt-progress", inputs: ["value", "mode", "showLabel", "unit", "color", "minValue", "maxValue", "height", "circleSize", "strokeWidth", "customClass"] }] });
|
|
291
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityPercentage, isStandalone: true, selector: "mt-entity-percentage", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rawValue: { classPropertyName: "rawValue", publicName: "rawValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-1\">\r\n <div class=\"flex items-center justify-between\">\r\n @if (!hideName()) {\r\n <span class=\"text-xs font-semibold\">{{ displayName() }}</span>\r\n }\r\n <span class=\"text-xs font-bold\" [class.ms-auto]=\"hideName()\">{{\r\n displayValue()\r\n }}</span>\r\n </div>\r\n @if (hasNumericValue()) {\r\n <mt-progress\r\n [value]=\"numericValue()\"\r\n [showLabel]=\"false\"\r\n [height]=\"9\"\r\n [maxValue]=\"maxValue()\"\r\n [color]=\"progressColor()\"\r\n >\r\n </mt-progress>\r\n } @else {\r\n <div class=\"h-[9px] rounded-full bg-gray-200\"></div>\r\n }\r\n</div>\r\n", dependencies: [{ kind: "component", type: Progress, selector: "mt-progress", inputs: ["value", "mode", "showLabel", "unit", "color", "minValue", "maxValue", "height", "circleSize", "strokeWidth", "customClass"] }] });
|
|
294
292
|
}
|
|
295
293
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityPercentage, decorators: [{
|
|
296
294
|
type: Component,
|
|
297
|
-
args: [{ selector: 'mt-entity-percentage', standalone: true, imports: [Progress], template: "<div class=\"flex flex-col gap-1\">\n <div class=\"flex items-center justify-between\">\n @if (!hideName()) {\n <span class=\"text-xs font-semibold\">{{ displayName() }}</span>\n }\n <span class=\"text-xs font-bold\" [class.ms-auto]=\"hideName()\">{{\n displayValue()\n }}</span>\n </div>\n @if (hasNumericValue()) {\n <mt-progress\n [value]=\"numericValue()\"\n [showLabel]=\"false\"\n [height]=\"9\"\n [maxValue]=\"maxValue()\"\n [color]=\"progressColor()\"\n >\n </mt-progress>\n } @else {\n <div class=\"h-[9px] rounded-full bg-gray-200\"></div>\n }\n</div>\n" }]
|
|
295
|
+
args: [{ selector: 'mt-entity-percentage', standalone: true, imports: [Progress], template: "<div class=\"flex flex-col gap-1\">\r\n <div class=\"flex items-center justify-between\">\r\n @if (!hideName()) {\r\n <span class=\"text-xs font-semibold\">{{ displayName() }}</span>\r\n }\r\n <span class=\"text-xs font-bold\" [class.ms-auto]=\"hideName()\">{{\r\n displayValue()\r\n }}</span>\r\n </div>\r\n @if (hasNumericValue()) {\r\n <mt-progress\r\n [value]=\"numericValue()\"\r\n [showLabel]=\"false\"\r\n [height]=\"9\"\r\n [maxValue]=\"maxValue()\"\r\n [color]=\"progressColor()\"\r\n >\r\n </mt-progress>\r\n } @else {\r\n <div class=\"h-[9px] rounded-full bg-gray-200\"></div>\r\n }\r\n</div>\r\n" }]
|
|
298
296
|
}], 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 }] }] } });
|
|
299
297
|
|
|
300
298
|
class EntityCurrency {
|
|
@@ -381,11 +379,11 @@ class EntityLongText {
|
|
|
381
379
|
return raw;
|
|
382
380
|
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
|
|
383
381
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityLongText, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
384
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EntityLongText, isStandalone: true, selector: "mt-entity-long-text", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n [label]=\"displayName()\"\r\n [configuration]=\"data()?.configuration\"\r\n>\r\n <div
|
|
382
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EntityLongText, isStandalone: true, selector: "mt-entity-long-text", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n [label]=\"displayName()\"\r\n [configuration]=\"data()?.configuration\"\r\n>\r\n <div\r\n class=\"text-sm font-semibold break-words\"\r\n [innerHTML]=\"displayValue()\"\r\n ></div>\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }] });
|
|
385
383
|
}
|
|
386
384
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityLongText, decorators: [{
|
|
387
385
|
type: Component,
|
|
388
|
-
args: [{ selector: 'mt-entity-long-text', standalone: true, imports: [EntityField], template: "<mt-entity-field\r\n [label]=\"displayName()\"\r\n [configuration]=\"data()?.configuration\"\r\n>\r\n <div
|
|
386
|
+
args: [{ selector: 'mt-entity-long-text', standalone: true, imports: [EntityField], template: "<mt-entity-field\r\n [label]=\"displayName()\"\r\n [configuration]=\"data()?.configuration\"\r\n>\r\n <div\r\n class=\"text-sm font-semibold break-words\"\r\n [innerHTML]=\"displayValue()\"\r\n ></div>\r\n</mt-entity-field>\r\n" }]
|
|
389
387
|
}], 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 }] }] } });
|
|
390
388
|
|
|
391
389
|
class EntityLookup {
|
|
@@ -711,10 +709,7 @@ function isLeafDetailsStatusSummary(value) {
|
|
|
711
709
|
'count' in value);
|
|
712
710
|
}
|
|
713
711
|
function isLeafDetailsCatalogStatusValue(value) {
|
|
714
|
-
return (!!value &&
|
|
715
|
-
typeof value === 'object' &&
|
|
716
|
-
'key' in value &&
|
|
717
|
-
'display' in value);
|
|
712
|
+
return (!!value && typeof value === 'object' && 'key' in value && 'display' in value);
|
|
718
713
|
}
|
|
719
714
|
function isLeafDetailsCatalogLevelValue(value) {
|
|
720
715
|
return (!!value &&
|
|
@@ -727,10 +722,7 @@ function isLeafDetailsCatalogLevelValue(value) {
|
|
|
727
722
|
value.statuses.every(isLeafDetailsCatalogStatusValue));
|
|
728
723
|
}
|
|
729
724
|
function isLeafDetailsRuntimeStatusDetails(value) {
|
|
730
|
-
return (!!value &&
|
|
731
|
-
typeof value === 'object' &&
|
|
732
|
-
'key' in value &&
|
|
733
|
-
'display' in value);
|
|
725
|
+
return (!!value && typeof value === 'object' && 'key' in value && 'display' in value);
|
|
734
726
|
}
|
|
735
727
|
function isLeafDetailsRuntimeStatusCount(value) {
|
|
736
728
|
return (!!value &&
|
|
@@ -836,7 +828,8 @@ function expandLeafDetailsEntity(entity) {
|
|
|
836
828
|
if (entity.viewType !== 'LeafDetails') {
|
|
837
829
|
return [entity];
|
|
838
830
|
}
|
|
839
|
-
if (isLeafDetailsSyntheticKey(entity.key) &&
|
|
831
|
+
if (isLeafDetailsSyntheticKey(entity.key) &&
|
|
832
|
+
isLeafDetailsValue(entity.value)) {
|
|
840
833
|
return [entity];
|
|
841
834
|
}
|
|
842
835
|
const configuration = entity.configuration;
|
|
@@ -896,7 +889,7 @@ class EntityPreview {
|
|
|
896
889
|
return viewType === 'LookupMatrix' ? 'Lookup' : viewType;
|
|
897
890
|
}, ...(ngDevMode ? [{ debugName: "previewType" }] : /* istanbul ignore next */ []));
|
|
898
891
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
899
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityPreview, isStandalone: true, selector: "mt-entity-preview", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, attachmentShape: { classPropertyName: "attachmentShape", publicName: "attachmentShape", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "w-full" }, ngImport: i0, template: "@switch (previewType()) {\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 (\"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 @case (\"Status\") {\r\n <mt-entity-status [data]=\"data()\" />\r\n }\r\n @case (\"Attachment\") {\r\n <mt-entity-attachment [data]=\"data()\" [shape]=\"attachmentShape()\" />\r\n }\r\n @case (\"LeafDetails\") {\r\n <mt-entity-leaf-details [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: EntityUser, selector: "mt-entity-user", inputs: ["data"] }, { kind: "component", type: EntityPercentage, selector: "mt-entity-percentage", inputs: ["data", "name", "value", "rawValue"] }, { kind: "component", type: EntityCurrency, selector: "mt-entity-currency", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityCheckbox, selector: "mt-entity-checkbox", inputs: ["data", "name", "value", "rawValue"] }, { kind: "component", type: EntityLookup, selector: "mt-entity-lookup", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityAttachment, selector: "mt-entity-attachment", inputs: ["data", "name", "shape", "value", "endPoint", "context"] }, { kind: "component", type: EntityStatus, selector: "mt-entity-status", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityLeafDetails, selector: "mt-entity-leaf-details", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
892
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityPreview, isStandalone: true, selector: "mt-entity-preview", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, attachmentShape: { classPropertyName: "attachmentShape", publicName: "attachmentShape", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "w-full" }, ngImport: i0, template: "@switch (previewType()) {\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()\" [viewType]=\"'DateTime'\" />\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 @case (\"Status\") {\r\n <mt-entity-status [data]=\"data()\" />\r\n }\r\n @case (\"Attachment\") {\r\n <mt-entity-attachment [data]=\"data()\" [shape]=\"attachmentShape()\" />\r\n }\r\n @case (\"LeafDetails\") {\r\n <mt-entity-leaf-details [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", "viewType"] }, { kind: "component", type: EntityUser, selector: "mt-entity-user", inputs: ["data"] }, { kind: "component", type: EntityPercentage, selector: "mt-entity-percentage", inputs: ["data", "name", "value", "rawValue"] }, { kind: "component", type: EntityCurrency, selector: "mt-entity-currency", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityCheckbox, selector: "mt-entity-checkbox", inputs: ["data", "name", "value", "rawValue"] }, { kind: "component", type: EntityLookup, selector: "mt-entity-lookup", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityAttachment, selector: "mt-entity-attachment", inputs: ["data", "name", "shape", "value", "endPoint", "context"] }, { kind: "component", type: EntityStatus, selector: "mt-entity-status", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityLeafDetails, selector: "mt-entity-leaf-details", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
900
893
|
}
|
|
901
894
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityPreview, decorators: [{
|
|
902
895
|
type: Component,
|
|
@@ -914,7 +907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
914
907
|
EntityLeafDetails,
|
|
915
908
|
], host: {
|
|
916
909
|
class: 'w-full',
|
|
917
|
-
}, template: "@switch (previewType()) {\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 (\"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 @case (\"Status\") {\r\n <mt-entity-status [data]=\"data()\" />\r\n }\r\n @case (\"Attachment\") {\r\n <mt-entity-attachment [data]=\"data()\" [shape]=\"attachmentShape()\" />\r\n }\r\n @case (\"LeafDetails\") {\r\n <mt-entity-leaf-details [data]=\"data()\" />\r\n }\r\n @default {\r\n <mt-entity-text [data]=\"data()\" />\r\n }\r\n}\r\n" }]
|
|
910
|
+
}, template: "@switch (previewType()) {\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()\" [viewType]=\"'DateTime'\" />\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 @case (\"Status\") {\r\n <mt-entity-status [data]=\"data()\" />\r\n }\r\n @case (\"Attachment\") {\r\n <mt-entity-attachment [data]=\"data()\" [shape]=\"attachmentShape()\" />\r\n }\r\n @case (\"LeafDetails\") {\r\n <mt-entity-leaf-details [data]=\"data()\" />\r\n }\r\n @default {\r\n <mt-entity-text [data]=\"data()\" />\r\n }\r\n}\r\n" }]
|
|
918
911
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], attachmentShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachmentShape", required: false }] }] } });
|
|
919
912
|
|
|
920
913
|
class EntitiesPreview {
|
|
@@ -929,11 +922,11 @@ class EntitiesPreview {
|
|
|
929
922
|
return `span ${size}`;
|
|
930
923
|
}
|
|
931
924
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntitiesPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
932
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntitiesPreview, isStandalone: true, selector: "mt-entities-preview", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, attachmentShape: { classPropertyName: "attachmentShape", publicName: "attachmentShape", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid grid-cols-24 gap-x-3 gap-y-5\">\r\n @for (entity of displayEntities()
|
|
925
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntitiesPreview, isStandalone: true, selector: "mt-entities-preview", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, attachmentShape: { classPropertyName: "attachmentShape", publicName: "attachmentShape", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid grid-cols-24 gap-x-3 gap-y-5\">\r\n @for (\r\n entity of displayEntities();\r\n track entity.key ?? entity.order ?? $index\r\n ) {\r\n <div\r\n class=\"min-w-0 flex items-center\"\r\n [class.border]=\"entity.configuration?.showBorder\"\r\n [class.p-3]=\"entity.configuration?.showBorder\"\r\n [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n [class.border-gray-200]=\"entity.configuration?.showBorder\"\r\n [class.rounded-lg]=\"entity.configuration?.showBorder\"\r\n [style.grid-column]=\"getColSpan(entity)\"\r\n >\r\n <mt-entity-preview\r\n [data]=\"entity\"\r\n [attachmentShape]=\"attachmentShape()\"\r\n />\r\n </div>\r\n }\r\n</div>\r\n", dependencies: [{ kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }] });
|
|
933
926
|
}
|
|
934
927
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntitiesPreview, decorators: [{
|
|
935
928
|
type: Component,
|
|
936
|
-
args: [{ selector: 'mt-entities-preview', standalone: true, imports: [EntityPreview], template: "<div class=\"grid grid-cols-24 gap-x-3 gap-y-5\">\r\n @for (entity of displayEntities()
|
|
929
|
+
args: [{ selector: 'mt-entities-preview', standalone: true, imports: [EntityPreview], template: "<div class=\"grid grid-cols-24 gap-x-3 gap-y-5\">\r\n @for (\r\n entity of displayEntities();\r\n track entity.key ?? entity.order ?? $index\r\n ) {\r\n <div\r\n class=\"min-w-0 flex items-center\"\r\n [class.border]=\"entity.configuration?.showBorder\"\r\n [class.p-3]=\"entity.configuration?.showBorder\"\r\n [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n [class.border-gray-200]=\"entity.configuration?.showBorder\"\r\n [class.rounded-lg]=\"entity.configuration?.showBorder\"\r\n [style.grid-column]=\"getColSpan(entity)\"\r\n >\r\n <mt-entity-preview\r\n [data]=\"entity\"\r\n [attachmentShape]=\"attachmentShape()\"\r\n />\r\n </div>\r\n }\r\n</div>\r\n" }]
|
|
937
930
|
}], propDecorators: { entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }], attachmentShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachmentShape", required: false }] }] } });
|
|
938
931
|
|
|
939
932
|
/**
|
|
@@ -1108,11 +1101,11 @@ class EntitiesManage extends EntitiesResizeBase {
|
|
|
1108
1101
|
});
|
|
1109
1102
|
}
|
|
1110
1103
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntitiesManage, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1111
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntitiesManage, isStandalone: true, selector: "mt-entities-manage", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { entities: "entitiesChange", entitiesReordered: "entitiesReordered", entityClicked: "entityClicked" }, usesInheritance: true, ngImport: i0, template: "<div\r\n cdkDropList\r\n cdkDropListOrientation=\"mixed\"\r\n [cdkDropListData]=\"displayEntities()\"\r\n (cdkDropListDropped)=\"onDrop($event)\"\r\n class=\"grid grid-cols-24 gap-x-4 gap-y-6\"\r\n>\r\n @for (entity of displayEntities()
|
|
1104
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntitiesManage, isStandalone: true, selector: "mt-entities-manage", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { entities: "entitiesChange", entitiesReordered: "entitiesReordered", entityClicked: "entityClicked" }, usesInheritance: true, ngImport: i0, template: "<div\r\n cdkDropList\r\n cdkDropListOrientation=\"mixed\"\r\n [cdkDropListData]=\"displayEntities()\"\r\n (cdkDropListDropped)=\"onDrop($event)\"\r\n class=\"grid grid-cols-24 gap-x-4 gap-y-6\"\r\n>\r\n @for (\r\n entity of displayEntities();\r\n track entity.key ?? entity.order ?? $index\r\n ) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"entity\"\r\n class=\"entity-cell group relative min-w-0 flex items-center p-3 cursor-grab active:cursor-grabbing rounded-lg transition-colors bg-surface-100/60\"\r\n [class.border]=\"entity.configuration?.showBorder\"\r\n [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n [class.border-gray-300]=\"entity.configuration?.showBorder\"\r\n [class.resizing]=\"resizingEntity() === entity\"\r\n [style.grid-column]=\"getColSpan(entity)\"\r\n >\r\n <!-- Drag placeholder -->\r\n <div\r\n *cdkDragPlaceholder\r\n class=\"h-full min-h-12 bg-black/10 rounded-xl\"\r\n [style.grid-column]=\"getColSpan(entity)\"\r\n ></div>\r\n\r\n <mt-entity-preview\r\n [data]=\"entity\"\r\n class=\"flex-1 min-w-0 cursor-pointer\"\r\n (click)=\"entityClicked.emit(entity)\"\r\n />\r\n\r\n <!-- Resize handle (right edge) -->\r\n <div\r\n class=\"resize-handle\"\r\n (mousedown)=\"onResizeStart($event, entity)\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <div class=\"resize-handle-bar\"></div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active{cursor:grabbing}.cdk-drag-preview{cursor:grabbing;overflow:hidden}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}.entity-cell{position:relative}.resize-handle{position:absolute;top:0;inset-inline-end:-4px;width:8px;height:100%;cursor:col-resize;z-index:10;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease}.entity-cell:hover .resize-handle,.entity-cell.resizing .resize-handle{opacity:1}.resize-handle-bar{width:3px;height:24px;border-radius:2px;background-color:var(--p-primary-color, #6366f1);transition:height .15s ease,background-color .15s ease}.resize-handle:hover .resize-handle-bar{height:36px;background-color:var(--p-primary-color, #4f46e5)}.entity-cell.resizing{outline:2px dashed var(--p-primary-color, #6366f1);outline-offset:-1px;border-radius:8px;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] });
|
|
1112
1105
|
}
|
|
1113
1106
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntitiesManage, decorators: [{
|
|
1114
1107
|
type: Component,
|
|
1115
|
-
args: [{ selector: 'mt-entities-manage', standalone: true, imports: [EntityPreview, CdkDrag, CdkDropList, CdkDragPlaceholder], template: "<div\r\n cdkDropList\r\n cdkDropListOrientation=\"mixed\"\r\n [cdkDropListData]=\"displayEntities()\"\r\n (cdkDropListDropped)=\"onDrop($event)\"\r\n class=\"grid grid-cols-24 gap-x-4 gap-y-6\"\r\n>\r\n @for (entity of displayEntities()
|
|
1108
|
+
args: [{ selector: 'mt-entities-manage', standalone: true, imports: [EntityPreview, CdkDrag, CdkDropList, CdkDragPlaceholder], template: "<div\r\n cdkDropList\r\n cdkDropListOrientation=\"mixed\"\r\n [cdkDropListData]=\"displayEntities()\"\r\n (cdkDropListDropped)=\"onDrop($event)\"\r\n class=\"grid grid-cols-24 gap-x-4 gap-y-6\"\r\n>\r\n @for (\r\n entity of displayEntities();\r\n track entity.key ?? entity.order ?? $index\r\n ) {\r\n <div\r\n cdkDrag\r\n [cdkDragData]=\"entity\"\r\n class=\"entity-cell group relative min-w-0 flex items-center p-3 cursor-grab active:cursor-grabbing rounded-lg transition-colors bg-surface-100/60\"\r\n [class.border]=\"entity.configuration?.showBorder\"\r\n [class.border-dashed]=\"entity.configuration?.showBorder\"\r\n [class.border-gray-300]=\"entity.configuration?.showBorder\"\r\n [class.resizing]=\"resizingEntity() === entity\"\r\n [style.grid-column]=\"getColSpan(entity)\"\r\n >\r\n <!-- Drag placeholder -->\r\n <div\r\n *cdkDragPlaceholder\r\n class=\"h-full min-h-12 bg-black/10 rounded-xl\"\r\n [style.grid-column]=\"getColSpan(entity)\"\r\n ></div>\r\n\r\n <mt-entity-preview\r\n [data]=\"entity\"\r\n class=\"flex-1 min-w-0 cursor-pointer\"\r\n (click)=\"entityClicked.emit(entity)\"\r\n />\r\n\r\n <!-- Resize handle (right edge) -->\r\n <div\r\n class=\"resize-handle\"\r\n (mousedown)=\"onResizeStart($event, entity)\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <div class=\"resize-handle-bar\"></div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active{cursor:grabbing}.cdk-drag-preview{cursor:grabbing;overflow:hidden}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}.entity-cell{position:relative}.resize-handle{position:absolute;top:0;inset-inline-end:-4px;width:8px;height:100%;cursor:col-resize;z-index:10;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease}.entity-cell:hover .resize-handle,.entity-cell.resizing .resize-handle{opacity:1}.resize-handle-bar{width:3px;height:24px;border-radius:2px;background-color:var(--p-primary-color, #6366f1);transition:height .15s ease,background-color .15s ease}.resize-handle:hover .resize-handle-bar{height:36px;background-color:var(--p-primary-color, #4f46e5)}.entity-cell.resizing{outline:2px dashed var(--p-primary-color, #6366f1);outline-offset:-1px;border-radius:8px;-webkit-user-select:none;user-select:none}\n"] }]
|
|
1116
1109
|
}], propDecorators: { entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }, { type: i0.Output, args: ["entitiesChange"] }], entitiesReordered: [{ type: i0.Output, args: ["entitiesReordered"] }], entityClicked: [{ type: i0.Output, args: ["entityClicked"] }] } });
|
|
1117
1110
|
|
|
1118
1111
|
/**
|