@rxdi/forms 0.7.148 → 0.7.151

package/dist/form.group.d.ts

@@ -21,17 +21,17 @@ export declare class FormGroup<T = FormInputOptions, E = {
     setOptions(options: FormOptions): this;
     getOptions(): FormOptions;
     get valueChanges(): import("rxjs").Observable<T>;
-    updateValueAndValidity(): ErrorObject[];
+    updateValueAndValidity(): Promise<ErrorObject[]>;
     private updateValueAndValidityOnEvent;
     applyValidationContext({ errors, element }: ErrorObject): boolean;
     querySelectForm(shadowRoot: HTMLElement | ShadowRoot): HTMLFormElement;
     private querySelectAll;
     querySelectorAllInputs(): AbstractInput[];
     mapEventToInputs(inputs?: HTMLElement[]): AbstractInput[];
-    setElementValidity(el: AbstractInput, validity?: boolean): void;
+    setElementValidity(el: AbstractInput, validity?: boolean): Promise<void>;
     setElementDirty(input: AbstractInput): void;
     isInputPresentOnStage(input: AbstractInput): number;
-    validate(element: AbstractInput): ErrorObject;
+    validate(element: AbstractInput): Promise<ErrorObject>;
     private mapInputErrors;
     get(name: keyof T): AbstractInput;
     getError(inputName: keyof T, errorKey: keyof E): never;

package/dist/form.group.js

@@ -1,4 +1,13 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormGroup = void 0;
 const form_tokens_1 = require("./form.tokens");
@@ -58,63 +67,65 @@ class FormGroup {
         return this._valueChanges.asObservable();
     }
     updateValueAndValidity() {
-        this.resetErrors();
-        const inputs = this.querySelectorAllInputs()
-            .map(i => {
-            i.setCustomValidity('');
-            this.setElementValidity(i);
-            this.setElementDirty(i);
-            return i;
-        })
-            .map(input => this.validate(input))
-            .filter(e => e.errors.length);
-        this.getParentElement().requestUpdate();
-        return inputs;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.resetErrors();
+            const inputs = yield Promise.all(this.querySelectorAllInputs()
+                .map((i) => __awaiter(this, void 0, void 0, function* () {
+                i.setCustomValidity('');
+                this.setElementValidity(i);
+                this.setElementDirty(i);
+                return yield this.validate(i);
+            })));
+            this.getParentElement().requestUpdate();
+            return inputs.filter(e => e.errors.length);
+        });
     }
     updateValueAndValidityOnEvent(method) {
         const self = this;
         return function (event) {
-            self.setElementDirty(this);
-            const selector = `input[name="${this.name}"]`;
-            const hasMultipleBindings = [
-                ...self
-                    .getFormElement()
-                    .querySelectorAll(selector).values()
-            ].length;
-            let value = this.value;
-            if (hasMultipleBindings === 1 &&
-                (this.type === 'checkbox' || this.type === 'radio')) {
-                value = String(this.checked);
-            }
-            if (this.type === 'number') {
-                value = Number(value);
-            }
-            const inputsWithBindings = [
-                ...(self.getFormElement().querySelectorAll(`input[name="${this.name}"]:checked`)).values()
-            ];
-            if (hasMultipleBindings > 1) {
-                if (!self.options.multi && this.type === 'checkbox') {
-                    value = inputsWithBindings.map(e => e.value);
+            return __awaiter(this, void 0, void 0, function* () {
+                self.setElementDirty(this);
+                const selector = `input[name="${this.name}"]`;
+                const hasMultipleBindings = [
+                    ...self
+                        .getFormElement()
+                        .querySelectorAll(selector).values()
+                ].length;
+                let value = this.value;
+                if (hasMultipleBindings === 1 &&
+                    (this.type === 'checkbox' || this.type === 'radio')) {
+                    value = String(this.checked);
                 }
-                if (self.options.multi) {
-                    inputsWithBindings.forEach(el => (el.checked = false));
-                    this.checked = true;
+                if (this.type === 'number') {
+                    value = Number(value);
                 }
-            }
-            self.resetErrors();
-            const isValid = self.applyValidationContext(self.validate(this));
-            if (self.options.strict) {
-                if (isValid) {
-                    self.setElementValidity(this, isValid);
-                    self.setValue(this.name, value);
+                const inputsWithBindings = [
+                    ...(self.getFormElement().querySelectorAll(`input[name="${this.name}"]:checked`)).values()
+                ];
+                if (hasMultipleBindings > 1) {
+                    if (!self.options.multi && this.type === 'checkbox') {
+                        value = inputsWithBindings.map(e => e.value);
+                    }
+                    if (self.options.multi) {
+                        inputsWithBindings.forEach(el => (el.checked = false));
+                        this.checked = true;
+                    }
+                }
+                self.resetErrors();
+                const isValid = self.applyValidationContext(yield self.validate(this));
+                if (self.options.strict) {
+                    if (isValid) {
+                        yield self.setElementValidity(this, isValid);
+                        self.setValue(this.name, value);
+                    }
+                    self.parentElement.requestUpdate();
+                    return method.call(self.parentElement, event);
                 }
+                yield self.setElementValidity(this, isValid);
+                self.setValue(this.name, value);
                 self.parentElement.requestUpdate();
                 return method.call(self.parentElement, event);
-            }
-            self.setElementValidity(this, isValid);
-            self.setValue(this.name, value);
-            self.parentElement.requestUpdate();
-            return method.call(self.parentElement, event);
+            });
         };
     }
     applyValidationContext({ errors, element }) {
@@ -149,6 +160,7 @@ class FormGroup {
         return [
             ...this.querySelectAll('input'),
             ...this.querySelectAll('select'),
+            ...this.querySelectAll('textarea'),
         ]
             .filter(el => this.isInputPresentOnStage(el))
             .filter(el => !!el.name);
@@ -166,19 +178,21 @@ class FormGroup {
                 const attr = customAttributes.find(a => a.name.startsWith('#'));
                 this.parentElement[attr.name.replace('#', '')] = el;
             }
-            el.addEventListener('blur', () => {
+            el.addEventListener('blur', () => __awaiter(this, void 0, void 0, function* () {
                 this.setElementDirty(el);
-                this.parentElement.requestUpdate();
-                this.setElementValidity(el);
-            });
+                yield this.parentElement.requestUpdate();
+                yield this.setElementValidity(el);
+            }));
             el[strategy] = this.updateValueAndValidityOnEvent(el[strategy]);
             return el;
         });
     }
     setElementValidity(el, validity) {
-        const isValid = validity || this.applyValidationContext(this.validate(el));
-        el['valid'] = isValid;
-        el['invalid'] = !isValid;
+        return __awaiter(this, void 0, void 0, function* () {
+            const isValid = validity || this.applyValidationContext(yield this.validate(el));
+            el['valid'] = isValid;
+            el['invalid'] = !isValid;
+        });
     }
     setElementDirty(input) {
         input['touched'] = true;
@@ -195,44 +209,47 @@ class FormGroup {
         return isInputPresent.length;
     }
     validate(element) {
-        let errors = [];
-        element.setCustomValidity('');
-        if (!element.checkValidity()) {
-            return {
-                errors: errors.concat(Object.keys(form_tokens_1.InputValidityState)
-                    .map(key => element.validity[key]
-                    ? { key, message: element.validationMessage }
-                    : null)
-                    .filter(i => !!i)),
-                element
-            };
-        }
-        errors = this.mapInputErrors(element);
-        if (!errors.length) {
-            return { errors: [], element };
-        }
-        this.setFormValidity(false);
-        element.setCustomValidity(errors[0].message);
-        return { element, errors };
-    }
-    mapInputErrors(element) {
-        return (this.validators.get(element.name) || [])
-            .map(v => {
-            this.errors[element.name] = this.errors[element.name] || {};
-            const error = v.bind(this.getParentElement())(element);
-            if (error) {
-                element.focus();
+        return __awaiter(this, void 0, void 0, function* () {
+            let errors = [];
+            element.setCustomValidity('');
+            if (!element.checkValidity()) {
+                return {
+                    errors: errors.concat(Object.keys(form_tokens_1.InputValidityState)
+                        .map(key => element.validity[key]
+                        ? { key, message: element.validationMessage }
+                        : null)
+                        .filter(i => !!i)),
+                    element
+                };
             }
-            if (error && error.key) {
-                this.errors[element.name][error.key] = error.message;
-                this.errorMap.set(v, error.key);
-                return { key: error.key, message: error.message };
+            errors = yield this.mapInputErrors(element);
+            if (!errors.length) {
+                return { errors: [], element };
             }
-            else if (this.errorMap.has(v)) {
-                delete this.errors[element.name][this.errorMap.get(v)];
-            }
-        })
-            .filter(i => !!i);
+            this.setFormValidity(false);
+            element.setCustomValidity(errors[0].message);
+            return { element, errors };
+        });
+    }
+    mapInputErrors(element) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const res = yield Promise.all((this.validators.get(element.name) || []).map((v) => __awaiter(this, void 0, void 0, function* () {
+                this.errors[element.name] = this.errors[element.name] || {};
+                const error = yield v.bind(this.getParentElement())(element);
+                // if (error) {
+                //   element.focus();
+                // }
+                if (error && error.key) {
+                    this.errors[element.name][error.key] = error.message;
+                    this.errorMap.set(v, error.key);
+                    return { key: error.key, message: error.message };
+                }
+                else if (this.errorMap.has(v)) {
+                    delete this.errors[element.name][this.errorMap.get(v)];
+                }
+            })));
+            return res.filter(i => !!i);
+        });
     }
     get(name) {
         return this.inputs.get(name);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdi/forms",
-  "version": "0.7.148",
+  "version": "0.7.151",
   "main": "./dist/index.js",
   "author": "Kristiyan Tachev",
   "license": "MIT",
@@ -12,7 +12,7 @@
     "build": "tsc || true"
   },
   "devDependencies": {
-    "@rxdi/lit-html": "^0.7.147",
+    "@rxdi/lit-html": "^0.7.150",
     "@types/node": "^12.0.10",
     "rxjs": "^6.5.3",
     "typescript": "^4.3.5"