@exmg/exm-form-drawer 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-form-drawer",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -31,7 +31,7 @@
   "license": "MIT",
   "dependencies": {
     "@exmg/exm-button": "^1.0.3",
-    "@exmg/exm-form": "^1.0.5",
+    "@exmg/exm-form": "^1.0.6",
     "@material/typography": "^14.0.0",
     "@polymer/neon-animation": "^3.0.1",
     "@polymer/paper-dialog": "^3.0.1",
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ef887aabf2d9e8e0572e850f3db7c80a697f0edf"
+  "gitHead": "3a7e80814357f7b89d46a44cc821834a9131f25b"
 }

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

@@ -2,7 +2,8 @@ import './exm-drawer.js';
 import '@exmg/exm-button/exm-filled-button.js';
 import '@material/web/button/text-button.js';
 import { ExmgElement } from '@exmg/lit-base';
-export declare class ExmFormDrawerBase extends ExmgElement {
+declare const ExmFormDrawerBase_base: import("@exmg/exm-th").Constructor<import("@exmg/exm-th").FormValidateMixinInterface> & typeof ExmgElement;
+export declare class ExmFormDrawerBase extends ExmFormDrawerBase_base {
     /**
      * Opened state of the form-drawer
      * @type {Boolean}
@@ -42,18 +43,12 @@ export declare class ExmFormDrawerBase extends ExmgElement {
      * Internall used to show button spinner.
      */
     submitting: boolean;
-    private formValid;
-    boundHandleBlur?: (e: Event) => void;
     /**
      * Scroll action of the drawer
      * @type {'lock' | 'refit' | 'cancel' | undefined}
      */
     scrollAction?: 'lock' | 'refit' | 'cancel' | undefined;
     errorMessage?: string | null;
-    protected getForm(): HTMLFormElement | null;
-    protected _handleBlur(e: Event): void;
-    protected firstUpdated(): void;
-    disconnectedCallback(): void;
     /**
      * Opens and shows the drawer.
      */
@@ -66,7 +61,6 @@ export declare class ExmFormDrawerBase extends ExmgElement {
      * Opens and shows the dialog if it is closed; otherwise closes it.
      */
     toggleShow(): void;
-    protected _checkFormValidity(): Promise<void>;
     reset(): void;
     /**
      * Action method that needs to be implemented
@@ -84,3 +78,4 @@ export declare class ExmFormDrawerBase extends ExmgElement {
     protected handleDrawerOpenedChanged(e: CustomEvent): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }
+export {};

package/src/exm-form-drawer-base.js

@@ -1,13 +1,14 @@
 import { __decorate } from "tslib";
 import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import './exm-drawer.js';
 import '@exmg/exm-button/exm-filled-button.js';
 import '@material/web/button/text-button.js';
 import { ExmgElement } from '@exmg/lit-base';
 import { serializeForm } from '@exmg/exm-form';
-export class ExmFormDrawerBase extends ExmgElement {
+import { ExmFormValidateMixin } from '@exmg/exm-form';
+export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
     constructor() {
         super(...arguments);
         /**
@@ -49,25 +50,6 @@ export class ExmFormDrawerBase extends ExmgElement {
          * Internall used to show button spinner.
          */
         this.submitting = false;
-        this.formValid = false;
-    }
-    getForm() {
-        return this.shadowRoot.querySelector('form');
-    }
-    _handleBlur(e) {
-        // @ts-ignore
-        typeof e.target.reportValidity === 'function' && e.target.reportValidity();
-        this._checkFormValidity();
-    }
-    firstUpdated() {
-        const form = this.getForm();
-        this.boundHandleBlur = this._handleBlur.bind(this);
-        form.addEventListener('blur', this.boundHandleBlur, true);
-    }
-    disconnectedCallback() {
-        const form = this.getForm();
-        this.boundHandleBlur && form.addEventListener('blur', this.boundHandleBlur, true);
-        super.disconnectedCallback();
     }
     /**
      * Opens and shows the drawer.
@@ -92,23 +74,6 @@ export class ExmFormDrawerBase extends ExmgElement {
             this.show();
         }
     }
-    async _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;
-    }
     reset() {
         this.errorMessage = null;
         const form = this.getForm();
@@ -118,7 +83,7 @@ export class ExmFormDrawerBase extends ExmgElement {
         const form = this.getForm();
         this.errorMessage = null;
         // Check form validity
-        this._checkFormValidity();
+        this.checkFormValidity();
         // Return when there are invalid fields
         if (!this.formValid) {
             return;
@@ -165,7 +130,7 @@ export class ExmFormDrawerBase extends ExmgElement {
     handleDrawerOpenedChanged(e) {
         this.opened = e.detail.value;
         if (this.opened) {
-            this._checkFormValidity();
+            this.checkFormValidity();
         }
     }
     render() {
@@ -224,9 +189,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ExmFormDrawerBase.prototype, "submitting", void 0);
-__decorate([
-    state()
-], ExmFormDrawerBase.prototype, "formValid", void 0);
 __decorate([
     property({ type: String, attribute: 'scroll-action' })
 ], ExmFormDrawerBase.prototype, "scrollAction", void 0);