@ngrdt/forms 0.0.86 → 0.0.91

package/fesm2022/ngrdt-forms.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, Injector, signal, model, linkedSignal, input, booleanAttribute, computed, effect, untracked, Directive, InjectionToken, output, forwardRef, numberAttribute, ElementRef, Pipe } from '@angular/core';
+import { inject, Injector, signal, model, linkedSignal, input, booleanAttribute, computed, effect, untracked, Directive, InjectionToken, forwardRef, numberAttribute, ElementRef, output, ViewChild, Pipe } from '@angular/core';
 import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { FormControlName, FormControlDirective, NgModel, NgControl, Validators, NG_VALUE_ACCESSOR, FormControl, FormGroup } from '@angular/forms';
 import { RdtInteractiveElementComponent, RdtComponentOutletDirective, RdtTranslateService } from '@ngrdt/core';
-import { startWith, take, map, forkJoin, of, from, switchMap, debounceTime, distinctUntilChanged, merge, takeUntil } from 'rxjs';
+import { startWith, take, map, forkJoin, of, from, switchMap, debounceTime, distinctUntilChanged, filter, tap, merge, takeUntil } from 'rxjs';
 import { RdtFileUtils, RdtObjectUtils, RdtDateUtils } from '@ngrdt/utils';
 import { signalStore, withState, withHooks, withComputed, withMethods, patchState } from '@ngrx/signals';
 import { isEqual } from 'lodash-es';
@@ -236,16 +236,12 @@ const RDT_CHECKBOX_BASE_PROVIDER = new InjectionToken('RdtCheckbox');
 
 class RdtCheckboxOutletDirective extends RdtFormInputOutletDirective {
     componentClass = inject(RDT_CHECKBOX_BASE_PROVIDER);
-    checkedChange = output();
     constructor() {
         super();
         this.initComponentRef();
-        this.componentRef?.instance.checkedChange.subscribe((val) => {
-            this.checkedChange.emit(val);
-        });
     }
     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]", outputs: { checkedChange: "checkedChange" }, providers: [
+    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),
@@ -279,29 +275,6 @@ 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:
@@ -325,12 +298,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: [], 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 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtCheckboxComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [] });
+        }] });
 
 const RDT_FORM_CONTROL_DATE_FORMAT = new InjectionToken('RDT_FORM_CONTROL_DATE_FORMAT', { providedIn: 'root', factory: () => 'yyyy-MM-dd' });
 const RDT_FORM_CONTROL_DATETIME_FORMAT = new InjectionToken('RDT_FORM_CONTROL_DATETIME_FORMAT', { providedIn: 'root', factory: () => "yyyy-MM-dd'T'HH:mm:ss" });
@@ -593,6 +566,39 @@ class VnshFileReaderText extends RdtFileReader {
     }
 }
 
+const RDT_NUMERIC_INPUT_BASE_PROVIDER = new InjectionToken('RdtNumericInput');
+
+class RdtNumericInputOutletDirective extends RdtFormInputOutletDirective {
+    componentClass = inject(RDT_NUMERIC_INPUT_BASE_PROVIDER);
+    constructor() {
+        super();
+        this.initComponentRef();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtNumericInputOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: RdtNumericInputOutletDirective, isStandalone: true, selector: "[rdtNumericInputOutlet]", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RdtNumericInputOutletDirective),
+                multi: true,
+            },
+        ], exportAs: ["rdtNumericInputOutlet"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtNumericInputOutletDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdtNumericInputOutlet]',
+                    standalone: true,
+                    exportAs: 'rdtNumericInputOutlet',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RdtNumericInputOutletDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [] });
+
 class RdtNumericInputComponent extends RdtBaseFormInputComponent {
     min = input(undefined, {
         transform: nullToUndefinedNumeric,
@@ -1191,6 +1197,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 }]
         }] });
 
+const RDT_SELECT_BASE_PROVIDER = new InjectionToken('RdtSelect');
+
+class RdtSelectOutletDirective extends RdtFormInputOutletDirective {
+    componentClass = inject(RDT_SELECT_BASE_PROVIDER);
+    constructor() {
+        super();
+        this.initComponentRef();
+        effect(() => {
+            const inputs = this.inputs();
+            if (inputs?.options && this.componentRef) {
+                const instance = this.componentRef.instance;
+                const store = instance?.store;
+                if (store) {
+                    const datasource = new RdtOfflineSelectDatasource(inputs.options);
+                    store.setDatasource(datasource);
+                    if (!store.initialized()) {
+                        store.init(null);
+                    }
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtSelectOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: RdtSelectOutletDirective, isStandalone: true, selector: "[rdtSelectOutlet]", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RdtSelectOutletDirective),
+                multi: true,
+            },
+        ], exportAs: ["rdtSelectOutlet"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtSelectOutletDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdtSelectOutlet]',
+                    standalone: true,
+                    exportAs: 'rdtSelectOutlet',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RdtSelectOutletDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [] });
+
 class RdtBaseSelectCommonComponent extends RdtBaseFormInputComponent {
     manualInitInput = input(false, {
         alias: 'manualInit',
@@ -1392,6 +1445,192 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             type: Directive
         }] });
 
