@exmg/exm-form 1.0.4 → 1.0.6

package/index.d.ts

@@ -1,4 +1,5 @@
 export { ExmForm } from './src/exm-form.js';
+export { ExmFormValidateMixin } from './src/exm-form-validate-mixin.js';
 export { ExmFormBase, serializeForm } from './src/exm-form-base.js';
 export { style as formStyles } from './src/styles/exm-form-css.js';
 export { style as formBaseStyles } from './src/styles/exm-form-base-css.js';

package/index.js

@@ -1,4 +1,5 @@
 export { ExmForm } from './src/exm-form.js';
+export { ExmFormValidateMixin } from './src/exm-form-validate-mixin.js';
 export { ExmFormBase, serializeForm } from './src/exm-form-base.js';
 export { style as formStyles } from './src/styles/exm-form-css.js';
 export { style as formBaseStyles } from './src/styles/exm-form-base-css.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-form",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8504f0aac4737b66d3eb579953c45b56a110cb91"
+  "gitHead": "3a7e80814357f7b89d46a44cc821834a9131f25b"
 }

package/src/exm-form-base.d.ts

@@ -4,7 +4,8 @@ import '@material/web/divider/divider.js';
 import { ExmgElement } from '@exmg/lit-base';
 export declare const CLOSE_ACTION = "close";
 export declare const serializeForm: (form: any) => {};
