@ngrdt/forms 0.0.22 → 0.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ngrdt-forms.mjs +129 -132
- package/fesm2022/ngrdt-forms.mjs.map +1 -1
- package/index.d.ts +4 -4
- package/package.json +8 -8
package/fesm2022/ngrdt-forms.mjs
CHANGED
|
@@ -10,29 +10,27 @@ import { signalStore, withState, withHooks, withComputed, withMethods, patchStat
|
|
|
10
10
|
const noop = () => { };
|
|
11
11
|
class RdtBaseFormInputComponent extends RdtInteractiveElementComponent {
|
|
12
12
|
injector = inject(Injector);
|
|
13
|
-
_control = signal(null
|
|
13
|
+
_control = signal(null);
|
|
14
14
|
control = this._control.asReadonly();
|
|
15
|
-
label = input(''
|
|
16
|
-
placeholder = input(''
|
|
17
|
-
externalValue = model(null,
|
|
15
|
+
label = input('');
|
|
16
|
+
placeholder = input('');
|
|
17
|
+
externalValue = model(null, { alias: 'value' });
|
|
18
18
|
internalValue = linkedSignal(() => this.toInternalValue(this.externalValue()));
|
|
19
|
-
dataTestIdInput = input(undefined,
|
|
19
|
+
dataTestIdInput = input(undefined, { alias: 'dataTestId' });
|
|
20
20
|
dataTestId = linkedSignal(() => this.dataTestIdInput() ?? this.label() ?? '');
|
|
21
|
-
readonlyInput = input(null,
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}]));
|
|
31
|
-
requiredFromControl = signal(false, ...(ngDevMode ? [{ debugName: "requiredFromControl" }] : []));
|
|
21
|
+
readonlyInput = input(null, {
|
|
22
|
+
alias: 'readonly',
|
|
23
|
+
transform: booleanAttribute,
|
|
24
|
+
});
|
|
25
|
+
requiredInput = input(null, {
|
|
26
|
+
alias: 'required',
|
|
27
|
+
transform: booleanAttribute,
|
|
28
|
+
});
|
|
29
|
+
requiredFromControl = signal(false);
|
|
32
30
|
required = linkedSignal(() => {
|
|
33
31
|
return this.requiredInput() ?? this.requiredFromControl() ?? false;
|
|
34
32
|
});
|
|
35
|
-
touchedInternal = signal(false
|
|
33
|
+
touchedInternal = signal(false);
|
|
36
34
|
touched = computed(() => {
|
|
37
35
|
const control = this.control();
|
|
38
36
|
if (control) {
|
|
@@ -41,7 +39,7 @@ class RdtBaseFormInputComponent extends RdtInteractiveElementComponent {
|
|
|
41
39
|
else {
|
|
42
40
|
return this.touchedInternal();
|
|
43
41
|
}
|
|
44
|
-
}
|
|
42
|
+
});
|
|
45
43
|
invalid = computed(() => {
|
|
46
44
|
if (this.requiredInput() && this.isEmpty(this.externalValue())) {
|
|
47
45
|
return true;
|
|
@@ -53,12 +51,12 @@ class RdtBaseFormInputComponent extends RdtInteractiveElementComponent {
|
|
|
53
51
|
else {
|
|
54
52
|
return false;
|
|
55
53
|
}
|
|
56
|
-
}
|
|
54
|
+
});
|
|
57
55
|
requiredEffect = effect(() => {
|
|
58
56
|
this.requiredInput();
|
|
59
57
|
this.onValidatorChange();
|
|
60
|
-
}
|
|
61
|
-
requiredError = computed(() => this.getRequiredError(this.externalValue())
|
|
58
|
+
});
|
|
59
|
+
requiredError = computed(() => this.getRequiredError(this.externalValue()));
|
|
62
60
|
controlErrors = computed(() => {
|
|
63
61
|
const control = this.control();
|
|
64
62
|
if (control) {
|
|
@@ -68,9 +66,9 @@ class RdtBaseFormInputComponent extends RdtInteractiveElementComponent {
|
|
|
68
66
|
else {
|
|
69
67
|
return null;
|
|
70
68
|
}
|
|
71
|
-
}
|
|
72
|
-
errors = computed(() => this.controlErrors() ?? this.requiredError()
|
|
73
|
-
visibleErrors = computed(() => this.invalid() && this.touched() ? this.errors() : null
|
|
69
|
+
});
|
|
70
|
+
errors = computed(() => this.controlErrors() ?? this.requiredError());
|
|
71
|
+
visibleErrors = computed(() => this.invalid() && this.touched() ? this.errors() : null);
|
|
74
72
|
get ngControl() {
|
|
75
73
|
return this._ngControl;
|
|
76
74
|
}
|
|
@@ -156,10 +154,10 @@ class RdtBaseFormInputComponent extends RdtInteractiveElementComponent {
|
|
|
156
154
|
: null;
|
|
157
155
|
}
|
|
158
156
|
static REQUIRED_ERROR = { required: true };
|
|
159
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
160
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.
|
|
157
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtBaseFormInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
158
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: RdtBaseFormInputComponent, isStandalone: true, inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, externalValue: { classPropertyName: "externalValue", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, dataTestIdInput: { classPropertyName: "dataTestIdInput", publicName: "dataTestId", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { externalValue: "valueChange" }, usesInheritance: true, ngImport: i0 });
|
|
161
159
|
}
|
|
162
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
160
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtBaseFormInputComponent, decorators: [{
|
|
163
161
|
type: Directive,
|
|
164
162
|
args: [{
|
|
165
163
|
standalone: true,
|
|
@@ -167,15 +165,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
167
165
|
}] });
|
|
168
166
|
|
|
169
167
|
class RdtCheckboxComponent extends RdtBaseFormInputComponent {
|
|
170
|
-
trueValueInput = input(true,
|
|
171
|
-
|
|
172
|
-
|
|
168
|
+
trueValueInput = input(true, {
|
|
169
|
+
alias: 'trueValue',
|
|
170
|
+
});
|
|
173
171
|
trueValue = linkedSignal(() => this.trueValueInput());
|
|
174
|
-
falseValueInput = input(false,
|
|
175
|
-
|
|
176
|
-
|
|
172
|
+
falseValueInput = input(false, {
|
|
173
|
+
alias: 'falseValue',
|
|
174
|
+
});
|
|
177
175
|
falseValue = linkedSignal(() => this.falseValueInput());
|
|
178
|
-
indeterminate = input(false,
|
|
176
|
+
indeterminate = input(false, { transform: booleanAttribute });
|
|
179
177
|
toExternalValue(internalValue) {
|
|
180
178
|
switch (internalValue) {
|
|
181
179
|
case true:
|
|
@@ -199,10 +197,10 @@ class RdtCheckboxComponent extends RdtBaseFormInputComponent {
|
|
|
199
197
|
isEmpty(value) {
|
|
200
198
|
return value === null;
|
|
201
199
|
}
|
|
202
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
203
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.
|
|
200
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
201
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: RdtCheckboxComponent, isStandalone: true, inputs: { trueValueInput: { classPropertyName: "trueValueInput", publicName: "trueValue", isSignal: true, isRequired: false, transformFunction: null }, falseValueInput: { classPropertyName: "falseValueInput", publicName: "falseValue", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
|
|
204
202
|
}
|
|
205
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtCheckboxComponent, decorators: [{
|
|
206
204
|
type: Directive
|
|
207
205
|
}] });
|
|
208
206
|
|
|
@@ -214,17 +212,17 @@ function nullToUndefinedNumeric(value) {
|
|
|
214
212
|
}
|
|
215
213
|
|
|
216
214
|
class RdtDateComponent extends RdtBaseFormInputComponent {
|
|
217
|
-
type = input('date'
|
|
218
|
-
minInput = input(undefined,
|
|
219
|
-
|
|
220
|
-
|
|
215
|
+
type = input('date');
|
|
216
|
+
minInput = input(undefined, {
|
|
217
|
+
transform: nullToUndefined,
|
|
218
|
+
});
|
|
221
219
|
min = linkedSignal(() => {
|
|
222
220
|
const minInput = this.minInput();
|
|
223
221
|
return minInput ? this.toInternalValue(minInput) : null;
|
|
224
222
|
});
|
|
225
|
-
maxInput = input(undefined,
|
|
226
|
-
|
|
227
|
-
|
|
223
|
+
maxInput = input(undefined, {
|
|
224
|
+
transform: nullToUndefined,
|
|
225
|
+
});
|
|
228
226
|
max = linkedSignal(() => {
|
|
229
227
|
const maxInput = this.maxInput();
|
|
230
228
|
return maxInput ? this.toInternalValue(maxInput) : null;
|
|
@@ -232,10 +230,10 @@ class RdtDateComponent extends RdtBaseFormInputComponent {
|
|
|
232
230
|
isEmpty(value) {
|
|
233
231
|
return value === null;
|
|
234
232
|
}
|
|
235
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
236
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.
|
|
233
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
234
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: RdtDateComponent, isStandalone: true, inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, minInput: { classPropertyName: "minInput", publicName: "minInput", isSignal: true, isRequired: false, transformFunction: null }, maxInput: { classPropertyName: "maxInput", publicName: "maxInput", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
|
|
237
235
|
}
|
|
238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtDateComponent, decorators: [{
|
|
239
237
|
type: Directive
|
|
240
238
|
}] });
|
|
241
239
|
|
|
@@ -312,32 +310,31 @@ class RdtFileInputComponent extends RdtBaseFormInputComponent {
|
|
|
312
310
|
defaultFileReader = inject(RDT_DEFAULT_FILE_READER);
|
|
313
311
|
defaultMaxFileSize = inject(RDT_DEFAULT_MAX_FILE_SIZE);
|
|
314
312
|
defaultLabelFn = inject(RDT_DEFAULT_FILE_LABEL_FN);
|
|
315
|
-
readerInput = input(this.defaultFileReader,
|
|
316
|
-
|
|
317
|
-
|
|
313
|
+
readerInput = input(this.defaultFileReader, {
|
|
314
|
+
alias: 'reader',
|
|
315
|
+
});
|
|
318
316
|
reader = linkedSignal(() => this.readerInput());
|
|
319
|
-
acceptInput = input(undefined,
|
|
317
|
+
acceptInput = input(undefined, { alias: 'accept', transform: nullToUndefined });
|
|
320
318
|
accept = linkedSignal(() => {
|
|
321
319
|
const acceptInput = this.acceptInput();
|
|
322
320
|
return !acceptInput || Array.isArray(acceptInput)
|
|
323
321
|
? acceptInput
|
|
324
322
|
: [acceptInput];
|
|
325
323
|
});
|
|
326
|
-
jointAccept = computed(() => this.accept()?.join(',')
|
|
327
|
-
maxFileSizeInput = input(this.defaultMaxFileSize,
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
}]));
|
|
324
|
+
jointAccept = computed(() => this.accept()?.join(','));
|
|
325
|
+
maxFileSizeInput = input(this.defaultMaxFileSize, {
|
|
326
|
+
alias: 'maxFileSize',
|
|
327
|
+
transform: nullToUndefined,
|
|
328
|
+
});
|
|
332
329
|
maxFileSize = linkedSignal(() => this.maxFileSizeInput());
|
|
333
330
|
maxFileSizeInBytes = computed(() => {
|
|
334
331
|
const maxFileSize = this.maxFileSize();
|
|
335
332
|
return maxFileSize ? RdtFileUtils.fileSizeToBytes(maxFileSize) : null;
|
|
336
|
-
}
|
|
337
|
-
labelFn = input(this.defaultLabelFn
|
|
338
|
-
multiple = input(false,
|
|
333
|
+
});
|
|
334
|
+
labelFn = input(this.defaultLabelFn);
|
|
335
|
+
multiple = input(false, { transform: booleanAttribute });
|
|
339
336
|
labelCtrl = new FormControl(null);
|
|
340
|
-
labelDataTestId = computed(() => this.dataTestId() + '-label'
|
|
337
|
+
labelDataTestId = computed(() => this.dataTestId() + '-label');
|
|
341
338
|
touchedEffect = effect(() => {
|
|
342
339
|
const touched = this.touched();
|
|
343
340
|
if (touched) {
|
|
@@ -346,10 +343,10 @@ class RdtFileInputComponent extends RdtBaseFormInputComponent {
|
|
|
346
343
|
else {
|
|
347
344
|
this.labelCtrl.markAsUntouched();
|
|
348
345
|
}
|
|
349
|
-
}
|
|
346
|
+
});
|
|
350
347
|
errorEffect = effect(() => {
|
|
351
348
|
this.labelCtrl?.setErrors(this.visibleErrors());
|
|
352
|
-
}
|
|
349
|
+
});
|
|
353
350
|
ngOnInit() {
|
|
354
351
|
super.ngOnInit();
|
|
355
352
|
this.control()?.addValidators(this._maxFileSizeValidator);
|
|
@@ -419,10 +416,10 @@ class RdtFileInputComponent extends RdtBaseFormInputComponent {
|
|
|
419
416
|
}
|
|
420
417
|
return null;
|
|
421
418
|
};
|
|
422
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
423
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.
|
|
419
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtFileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
420
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: RdtFileInputComponent, isStandalone: true, inputs: { readerInput: { classPropertyName: "readerInput", publicName: "reader", isSignal: true, isRequired: false, transformFunction: null }, acceptInput: { classPropertyName: "acceptInput", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeInput: { classPropertyName: "maxFileSizeInput", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, labelFn: { classPropertyName: "labelFn", publicName: "labelFn", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
|
|
424
421
|
}
|
|
425
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
422
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtFileInputComponent, decorators: [{
|
|
426
423
|
type: Directive
|
|
427
424
|
}] });
|
|
428
425
|
|
|
@@ -444,18 +441,18 @@ class VnshFileReaderText extends RdtFileReader {
|
|
|
444
441
|
}
|
|
445
442
|
|
|
446
443
|
class RdtNumericInputComponent extends RdtBaseFormInputComponent {
|
|
447
|
-
min = input(undefined,
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
max = input(undefined,
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
step = input(undefined,
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
autocomplete = input(undefined,
|
|
457
|
-
|
|
458
|
-
|
|
444
|
+
min = input(undefined, {
|
|
445
|
+
transform: nullToUndefinedNumeric,
|
|
446
|
+
});
|
|
447
|
+
max = input(undefined, {
|
|
448
|
+
transform: nullToUndefinedNumeric,
|
|
449
|
+
});
|
|
450
|
+
step = input(undefined, {
|
|
451
|
+
transform: nullToUndefinedNumeric,
|
|
452
|
+
});
|
|
453
|
+
autocomplete = input(undefined, {
|
|
454
|
+
transform: nullToUndefined,
|
|
455
|
+
});
|
|
459
456
|
isEmpty(value) {
|
|
460
457
|
return value === null;
|
|
461
458
|
}
|
|
@@ -468,10 +465,10 @@ class RdtNumericInputComponent extends RdtBaseFormInputComponent {
|
|
|
468
465
|
}
|
|
469
466
|
return null;
|
|
470
467
|
}
|
|
471
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
472
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.
|
|
468
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtNumericInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
469
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: RdtNumericInputComponent, isStandalone: true, inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
|
|
473
470
|
}
|
|
474
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
471
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtNumericInputComponent, decorators: [{
|
|
475
472
|
type: Directive
|
|
476
473
|
}] });
|
|
477
474
|
|
|
@@ -910,10 +907,10 @@ function getRdtSelectError(error) {
|
|
|
910
907
|
|
|
911
908
|
class RdtSelectOfflineDatasourceProviderDirective {
|
|
912
909
|
store = inject(RdtSelectStore);
|
|
913
|
-
optionsInput = input.required(
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
options = computed(() => this.parseOptions(this.optionsInput())
|
|
910
|
+
optionsInput = input.required({
|
|
911
|
+
alias: 'options',
|
|
912
|
+
});
|
|
913
|
+
options = computed(() => this.parseOptions(this.optionsInput()));
|
|
917
914
|
parseOptions(options) {
|
|
918
915
|
if (!options || options.length === 0) {
|
|
919
916
|
return [];
|
|
@@ -928,29 +925,29 @@ class RdtSelectOfflineDatasourceProviderDirective {
|
|
|
928
925
|
}));
|
|
929
926
|
}
|
|
930
927
|
}
|
|
931
|
-
optionsEffect = effect(() => this.setDatasource()
|
|
928
|
+
optionsEffect = effect(() => this.setDatasource());
|
|
932
929
|
setDatasource() {
|
|
933
930
|
const options = this.options();
|
|
934
931
|
this.store.setDatasource(new RdtOfflineSelectDatasource(options));
|
|
935
932
|
}
|
|
936
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
937
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.
|
|
933
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtSelectOfflineDatasourceProviderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
934
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: RdtSelectOfflineDatasourceProviderDirective, isStandalone: true, inputs: { optionsInput: { classPropertyName: "optionsInput", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
|
|
938
935
|
}
|
|
939
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
936
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtSelectOfflineDatasourceProviderDirective, decorators: [{
|
|
940
937
|
type: Directive
|
|
941
938
|
}] });
|
|
942
939
|
|
|
943
940
|
class RdtSelectOptionDirective {
|
|
944
941
|
elementRef = inject(ElementRef);
|
|
945
|
-
value = input.required(
|
|
946
|
-
_selected = signal(false
|
|
942
|
+
value = input.required({ alias: 'rdtSelectOption' });
|
|
943
|
+
_selected = signal(false);
|
|
947
944
|
set selected(value) {
|
|
948
945
|
this._selected.set(value);
|
|
949
946
|
}
|
|
950
947
|
get selected() {
|
|
951
948
|
return this._selected();
|
|
952
949
|
}
|
|
953
|
-
_disabled = signal(false
|
|
950
|
+
_disabled = signal(false);
|
|
954
951
|
set disabled(value) {
|
|
955
952
|
this._disabled.set(value);
|
|
956
953
|
}
|
|
@@ -969,10 +966,10 @@ class RdtSelectOptionDirective {
|
|
|
969
966
|
behavior: 'smooth',
|
|
970
967
|
});
|
|
971
968
|
}
|
|
972
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
973
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.
|
|
969
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtSelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
970
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: RdtSelectOptionDirective, isStandalone: true, selector: "[rdtSelectOption]", inputs: { value: { classPropertyName: "value", publicName: "rdtSelectOption", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.rdt-option-selected": "_selected()", "class.rdt-option-disabled": "_disabled()" }, classAttribute: "rdt-option" }, ngImport: i0 });
|
|
974
971
|
}
|
|
975
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
972
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtSelectOptionDirective, decorators: [{
|
|
976
973
|
type: Directive,
|
|
977
974
|
args: [{
|
|
978
975
|
selector: '[rdtSelectOption]',
|
|
@@ -985,12 +982,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
985
982
|
}] });
|
|
986
983
|
|
|
987
984
|
class RdtBaseSelectCommonComponent extends RdtBaseFormInputComponent {
|
|
988
|
-
datasourceInput = input(null
|
|
985
|
+
datasourceInput = input(null);
|
|
989
986
|
store = inject(RdtSelectStore);
|
|
990
987
|
visibleOptions = this.store.visibleOptions;
|
|
991
|
-
queryValidatorFnInput = input(null,
|
|
992
|
-
|
|
993
|
-
|
|
988
|
+
queryValidatorFnInput = input(null, {
|
|
989
|
+
alias: 'inputValidator',
|
|
990
|
+
});
|
|
994
991
|
queryValidatorFn = linkedSignal(() => this.queryValidatorFnInput());
|
|
995
992
|
queryValidatorEffect = effect(() => {
|
|
996
993
|
const validator = this.queryValidatorFn();
|
|
@@ -1000,7 +997,7 @@ class RdtBaseSelectCommonComponent extends RdtBaseFormInputComponent {
|
|
|
1000
997
|
else {
|
|
1001
998
|
this.inputCtrl.clearValidators();
|
|
1002
999
|
}
|
|
1003
|
-
}
|
|
1000
|
+
});
|
|
1004
1001
|
inputCtrl = new FormControl(null);
|
|
1005
1002
|
inputCtrlEvents = toSignal(this.inputCtrl.events);
|
|
1006
1003
|
inputErrors = computed(() => {
|
|
@@ -1011,24 +1008,24 @@ class RdtBaseSelectCommonComponent extends RdtBaseFormInputComponent {
|
|
|
1011
1008
|
else {
|
|
1012
1009
|
return null;
|
|
1013
1010
|
}
|
|
1014
|
-
}
|
|
1015
|
-
debounceTimeInput = input(300,
|
|
1016
|
-
|
|
1017
|
-
|
|
1011
|
+
});
|
|
1012
|
+
debounceTimeInput = input(300, {
|
|
1013
|
+
alias: 'debounce',
|
|
1014
|
+
});
|
|
1018
1015
|
debounceTime = linkedSignal(() => this.debounceTimeInput());
|
|
1019
1016
|
debouncedInput$ = toObservable(this.debounceTime).pipe(switchMap((time) => this.inputCtrl.valueChanges.pipe(debounceTime(time))), distinctUntilChanged());
|
|
1020
1017
|
debouncedInput = toSignal(this.debouncedInput$, {
|
|
1021
1018
|
initialValue: null,
|
|
1022
1019
|
});
|
|
1023
|
-
pageSizeInput = input(20,
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
pageSizeEffect = effect(() => this.store.setPageSize(this.pageSizeInput())
|
|
1020
|
+
pageSizeInput = input(20, {
|
|
1021
|
+
alias: 'pageSize',
|
|
1022
|
+
});
|
|
1023
|
+
pageSizeEffect = effect(() => this.store.setPageSize(this.pageSizeInput()));
|
|
1027
1024
|
loading = computed(() => {
|
|
1028
1025
|
return (this.store.loading() ||
|
|
1029
1026
|
this.loadingInput() ||
|
|
1030
1027
|
RdtObjectUtils.someValuesTrue(this.loadingMap()));
|
|
1031
|
-
}
|
|
1028
|
+
});
|
|
1032
1029
|
ngOnInit() {
|
|
1033
1030
|
super.ngOnInit();
|
|
1034
1031
|
this.debouncedInput$
|
|
@@ -1038,10 +1035,10 @@ class RdtBaseSelectCommonComponent extends RdtBaseFormInputComponent {
|
|
|
1038
1035
|
handleInput(value) {
|
|
1039
1036
|
this.store.setQuery(value);
|
|
1040
1037
|
}
|
|
1041
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1042
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.
|
|
1038
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtBaseSelectCommonComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
1039
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: RdtBaseSelectCommonComponent, isStandalone: true, inputs: { datasourceInput: { classPropertyName: "datasourceInput", publicName: "datasourceInput", isSignal: true, isRequired: false, transformFunction: null }, queryValidatorFnInput: { classPropertyName: "queryValidatorFnInput", publicName: "inputValidator", isSignal: true, isRequired: false, transformFunction: null }, debounceTimeInput: { classPropertyName: "debounceTimeInput", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, pageSizeInput: { classPropertyName: "pageSizeInput", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
|
|
1043
1040
|
}
|
|
1044
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1041
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtBaseSelectCommonComponent, decorators: [{
|
|
1045
1042
|
type: Directive
|
|
1046
1043
|
}] });
|
|
1047
1044
|
|
|
@@ -1049,14 +1046,14 @@ class RdtMultiSelectComponent extends RdtBaseSelectCommonComponent {
|
|
|
1049
1046
|
selected = computed(() => {
|
|
1050
1047
|
const selected = this.store.selectedItems();
|
|
1051
1048
|
return selected.length > 0 ? selected : null;
|
|
1052
|
-
}
|
|
1049
|
+
});
|
|
1053
1050
|
isEmpty(value) {
|
|
1054
1051
|
return value === null || value.length === 0;
|
|
1055
1052
|
}
|
|
1056
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1057
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
1053
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
1054
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: RdtMultiSelectComponent, isStandalone: true, usesInheritance: true, ngImport: i0 });
|
|
1058
1055
|
}
|
|
1059
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1056
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtMultiSelectComponent, decorators: [{
|
|
1060
1057
|
type: Directive
|
|
1061
1058
|
}] });
|
|
1062
1059
|
|
|
@@ -1064,19 +1061,19 @@ class RdtSingleSelectComponent extends RdtBaseSelectCommonComponent {
|
|
|
1064
1061
|
selected = computed(() => {
|
|
1065
1062
|
const items = this.store.selectedItems();
|
|
1066
1063
|
return items.length > 0 ? items[0] : null;
|
|
1067
|
-
}
|
|
1064
|
+
});
|
|
1068
1065
|
isEmpty(value) {
|
|
1069
1066
|
return value === null;
|
|
1070
1067
|
}
|
|
1071
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1072
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
1068
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtSingleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
1069
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: RdtSingleSelectComponent, isStandalone: true, providers: [
|
|
1073
1070
|
{
|
|
1074
1071
|
provide: RdtBaseFormInputComponent,
|
|
1075
1072
|
useValue: RdtSingleSelectComponent,
|
|
1076
1073
|
},
|
|
1077
1074
|
], usesInheritance: true, ngImport: i0 });
|
|
1078
1075
|
}
|
|
1079
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1076
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtSingleSelectComponent, decorators: [{
|
|
1080
1077
|
type: Directive,
|
|
1081
1078
|
args: [{
|
|
1082
1079
|
providers: [
|
|
@@ -1089,22 +1086,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
1089
1086
|
}] });
|
|
1090
1087
|
|
|
1091
1088
|
class RdtTextInputComponent extends RdtBaseFormInputComponent {
|
|
1092
|
-
type = input('text'
|
|
1093
|
-
autocomplete = input(undefined,
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
maxlength = input(undefined,
|
|
1097
|
-
minlength = input(undefined,
|
|
1098
|
-
pattern = input(undefined,
|
|
1099
|
-
|
|
1100
|
-
|
|
1089
|
+
type = input('text');
|
|
1090
|
+
autocomplete = input(undefined, {
|
|
1091
|
+
transform: nullToUndefined,
|
|
1092
|
+
});
|
|
1093
|
+
maxlength = input(undefined, { transform: nullToUndefinedNumeric });
|
|
1094
|
+
minlength = input(undefined, { transform: nullToUndefinedNumeric });
|
|
1095
|
+
pattern = input(undefined, {
|
|
1096
|
+
transform: nullToUndefined,
|
|
1097
|
+
});
|
|
1101
1098
|
isEmpty(value) {
|
|
1102
1099
|
return value === '' || value === null;
|
|
1103
1100
|
}
|
|
1104
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1105
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.
|
|
1101
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtTextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
1102
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: RdtTextInputComponent, isStandalone: true, inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
|
|
1106
1103
|
}
|
|
1107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1104
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtTextInputComponent, decorators: [{
|
|
1108
1105
|
type: Directive
|
|
1109
1106
|
}] });
|
|
1110
1107
|
|