@masterteam/components 0.0.142 → 0.0.143
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-client-page-menu.mjs +2 -2
- package/fesm2022/masterteam-components-client-page-menu.mjs.map +1 -1
- package/fesm2022/masterteam-components-client-page.mjs +4 -8
- package/fesm2022/masterteam-components-client-page.mjs.map +1 -1
- package/fesm2022/masterteam-components-entities.mjs +261 -48
- package/fesm2022/masterteam-components-entities.mjs.map +1 -1
- package/fesm2022/masterteam-components-paginator.mjs +2 -2
- package/fesm2022/masterteam-components-paginator.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-table.mjs +15 -3
- 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/fesm2022/masterteam-components.mjs +90 -76
- package/fesm2022/masterteam-components.mjs.map +1 -1
- package/package.json +1 -1
- package/types/masterteam-components-client-page.d.ts +0 -2
- package/types/masterteam-components-entities.d.ts +76 -11
- package/types/masterteam-components-table.d.ts +2 -0
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
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
|
-
import { TruncateTooltip } from '@masterteam/components/tooltip';
|
|
3
|
+
import { TruncateTooltip, Tooltip } from '@masterteam/components/tooltip';
|
|
4
|
+
import { Icon } from '@masterteam/icons';
|
|
4
5
|
import { HttpContext, HttpClient } from '@angular/common/http';
|
|
5
6
|
import { Avatar } from '@masterteam/components/avatar';
|
|
6
|
-
import { Button } from '@masterteam/components/button';
|
|
7
7
|
import { SecureImagePipe, UploadField } from '@masterteam/components/upload-field';
|
|
8
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';
|
|
12
|
+
import { Button } from '@masterteam/components/button';
|
|
12
13
|
import { forkJoin, finalize, of, take, switchMap, EMPTY, map, catchError } from 'rxjs';
|
|
13
14
|
import * as i1$1 from 'primeng/tooltip';
|
|
14
15
|
import { TooltipModule } from 'primeng/tooltip';
|
|
@@ -46,10 +47,17 @@ function resolveEntityLabelPosition(configuration) {
|
|
|
46
47
|
|
|
47
48
|
class EntityField {
|
|
48
49
|
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
50
|
+
labelIconName = input(null, ...(ngDevMode ? [{ debugName: "labelIconName" }] : /* istanbul ignore next */ []));
|
|
49
51
|
configuration = input(...(ngDevMode ? [undefined, { debugName: "configuration" }] : /* istanbul ignore next */ []));
|
|
50
52
|
gap = input('compact', ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
|
|
51
53
|
hideLabel = computed(() => isEntityLabelHidden(this.configuration()), ...(ngDevMode ? [{ debugName: "hideLabel" }] : /* istanbul ignore next */ []));
|
|
52
54
|
labelPosition = computed(() => resolveEntityLabelPosition(this.configuration()), ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
|
|
55
|
+
labelContainerClass = computed(() => {
|
|
56
|
+
const justifyClass = isEntityAlignEnd(this.configuration())
|
|
57
|
+
? 'justify-end'
|
|
58
|
+
: '';
|
|
59
|
+
return `flex min-w-0 items-center gap-1 text-sm text-gray-500 ${justifyClass}`.trimEnd();
|
|
60
|
+
}, ...(ngDevMode ? [{ debugName: "labelContainerClass" }] : /* istanbul ignore next */ []));
|
|
53
61
|
containerClass = computed(() => {
|
|
54
62
|
const gapClass = this.gap() === 'relaxed'
|
|
55
63
|
? 'gap-2'
|
|
@@ -63,38 +71,48 @@ class EntityField {
|
|
|
63
71
|
return `flex min-w-0 ${directionClass} ${gapClass} ${alignClass}`.trimEnd();
|
|
64
72
|
}, ...(ngDevMode ? [{ debugName: "containerClass" }] : /* istanbul ignore next */ []));
|
|
65
73
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
66
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityField, isStandalone: true, selector: "mt-entity-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block min-w-0 w-full" }, ngImport: i0, template: `
|
|
74
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityField, isStandalone: true, selector: "mt-entity-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelIconName: { classPropertyName: "labelIconName", publicName: "labelIconName", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block min-w-0 w-full" }, ngImport: i0, template: `
|
|
67
75
|
<div [class]="containerClass()">
|
|
68
76
|
<ng-content />
|
|
69
77
|
@if (!hideLabel()) {
|
|
70
|
-
<
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
78
|
+
<div [class]="labelContainerClass()">
|
|
79
|
+
@if (labelIconName(); as iconName) {
|
|
80
|
+
<mt-icon [icon]="iconName" size="xs" class="shrink-0" />
|
|
81
|
+
}
|
|
82
|
+
<span
|
|
83
|
+
class="block min-w-0 truncate"
|
|
84
|
+
mtTruncateTooltip
|
|
85
|
+
tooltipPosition="top"
|
|
86
|
+
>
|
|
87
|
+
{{ label() }}
|
|
88
|
+
</span>
|
|
89
|
+
</div>
|
|
77
90
|
}
|
|
78
91
|
</div>
|
|
79
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
92
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
80
93
|
}
|
|
81
94
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityField, decorators: [{
|
|
82
95
|
type: Component,
|
|
83
96
|
args: [{
|
|
84
97
|
selector: 'mt-entity-field',
|
|
85
98
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
86
|
-
imports: [TruncateTooltip],
|
|
99
|
+
imports: [TruncateTooltip, Icon],
|
|
87
100
|
template: `
|
|
88
101
|
<div [class]="containerClass()">
|
|
89
102
|
<ng-content />
|
|
90
103
|
@if (!hideLabel()) {
|
|
91
|
-
<
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
104
|
+
<div [class]="labelContainerClass()">
|
|
105
|
+
@if (labelIconName(); as iconName) {
|
|
106
|
+
<mt-icon [icon]="iconName" size="xs" class="shrink-0" />
|
|
107
|
+
}
|
|
108
|
+
<span
|
|
109
|
+
class="block min-w-0 truncate"
|
|
110
|
+
mtTruncateTooltip
|
|
111
|
+
tooltipPosition="top"
|
|
112
|
+
>
|
|
113
|
+
{{ label() }}
|
|
114
|
+
</span>
|
|
115
|
+
</div>
|
|
98
116
|
}
|
|
99
117
|
</div>
|
|
100
118
|
`,
|
|
@@ -102,7 +120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
102
120
|
class: 'block min-w-0 w-full',
|
|
103
121
|
},
|
|
104
122
|
}]
|
|
105
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }] } });
|
|
123
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelIconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelIconName", required: false }] }], configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }] } });
|
|
106
124
|
|
|
107
125
|
class EntityText {
|
|
108
126
|
/** Full entity data object */
|
|
@@ -119,7 +137,7 @@ class EntityText {
|
|
|
119
137
|
return displayOrPlaceholder(this.value());
|
|
120
138
|
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
|
|
121
139
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityText, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
122
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EntityText, isStandalone: true, selector: "mt-entity-text", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n [label]=\"displayName()\"\r\n [configuration]=\"data()?.configuration\"\r\n>\r\n <div\r\n class=\"min-w-0 truncate text-sm font-semibold\"\r\n mtTruncateTooltip\r\n tooltipPosition=\"top\"\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", "configuration", "gap"] }, { kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }] });
|
|
140
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EntityText, isStandalone: true, selector: "mt-entity-text", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n [label]=\"displayName()\"\r\n [configuration]=\"data()?.configuration\"\r\n>\r\n <div\r\n class=\"min-w-0 truncate text-sm font-semibold\"\r\n mtTruncateTooltip\r\n tooltipPosition=\"top\"\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"] }, { kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }] });
|
|
123
141
|
}
|
|
124
142
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityText, decorators: [{
|
|
125
143
|
type: Component,
|
|
@@ -141,7 +159,7 @@ class EntityDate {
|
|
|
141
159
|
return displayOrPlaceholder(this.value());
|
|
142
160
|
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
|
|
143
161
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityDate, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
144
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.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 } }, 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 {{ displayValue() }}\r\n </span>\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "configuration", "gap"] }, { kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }] });
|
|
162
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.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 } }, 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 {{ displayValue() }}\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]" }] });
|
|
145
163
|
}
|
|
146
164
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityDate, decorators: [{
|
|
147
165
|
type: Component,
|
|
@@ -180,7 +198,7 @@ class EntityStatus {
|
|
|
180
198
|
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
181
199
|
}
|
|
182
200
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityStatus, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
183
|
-
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", "configuration", "gap"] }] });
|
|
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"] }] });
|
|
184
202
|
}
|
|
185
203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityStatus, decorators: [{
|
|
186
204
|
type: Component,
|
|
@@ -215,11 +233,11 @@ class EntityUser {
|
|
|
215
233
|
hasContactInfo = computed(() => (this.showPhoneNumber() && !!this.phoneNumber()) ||
|
|
216
234
|
(this.showEmail() && !!this.email()), ...(ngDevMode ? [{ debugName: "hasContactInfo" }] : /* istanbul ignore next */ []));
|
|
217
235
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityUser, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
218
|
-
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-
|
|
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\r\n icon=\"communication.phone\"\r\n badgeSeverity=\"secondary\"\r\n />\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\r\n icon=\"communication.mail-01\"\r\n badgeSeverity=\"secondary\"\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: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }] });
|
|
219
237
|
}
|
|
220
238
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityUser, decorators: [{
|
|
221
239
|
type: Component,
|
|
222
|
-
args: [{ selector: 'mt-entity-user', standalone: true, imports: [Avatar,
|
|
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\r\n icon=\"communication.phone\"\r\n badgeSeverity=\"secondary\"\r\n />\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\r\n icon=\"communication.mail-01\"\r\n badgeSeverity=\"secondary\"\r\n />\r\n </a>\r\n }\r\n </div>\r\n }\r\n</div>\r\n" }]
|
|
223
241
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
|
|
224
242
|
|
|
225
243
|
class EntityPercentage {
|
|
@@ -294,7 +312,7 @@ class EntityCurrency {
|
|
|
294
312
|
return displayOrPlaceholder(this.value());
|
|
295
313
|
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
|
|
296
314
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityCurrency, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
297
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EntityCurrency, isStandalone: true, selector: "mt-entity-currency", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\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", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "configuration", "gap"] }, { kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }] });
|
|
315
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EntityCurrency, isStandalone: true, selector: "mt-entity-currency", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\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", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }, { kind: "directive", type: TruncateTooltip, selector: "[mtTruncateTooltip]" }] });
|
|
298
316
|
}
|
|
299
317
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityCurrency, decorators: [{
|
|
300
318
|
type: Component,
|
|
@@ -363,7 +381,7 @@ class EntityLongText {
|
|
|
363
381
|
return raw;
|
|
364
382
|
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
|
|
365
383
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityLongText, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
366
|
-
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 class=\"text-sm font-semibold\" [innerHTML]=\"displayValue()\"></div>\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "configuration", "gap"] }] });
|
|
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 class=\"text-sm font-semibold\" [innerHTML]=\"displayValue()\"></div>\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }] });
|
|
367
385
|
}
|
|
368
386
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityLongText, decorators: [{
|
|
369
387
|
type: Component,
|
|
@@ -402,7 +420,7 @@ class EntityLookup {
|
|
|
402
420
|
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
403
421
|
}
|
|
404
422
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityLookup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
405
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityLookup, isStandalone: true, selector: "mt-entity-lookup", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n [label]=\"displayName()\"\r\n [configuration]=\"data()?.configuration\"\r\n gap=\"normal\"\r\n>\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</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "configuration", "gap"] }] });
|
|
423
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityLookup, isStandalone: true, selector: "mt-entity-lookup", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n [label]=\"displayName()\"\r\n [configuration]=\"data()?.configuration\"\r\n gap=\"normal\"\r\n>\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</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }] });
|
|
406
424
|
}
|
|
407
425
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityLookup, decorators: [{
|
|
408
426
|
type: Component,
|
|
@@ -636,7 +654,7 @@ class EntityAttachment {
|
|
|
636
654
|
return `.${fileName.split('.').pop().toLowerCase()}`;
|
|
637
655
|
}
|
|
638
656
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityAttachment, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
639
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityAttachment, isStandalone: true, selector: "mt-entity-attachment", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, endPoint: { classPropertyName: "endPoint", publicName: "endPoint", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n [label]=\"displayName()\"\r\n [configuration]=\"data()?.configuration\"\r\n gap=\"relaxed\"\r\n>\r\n @if (hasAttachments()) {\r\n @if (shape() === \"compact\") {\r\n <div class=\"flex flex-wrap items-center gap-2\">\r\n @for (\r\n attachment of attachments();\r\n track attachmentTrackBy($index, attachment)\r\n ) {\r\n <mt-button\r\n iconPos=\"top\"\r\n size=\"small\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n [icon]=\"attachmentIcon(attachment)\"\r\n [tooltip]=\"attachmentTooltip(attachment)\"\r\n styleClass=\"h-9! w-9! rounded-lg!\"\r\n (onClick)=\"onCompactAttachmentClick($event, attachment)\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n <mt-upload-field\r\n class=\"w-full\"\r\n [ngModel]=\"uploadValue()\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n [shape]=\"'card'\"\r\n [multiple]=\"isMultiple()\"\r\n [readonly]=\"true\"\r\n [endPoint]=\"endPoint()\"\r\n [context]=\"context()\"\r\n />\r\n }\r\n } @else {\r\n <span class=\"text-sm font-semibold\">{{ empty }}</span>\r\n }\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UploadField, selector: "mt-upload-field", inputs: ["label", "title", "description", "endPoint", "size", "userImgClass", "shape", "multiple", "accept", "isDragging", "fileSizeLimit", "readonly", "context"], outputs: ["isDraggingChange", "onChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "configuration", "gap"] }] });
|
|
657
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityAttachment, isStandalone: true, selector: "mt-entity-attachment", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, endPoint: { classPropertyName: "endPoint", publicName: "endPoint", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n [label]=\"displayName()\"\r\n [configuration]=\"data()?.configuration\"\r\n gap=\"relaxed\"\r\n>\r\n @if (hasAttachments()) {\r\n @if (shape() === \"compact\") {\r\n <div class=\"flex flex-wrap items-center gap-2\">\r\n @for (\r\n attachment of attachments();\r\n track attachmentTrackBy($index, attachment)\r\n ) {\r\n <mt-button\r\n iconPos=\"top\"\r\n size=\"small\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n [icon]=\"attachmentIcon(attachment)\"\r\n [tooltip]=\"attachmentTooltip(attachment)\"\r\n styleClass=\"h-9! w-9! rounded-lg!\"\r\n (onClick)=\"onCompactAttachmentClick($event, attachment)\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n <mt-upload-field\r\n class=\"w-full\"\r\n [ngModel]=\"uploadValue()\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n [shape]=\"'card'\"\r\n [multiple]=\"isMultiple()\"\r\n [readonly]=\"true\"\r\n [endPoint]=\"endPoint()\"\r\n [context]=\"context()\"\r\n />\r\n }\r\n } @else {\r\n <span class=\"text-sm font-semibold\">{{ empty }}</span>\r\n }\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UploadField, selector: "mt-upload-field", inputs: ["label", "title", "description", "endPoint", "size", "userImgClass", "shape", "multiple", "accept", "isDragging", "fileSizeLimit", "readonly", "context"], outputs: ["isDraggingChange", "onChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }] });
|
|
640
658
|
}
|
|
641
659
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityAttachment, decorators: [{
|
|
642
660
|
type: Component,
|
|
@@ -661,22 +679,214 @@ class EntityLeafDetails {
|
|
|
661
679
|
const total = leaf.statuses.reduce((sum, s) => sum + s.count, 0);
|
|
662
680
|
return `${name} (${total})`;
|
|
663
681
|
}, ...(ngDevMode ? [{ debugName: "labelWithTotal" }] : /* istanbul ignore next */ []));
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
682
|
+
labelIcon = computed(() => this.leafValue()?.levelIcon ?? null, ...(ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []));
|
|
683
|
+
/** Default LeafDetails labels to top, while still honoring saved configuration */
|
|
684
|
+
fieldConfig = computed(() => {
|
|
685
|
+
const configuration = this.data().configuration;
|
|
686
|
+
if (configuration?.labelPosition || configuration?.labelPostion) {
|
|
687
|
+
return configuration;
|
|
688
|
+
}
|
|
689
|
+
return {
|
|
690
|
+
...configuration,
|
|
691
|
+
labelPosition: 'top',
|
|
692
|
+
};
|
|
693
|
+
}, ...(ngDevMode ? [{ debugName: "fieldConfig" }] : /* istanbul ignore next */ []));
|
|
669
694
|
statusColor(color) {
|
|
670
695
|
return color ?? '#9CA3AF';
|
|
671
696
|
}
|
|
672
697
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityLeafDetails, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
673
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityLeafDetails, isStandalone: true, selector: "mt-entity-leaf-details", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\n [label]=\"labelWithTotal()\"\n [configuration]=\"
|
|
698
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EntityLeafDetails, isStandalone: true, selector: "mt-entity-leaf-details", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mt-entity-field\r\n [label]=\"labelWithTotal()\"\r\n [labelIconName]=\"labelIcon()\"\r\n [configuration]=\"fieldConfig()\"\r\n gap=\"normal\"\r\n>\r\n @if (leafValue(); as leaf) {\r\n <div class=\"flex flex-wrap gap-1.5\">\r\n @for (status of leaf.statuses; track status.key) {\r\n <div\r\n class=\"flex items-center justify-center min-w-7 h-7 px-1.5 rounded-lg text-xs font-bold text-white\"\r\n [style.background-color]=\"statusColor(status.color)\"\r\n [pTooltip]=\"status.display\"\r\n tooltipPosition=\"top\"\r\n >\r\n {{ status.count }}\r\n </div>\r\n }\r\n @if (leaf.statuses.length === 0) {\r\n <span class=\"text-sm text-muted-color\">\u2014</span>\r\n }\r\n </div>\r\n }\r\n</mt-entity-field>\r\n", dependencies: [{ kind: "component", type: EntityField, selector: "mt-entity-field", inputs: ["label", "labelIconName", "configuration", "gap"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
674
699
|
}
|
|
675
700
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntityLeafDetails, decorators: [{
|
|
676
701
|
type: Component,
|
|
677
|
-
args: [{ selector: 'mt-entity-leaf-details', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [EntityField, TooltipModule], template: "<mt-entity-field\n [label]=\"labelWithTotal()\"\n [configuration]=\"
|
|
702
|
+
args: [{ selector: 'mt-entity-leaf-details', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [EntityField, TooltipModule], template: "<mt-entity-field\r\n [label]=\"labelWithTotal()\"\r\n [labelIconName]=\"labelIcon()\"\r\n [configuration]=\"fieldConfig()\"\r\n gap=\"normal\"\r\n>\r\n @if (leafValue(); as leaf) {\r\n <div class=\"flex flex-wrap gap-1.5\">\r\n @for (status of leaf.statuses; track status.key) {\r\n <div\r\n class=\"flex items-center justify-center min-w-7 h-7 px-1.5 rounded-lg text-xs font-bold text-white\"\r\n [style.background-color]=\"statusColor(status.color)\"\r\n [pTooltip]=\"status.display\"\r\n tooltipPosition=\"top\"\r\n >\r\n {{ status.count }}\r\n </div>\r\n }\r\n @if (leaf.statuses.length === 0) {\r\n <span class=\"text-sm text-muted-color\">\u2014</span>\r\n }\r\n </div>\r\n }\r\n</mt-entity-field>\r\n" }]
|
|
678
703
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
|
|
679
704
|
|
|
705
|
+
const LEAF_DETAILS_KEY_SEPARATOR = '::leaflevel::';
|
|
706
|
+
function isLeafDetailsStatusSummary(value) {
|
|
707
|
+
return (!!value &&
|
|
708
|
+
typeof value === 'object' &&
|
|
709
|
+
'key' in value &&
|
|
710
|
+
'display' in value &&
|
|
711
|
+
'count' in value);
|
|
712
|
+
}
|
|
713
|
+
function isLeafDetailsCatalogStatusValue(value) {
|
|
714
|
+
return (!!value &&
|
|
715
|
+
typeof value === 'object' &&
|
|
716
|
+
'key' in value &&
|
|
717
|
+
'display' in value);
|
|
718
|
+
}
|
|
719
|
+
function isLeafDetailsCatalogLevelValue(value) {
|
|
720
|
+
return (!!value &&
|
|
721
|
+
typeof value === 'object' &&
|
|
722
|
+
'levelId' in value &&
|
|
723
|
+
'levelName' in value &&
|
|
724
|
+
'levelIcon' in value &&
|
|
725
|
+
'statuses' in value &&
|
|
726
|
+
Array.isArray(value.statuses) &&
|
|
727
|
+
value.statuses.every(isLeafDetailsCatalogStatusValue));
|
|
728
|
+
}
|
|
729
|
+
function isLeafDetailsRuntimeStatusDetails(value) {
|
|
730
|
+
return (!!value &&
|
|
731
|
+
typeof value === 'object' &&
|
|
732
|
+
'key' in value &&
|
|
733
|
+
'display' in value);
|
|
734
|
+
}
|
|
735
|
+
function isLeafDetailsRuntimeStatusCount(value) {
|
|
736
|
+
return (!!value &&
|
|
737
|
+
typeof value === 'object' &&
|
|
738
|
+
'details' in value &&
|
|
739
|
+
isLeafDetailsRuntimeStatusDetails(value.details) &&
|
|
740
|
+
'count' in value);
|
|
741
|
+
}
|
|
742
|
+
function isLeafDetailsRuntimeChildSchema(value) {
|
|
743
|
+
return (!!value &&
|
|
744
|
+
typeof value === 'object' &&
|
|
745
|
+
'levelId' in value &&
|
|
746
|
+
'levelName' in value &&
|
|
747
|
+
'levelIcon' in value &&
|
|
748
|
+
'statuses' in value &&
|
|
749
|
+
Array.isArray(value.statuses) &&
|
|
750
|
+
value.statuses.every(isLeafDetailsRuntimeStatusCount));
|
|
751
|
+
}
|
|
752
|
+
function isLeafDetailsValue(value) {
|
|
753
|
+
return (!!value &&
|
|
754
|
+
typeof value === 'object' &&
|
|
755
|
+
!Array.isArray(value) &&
|
|
756
|
+
'levelId' in value &&
|
|
757
|
+
'statuses' in value &&
|
|
758
|
+
Array.isArray(value.statuses) &&
|
|
759
|
+
value.statuses.every(isLeafDetailsStatusSummary));
|
|
760
|
+
}
|
|
761
|
+
function isLeafDetailsCollectionValue(value) {
|
|
762
|
+
return Array.isArray(value) && value.every(isLeafDetailsValue);
|
|
763
|
+
}
|
|
764
|
+
function isLeafDetailsCatalogConfiguration(value) {
|
|
765
|
+
return Array.isArray(value) && value.every(isLeafDetailsCatalogLevelValue);
|
|
766
|
+
}
|
|
767
|
+
function isLeafDetailsRuntimeValue(value) {
|
|
768
|
+
return (!!value &&
|
|
769
|
+
typeof value === 'object' &&
|
|
770
|
+
!Array.isArray(value) &&
|
|
771
|
+
'childSchemas' in value &&
|
|
772
|
+
Array.isArray(value.childSchemas) &&
|
|
773
|
+
value.childSchemas.every(isLeafDetailsRuntimeChildSchema));
|
|
774
|
+
}
|
|
775
|
+
function isLeafDetailsSyntheticKey(key) {
|
|
776
|
+
return key?.includes(LEAF_DETAILS_KEY_SEPARATOR) ?? false;
|
|
777
|
+
}
|
|
778
|
+
function toLeafDetailsStatusSummary(status) {
|
|
779
|
+
return {
|
|
780
|
+
key: status.details.key,
|
|
781
|
+
display: status.details.display,
|
|
782
|
+
color: status.details.color ?? null,
|
|
783
|
+
count: status.count,
|
|
784
|
+
};
|
|
785
|
+
}
|
|
786
|
+
function normalizeLeafDetailsCollection(value) {
|
|
787
|
+
if (isLeafDetailsCollectionValue(value)) {
|
|
788
|
+
return value;
|
|
789
|
+
}
|
|
790
|
+
if (isLeafDetailsValue(value)) {
|
|
791
|
+
return [value];
|
|
792
|
+
}
|
|
793
|
+
if (isLeafDetailsRuntimeValue(value)) {
|
|
794
|
+
return value.childSchemas.map((schema) => ({
|
|
795
|
+
levelId: schema.levelId,
|
|
796
|
+
levelName: schema.levelName,
|
|
797
|
+
levelIcon: schema.levelIcon,
|
|
798
|
+
statuses: schema.statuses.map(toLeafDetailsStatusSummary),
|
|
799
|
+
}));
|
|
800
|
+
}
|
|
801
|
+
if (typeof value === 'string' && value.trim().length > 0) {
|
|
802
|
+
try {
|
|
803
|
+
return normalizeLeafDetailsCollection(JSON.parse(value));
|
|
804
|
+
}
|
|
805
|
+
catch {
|
|
806
|
+
return [];
|
|
807
|
+
}
|
|
808
|
+
}
|
|
809
|
+
return [];
|
|
810
|
+
}
|
|
811
|
+
function normalizeLeafDetailsCatalogConfiguration(value) {
|
|
812
|
+
if (isLeafDetailsCatalogConfiguration(value)) {
|
|
813
|
+
return value.map((level) => ({
|
|
814
|
+
levelId: level.levelId,
|
|
815
|
+
levelName: level.levelName,
|
|
816
|
+
levelIcon: level.levelIcon,
|
|
817
|
+
statuses: level.statuses.map((status) => ({
|
|
818
|
+
key: status.key,
|
|
819
|
+
display: status.display,
|
|
820
|
+
color: status.color ?? null,
|
|
821
|
+
count: 0,
|
|
822
|
+
})),
|
|
823
|
+
}));
|
|
824
|
+
}
|
|
825
|
+
if (typeof value === 'string' && value.trim().length > 0) {
|
|
826
|
+
try {
|
|
827
|
+
return normalizeLeafDetailsCatalogConfiguration(JSON.parse(value));
|
|
828
|
+
}
|
|
829
|
+
catch {
|
|
830
|
+
return [];
|
|
831
|
+
}
|
|
832
|
+
}
|
|
833
|
+
return [];
|
|
834
|
+
}
|
|
835
|
+
function expandLeafDetailsEntity(entity) {
|
|
836
|
+
if (entity.viewType !== 'LeafDetails') {
|
|
837
|
+
return [entity];
|
|
838
|
+
}
|
|
839
|
+
if (isLeafDetailsSyntheticKey(entity.key) && isLeafDetailsValue(entity.value)) {
|
|
840
|
+
return [entity];
|
|
841
|
+
}
|
|
842
|
+
const configuration = entity.configuration;
|
|
843
|
+
const levels = normalizeLeafDetailsCollection(entity.value);
|
|
844
|
+
const fallbackLevels = levels.length
|
|
845
|
+
? levels
|
|
846
|
+
: normalizeLeafDetailsCollection(entity.rawValue);
|
|
847
|
+
const resolvedLevels = fallbackLevels.length
|
|
848
|
+
? fallbackLevels
|
|
849
|
+
: normalizeLeafDetailsCatalogConfiguration(entity.propertyConfiguration);
|
|
850
|
+
if (resolvedLevels.length === 0) {
|
|
851
|
+
return [entity];
|
|
852
|
+
}
|
|
853
|
+
const expanded = resolvedLevels.flatMap((level) => {
|
|
854
|
+
const levelConfig = configuration?.leafLevels?.[String(level.levelId)];
|
|
855
|
+
if (configuration?.leafLevels && !levelConfig) {
|
|
856
|
+
return [];
|
|
857
|
+
}
|
|
858
|
+
const selectedStatuses = levelConfig?.selectedStatuses?.length
|
|
859
|
+
? new Set(levelConfig.selectedStatuses)
|
|
860
|
+
: null;
|
|
861
|
+
return [
|
|
862
|
+
{
|
|
863
|
+
...entity,
|
|
864
|
+
key: entity.key
|
|
865
|
+
? `${entity.key}${LEAF_DETAILS_KEY_SEPARATOR}${level.levelId}`
|
|
866
|
+
: entity.key,
|
|
867
|
+
name: level.levelName,
|
|
868
|
+
value: {
|
|
869
|
+
...level,
|
|
870
|
+
statuses: selectedStatuses
|
|
871
|
+
? level.statuses.filter((status) => selectedStatuses.has(status.key))
|
|
872
|
+
: level.statuses,
|
|
873
|
+
},
|
|
874
|
+
order: levelConfig?.order ?? entity.order,
|
|
875
|
+
configuration: {
|
|
876
|
+
...configuration,
|
|
877
|
+
size: levelConfig?.size ?? configuration?.size,
|
|
878
|
+
},
|
|
879
|
+
},
|
|
880
|
+
];
|
|
881
|
+
});
|
|
882
|
+
return expanded.length > 0 ? expanded : [entity];
|
|
883
|
+
}
|
|
884
|
+
function buildDisplayEntities(entities) {
|
|
885
|
+
return entities
|
|
886
|
+
.flatMap((entity) => expandLeafDetailsEntity(entity))
|
|
887
|
+
.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
|
|
888
|
+
}
|
|
889
|
+
|
|
680
890
|
class EntityPreview {
|
|
681
891
|
/** Single entity data to display */
|
|
682
892
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
@@ -711,19 +921,19 @@ class EntitiesPreview {
|
|
|
711
921
|
/** Array of entity data to display */
|
|
712
922
|
entities = input.required(...(ngDevMode ? [{ debugName: "entities" }] : /* istanbul ignore next */ []));
|
|
713
923
|
attachmentShape = input('default', ...(ngDevMode ? [{ debugName: "attachmentShape" }] : /* istanbul ignore next */ []));
|
|
714
|
-
/** Entities sorted by order */
|
|
715
|
-
|
|
924
|
+
/** Entities expanded and sorted by order */
|
|
925
|
+
displayEntities = computed(() => buildDisplayEntities(this.entities()), ...(ngDevMode ? [{ debugName: "displayEntities" }] : /* istanbul ignore next */ []));
|
|
716
926
|
/** Returns the grid-column span for a given entity size (1-24) */
|
|
717
927
|
getColSpan(entity) {
|
|
718
928
|
const size = entity.configuration?.size ?? 8;
|
|
719
929
|
return `span ${size}`;
|
|
720
930
|
}
|
|
721
931
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntitiesPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
722
|
-
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
|
|
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(); track entity.key ?? entity.order ?? $index) {\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"] }] });
|
|
723
933
|
}
|
|
724
934
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntitiesPreview, decorators: [{
|
|
725
935
|
type: Component,
|
|
726
|
-
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
|
|
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(); track entity.key ?? entity.order ?? $index) {\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" }]
|
|
727
937
|
}], propDecorators: { entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }], attachmentShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachmentShape", required: false }] }] } });
|
|
728
938
|
|
|
729
939
|
/**
|
|
@@ -849,8 +1059,8 @@ class EntitiesManage extends EntitiesResizeBase {
|
|
|
849
1059
|
entitiesReordered = output();
|
|
850
1060
|
/** Emits when an entity cell is clicked (for opening edit drawer) */
|
|
851
1061
|
entityClicked = output();
|
|
852
|
-
/** Entities sorted by their order
|
|
853
|
-
|
|
1062
|
+
/** Entities expanded and sorted by their configured order */
|
|
1063
|
+
displayEntities = computed(() => buildDisplayEntities(this.entities()), ...(ngDevMode ? [{ debugName: "displayEntities" }] : /* istanbul ignore next */ []));
|
|
854
1064
|
/** Returns the grid-column span for a given entity size (1-24) */
|
|
855
1065
|
getColSpan(entity) {
|
|
856
1066
|
return this.getResizeColSpan(entity);
|
|
@@ -859,7 +1069,7 @@ class EntitiesManage extends EntitiesResizeBase {
|
|
|
859
1069
|
onDrop(event) {
|
|
860
1070
|
if (event.previousIndex === event.currentIndex)
|
|
861
1071
|
return;
|
|
862
|
-
const items = [...this.
|
|
1072
|
+
const items = [...this.displayEntities()];
|
|
863
1073
|
const [moved] = items.splice(event.previousIndex, 1);
|
|
864
1074
|
items.splice(event.currentIndex, 0, moved);
|
|
865
1075
|
// Reassign order based on new positions
|
|
@@ -874,8 +1084,11 @@ class EntitiesManage extends EntitiesResizeBase {
|
|
|
874
1084
|
}
|
|
875
1085
|
// ── Resize completion (from EntitiesResizeBase) ──
|
|
876
1086
|
onResizeComplete(entity, previousSize, newSize) {
|
|
877
|
-
|
|
878
|
-
const
|
|
1087
|
+
const currentEntities = this.entities();
|
|
1088
|
+
const sourceEntities = currentEntities.some((e) => e === entity)
|
|
1089
|
+
? currentEntities
|
|
1090
|
+
: this.displayEntities();
|
|
1091
|
+
const updated = sourceEntities.map((e) => e === entity || (isLeafDetailsSyntheticKey(e.key) && e.key === entity.key)
|
|
879
1092
|
? {
|
|
880
1093
|
...e,
|
|
881
1094
|
configuration: {
|
|
@@ -895,16 +1108,16 @@ class EntitiesManage extends EntitiesResizeBase {
|
|
|
895
1108
|
});
|
|
896
1109
|
}
|
|
897
1110
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntitiesManage, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
898
|
-
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]=\"
|
|
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(); track entity.key ?? entity.order ?? $index) {\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"] }] });
|
|
899
1112
|
}
|
|
900
1113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EntitiesManage, decorators: [{
|
|
901
1114
|
type: Component,
|
|
902
|
-
args: [{ selector: 'mt-entities-manage', standalone: true, imports: [EntityPreview, CdkDrag, CdkDropList, CdkDragPlaceholder], template: "<div\r\n cdkDropList\r\n cdkDropListOrientation=\"mixed\"\r\n [cdkDropListData]=\"
|
|
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(); track entity.key ?? entity.order ?? $index) {\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"] }]
|
|
903
1116
|
}], 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"] }] } });
|
|
904
1117
|
|
|
905
1118
|
/**
|
|
906
1119
|
* Generated bundle index. Do not edit.
|
|
907
1120
|
*/
|
|
908
1121
|
|
|
909
|
-
export { EntitiesManage, EntitiesPreview, EntitiesResizeBase, EntityAttachment, EntityCheckbox, EntityCurrency, EntityDate, EntityField, EntityLeafDetails, EntityLongText, EntityLookup, EntityPercentage, EntityPreview, EntityStatus, EntityText, EntityUser };
|
|
1122
|
+
export { EntitiesManage, EntitiesPreview, EntitiesResizeBase, EntityAttachment, EntityCheckbox, EntityCurrency, EntityDate, EntityField, EntityLeafDetails, EntityLongText, EntityLookup, EntityPercentage, EntityPreview, EntityStatus, EntityText, EntityUser, LEAF_DETAILS_KEY_SEPARATOR, buildDisplayEntities, expandLeafDetailsEntity, isLeafDetailsCatalogConfiguration, isLeafDetailsCollectionValue, isLeafDetailsRuntimeValue, isLeafDetailsSyntheticKey, isLeafDetailsValue };
|
|
910
1123
|
//# sourceMappingURL=masterteam-components-entities.mjs.map
|