-export declare class ExmFormBase extends ExmgElement {
+declare const ExmFormBase_base: import("./exm-form-validate-mixin.js").Constructor<import("./exm-form-validate-mixin.js").FormValidateMixinInterface> & typeof ExmgElement;
+export declare class ExmFormBase extends ExmFormBase_base {
     /**
      * Submit button copy
      */
@@ -17,19 +18,12 @@ export declare class ExmFormBase extends ExmgElement {
      * Internall used to show button spinner.
      */
     submitting: boolean;
-    formValid: boolean;
     boundHandleBlur?: (e: Event) => void;
     boundHandleKeyup?: (e: Event) => void;
     hasAsideContent: boolean;
     errorMessage?: string | null;
-    protected getForm(): HTMLFormElement | null;
     reset(): void;
     submit(): void;
-    protected _handleKeyup(): void;
-    protected _handleBlur(e: Event): void;
-    protected firstUpdated(): Promise<void>;
-    disconnectedCallback(): void;
-    protected _checkFormValidity(): void;
     /**
      * Action method that needs to be implemented
      * @param {CustomEvent} e
@@ -46,3 +40,4 @@ export declare class ExmFormBase extends ExmgElement {
     protected renderContainer(): import("lit-html").TemplateResult<1>;
     protected render(): import("lit-html").TemplateResult<1>;
 }
+export {};

package/src/exm-form-base.js

@@ -6,6 +6,7 @@ import '@material/web/button/text-button.js';
 import '@material/web/divider/divider.js';
 import { ExmgElement } from '@exmg/lit-base';
 import { classMap } from 'lit/directives/class-map.js';
+import { ExmFormValidateMixin } from './exm-form-validate-mixin.js';
 export const CLOSE_ACTION = 'close';
 export const serializeForm = (form) => {
     const obj = {};
@@ -72,7 +73,7 @@ export const serializeForm = (form) => {
     }
     return obj;
 };
-export class ExmFormBase extends ExmgElement {
+export class ExmFormBase extends ExmFormValidateMixin(ExmgElement) {
     constructor() {
         super(...arguments);
         /**
@@ -87,12 +88,8 @@ export class ExmFormBase extends ExmgElement {
          * Internall used to show button spinner.
          */
         this.submitting = false;
-        this.formValid = false;
         this.hasAsideContent = false;
     }
-    getForm() {
-        return this.shadowRoot.querySelector('form');
-    }
     reset() {
         const form = this.getForm();
         form === null || form === void 0 ? void 0 : form.reset();
@@ -100,50 +97,11 @@ export class ExmFormBase extends ExmgElement {
     submit() {
         this.handleSubmit();
     }
-    _handleKeyup() {
-        this._checkFormValidity();
-    }
-    _handleBlur(e) {
-        // @ts-ignore
-        typeof e.target.reportValidity === 'function' && e.target.reportValidity();
-        this._checkFormValidity();
-    }
-    async firstUpdated() {
-        const form = this.getForm();
-        this.boundHandleBlur = this._handleBlur.bind(this);
-        form.addEventListener('blur', this.boundHandleBlur, true);
-        this.boundHandleKeyup = this._handleKeyup.bind(this);
-        form.addEventListener('keyup', this.boundHandleKeyup, true);
-        await this.updateComplete;
-        this._checkFormValidity();
-    }
-    disconnectedCallback() {
-        const form = this.getForm();
-        this.boundHandleBlur && form.removeEventListener('blur', this.boundHandleBlur, true);
-        this.boundHandleKeyup && form.removeEventListener('keyup', this.boundHandleKeyup, true);
-        super.disconnectedCallback();
-    }
-    _checkFormValidity() {
-        const form = this.getForm();
-        const formElements = form === null || form === void 0 ? void 0 : form.elements;
-        let allValid = true;
-        for (const el of formElements || []) {
-            // @ts-ignore
-            if (typeof el.reportValidity !== 'function')
-                continue;
-            // @ts-ignore
-            const isValid = el.checkValidity();
-            if (!isValid) {
-                allValid = false;
-            }
-        }
-        this.formValid = allValid;
-    }
     async handleSubmit() {
         this.errorMessage = null;
         const form = this.getForm();
         // Check form validity
-        this._checkFormValidity();
+        this.checkFormValidity();
         // Return when there are invalid fields
         if (!this.formValid) {
             return;
@@ -227,9 +185,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ExmFormBase.prototype, "submitting", void 0);
-__decorate([
-    property({ type: Boolean })
-], ExmFormBase.prototype, "formValid", void 0);
 __decorate([
     property({ type: Boolean })
 ], ExmFormBase.prototype, "hasAsideContent", void 0);

package/src/exm-form-validate-mixin.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+export type Constructor<T> = new (...args: any[]) => T;
+export declare abstract class FormValidateMixinClass extends LitElement {
+}
+export declare class FormValidateMixinInterface {
+    formValid: boolean;
+    getForm(): HTMLFormElement | null;
+    checkFormValidity(): void;
+}
+export declare const ExmFormValidateMixin: <T extends Constructor<LitElement & FormValidateMixinClass>>(superClass: T) => Constructor<FormValidateMixinInterface> & T;

package/src/exm-form-validate-mixin.js

@@ -0,0 +1,60 @@
+import { __decorate } from "tslib";
+import { LitElement } from 'lit';
+import { async, debounce } from '@exmg/lit-base/index.js';
+import { state } from 'lit/decorators.js';
+export class FormValidateMixinClass extends LitElement {
+}
+export const ExmFormValidateMixin = (superClass) => {
+    class FormvalidateMixinElement extends superClass {
+        constructor() {
+            super(...arguments);
+            this.formValid = false;
+        }
+        getForm() {
+            return this.shadowRoot.querySelector('form');
+        }
+        checkFormValidity() {
+            const form = this.getForm();
+            const formElements = form === null || form === void 0 ? void 0 : form.elements;
+            let allValid = true;
+            for (const el of formElements || []) {
+                let isValid = true;
+                // @ts-ignore
+                if (typeof el.reportValidity === 'function') {
+                    // @ts-ignore
+                    isValid = el.checkValidity();
+                }
+                if (!isValid) {
+                    allValid = false;
+                }
+            }
+            this.formValid = allValid;
+        }
+        _handleInputChange(e) {
+            const target = e.target;
+            // Only check validation every 200ms max
+            this._debouncer = debounce.Debouncer.debounce(this._debouncer, async.timeOut.after(200), () => {
+                // @ts-ignore
+                typeof target.reportValidity === 'function' && target.reportValidity();
+                this.checkFormValidity();
+            });
+        }
+        firstUpdated() {
+            const form = this.getForm();
+            this.boundHandleChange = this._handleInputChange.bind(this);
+            form.addEventListener('keyup', this.boundHandleChange, true);
+            form.addEventListener('input', this.boundHandleChange, true);
+        }
+        disconnectedCallback() {
+            const form = this.getForm();
+            this.boundHandleChange && form.addEventListener('keyup', this.boundHandleChange, true);
+            this.boundHandleChange && form.addEventListener('input', this.boundHandleChange, true);
+            super.disconnectedCallback();
+        }
+    }
+    __decorate([
+        state()
+    ], FormvalidateMixinElement.prototype, "formValid", void 0);
+    return FormvalidateMixinElement;
+};
+//# sourceMappingURL=exm-form-validate-mixin.js.map