@rxdi/forms 0.7.209 → 0.7.211

package/dist/form.group.js

@@ -27,12 +27,12 @@ class FormGroup {
         this.setFormElement(this.querySelectForm(this.parentElement.shadowRoot || this.parentElement)).setInputs(this.mapEventToInputs(this.querySelectorAllInputs()));
     }
     prepareValues() {
-        Object.keys(this.value).forEach(v => {
+        Object.keys(this.value).forEach((v) => {
             const value = this.value[v];
             this.errors[v] = this.errors[v] || {};
             if (value.constructor === Array) {
                 if (value[1] && value[1].constructor === Array) {
-                    value[1].forEach(val => {
+                    value[1].forEach((val) => {
                         const oldValidators = this.validators.get(v) || [];
                         this.validators.set(v, [...oldValidators, val]);
                     });
@@ -69,15 +69,14 @@ class FormGroup {
     updateValueAndValidity() {
         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* () {
+            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);
+            return inputs.filter((e) => e.errors.length);
         });
     }
     updateValueAndValidityOnEvent(method) {
@@ -87,9 +86,7 @@ class FormGroup {
                 self.setElementDirty(this);
                 const selector = `input[name="${this.name}"]`;
                 const hasMultipleBindings = [
-                    ...self
-                        .getFormElement()
-                        .querySelectorAll(selector).values()
+                    ...self.getFormElement().querySelectorAll(selector).values(),
                 ].length;
                 let value = this.value;
                 if (hasMultipleBindings === 1) {
@@ -104,14 +101,14 @@ class FormGroup {
                     value = Number(value);
                 }
                 const inputsWithBindings = [
-                    ...(self.getFormElement().querySelectorAll(`input[name="${this.name}"]:checked`)).values()
+                    ...(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);
+                        value = inputsWithBindings.map((e) => e.value);
                     }
                     if (self.options.multi) {
-                        inputsWithBindings.forEach(el => (el.checked = false));
+                        inputsWithBindings.forEach((el) => (el.checked = false));
                         this.checked = true;
                     }
                 }
@@ -158,16 +155,17 @@ class FormGroup {
         return form;
     }
     querySelectAll(name) {
-        return [...this.form.querySelectorAll(name).values()];
+        return [
+            ...this.form.querySelectorAll(name).values(),
+        ];
     }
     querySelectorAllInputs() {
-        return [
-            ...this.querySelectAll('input'),
-            ...this.querySelectAll('select'),
-            ...this.querySelectAll('textarea'),
-        ]
-            .filter(el => this.isInputPresentOnStage(el))
-            .filter(el => !!el.name);
+        var _a;
+        return [...((_a = this.options.customElements) !== null && _a !== void 0 ? _a : []), 'input', 'select', 'textarea']
+            .map((item) => this.querySelectAll(item))
+            .flat()
+            .filter((el) => this.isInputPresentOnStage(el))
+            .filter((el) => !!el.name);
     }
     mapEventToInputs(inputs = []) {
         return inputs.map((el) => {
@@ -176,10 +174,10 @@ class FormGroup {
                 el[strategy] = function () { };
             }
             const customAttributes = Object.keys(el.attributes)
-                .map(k => el.attributes[k].name.startsWith('#') ? el.attributes[k] : null)
-                .filter(i => !!i);
+                .map((k) => (el.attributes[k].name.startsWith('#') ? el.attributes[k] : null))
+                .filter((i) => !!i);
             if (customAttributes.length) {
-                const attr = customAttributes.find(a => a.name.startsWith('#'));
+                const attr = customAttributes.find((a) => a.name.startsWith('#'));
                 this.parentElement[attr.name.replace('#', '')] = el;
             }
             el.addEventListener('blur', () => __awaiter(this, void 0, void 0, function* () {
@@ -206,21 +204,20 @@ class FormGroup {
         if (input.outerHTML === '<input type="submit" style="display: none;">') {
             return;
         }
-        const isInputPresent = Object.keys(this.value).filter(v => v === input.name);
+        const isInputPresent = Object.keys(this.value).filter((v) => v === input.name);
         return isInputPresent.length;
     }
     validate(element) {
         return __awaiter(this, void 0, void 0, function* () {
             let errors = [];
             element.setCustomValidity('');
+            this.setFormValidity(true);
             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
+                        .map((key) => element.validity[key] ? { key, message: element.validationMessage } : null)
+                        .filter((i) => !!i)),
+                    element,
                 };
             }
             errors = yield this.mapInputErrors(element);
@@ -249,7 +246,7 @@ class FormGroup {
                     delete this.errors[element.name][this.errorMap.get(v)];
                 }
             })));
-            return res.filter(i => !!i);
+            return res.filter((i) => !!i);
         });
     }
     get(name) {
@@ -270,6 +267,7 @@ class FormGroup {
     setFormValidity(validity = true) {
         this.valid = validity;
         this.invalid = !validity;
+        this.getParentElement().requestUpdate();
     }
     resetErrors() {
         this.errors = Object.keys(this.errors).reduce((object, key) => {
@@ -309,7 +307,7 @@ class FormGroup {
         return this;
     }
     setInputs(inputs) {
-        this.inputs = new Map(inputs.map(e => {
+        this.inputs = new Map(inputs.map((e) => {
             e.value = this.getValue(e.name);
             return [e.name, e];
         }));

package/dist/form.tokens.d.ts

@@ -9,6 +9,11 @@ export interface FormOptions {
     /** When set to true `.valueChanges` will emit values only
      * if current input validation passes, default behavior is to emit every change fro */
     strict?: boolean;
+    /**
+     * When set form will expand capabilities by selecting another custom element made as a form element
+     * Example can be found here https://gist.github.com/Stradivario/57acf0fa19900867a7f55b0f01251d6e
+     * */
+    customElements?: string[];
 }
 export interface FormInputOptions {
     [key: string]: [string, Function[]];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdi/forms",
-  "version": "0.7.209",
+  "version": "0.7.211",
   "main": "./dist/index.js",
   "author": "Kristiyan Tachev",
   "license": "MIT",
@@ -12,7 +12,7 @@
     "build": "tsc"
   },
   "devDependencies": {
-    "@rxdi/lit-html": "^0.7.208",
+    "@rxdi/lit-html": "^0.7.210",
     "@types/node": "^25.0.3",
     "rxjs": "^7.8.2",
     "typescript": "^5.9.3"