+class RdtTextInputSearchDatasource extends RdtSelectDatasource {
+}
+
+class RdtTextSearchInputComponent extends RdtBaseFormInputComponent {
+    hideErrors = input(false, { transform: booleanAttribute });
+    textInput = signal(undefined);
+    _input;
+    isEmpty(value) {
+        return value === null || value === undefined;
+    }
+    focus() {
+        this.textInput()?.focus();
+    }
+    canFocus() {
+        return this.textInput()?.canFocus() ?? false;
+    }
+    datasource = input(null);
+    itemResolved = output();
+    store = inject(RdtSelectStore);
+    ctrl = new FormControl(null);
+    lastResult = [];
+    initializing = true;
+    errorEffect = effect(() => {
+        this.ctrl.setErrors(this.visibleErrors());
+    });
+    touchedEffect = effect(() => {
+        if (this.ngControl?.control?.touched) {
+            this.ctrl.markAsTouched();
+        }
+    });
+    anyDatasource = computed(() => this.store.datasource() || this.datasource());
+    ngOnInit() {
+        super.ngOnInit();
+        this.ctrl.valueChanges
+            .pipe(debounceTime(250), distinctUntilChanged(), filter(() => !this.initializing), takeUntilDestroyed(this.destroyRef), switchMap((inputValue) => this.handleSearchInput$(inputValue)), filter(RdtObjectUtils.notNullGuard))
+            .subscribe((res) => {
+            this.handleSearchResults(this.ctrl.value ?? '', res);
+        });
+    }
+    ngAfterViewInit() {
+        this.textInput.set(this._input);
+        this.ngControl?.control?.addValidators(this.resultCountValidator(this.datasource()));
+        const initialValue = this.ctrl.value;
+        if (initialValue) {
+            this.resolveInitialValue(initialValue);
+        }
+        else {
+            this.initializing = false;
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.ngControl?.control?.removeValidators(this.resultCountValidator(this.datasource()));
+    }
+    resolveInitialValue(id) {
+        const datasource = untracked(this.anyDatasource);
+        if (!datasource)
+            return;
+        datasource
+            .getItemsByIds([id])
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((items) => {
+            if (!items || items.size === 0) {
+                this.emitResolvedEvent(null, null, null);
+                this.initializing = false;
+                return;
+            }
+            const [resolvedId, item] = items.entries().next().value;
+            const label = datasource.getLabelForInputSearch(item);
+            const inputElement = this.textInput()?.elementRef?.nativeElement;
+            if (inputElement) {
+                const childInput = inputElement.querySelector('input');
+                if (childInput) {
+                    childInput.value = label;
+                }
+            }
+            this.onChange(resolvedId);
+            this.emitResolvedEvent(resolvedId, label, item);
+            this.lastResult = [item];
+            this.ngControl?.control?.updateValueAndValidity({ emitEvent: false });
+            this.initializing = false;
+        });
+    }
+    handleSearchInput$(inputValue) {
+        const value = (inputValue ?? '').toString().trim();
+        if (!value) {
+            return of(null).pipe(tap(() => {
+                this.onChange(null);
+                this.emitResolvedEvent(null, null, null);
+                this.lastResult.length = 0;
+                this.ngControl?.control?.updateValueAndValidity({ emitEvent: false });
+            }));
+        }
+        const datasource = untracked(this.anyDatasource);
+        if (!datasource) {
+            return of(null).pipe(tap(() => {
+                const id = value;
+                this.onChange(id);
+                this.emitResolvedEvent(id, null, null); //todo here?
+            }));
+        }
+        return datasource
+            .getDataForTextInputSearch({ query: value, pageIndex: 0, pageSize: 20 })
+            .pipe(takeUntilDestroyed(this.destroyRef));
+    }
+    handleSearchResults(query, page) {
+        const datasource = untracked(this.anyDatasource);
+        const items = page.data ?? [];
+        this.lastResult = [...items];
+        this.ngControl?.control?.updateValueAndValidity({ emitEvent: false });
+        if (this.lastResult.length === 1) {
+            const item = items[0];
+            const id = datasource.getId(item);
+            const label = datasource.getLabelForInputSearch(item);
+            this.onChange(id);
+            this.emitResolvedEvent(id, label, item);
+        }
+        else if (this.lastResult.length === 0) {
+            this.emitResolvedEvent(null, null, null);
+            if (!this.ctrl.touched) {
+                this.ctrl.markAsTouched();
+            }
+        }
+        else {
+            this.emitResolvedEvent(null, null, null);
+            if (!this.ctrl.touched) {
+                this.ctrl.markAsTouched();
+            }
+        }
+    }
+    emitResolvedEvent(id, label, item) {
+        this.itemResolved.emit({ id, label, item });
+    }
+    writeValue(value) {
+        super.writeValue(value);
+        if (value === null || value === undefined) {
+            this.ctrl.setValue(null, { emitEvent: false });
+            return;
+        }
+        this.ctrl.setValue(String(value));
+    }
+    setDisabledState(isDisabled) {
+        super.setDisabledState(isDisabled);
+        if (untracked(this.disabled)) {
+            if (this.ctrl.enabled) {
+                this.ctrl.disable({ emitEvent: false });
+            }
+        }
+        else if (this.ctrl.disabled) {
+            this.ctrl.enable({ emitEvent: false });
+        }
+    }
+    resultCountValidator = (datasource) => {
+        return (ctrl) => {
+            const query = this.ctrl.value?.toString().trim();
+            if (!query) {
+                return null;
+            }
+            if (this.lastResult.length === 0) {
+                return { notFound: true };
+            }
+            if (this.lastResult.length === 1) {
+                const usedLabel = datasource?.getLabelForInputSearch(this.lastResult[0]);
+                const usedId = datasource?.getId(this.lastResult[0]);
+                if (usedLabel?.toString() === query?.toString() ||
+                    usedId?.toString() === query?.toString()) {
+                    return null;
+                }
+                return { incomplete: true };
+            }
+            if (this.lastResult.length > 1) {
+                return { multipleFound: true };
+            }
+            return null;
+        };
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtTextSearchInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: RdtTextSearchInputComponent, isStandalone: true, inputs: { hideErrors: { classPropertyName: "hideErrors", publicName: "hideErrors", isSignal: true, isRequired: false, transformFunction: null }, datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemResolved: "itemResolved" }, viewQueries: [{ propertyName: "_input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtTextSearchInputComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { _input: [{
+                type: ViewChild,
+                args: ['input', { static: false }]
+            }] } });
+
 const RDT_FORM_ERROR_CODES_PROVIDER = new InjectionToken('RdtFormErrors');
 
 function getFirstError(errors) {
@@ -1409,6 +1648,8 @@ const defaultRdtFormErrorCodes = {
     maxlength: (value) => ['RDT_ERROR_MAX_LENGTH', value.requiredLength],
     notFound: () => 'RDT_ERROR_NOT_FOUND',
     multipleFound: () => 'RDT_ERROR_MULTIPLE_FOUND',
+    incomplete: () => 'RDT_ERROR_CODE_INCOMPLETE',
+    minValue: (value) => ['RDT_ERROR_MIN_VALUE', value.min],
 };
 class RdtFormErrorPipe {
     translateService = inject(RdtTranslateService);
@@ -1704,5 +1945,5 @@ class RdtCommonValidators {
  * Generated bundle index. Do not edit.
  */
 
-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_EMPTY_TIME_DATE, RDT_FORM_CONTROL_DATETIME_FORMAT, RDT_FORM_CONTROL_DATE_FORMAT, RDT_FORM_CONTROL_TIME_FORMAT, 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, defaultRdtFormErrorCodes, fileLabelTranslate, getFirstError, 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_EMPTY_TIME_DATE, RDT_FORM_CONTROL_DATETIME_FORMAT, RDT_FORM_CONTROL_DATE_FORMAT, RDT_FORM_CONTROL_TIME_FORMAT, RDT_FORM_ERROR_CODES_PROVIDER, RDT_NUMERIC_INPUT_BASE_PROVIDER, RDT_SELECT_BASE_PROVIDER, RdtBaseFormInputComponent, RdtBaseSelectCommonComponent, RdtCheckboxComponent, RdtCheckboxOutletDirective, RdtCommonValidators, RdtDateComponent, RdtDateValidators, RdtFileInputComponent, RdtFileReader, RdtFileReaderArrayBuffer, RdtFileReaderBase64, RdtFormErrorPipe, RdtFormInputOutletDirective, RdtMultiSelectComponent, RdtNumericInputComponent, RdtNumericInputOutletDirective, RdtOfflineSelectDatasource, RdtSelectDatasource, RdtSelectOfflineDatasourceProviderDirective, RdtSelectOptionDirective, RdtSelectOutletDirective, RdtSelectStore, RdtSingleSelectComponent, RdtTextAreaComponent, RdtTextInputComponent, RdtTextInputSearchDatasource, RdtTextSearchInputComponent, VnshFileReaderText, defaultRdtFormErrorCodes, fileLabelTranslate, getFirstError, getRdtSelectPage, rdtSelectInitialState };
 //# sourceMappingURL=ngrdt-forms.mjs.map