@ngrdt/forms 0.0.56 → 0.0.58
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 +151 -8
- package/fesm2022/ngrdt-forms.mjs.map +1 -1
- package/index.d.ts +70 -8
- package/package.json +3 -3
package/fesm2022/ngrdt-forms.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Injector, signal, input, model, linkedSignal, booleanAttribute, computed, effect, untracked, Directive,
|
|
2
|
+
import { inject, Injector, signal, input, model, linkedSignal, booleanAttribute, computed, effect, untracked, Directive, InjectionToken, forwardRef, output, numberAttribute, ElementRef, Pipe } from '@angular/core';
|
|
3
3
|
import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
|
|
4
|
-
import { FormControlName, FormControlDirective, NgModel, NgControl, Validators, FormControl, FormGroup } from '@angular/forms';
|
|
5
|
-
import { RdtInteractiveElementComponent } from '@ngrdt/core';
|
|
4
|
+
import { FormControlName, FormControlDirective, NgModel, NgControl, Validators, NG_VALUE_ACCESSOR, FormControl, FormGroup } from '@angular/forms';
|
|
5
|
+
import { RdtInteractiveElementComponent, RdtComponentOutletDirective } from '@ngrdt/core';
|
|
6
6
|
import { startWith, take, map, forkJoin, of, from, switchMap, debounceTime, distinctUntilChanged, merge, takeUntil } from 'rxjs';
|
|
7
7
|
import { RdtFileUtils, RdtObjectUtils, RdtDateUtils } from '@ngrdt/utils';
|
|
8
8
|
import { signalStore, withState, withHooks, withComputed, withMethods, patchState } from '@ngrx/signals';
|
|
@@ -34,6 +34,7 @@ class RdtBaseFormInputComponent extends RdtInteractiveElementComponent {
|
|
|
34
34
|
control = this._control.asReadonly();
|
|
35
35
|
label = input('');
|
|
36
36
|
placeholder = input('');
|
|
37
|
+
name = input('');
|
|
37
38
|
externalValue = model(null, { alias: 'value' });
|
|
38
39
|
internalValue = linkedSignal(() => this.toInternalValue(this.externalValue()));
|
|
39
40
|
dataTestIdInput = input(undefined, { alias: 'dataTestId' });
|
|
@@ -181,7 +182,7 @@ class RdtBaseFormInputComponent extends RdtInteractiveElementComponent {
|
|
|
181
182
|
}
|
|
182
183
|
static REQUIRED_ERROR = { required: true };
|
|
183
184
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtBaseFormInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
184
|
-
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 });
|
|
185
|
+
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 }, name: { classPropertyName: "name", publicName: "name", 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 });
|
|
185
186
|
}
|
|
186
187
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtBaseFormInputComponent, decorators: [{
|
|
187
188
|
type: Directive,
|
|
@@ -190,6 +191,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
|
|
|
190
191
|
}]
|
|
191
192
|
}] });
|
|
192
193
|
|
|
194
|
+
class RdtFormInputOutletDirective extends RdtComponentOutletDirective {
|
|
195
|
+
onChangeFn = () => { };
|
|
196
|
+
onTouchedFn = () => { };
|
|
197
|
+
writeValue(value) {
|
|
198
|
+
const instance = this.componentRef?.instance;
|
|
199
|
+
instance.writeValue?.(value);
|
|
200
|
+
}
|
|
201
|
+
registerOnChange(fn) {
|
|
202
|
+
this.onChangeFn = fn;
|
|
203
|
+
const instance = this.componentRef?.instance;
|
|
204
|
+
instance?.registerOnChange?.(fn);
|
|
205
|
+
}
|
|
206
|
+
registerOnTouched(fn) {
|
|
207
|
+
this.onTouchedFn = fn;
|
|
208
|
+
const instance = this.componentRef?.instance;
|
|
209
|
+
instance?.registerOnTouched?.(fn);
|
|
210
|
+
}
|
|
211
|
+
setDisabledState(isDisabled) {
|
|
212
|
+
const instance = this.componentRef?.instance;
|
|
213
|
+
instance?.setDisabledState?.(isDisabled);
|
|
214
|
+
}
|
|
215
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtFormInputOutletDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
216
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: RdtFormInputOutletDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
|
|
217
|
+
}
|
|
218
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtFormInputOutletDirective, decorators: [{
|
|
219
|
+
type: Directive
|
|
220
|
+
}] });
|
|
221
|
+
|
|
222
|
+
const RDT_CHECKBOX_BASE_PROVIDER = new InjectionToken('RdtCheckbox');
|
|
223
|
+
|
|
224
|
+
class RdtCheckboxOutletDirective extends RdtFormInputOutletDirective {
|
|
225
|
+
componentClass = inject(RDT_CHECKBOX_BASE_PROVIDER);
|
|
226
|
+
constructor() {
|
|
227
|
+
super();
|
|
228
|
+
this.initComponentRef();
|
|
229
|
+
}
|
|
230
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtCheckboxOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
231
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: RdtCheckboxOutletDirective, isStandalone: true, selector: "[rdtCheckboxOutlet]", providers: [
|
|
232
|
+
{
|
|
233
|
+
provide: NG_VALUE_ACCESSOR,
|
|
234
|
+
useExisting: forwardRef(() => RdtCheckboxOutletDirective),
|
|
235
|
+
multi: true,
|
|
236
|
+
},
|
|
237
|
+
], exportAs: ["rdtCheckboxOutlet"], usesInheritance: true, ngImport: i0 });
|
|
238
|
+
}
|
|
239
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtCheckboxOutletDirective, decorators: [{
|
|
240
|
+
type: Directive,
|
|
241
|
+
args: [{
|
|
242
|
+
selector: '[rdtCheckboxOutlet]',
|
|
243
|
+
standalone: true,
|
|
244
|
+
exportAs: 'rdtCheckboxOutlet',
|
|
245
|
+
providers: [
|
|
246
|
+
{
|
|
247
|
+
provide: NG_VALUE_ACCESSOR,
|
|
248
|
+
useExisting: forwardRef(() => RdtCheckboxOutletDirective),
|
|
249
|
+
multi: true,
|
|
250
|
+
},
|
|
251
|
+
],
|
|
252
|
+
}]
|
|
253
|
+
}], ctorParameters: () => [] });
|
|
254
|
+
|
|
193
255
|
class RdtCheckboxComponent extends RdtBaseFormInputComponent {
|
|
194
256
|
trueValueInput = input(true, {
|
|
195
257
|
alias: 'trueValue',
|
|
@@ -200,6 +262,29 @@ class RdtCheckboxComponent extends RdtBaseFormInputComponent {
|
|
|
200
262
|
});
|
|
201
263
|
falseValue = linkedSignal(() => this.falseValueInput());
|
|
202
264
|
indeterminate = input(false, { transform: booleanAttribute });
|
|
265
|
+
value = input();
|
|
266
|
+
checked = input(false);
|
|
267
|
+
checkedChange = output();
|
|
268
|
+
checkedState = signal(this.checked());
|
|
269
|
+
constructor() {
|
|
270
|
+
super();
|
|
271
|
+
}
|
|
272
|
+
//Needed because of our custom boolean types
|
|
273
|
+
writeValue(value) {
|
|
274
|
+
const external = value;
|
|
275
|
+
const newInternal = this.toInternalValue(external);
|
|
276
|
+
if (newInternal !== this.checkedState()) {
|
|
277
|
+
this.checkedState.set(newInternal ?? false);
|
|
278
|
+
this.externalValue.set(value);
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
handleValueChange(newInternal) {
|
|
282
|
+
this.checkedState.set(newInternal);
|
|
283
|
+
const external = this.toExternalValue(newInternal);
|
|
284
|
+
this.onChange(external);
|
|
285
|
+
this.onTouch();
|
|
286
|
+
this.checkedChange.emit(newInternal);
|
|
287
|
+
}
|
|
203
288
|
toExternalValue(internalValue) {
|
|
204
289
|
switch (internalValue) {
|
|
205
290
|
case true:
|
|
@@ -223,12 +308,12 @@ class RdtCheckboxComponent extends RdtBaseFormInputComponent {
|
|
|
223
308
|
isEmpty(value) {
|
|
224
309
|
return value === null;
|
|
225
310
|
}
|
|
226
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtCheckboxComponent, deps:
|
|
227
|
-
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 });
|
|
311
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
312
|
+
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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, usesInheritance: true, ngImport: i0 });
|
|
228
313
|
}
|
|
229
314
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtCheckboxComponent, decorators: [{
|
|
230
315
|
type: Directive
|
|
231
|
-
}] });
|
|
316
|
+
}], ctorParameters: () => [] });
|
|
232
317
|
|
|
233
318
|
function nullToUndefined(value) {
|
|
234
319
|
return value === null ? undefined : value;
|
|
@@ -1217,6 +1302,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
|
|
|
1217
1302
|
type: Directive
|
|
1218
1303
|
}] });
|
|
1219
1304
|
|
|
1305
|
+
const RDT_FORM_ERROR_CODES_PROVIDER = new InjectionToken('RdtFormErrors');
|
|
1306
|
+
|
|
1307
|
+
function getFirstError(errors) {
|
|
1308
|
+
if (errors) {
|
|
1309
|
+
const key = Object.keys(errors)[0];
|
|
1310
|
+
const value = errors[key];
|
|
1311
|
+
return { key, value };
|
|
1312
|
+
}
|
|
1313
|
+
return null;
|
|
1314
|
+
}
|
|
1315
|
+
const defaultRdtFormErrorCodes = {
|
|
1316
|
+
required: () => `Povinné pole.`,
|
|
1317
|
+
email: () => 'Neplatný email.',
|
|
1318
|
+
minlength: (value) => `Minimální délka je ${value.requiredLength} znaků.`,
|
|
1319
|
+
maxlength: (value) => `Maximální délka je ${value.requiredLength} znaků.`,
|
|
1320
|
+
notFound: () => 'Pro zadaný kód nebyla nalezena žádná položka.',
|
|
1321
|
+
multipleFound: () => 'Pro zadaný kód bylo nalezeno více položek.',
|
|
1322
|
+
};
|
|
1323
|
+
class RdtFormErrorPipe {
|
|
1324
|
+
errorCodes = (() => {
|
|
1325
|
+
const injected = inject(RDT_FORM_ERROR_CODES_PROVIDER, {
|
|
1326
|
+
optional: true,
|
|
1327
|
+
});
|
|
1328
|
+
if (!injected) {
|
|
1329
|
+
console.warn('No provider for RDT_FORM_ERROR_CODES_PROVIDER was found. ' +
|
|
1330
|
+
'Default form error messages are now being used.');
|
|
1331
|
+
}
|
|
1332
|
+
return injected ?? defaultRdtFormErrorCodes;
|
|
1333
|
+
})();
|
|
1334
|
+
transform(errors) {
|
|
1335
|
+
if (!errors)
|
|
1336
|
+
return '';
|
|
1337
|
+
const error = getFirstError(errors);
|
|
1338
|
+
if (error) {
|
|
1339
|
+
const fn = this.errorCodes[error.key];
|
|
1340
|
+
if (fn) {
|
|
1341
|
+
return fn(error.value);
|
|
1342
|
+
}
|
|
1343
|
+
else if (typeof error.value === 'string') {
|
|
1344
|
+
return error.value;
|
|
1345
|
+
}
|
|
1346
|
+
else {
|
|
1347
|
+
return 'Neznámá chyba';
|
|
1348
|
+
}
|
|
1349
|
+
}
|
|
1350
|
+
return '';
|
|
1351
|
+
}
|
|
1352
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtFormErrorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
1353
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: RdtFormErrorPipe, isStandalone: true, name: "rdtFormError" });
|
|
1354
|
+
}
|
|
1355
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtFormErrorPipe, decorators: [{
|
|
1356
|
+
type: Pipe,
|
|
1357
|
+
args: [{
|
|
1358
|
+
name: 'rdtFormError',
|
|
1359
|
+
standalone: true,
|
|
1360
|
+
}]
|
|
1361
|
+
}] });
|
|
1362
|
+
|
|
1220
1363
|
class RdtDateValidators {
|
|
1221
1364
|
static notInFuture = (control) => {
|
|
1222
1365
|
let value = null;
|
|
@@ -1465,5 +1608,5 @@ class RdtCommonValidators {
|
|
|
1465
1608
|
* Generated bundle index. Do not edit.
|
|
1466
1609
|
*/
|
|
1467
1610
|
|
|
1468
|
-
export { NO_OP_FILE_READER, NoOpFileReader, RDT_DEFAULT_FILE_LABEL_FN, RDT_DEFAULT_FILE_READER, RDT_DEFAULT_MAX_FILE_SIZE, RdtBaseFormInputComponent, RdtBaseSelectCommonComponent, RdtCheckboxComponent, RdtCommonValidators, RdtDateComponent, RdtDateValidators, RdtFileInputComponent, RdtFileReader, RdtFileReaderArrayBuffer, RdtFileReaderBase64, RdtMultiSelectComponent, RdtNumericInputComponent, RdtOfflineSelectDatasource, RdtSelectDatasource, RdtSelectOfflineDatasourceProviderDirective, RdtSelectOptionDirective, RdtSelectStore, RdtSingleSelectComponent, RdtTextAreaComponent, RdtTextInputComponent, VnshFileReaderText, czechFileLabelFn, getRdtSelectPage, rdtSelectInitialState };
|
|
1611
|
+
export { NO_OP_FILE_READER, NoOpFileReader, RDT_CHECKBOX_BASE_PROVIDER, RDT_DEFAULT_FILE_LABEL_FN, RDT_DEFAULT_FILE_READER, RDT_DEFAULT_MAX_FILE_SIZE, RDT_FORM_ERROR_CODES_PROVIDER, RdtBaseFormInputComponent, RdtBaseSelectCommonComponent, RdtCheckboxComponent, RdtCheckboxOutletDirective, RdtCommonValidators, RdtDateComponent, RdtDateValidators, RdtFileInputComponent, RdtFileReader, RdtFileReaderArrayBuffer, RdtFileReaderBase64, RdtFormErrorPipe, RdtFormInputOutletDirective, RdtMultiSelectComponent, RdtNumericInputComponent, RdtOfflineSelectDatasource, RdtSelectDatasource, RdtSelectOfflineDatasourceProviderDirective, RdtSelectOptionDirective, RdtSelectStore, RdtSingleSelectComponent, RdtTextAreaComponent, RdtTextInputComponent, VnshFileReaderText, czechFileLabelFn, defaultRdtFormErrorCodes, getFirstError, getRdtSelectPage, rdtSelectInitialState };
|
|
1469
1612
|
//# sourceMappingURL=ngrdt-forms.mjs.map
|