@unipin/angular-applet 21.3.0 → 21.3.1
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.
|
@@ -16,6 +16,201 @@ import { UpPopoverComponent, UpPopoverTriggerDirective, UpPopoverContentRefDirec
|
|
|
16
16
|
import { DecimalPipe } from '@angular/common';
|
|
17
17
|
import { matDelete, matUpload } from '@ng-icons/material-icons/baseline';
|
|
18
18
|
|
|
19
|
+
function setValidator(form, keys, validators) {
|
|
20
|
+
if (!keys.length ||
|
|
21
|
+
keys.length === 1) {
|
|
22
|
+
throw new Error('Use normal action for single keys and keys cannot be empty.');
|
|
23
|
+
}
|
|
24
|
+
keys.forEach((key) => {
|
|
25
|
+
const control = form.get(key);
|
|
26
|
+
if (control) {
|
|
27
|
+
control.setValidators(validators);
|
|
28
|
+
control.updateValueAndValidity();
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
function toggleFormControls(form, keys, mode) {
|
|
34
|
+
if (!keys.length ||
|
|
35
|
+
keys.length === 1) {
|
|
36
|
+
throw new Error('Use normal action for single keys and keys cannot be empty.');
|
|
37
|
+
}
|
|
38
|
+
keys.forEach((key) => form.get(key)?.[mode]());
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function prettifyLabel(name) {
|
|
42
|
+
return name
|
|
43
|
+
.replace(/([a-z])([A-Z])/g, '$1 $2')
|
|
44
|
+
.replace(/_/g, ' ')
|
|
45
|
+
.replace(/\b\w/g, char => char.toUpperCase());
|
|
46
|
+
}
|
|
47
|
+
function convertToDate(value) {
|
|
48
|
+
if (value instanceof Date)
|
|
49
|
+
return value;
|
|
50
|
+
if (typeof value === 'string' &&
|
|
51
|
+
!isNaN(Date.parse(value))) {
|
|
52
|
+
return new Date(value);
|
|
53
|
+
}
|
|
54
|
+
return null;
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Range validator for number and date values.
|
|
58
|
+
* @param {string} fromKey - The "from" control name
|
|
59
|
+
* @param {string} toKey - The "to" control name
|
|
60
|
+
* @returns {ValidatorFn} Throw error message when fromKey is greater than toKey
|
|
61
|
+
*
|
|
62
|
+
* Usage:
|
|
63
|
+
* this.form = new FormGroup({
|
|
64
|
+
* agingFrom: new FormControl(),
|
|
65
|
+
* agingTo: new FormControl(),
|
|
66
|
+
* }, { validators: rangeValidator('agingFrom', 'agingTo') });
|
|
67
|
+
*/
|
|
68
|
+
function validRangeValidator(fromKey, toKey) {
|
|
69
|
+
return (group) => {
|
|
70
|
+
if (!group) {
|
|
71
|
+
return null;
|
|
72
|
+
}
|
|
73
|
+
const toControl = group.get(toKey);
|
|
74
|
+
const fromControl = group.get(fromKey);
|
|
75
|
+
if (!fromControl ||
|
|
76
|
+
!toControl) {
|
|
77
|
+
return null;
|
|
78
|
+
}
|
|
79
|
+
const toValue = toControl.value;
|
|
80
|
+
const fromValue = fromControl.value;
|
|
81
|
+
if (fromValue === null ||
|
|
82
|
+
toValue === null ||
|
|
83
|
+
fromValue === '' ||
|
|
84
|
+
toValue === '') {
|
|
85
|
+
return null;
|
|
86
|
+
}
|
|
87
|
+
let isInvalid = false;
|
|
88
|
+
const toDate = convertToDate(toValue);
|
|
89
|
+
const fromDate = convertToDate(fromValue);
|
|
90
|
+
if (fromDate && toDate) {
|
|
91
|
+
isInvalid = toDate <= fromDate;
|
|
92
|
+
}
|
|
93
|
+
else if (!isNaN(fromValue) &&
|
|
94
|
+
!isNaN(toValue)) {
|
|
95
|
+
isInvalid = Number(toValue) <= Number(fromValue);
|
|
96
|
+
}
|
|
97
|
+
return !isInvalid ? null : {
|
|
98
|
+
rangeInvalid: {
|
|
99
|
+
to: toKey,
|
|
100
|
+
from: fromKey,
|
|
101
|
+
message: `${prettifyLabel(toKey)} must be greater than ${prettifyLabel(fromKey)}`
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* Validator that requires all specified form controls to have the same value.
|
|
109
|
+
*
|
|
110
|
+
* @param {string[]} controlNames - The names of the controls that must match
|
|
111
|
+
* @param {string} [message] - Optional custom error message
|
|
112
|
+
* @returns {ValidatorFn} A validator function producing an `isEqual` error if values do not match
|
|
113
|
+
*
|
|
114
|
+
* @example
|
|
115
|
+
* this.form = new FormGroup({
|
|
116
|
+
* password: new FormControl(''),
|
|
117
|
+
* confirmPassword: new FormControl(''),
|
|
118
|
+
* }, { validators: isEqualValidator(['password', 'confirmPassword']) });
|
|
119
|
+
*/
|
|
120
|
+
function isEqualValidator(controlNames, message) {
|
|
121
|
+
return (group) => {
|
|
122
|
+
if (!group ||
|
|
123
|
+
controlNames.length < 2) {
|
|
124
|
+
return null;
|
|
125
|
+
}
|
|
126
|
+
let isEmpty = false;
|
|
127
|
+
const values = controlNames.reduce((acc, name) => {
|
|
128
|
+
const control = group.get(name);
|
|
129
|
+
if (!control) {
|
|
130
|
+
return acc;
|
|
131
|
+
}
|
|
132
|
+
if (!control.value) {
|
|
133
|
+
isEmpty = true;
|
|
134
|
+
return acc;
|
|
135
|
+
}
|
|
136
|
+
acc.push(control.value);
|
|
137
|
+
return acc;
|
|
138
|
+
}, []);
|
|
139
|
+
if (isEmpty) {
|
|
140
|
+
return null;
|
|
141
|
+
}
|
|
142
|
+
if (!values.every(v => v === values[0])) {
|
|
143
|
+
const labels = controlNames.map((name) => {
|
|
144
|
+
return name
|
|
145
|
+
.replace(/([a-z])([A-Z])/g, '$1 $2')
|
|
146
|
+
.replace(/_/g, ' ')
|
|
147
|
+
.replace(/\b\w/g, char => char.toUpperCase());
|
|
148
|
+
});
|
|
149
|
+
return {
|
|
150
|
+
isEqual: {
|
|
151
|
+
fields: controlNames,
|
|
152
|
+
message: message || `${labels.join(', ')} should have the same value`
|
|
153
|
+
}
|
|
154
|
+
};
|
|
155
|
+
}
|
|
156
|
+
return null;
|
|
157
|
+
};
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/**
|
|
161
|
+
* Validator that requires all specified form controls to have different values.
|
|
162
|
+
*
|
|
163
|
+
* @param {string[]} controlNames - The names of the controls that must all be unique
|
|
164
|
+
* @param {string} [message] - Optional custom error message
|
|
165
|
+
* @returns {ValidatorFn} A validator function producing an `isNotEqual` error if duplicate values exist
|
|
166
|
+
*
|
|
167
|
+
* @example
|
|
168
|
+
* this.form = new FormGroup({
|
|
169
|
+
* primaryEmail: new FormControl(''),
|
|
170
|
+
* secondaryEmail: new FormControl(''),
|
|
171
|
+
* backupEmail: new FormControl(''),
|
|
172
|
+
* }, { validators: isNotEqualValidator(['primaryEmail', 'secondaryEmail', 'backupEmail']) });
|
|
173
|
+
*/
|
|
174
|
+
function isNotEqualValidator(controlNames, message) {
|
|
175
|
+
return (group) => {
|
|
176
|
+
if (!group ||
|
|
177
|
+
controlNames.length < 2) {
|
|
178
|
+
return null;
|
|
179
|
+
}
|
|
180
|
+
let isEmpty = false;
|
|
181
|
+
const values = controlNames.reduce((acc, name) => {
|
|
182
|
+
const control = group.get(name);
|
|
183
|
+
if (!control) {
|
|
184
|
+
return acc;
|
|
185
|
+
}
|
|
186
|
+
if (!control.value) {
|
|
187
|
+
isEmpty = true;
|
|
188
|
+
return acc;
|
|
189
|
+
}
|
|
190
|
+
acc.push(control.value);
|
|
191
|
+
return acc;
|
|
192
|
+
}, []);
|
|
193
|
+
if (isEmpty) {
|
|
194
|
+
return null;
|
|
195
|
+
}
|
|
196
|
+
if (new Set(values).size !== values.length) {
|
|
197
|
+
const labels = controlNames.map((name) => {
|
|
198
|
+
return name
|
|
199
|
+
.replace(/([a-z])([A-Z])/g, '$1 $2')
|
|
200
|
+
.replace(/_/g, ' ')
|
|
201
|
+
.replace(/\b\w/g, char => char.toUpperCase());
|
|
202
|
+
});
|
|
203
|
+
return {
|
|
204
|
+
isNotEqual: {
|
|
205
|
+
fields: controlNames,
|
|
206
|
+
message: message || `${labels.join(', ')} should have different values`
|
|
207
|
+
}
|
|
208
|
+
};
|
|
209
|
+
}
|
|
210
|
+
return null;
|
|
211
|
+
};
|
|
212
|
+
}
|
|
213
|
+
|
|
19
214
|
const errMessage = {
|
|
20
215
|
email: (label) => `${label} is not a valid email`,
|
|
21
216
|
required: (label) => `${label} is required`,
|
|
@@ -2557,201 +2752,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
|
|
|
2557
2752
|
], template: "<div \n upFileDragNDrop \n draggedClass=\"border-dashed border-2 border-foreground/20\"\n [class]=\"_computedClass()\"\n [style.aspect-ratio]=\"ratio()\"\n (fileDropped)=\"selectPhoto($event)\"\n>\n @if (imgSrc()) {\n <img \n class=\"overflow-hidden object-cover size-full\"\n [alt]=\"fileName\" \n [src]=\"imgSrc()\" \n [style.aspect-ratio]=\"ratio()\"\n />\n }\n \n <div \n class=\"absolute inset-0 p-2 flex flex-col items-center justify-center text-muted-foreground cursor-pointer opacity-80 group-hover:opacity-100 transition\"\n [style.aspect-ratio]=\"ratio()\"\n >\n @if (imgSrc() === '') {\n <div \n class=\"flex flex-col items-center\"\n (click)=\"file.click()\"\n >\n <ng-icon\n size=\"24px\"\n name=\"matUpload\"\n />\n <span>Choose Image or Drag here.</span>\n </div>\n }\n @else {\n <div \n class=\"absolute flex items-center ustify-center opacity-0 group-hover:opacity-100 transition text-destructive\"\n (click)=\"clear($event)\"\n >\n <ng-icon\n size=\"24px\"\n name=\"matDelete\"\n />\n </div>\n }\n </div>\n\n <input \n type=\"file\" \n hidden \n accept=\"image/png, image/jpeg, image/jpg\" \n (change)=\"selectPhoto($event)\" \n #file\n />\n</div>\n" }]
|
|
2558
2753
|
}], ctorParameters: () => [], propDecorators: { ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], imgSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }, { type: i0.Output, args: ["srcChange"] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], file: [{ type: i0.ViewChild, args: ['file', { isSignal: true }] }] } });
|
|
2559
2754
|
|
|
2560
|
-
function setValidator(form, keys, validators) {
|
|
2561
|
-
if (!keys.length ||
|
|
2562
|
-
keys.length === 1) {
|
|
2563
|
-
throw new Error('Use normal action for single keys and keys cannot be empty.');
|
|
2564
|
-
}
|
|
2565
|
-
keys.forEach((key) => {
|
|
2566
|
-
const control = form.get(key);
|
|
2567
|
-
if (control) {
|
|
2568
|
-
control.setValidators(validators);
|
|
2569
|
-
control.updateValueAndValidity();
|
|
2570
|
-
}
|
|
2571
|
-
});
|
|
2572
|
-
}
|
|
2573
|
-
|
|
2574
|
-
function toggleFormControls(form, keys, mode) {
|
|
2575
|
-
if (!keys.length ||
|
|
2576
|
-
keys.length === 1) {
|
|
2577
|
-
throw new Error('Use normal action for single keys and keys cannot be empty.');
|
|
2578
|
-
}
|
|
2579
|
-
keys.forEach((key) => form.get(key)?.[mode]());
|
|
2580
|
-
}
|
|
2581
|
-
|
|
2582
|
-
function prettifyLabel(name) {
|
|
2583
|
-
return name
|
|
2584
|
-
.replace(/([a-z])([A-Z])/g, '$1 $2')
|
|
2585
|
-
.replace(/_/g, ' ')
|
|
2586
|
-
.replace(/\b\w/g, char => char.toUpperCase());
|
|
2587
|
-
}
|
|
2588
|
-
function convertToDate(value) {
|
|
2589
|
-
if (value instanceof Date)
|
|
2590
|
-
return value;
|
|
2591
|
-
if (typeof value === 'string' &&
|
|
2592
|
-
!isNaN(Date.parse(value))) {
|
|
2593
|
-
return new Date(value);
|
|
2594
|
-
}
|
|
2595
|
-
return null;
|
|
2596
|
-
}
|
|
2597
|
-
/**
|
|
2598
|
-
* Range validator for number and date values.
|
|
2599
|
-
* @param {string} fromKey - The "from" control name
|
|
2600
|
-
* @param {string} toKey - The "to" control name
|
|
2601
|
-
* @returns {ValidatorFn} Throw error message when fromKey is greater than toKey
|
|
2602
|
-
*
|
|
2603
|
-
* Usage:
|
|
2604
|
-
* this.form = new FormGroup({
|
|
2605
|
-
* agingFrom: new FormControl(),
|
|
2606
|
-
* agingTo: new FormControl(),
|
|
2607
|
-
* }, { validators: rangeValidator('agingFrom', 'agingTo') });
|
|
2608
|
-
*/
|
|
2609
|
-
function validRangeValidator(fromKey, toKey) {
|
|
2610
|
-
return (group) => {
|
|
2611
|
-
if (!group) {
|
|
2612
|
-
return null;
|
|
2613
|
-
}
|
|
2614
|
-
const toControl = group.get(toKey);
|
|
2615
|
-
const fromControl = group.get(fromKey);
|
|
2616
|
-
if (!fromControl ||
|
|
2617
|
-
!toControl) {
|
|
2618
|
-
return null;
|
|
2619
|
-
}
|
|
2620
|
-
const toValue = toControl.value;
|
|
2621
|
-
const fromValue = fromControl.value;
|
|
2622
|
-
if (fromValue === null ||
|
|
2623
|
-
toValue === null ||
|
|
2624
|
-
fromValue === '' ||
|
|
2625
|
-
toValue === '') {
|
|
2626
|
-
return null;
|
|
2627
|
-
}
|
|
2628
|
-
let isInvalid = false;
|
|
2629
|
-
const toDate = convertToDate(toValue);
|
|
2630
|
-
const fromDate = convertToDate(fromValue);
|
|
2631
|
-
if (fromDate && toDate) {
|
|
2632
|
-
isInvalid = toDate <= fromDate;
|
|
2633
|
-
}
|
|
2634
|
-
else if (!isNaN(fromValue) &&
|
|
2635
|
-
!isNaN(toValue)) {
|
|
2636
|
-
isInvalid = Number(toValue) <= Number(fromValue);
|
|
2637
|
-
}
|
|
2638
|
-
return !isInvalid ? null : {
|
|
2639
|
-
rangeInvalid: {
|
|
2640
|
-
to: toKey,
|
|
2641
|
-
from: fromKey,
|
|
2642
|
-
message: `${prettifyLabel(toKey)} must be greater than ${prettifyLabel(fromKey)}`
|
|
2643
|
-
}
|
|
2644
|
-
};
|
|
2645
|
-
};
|
|
2646
|
-
}
|
|
2647
|
-
|
|
2648
|
-
/**
|
|
2649
|
-
* Validator that requires all specified form controls to have the same value.
|
|
2650
|
-
*
|
|
2651
|
-
* @param {string[]} controlNames - The names of the controls that must match
|
|
2652
|
-
* @param {string} [message] - Optional custom error message
|
|
2653
|
-
* @returns {ValidatorFn} A validator function producing an `isEqual` error if values do not match
|
|
2654
|
-
*
|
|
2655
|
-
* @example
|
|
2656
|
-
* this.form = new FormGroup({
|
|
2657
|
-
* password: new FormControl(''),
|
|
2658
|
-
* confirmPassword: new FormControl(''),
|
|
2659
|
-
* }, { validators: isEqualValidator(['password', 'confirmPassword']) });
|
|
2660
|
-
*/
|
|
2661
|
-
function isEqualValidator(controlNames, message) {
|
|
2662
|
-
return (group) => {
|
|
2663
|
-
if (!group ||
|
|
2664
|
-
controlNames.length < 2) {
|
|
2665
|
-
return null;
|
|
2666
|
-
}
|
|
2667
|
-
let isEmpty = false;
|
|
2668
|
-
const values = controlNames.reduce((acc, name) => {
|
|
2669
|
-
const control = group.get(name);
|
|
2670
|
-
if (!control) {
|
|
2671
|
-
return acc;
|
|
2672
|
-
}
|
|
2673
|
-
if (!control.value) {
|
|
2674
|
-
isEmpty = true;
|
|
2675
|
-
return acc;
|
|
2676
|
-
}
|
|
2677
|
-
acc.push(control.value);
|
|
2678
|
-
return acc;
|
|
2679
|
-
}, []);
|
|
2680
|
-
if (isEmpty) {
|
|
2681
|
-
return null;
|
|
2682
|
-
}
|
|
2683
|
-
if (!values.every(v => v === values[0])) {
|
|
2684
|
-
const labels = controlNames.map((name) => {
|
|
2685
|
-
return name
|
|
2686
|
-
.replace(/([a-z])([A-Z])/g, '$1 $2')
|
|
2687
|
-
.replace(/_/g, ' ')
|
|
2688
|
-
.replace(/\b\w/g, char => char.toUpperCase());
|
|
2689
|
-
});
|
|
2690
|
-
return {
|
|
2691
|
-
isEqual: {
|
|
2692
|
-
fields: controlNames,
|
|
2693
|
-
message: message || `${labels.join(', ')} should have the same value`
|
|
2694
|
-
}
|
|
2695
|
-
};
|
|
2696
|
-
}
|
|
2697
|
-
return null;
|
|
2698
|
-
};
|
|
2699
|
-
}
|
|
2700
|
-
|
|
2701
|
-
/**
|
|
2702
|
-
* Validator that requires all specified form controls to have different values.
|
|
2703
|
-
*
|
|
2704
|
-
* @param {string[]} controlNames - The names of the controls that must all be unique
|
|
2705
|
-
* @param {string} [message] - Optional custom error message
|
|
2706
|
-
* @returns {ValidatorFn} A validator function producing an `isNotEqual` error if duplicate values exist
|
|
2707
|
-
*
|
|
2708
|
-
* @example
|
|
2709
|
-
* this.form = new FormGroup({
|
|
2710
|
-
* primaryEmail: new FormControl(''),
|
|
2711
|
-
* secondaryEmail: new FormControl(''),
|
|
2712
|
-
* backupEmail: new FormControl(''),
|
|
2713
|
-
* }, { validators: isNotEqualValidator(['primaryEmail', 'secondaryEmail', 'backupEmail']) });
|
|
2714
|
-
*/
|
|
2715
|
-
function isNotEqualValidator(controlNames, message) {
|
|
2716
|
-
return (group) => {
|
|
2717
|
-
if (!group ||
|
|
2718
|
-
controlNames.length < 2) {
|
|
2719
|
-
return null;
|
|
2720
|
-
}
|
|
2721
|
-
let isEmpty = false;
|
|
2722
|
-
const values = controlNames.reduce((acc, name) => {
|
|
2723
|
-
const control = group.get(name);
|
|
2724
|
-
if (!control) {
|
|
2725
|
-
return acc;
|
|
2726
|
-
}
|
|
2727
|
-
if (!control.value) {
|
|
2728
|
-
isEmpty = true;
|
|
2729
|
-
return acc;
|
|
2730
|
-
}
|
|
2731
|
-
acc.push(control.value);
|
|
2732
|
-
return acc;
|
|
2733
|
-
}, []);
|
|
2734
|
-
if (isEmpty) {
|
|
2735
|
-
return null;
|
|
2736
|
-
}
|
|
2737
|
-
if (new Set(values).size !== values.length) {
|
|
2738
|
-
const labels = controlNames.map((name) => {
|
|
2739
|
-
return name
|
|
2740
|
-
.replace(/([a-z])([A-Z])/g, '$1 $2')
|
|
2741
|
-
.replace(/_/g, ' ')
|
|
2742
|
-
.replace(/\b\w/g, char => char.toUpperCase());
|
|
2743
|
-
});
|
|
2744
|
-
return {
|
|
2745
|
-
isNotEqual: {
|
|
2746
|
-
fields: controlNames,
|
|
2747
|
-
message: message || `${labels.join(', ')} should have different values`
|
|
2748
|
-
}
|
|
2749
|
-
};
|
|
2750
|
-
}
|
|
2751
|
-
return null;
|
|
2752
|
-
};
|
|
2753
|
-
}
|
|
2754
|
-
|
|
2755
2755
|
/**
|
|
2756
2756
|
* Generated bundle index. Do not edit.
|
|
2757
2757
|
*/
|