@masterteam/components 0.0.174 → 0.0.176
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/assets/i18n/ar.json +300 -282
- package/assets/i18n/en.json +300 -282
- package/fesm2022/masterteam-components-business-fields.mjs +50 -34
- package/fesm2022/masterteam-components-business-fields.mjs.map +1 -1
- package/fesm2022/masterteam-components-color-picker-field.mjs +2 -2
- package/fesm2022/masterteam-components-color-picker-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-drawer.mjs +8 -4
- package/fesm2022/masterteam-components-drawer.mjs.map +1 -1
- package/fesm2022/masterteam-components-dynamic-drawer.mjs +1 -4
- package/fesm2022/masterteam-components-dynamic-drawer.mjs.map +1 -1
- package/fesm2022/masterteam-components-field-validation.mjs +21 -1
- package/fesm2022/masterteam-components-field-validation.mjs.map +1 -1
- package/fesm2022/masterteam-components-formula.mjs +20 -3
- package/fesm2022/masterteam-components-formula.mjs.map +1 -1
- package/fesm2022/masterteam-components-location-field.mjs +1 -1
- package/fesm2022/masterteam-components-location-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-property-filter-builder.mjs +1 -1
- package/fesm2022/masterteam-components-property-filter-builder.mjs.map +1 -1
- package/fesm2022/masterteam-components-table.mjs +112 -24
- package/fesm2022/masterteam-components-table.mjs.map +1 -1
- package/fesm2022/masterteam-components-text-field.mjs +26 -7
- package/fesm2022/masterteam-components-text-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-textarea-field.mjs +27 -8
- package/fesm2022/masterteam-components-textarea-field.mjs.map +1 -1
- package/fesm2022/masterteam-components-treeselect-field.mjs +265 -0
- package/fesm2022/masterteam-components-treeselect-field.mjs.map +1 -0
- package/fesm2022/masterteam-components-upload-field.mjs +16 -7
- package/fesm2022/masterteam-components-upload-field.mjs.map +1 -1
- package/fesm2022/masterteam-components.mjs +2 -2
- package/fesm2022/masterteam-components.mjs.map +1 -1
- package/package.json +5 -1
- package/types/masterteam-components-business-fields.d.ts +8 -5
- package/types/masterteam-components-drawer.d.ts +2 -0
- package/types/masterteam-components-dynamic-drawer.d.ts +0 -1
- package/types/masterteam-components-field-validation.d.ts +4 -2
- package/types/masterteam-components-formula.d.ts +4 -0
- package/types/masterteam-components-table.d.ts +13 -3
- package/types/masterteam-components-text-field.d.ts +3 -1
- package/types/masterteam-components-textarea-field.d.ts +4 -2
- package/types/masterteam-components-treeselect-field.d.ts +79 -0
- package/types/masterteam-components-upload-field.d.ts +3 -1
- package/types/masterteam-components.d.ts +5 -5
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import * as i1 from '@angular/common';
|
|
2
1
|
import { CommonModule } from '@angular/common';
|
|
3
2
|
import * as i0 from '@angular/core';
|
|
4
3
|
import { input, inject, DestroyRef, signal, computed, ChangeDetectionStrategy, Component, effect, untracked, viewChild, linkedSignal, InjectionToken } from '@angular/core';
|
|
5
4
|
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
6
|
-
import * as i1
|
|
5
|
+
import * as i1 from '@angular/forms';
|
|
7
6
|
import { ControlContainer, Validators, NgControl, FormsModule } from '@angular/forms';
|
|
8
7
|
import * as i2 from '@jsverse/transloco';
|
|
9
8
|
import { TranslocoService, TranslocoPipe, TranslocoModule } from '@jsverse/transloco';
|
|
@@ -29,6 +28,8 @@ class LookupMatrixField {
|
|
|
29
28
|
destroyRef = inject(DestroyRef);
|
|
30
29
|
transloco = inject(TranslocoService);
|
|
31
30
|
valueVersion = signal(0, ...(ngDevMode ? [{ debugName: "valueVersion" }] : /* istanbul ignore next */ []));
|
|
31
|
+
subscribedControl = null;
|
|
32
|
+
hasYAxis = computed(() => !!this.config().yFieldKey, ...(ngDevMode ? [{ debugName: "hasYAxis" }] : /* istanbul ignore next */ []));
|
|
32
33
|
xOptions = computed(() => this.config().xOptions ?? [], ...(ngDevMode ? [{ debugName: "xOptions" }] : /* istanbul ignore next */ []));
|
|
33
34
|
yOptions = computed(() => this.config().yOptions ?? [], ...(ngDevMode ? [{ debugName: "yOptions" }] : /* istanbul ignore next */ []));
|
|
34
35
|
hasMatrix = computed(() => this.config().cells.length > 0, ...(ngDevMode ? [{ debugName: "hasMatrix" }] : /* istanbul ignore next */ []));
|
|
@@ -42,12 +43,22 @@ class LookupMatrixField {
|
|
|
42
43
|
}, ...(ngDevMode ? [{ debugName: "selectedXOption" }] : /* istanbul ignore next */ []));
|
|
43
44
|
selectedYOption = computed(() => {
|
|
44
45
|
this.valueVersion();
|
|
45
|
-
|
|
46
|
+
const yFieldKey = this.config().yFieldKey;
|
|
47
|
+
if (!yFieldKey) {
|
|
48
|
+
return null;
|
|
49
|
+
}
|
|
50
|
+
return this.resolveSelectedOption(this.yOptions(), this.getControlValue(yFieldKey));
|
|
46
51
|
}, ...(ngDevMode ? [{ debugName: "selectedYOption" }] : /* istanbul ignore next */ []));
|
|
47
52
|
activeCell = computed(() => {
|
|
48
53
|
const selectedX = this.selectedXOption();
|
|
54
|
+
if (!selectedX) {
|
|
55
|
+
return null;
|
|
56
|
+
}
|
|
57
|
+
if (!this.hasYAxis()) {
|
|
58
|
+
return this.getCell(selectedX.id ?? selectedX.value);
|
|
59
|
+
}
|
|
49
60
|
const selectedY = this.selectedYOption();
|
|
50
|
-
if (!
|
|
61
|
+
if (!selectedY) {
|
|
51
62
|
return null;
|
|
52
63
|
}
|
|
53
64
|
return this.getCell(selectedX.id ?? selectedX.value, selectedY.id ?? selectedY.value);
|
|
@@ -56,14 +67,14 @@ class LookupMatrixField {
|
|
|
56
67
|
const parts = [];
|
|
57
68
|
const xAxisLabel = this.config().xAxisLabel.trim() ||
|
|
58
69
|
this.transloco.translate('components.lookupMatrixField.xAxisFallback');
|
|
59
|
-
const yAxisLabel = this.config().yAxisLabel.trim() ||
|
|
60
|
-
this.transloco.translate('components.lookupMatrixField.yAxisFallback');
|
|
61
70
|
const selectedX = this.selectedXOption();
|
|
62
|
-
const selectedY = this.selectedYOption();
|
|
63
71
|
if (selectedX) {
|
|
64
72
|
parts.push(`${xAxisLabel}: ${selectedX.label}`);
|
|
65
73
|
}
|
|
66
|
-
|
|
74
|
+
const selectedY = this.selectedYOption();
|
|
75
|
+
const yAxisLabel = this.config().yAxisLabel?.trim() ||
|
|
76
|
+
this.transloco.translate('components.lookupMatrixField.yAxisFallback');
|
|
77
|
+
if (selectedY && this.hasYAxis()) {
|
|
67
78
|
parts.push(`${yAxisLabel}: ${selectedY.label}`);
|
|
68
79
|
}
|
|
69
80
|
return parts.join(' / ');
|
|
@@ -71,43 +82,48 @@ class LookupMatrixField {
|
|
|
71
82
|
pendingMessage = computed(() => {
|
|
72
83
|
const xAxisLabel = this.config().xAxisLabel.trim() ||
|
|
73
84
|
this.transloco.translate('components.lookupMatrixField.firstValueFallback');
|
|
74
|
-
|
|
85
|
+
if (!this.hasYAxis()) {
|
|
86
|
+
return this.transloco.translate('components.lookupMatrixField.selectXAxisFirst', { xAxisLabel });
|
|
87
|
+
}
|
|
88
|
+
const yAxisLabel = this.config().yAxisLabel?.trim() ||
|
|
75
89
|
this.transloco.translate('components.lookupMatrixField.secondValueFallback');
|
|
76
90
|
return this.transloco.translate('components.lookupMatrixField.selectAxesFirst', { xAxisLabel, yAxisLabel });
|
|
77
91
|
}, ...(ngDevMode ? [{ debugName: "pendingMessage" }] : /* istanbul ignore next */ []));
|
|
78
92
|
missingResultMessage = computed(() => {
|
|
79
|
-
if (!this.selectedXOption()
|
|
93
|
+
if (!this.selectedXOption()) {
|
|
94
|
+
return this.pendingMessage();
|
|
95
|
+
}
|
|
96
|
+
if (this.hasYAxis() && !this.selectedYOption()) {
|
|
80
97
|
return this.pendingMessage();
|
|
81
98
|
}
|
|
82
99
|
return this.transloco.translate('components.lookupMatrixField.noMatchingValue');
|
|
83
100
|
}, ...(ngDevMode ? [{ debugName: "missingResultMessage" }] : /* istanbul ignore next */ []));
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
if (!control)
|
|
87
|
-
return;
|
|
88
|
-
control.valueChanges
|
|
89
|
-
.pipe(startWith(control.getRawValue()), takeUntilDestroyed(this.destroyRef))
|
|
90
|
-
.subscribe(() => {
|
|
91
|
-
this.valueVersion.update((value) => value + 1);
|
|
92
|
-
});
|
|
101
|
+
ngAfterViewInit() {
|
|
102
|
+
this.ensureControlSubscription();
|
|
93
103
|
}
|
|
94
104
|
getCell(xLookupItemId, yLookupItemId) {
|
|
95
105
|
return (this.cellMap().get(this.cellKey(xLookupItemId, yLookupItemId)) ?? null);
|
|
96
106
|
}
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
if (!resolvedColor)
|
|
100
|
-
return {};
|
|
101
|
-
return {
|
|
102
|
-
backgroundColor: resolvedColor,
|
|
103
|
-
borderColor: resolvedColor,
|
|
104
|
-
};
|
|
107
|
+
getSwatchColor(color) {
|
|
108
|
+
return this.resolveColor(color);
|
|
105
109
|
}
|
|
106
110
|
getControlValue(path) {
|
|
107
111
|
if (!path)
|
|
108
112
|
return null;
|
|
109
113
|
return this.controlContainer?.control?.get(path)?.value ?? null;
|
|
110
114
|
}
|
|
115
|
+
ensureControlSubscription() {
|
|
116
|
+
const control = this.controlContainer?.control;
|
|
117
|
+
if (!control || control === this.subscribedControl) {
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
this.subscribedControl = control;
|
|
121
|
+
control.valueChanges
|
|
122
|
+
.pipe(startWith(control.getRawValue()), takeUntilDestroyed(this.destroyRef))
|
|
123
|
+
.subscribe(() => {
|
|
124
|
+
this.valueVersion.update((value) => value + 1);
|
|
125
|
+
});
|
|
126
|
+
}
|
|
111
127
|
resolveSelectedOption(options, rawValue) {
|
|
112
128
|
if (rawValue == null || rawValue === '')
|
|
113
129
|
return null;
|
|
@@ -118,7 +134,7 @@ class LookupMatrixField {
|
|
|
118
134
|
return [option.value, option.key, option.id].some((candidate) => candidate != null && String(candidate) === String(rawValue));
|
|
119
135
|
}
|
|
120
136
|
cellKey(xLookupItemId, yLookupItemId) {
|
|
121
|
-
return `${String(xLookupItemId)}::${String(yLookupItemId)}`;
|
|
137
|
+
return `${String(xLookupItemId)}::${String(yLookupItemId ?? '')}`;
|
|
122
138
|
}
|
|
123
139
|
resolveColor(color) {
|
|
124
140
|
if (!color)
|
|
@@ -132,14 +148,14 @@ class LookupMatrixField {
|
|
|
132
148
|
return `var(--p-${color}-500)`;
|
|
133
149
|
}
|
|
134
150
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LookupMatrixField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
135
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: LookupMatrixField, isStandalone: true, selector: "mt-lookup-matrix-field", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "grid gap-2" }, ngImport: i0, template: "@if (config().label) {\r\n <label class=\"font-medium text-color\">\r\n {{ config().label }}\r\n </label>\r\n}\r\n\r\n<div\r\n class=\"rounded-lg border border-surface-200 bg-surface-50 px-3 flex items-center\"\r\n>\r\n @if (activeCell(); as cell) {\r\n <div class=\"flex flex-1 min-h-6 items-center gap-2 justify-between\">\r\n <span\r\n class=\"h-6 w-2 shrink-0 rounded-[2px] border border-surface-200\"\r\n [
|
|
151
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: LookupMatrixField, isStandalone: true, selector: "mt-lookup-matrix-field", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "grid gap-2" }, ngImport: i0, template: "@if (config().label) {\r\n <label class=\"font-medium text-color\">\r\n {{ config().label }}\r\n </label>\r\n}\r\n\r\n<div\r\n class=\"rounded-lg border border-surface-200 bg-surface-50 px-3 flex items-center\"\r\n>\r\n @if (activeCell(); as cell) {\r\n <div class=\"flex flex-1 min-h-6 items-center gap-2 justify-between\">\r\n <span\r\n class=\"h-6 w-2 shrink-0 rounded-[2px] border border-surface-200\"\r\n [style.background-color]=\"getSwatchColor(cell.color)\"\r\n [style.border-color]=\"getSwatchColor(cell.color)\"\r\n ></span>\r\n\r\n <div class=\"min-w-0 flex-1 py-2 flex items-center justify-between\">\r\n <div class=\"truncate font-semibold text-gray-500\">\r\n {{ cell.label }}\r\n </div>\r\n\r\n @if (selectionSummary()) {\r\n <div class=\"font-bold text-gray-500\">\r\n <mt-icon\r\n [mtTooltip]=\"selectionSummary()\"\r\n icon=\"general.info-circle\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"flex min-h-6 items-center text-muted-color py-2\">\r\n {{ hasMatrix() ? missingResultMessage() : config().emptyMessage }}\r\n </div>\r\n }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
136
152
|
}
|
|
137
153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LookupMatrixField, decorators: [{
|
|
138
154
|
type: Component,
|
|
139
155
|
args: [{ selector: 'mt-lookup-matrix-field', standalone: true, imports: [CommonModule, Tooltip, Icon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
140
156
|
class: 'grid gap-2',
|
|
141
|
-
}, template: "@if (config().label) {\r\n <label class=\"font-medium text-color\">\r\n {{ config().label }}\r\n </label>\r\n}\r\n\r\n<div\r\n class=\"rounded-lg border border-surface-200 bg-surface-50 px-3 flex items-center\"\r\n>\r\n @if (activeCell(); as cell) {\r\n <div class=\"flex flex-1 min-h-6 items-center gap-2 justify-between\">\r\n <span\r\n class=\"h-6 w-2 shrink-0 rounded-[2px] border border-surface-200\"\r\n [
|
|
142
|
-
}],
|
|
157
|
+
}, template: "@if (config().label) {\r\n <label class=\"font-medium text-color\">\r\n {{ config().label }}\r\n </label>\r\n}\r\n\r\n<div\r\n class=\"rounded-lg border border-surface-200 bg-surface-50 px-3 flex items-center\"\r\n>\r\n @if (activeCell(); as cell) {\r\n <div class=\"flex flex-1 min-h-6 items-center gap-2 justify-between\">\r\n <span\r\n class=\"h-6 w-2 shrink-0 rounded-[2px] border border-surface-200\"\r\n [style.background-color]=\"getSwatchColor(cell.color)\"\r\n [style.border-color]=\"getSwatchColor(cell.color)\"\r\n ></span>\r\n\r\n <div class=\"min-w-0 flex-1 py-2 flex items-center justify-between\">\r\n <div class=\"truncate font-semibold text-gray-500\">\r\n {{ cell.label }}\r\n </div>\r\n\r\n @if (selectionSummary()) {\r\n <div class=\"font-bold text-gray-500\">\r\n <mt-icon\r\n [mtTooltip]=\"selectionSummary()\"\r\n icon=\"general.info-circle\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"flex min-h-6 items-center text-muted-color py-2\">\r\n {{ hasMatrix() ? missingResultMessage() : config().emptyMessage }}\r\n </div>\r\n }\r\n</div>\r\n" }]
|
|
158
|
+
}], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
|
|
143
159
|
|
|
144
160
|
class SchemaConnectionField {
|
|
145
161
|
// ============================================================================
|
|
@@ -357,7 +373,7 @@ class SchemaConnectionField {
|
|
|
357
373
|
this.disabled.set(disabled);
|
|
358
374
|
}
|
|
359
375
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SchemaConnectionField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
360
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SchemaConnectionField, isStandalone: true, selector: "mt-schema-connection-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "grid gap-1" }, ngImport: i0, template: "<!-- @if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >\r\n {{ label() }}\r\n </label>\r\n} -->\r\n\r\n<div class=\"flex gap-4 w-full\">\r\n @for (state of sourceLevelStates(); track getSourceId(state.source)) {\r\n <div [style.width]=\"dropdownWidth()\" class=\"min-w-0\">\r\n @if (sourceLevelStates().length > 0) {\r\n <span class=\"text-sm text-muted-color mb-1 block truncate\">\r\n {{\r\n state.source.name?.en ||\r\n state.source.levelKey ||\r\n state.source.moduleKey\r\n }}\r\n </span>\r\n }\r\n\r\n @if (state.source.allowManyToMany) {\r\n <mt-multi-select-field\r\n [field]=\"false\"\r\n [(ngModel)]=\"selections[getSourceId(state.source)]\"\r\n (ngModelChange)=\"syncValue()\"\r\n [options]=\"state.options\"\r\n optionLabel=\"name\"\r\n optionValue=\"id\"\r\n [placeholder]=\"\r\n placeholder() ||\r\n state.source.name?.en ||\r\n ('components.selectPlaceholder' | transloco)\r\n \"\r\n [readonly]=\"disabled() || readonly()\"\r\n [filter]=\"filter()\"\r\n [showClear]=\"true\"\r\n display=\"chip\"\r\n />\r\n } @else {\r\n <mt-select-field\r\n [field]=\"false\"\r\n [(ngModel)]=\"selections[getSourceId(state.source)]\"\r\n (ngModelChange)=\"syncValue()\"\r\n [options]=\"state.options\"\r\n optionLabel=\"name\"\r\n optionValue=\"id\"\r\n [placeholder]=\"\r\n placeholder() ||\r\n state.source.name?.en ||\r\n ('components.selectPlaceholder' | transloco)\r\n \"\r\n [readonly]=\"disabled() || readonly()\"\r\n [filter]=\"filter()\"\r\n [loading]=\"state.loading\"\r\n [showClear]=\"true\"\r\n />\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1
|
|
376
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SchemaConnectionField, isStandalone: true, selector: "mt-schema-connection-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "grid gap-1" }, ngImport: i0, template: "<!-- @if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >\r\n {{ label() }}\r\n </label>\r\n} -->\r\n\r\n<div class=\"flex gap-4 w-full\">\r\n @for (state of sourceLevelStates(); track getSourceId(state.source)) {\r\n <div [style.width]=\"dropdownWidth()\" class=\"min-w-0\">\r\n @if (sourceLevelStates().length > 0) {\r\n <span class=\"text-sm text-muted-color mb-1 block truncate\">\r\n {{\r\n state.source.name?.en ||\r\n state.source.levelKey ||\r\n state.source.moduleKey\r\n }}\r\n </span>\r\n }\r\n\r\n @if (state.source.allowManyToMany) {\r\n <mt-multi-select-field\r\n [field]=\"false\"\r\n [(ngModel)]=\"selections[getSourceId(state.source)]\"\r\n (ngModelChange)=\"syncValue()\"\r\n [options]=\"state.options\"\r\n optionLabel=\"name\"\r\n optionValue=\"id\"\r\n [placeholder]=\"\r\n placeholder() ||\r\n state.source.name?.en ||\r\n ('components.selectPlaceholder' | transloco)\r\n \"\r\n [readonly]=\"disabled() || readonly()\"\r\n [filter]=\"filter()\"\r\n [showClear]=\"true\"\r\n display=\"chip\"\r\n />\r\n } @else {\r\n <mt-select-field\r\n [field]=\"false\"\r\n [(ngModel)]=\"selections[getSourceId(state.source)]\"\r\n (ngModelChange)=\"syncValue()\"\r\n [options]=\"state.options\"\r\n optionLabel=\"name\"\r\n optionValue=\"id\"\r\n [placeholder]=\"\r\n placeholder() ||\r\n state.source.name?.en ||\r\n ('components.selectPlaceholder' | transloco)\r\n \"\r\n [readonly]=\"disabled() || readonly()\"\r\n [filter]=\"filter()\"\r\n [loading]=\"state.loading\"\r\n [showClear]=\"true\"\r\n />\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [""], 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: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
361
377
|
}
|
|
362
378
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SchemaConnectionField, decorators: [{
|
|
363
379
|
type: Component,
|
|
@@ -605,7 +621,7 @@ class SchedulePredecessorField {
|
|
|
605
621
|
return `${row.predecessorId}${PREDECESSOR_TOKEN_BY_TYPE[row.type]}${lag}`;
|
|
606
622
|
}
|
|
607
623
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SchedulePredecessorField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
608
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SchedulePredecessorField, isStandalone: true, selector: "mt-schedule-predecessor-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null }, runtimeContext: { classPropertyName: "runtimeContext", publicName: "runtimeContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "predecessorCellTpl", first: true, predicate: ["predecessorCellTpl"], descendants: true, isSignal: true }, { propertyName: "typeCellTpl", first: true, predicate: ["typeCellTpl"], descendants: true, isSignal: true }, { propertyName: "lagCellTpl", first: true, predicate: ["lagCellTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\r\n
|
|
624
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SchedulePredecessorField, isStandalone: true, selector: "mt-schedule-predecessor-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null }, runtimeContext: { classPropertyName: "runtimeContext", publicName: "runtimeContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "predecessorCellTpl", first: true, predicate: ["predecessorCellTpl"], descendants: true, isSignal: true }, { propertyName: "typeCellTpl", first: true, predicate: ["typeCellTpl"], descendants: true, isSignal: true }, { propertyName: "lagCellTpl", first: true, predicate: ["lagCellTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"gap-3 overflow-auto\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <div>\r\n @if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >\r\n {{ label() }}\r\n </label>\r\n }\r\n </div>\r\n <mt-button\r\n icon=\"general.plus\"\r\n [label]=\"'components.schedulePredecessorField.add' | transloco\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n [disabled]=\"disabled() || readonly() || !canAddRow()\"\r\n [tooltip]=\"addTooltip()\"\r\n (onClick)=\"addRow()\"\r\n />\r\n </div>\r\n\r\n <ng-template #predecessorCellTpl let-row>\r\n <mt-select-field\r\n [field]=\"false\"\r\n [options]=\"availableTaskOptions()\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n [placeholder]=\"\r\n placeholder() ||\r\n ('components.schedulePredecessorField.selectPredecessor' | transloco)\r\n \"\r\n [filter]=\"true\"\r\n [showClear]=\"true\"\r\n [loading]=\"loading()\"\r\n [readonly]=\"disabled() || readonly()\"\r\n [ngModel]=\"row.predecessorId || undefined\"\r\n (onChange)=\"updateRow(row.key, { predecessorId: $event ?? '' })\"\r\n />\r\n </ng-template>\r\n\r\n <ng-template #typeCellTpl let-row>\r\n <mt-select-field\r\n [field]=\"false\"\r\n [options]=\"typeOptions()\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n [readonly]=\"disabled() || readonly()\"\r\n [ngModel]=\"row.type\"\r\n (onChange)=\"updateRow(row.key, { type: $event ?? 0 })\"\r\n />\r\n </ng-template>\r\n\r\n <ng-template #lagCellTpl let-row>\r\n <mt-number-field\r\n [field]=\"false\"\r\n [useGrouping]=\"false\"\r\n [placeholder]=\"'components.schedulePredecessorField.lagDays' | transloco\"\r\n [readonly]=\"disabled() || readonly()\"\r\n [ngModel]=\"row.lagDays\"\r\n (ngModelChange)=\"updateRow(row.key, { lagDays: $event ?? 0 })\"\r\n />\r\n </ng-template>\r\n\r\n <mt-table\r\n noCard\r\n [data]=\"rows()\"\r\n [columns]=\"columns()\"\r\n [rowActions]=\"rowActions()\"\r\n [pageSize]=\"pageSize()\"\r\n [generalSearch]=\"false\"\r\n [showFilters]=\"false\"\r\n [dataKey]=\"'key'\"\r\n storageKey=\"schedule-predecessor-field-table\"\r\n [loading]=\"loading()\"\r\n >\r\n <ng-template #empty>\r\n <div\r\n class=\"rounded-xl border border-dashed border-surface px-4 py-5 text-sm text-muted-color\"\r\n >\r\n {{ \"components.schedulePredecessorField.empty\" | transloco }}\r\n </div>\r\n </ng-template>\r\n </mt-table>\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
609
625
|
}
|
|
610
626
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SchedulePredecessorField, decorators: [{
|
|
611
627
|
type: Component,
|
|
@@ -620,7 +636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
620
636
|
TranslocoModule,
|
|
621
637
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
622
638
|
class: 'grid gap-1',
|
|
623
|
-
}, template: "@if (label()) {\r\n
|
|
639
|
+
}, template: "<div class=\"gap-3 overflow-auto\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <div>\r\n @if (label()) {\r\n <label\r\n [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n [for]=\"ngControl?.name || label()\"\r\n >\r\n {{ label() }}\r\n </label>\r\n }\r\n </div>\r\n <mt-button\r\n icon=\"general.plus\"\r\n [label]=\"'components.schedulePredecessorField.add' | transloco\"\r\n severity=\"secondary\"\r\n variant=\"outlined\"\r\n size=\"small\"\r\n [disabled]=\"disabled() || readonly() || !canAddRow()\"\r\n [tooltip]=\"addTooltip()\"\r\n (onClick)=\"addRow()\"\r\n />\r\n </div>\r\n\r\n <ng-template #predecessorCellTpl let-row>\r\n <mt-select-field\r\n [field]=\"false\"\r\n [options]=\"availableTaskOptions()\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n [placeholder]=\"\r\n placeholder() ||\r\n ('components.schedulePredecessorField.selectPredecessor' | transloco)\r\n \"\r\n [filter]=\"true\"\r\n [showClear]=\"true\"\r\n [loading]=\"loading()\"\r\n [readonly]=\"disabled() || readonly()\"\r\n [ngModel]=\"row.predecessorId || undefined\"\r\n (onChange)=\"updateRow(row.key, { predecessorId: $event ?? '' })\"\r\n />\r\n </ng-template>\r\n\r\n <ng-template #typeCellTpl let-row>\r\n <mt-select-field\r\n [field]=\"false\"\r\n [options]=\"typeOptions()\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n [readonly]=\"disabled() || readonly()\"\r\n [ngModel]=\"row.type\"\r\n (onChange)=\"updateRow(row.key, { type: $event ?? 0 })\"\r\n />\r\n </ng-template>\r\n\r\n <ng-template #lagCellTpl let-row>\r\n <mt-number-field\r\n [field]=\"false\"\r\n [useGrouping]=\"false\"\r\n [placeholder]=\"'components.schedulePredecessorField.lagDays' | transloco\"\r\n [readonly]=\"disabled() || readonly()\"\r\n [ngModel]=\"row.lagDays\"\r\n (ngModelChange)=\"updateRow(row.key, { lagDays: $event ?? 0 })\"\r\n />\r\n </ng-template>\r\n\r\n <mt-table\r\n noCard\r\n [data]=\"rows()\"\r\n [columns]=\"columns()\"\r\n [rowActions]=\"rowActions()\"\r\n [pageSize]=\"pageSize()\"\r\n [generalSearch]=\"false\"\r\n [showFilters]=\"false\"\r\n [dataKey]=\"'key'\"\r\n storageKey=\"schedule-predecessor-field-table\"\r\n [loading]=\"loading()\"\r\n >\r\n <ng-template #empty>\r\n <div\r\n class=\"rounded-xl border border-dashed border-surface px-4 py-5 text-sm text-muted-color\"\r\n >\r\n {{ \"components.schedulePredecessorField.empty\" | transloco }}\r\n </div>\r\n </ng-template>\r\n </mt-table>\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n" }]
|
|
624
640
|
}], ctorParameters: () => [], propDecorators: { predecessorCellTpl: [{ type: i0.ViewChild, args: ['predecessorCellTpl', { isSignal: true }] }], typeCellTpl: [{ type: i0.ViewChild, args: ['typeCellTpl', { isSignal: true }] }], lagCellTpl: [{ type: i0.ViewChild, args: ['lagCellTpl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: false }] }], runtimeContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "runtimeContext", required: false }] }] } });
|
|
625
641
|
|
|
626
642
|
/**
|