@ngrdt/forms 0.0.55 → 0.0.58

package/fesm2022/ngrdt-forms.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, Injector, signal, input, model, linkedSignal, booleanAttribute, computed, effect, untracked, Directive, numberAttribute, InjectionToken, ElementRef } from '@angular/core';
+import { inject, Injector, signal, input, model, linkedSignal, booleanAttribute, computed, effect, untracked, Directive, InjectionToken, forwardRef, output, numberAttribute, ElementRef, Pipe } from '@angular/core';
 import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
-import { FormControlName, FormControlDirective, NgModel, NgControl, Validators, FormControl, FormGroup } from '@angular/forms';
-import { RdtInteractiveElementComponent } from '@ngrdt/core';
+import { FormControlName, FormControlDirective, NgModel, NgControl, Validators, NG_VALUE_ACCESSOR, FormControl, FormGroup } from '@angular/forms';
+import { RdtInteractiveElementComponent, RdtComponentOutletDirective } from '@ngrdt/core';
 import { startWith, take, map, forkJoin, of, from, switchMap, debounceTime, distinctUntilChanged, merge, takeUntil } from 'rxjs';
 import { RdtFileUtils, RdtObjectUtils, RdtDateUtils } from '@ngrdt/utils';
 import { signalStore, withState, withHooks, withComputed, withMethods, patchState } from '@ngrx/signals';
@@ -34,6 +34,7 @@ class RdtBaseFormInputComponent extends RdtInteractiveElementComponent {
     control = this._control.asReadonly();
     label = input('');
     placeholder = input('');
+    name = input('');
     externalValue = model(null, { alias: 'value' });
     internalValue = linkedSignal(() => this.toInternalValue(this.externalValue()));
     dataTestIdInput = input(undefined, { alias: 'dataTestId' });
@@ -181,7 +182,7 @@ class RdtBaseFormInputComponent extends RdtInteractiveElementComponent {
     }
     static REQUIRED_ERROR = { required: true };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtBaseFormInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtBaseFormInputComponent, decorators: [{
             type: Directive,
@@ -190,6 +191,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 }]
         }] });
 
+class RdtFormInputOutletDirective extends RdtComponentOutletDirective {
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
+    writeValue(value) {
+        const instance = this.componentRef?.instance;
+        instance.writeValue?.(value);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+        const instance = this.componentRef?.instance;
+        instance?.registerOnChange?.(fn);
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+        const instance = this.componentRef?.instance;
+        instance?.registerOnTouched?.(fn);
+    }
+    setDisabledState(isDisabled) {
+        const instance = this.componentRef?.instance;
+        instance?.setDisabledState?.(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtFormInputOutletDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: RdtFormInputOutletDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtFormInputOutletDirective, decorators: [{
+            type: Directive
+        }] });
+
+const RDT_CHECKBOX_BASE_PROVIDER = new InjectionToken('RdtCheckbox');
+
+class RdtCheckboxOutletDirective extends RdtFormInputOutletDirective {
+    componentClass = inject(RDT_CHECKBOX_BASE_PROVIDER);
+    constructor() {
+        super();
+        this.initComponentRef();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtCheckboxOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: RdtCheckboxOutletDirective, isStandalone: true, selector: "[rdtCheckboxOutlet]", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RdtCheckboxOutletDirective),
+                multi: true,
+            },
+        ], exportAs: ["rdtCheckboxOutlet"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtCheckboxOutletDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdtCheckboxOutlet]',
+                    standalone: true,
+                    exportAs: 'rdtCheckboxOutlet',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RdtCheckboxOutletDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [] });
+
 class RdtCheckboxComponent extends RdtBaseFormInputComponent {
     trueValueInput = input(true, {
         alias: 'trueValue',
@@ -200,6 +262,29 @@ class RdtCheckboxComponent extends RdtBaseFormInputComponent {
     });
     falseValue = linkedSignal(() => this.falseValueInput());
     indeterminate = input(false, { transform: booleanAttribute });
+    value = input();
+    checked = input(false);
+    checkedChange = output();
+    checkedState = signal(this.checked());
+    constructor() {
+        super();
+    }
+    //Needed because of our custom boolean types
+    writeValue(value) {
+        const external = value;
+        const newInternal = this.toInternalValue(external);
+        if (newInternal !== this.checkedState()) {
+            this.checkedState.set(newInternal ?? false);
+            this.externalValue.set(value);
+        }
+    }
+    handleValueChange(newInternal) {
+        this.checkedState.set(newInternal);
+        const external = this.toExternalValue(newInternal);
+        this.onChange(external);
+        this.onTouch();
+        this.checkedChange.emit(newInternal);
+    }
     toExternalValue(internalValue) {
         switch (internalValue) {
             case true:
@@ -223,12 +308,12 @@ class RdtCheckboxComponent extends RdtBaseFormInputComponent {
     isEmpty(value) {
         return value === null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtCheckboxComponent, decorators: [{
             type: Directive
-        }] });
+        }], ctorParameters: () => [] });
 
 function nullToUndefined(value) {
     return value === null ? undefined : value;
@@ -561,7 +646,8 @@ class RdtOfflineSelectDatasource extends RdtSelectDatasource {
     preprocessData(data) {
         return data.map((item) => ({
             value: item.value,
-            label: this.preprocessLabel(item.label),
+            label: item.label,
+            prepLabel: this.preprocessLabel(item.label),
         }));
     }
     filterData(query) {
@@ -572,7 +658,7 @@ class RdtOfflineSelectDatasource extends RdtSelectDatasource {
         if (!prepQuery) {
             return this.preprocessedData;
         }
-        return this.preprocessedData.filter((item) => item.label.includes(prepQuery));
+        return this.preprocessedData.filter((item) => item.prepLabel.includes(prepQuery));
     }
 }
 
@@ -967,10 +1053,14 @@ class RdtSelectOfflineDatasourceProviderDirective {
             }));
         }
     }
+    getDatasourceClass() {
+        return RdtOfflineSelectDatasource;
+    }
     optionsEffect = effect(() => this.setDatasource());
     setDatasource() {
         const options = this.options();
-        this.store.setDatasource(new RdtOfflineSelectDatasource(options));
+        const Datasource = this.getDatasourceClass();
+        this.store.setDatasource(new Datasource(options));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtSelectOfflineDatasourceProviderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     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 });
@@ -1212,6 +1302,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             type: Directive
         }] });
 
+const RDT_FORM_ERROR_CODES_PROVIDER = new InjectionToken('RdtFormErrors');
+
+function getFirstError(errors) {
+    if (errors) {
+        const key = Object.keys(errors)[0];
+        const value = errors[key];
+        return { key, value };
+    }
+    return null;
+}
+const defaultRdtFormErrorCodes = {
+    required: () => `Povinné pole.`,
+    email: () => 'Neplatný email.',
+    minlength: (value) => `Minimální délka je ${value.requiredLength} znaků.`,
+    maxlength: (value) => `Maximální délka je ${value.requiredLength} znaků.`,
+    notFound: () => 'Pro zadaný kód nebyla nalezena žádná položka.',
+    multipleFound: () => 'Pro zadaný kód bylo nalezeno více položek.',
+};
+class RdtFormErrorPipe {
+    errorCodes = (() => {
+        const injected = inject(RDT_FORM_ERROR_CODES_PROVIDER, {
+            optional: true,
+        });
+        if (!injected) {
+            console.warn('No provider for RDT_FORM_ERROR_CODES_PROVIDER was found. ' +
+                'Default form error messages are now being used.');
+        }
+        return injected ?? defaultRdtFormErrorCodes;
+    })();
+    transform(errors) {
+        if (!errors)
+            return '';
+        const error = getFirstError(errors);
+        if (error) {
+            const fn = this.errorCodes[error.key];
+            if (fn) {
+                return fn(error.value);
+            }
+            else if (typeof error.value === 'string') {
+                return error.value;
+            }
+            else {
+                return 'Neznámá chyba';
+            }
+        }
+        return '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtFormErrorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: RdtFormErrorPipe, isStandalone: true, name: "rdtFormError" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtFormErrorPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'rdtFormError',
+                    standalone: true,
+                }]
+        }] });
+
 class RdtDateValidators {
     static notInFuture = (control) => {
         let value = null;
@@ -1460,5 +1608,5 @@ class RdtCommonValidators {
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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 };
 //# sourceMappingURL=ngrdt-forms.mjs.map