@exmg/exm-form-drawer 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-form-drawer",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "72cea6089d6ed7f8ffe190fffeab57f2c36dbc02"
+  "gitHead": "b6f66a9358930f3883084da15e51fe4528897eac"
 }

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

@@ -81,5 +81,6 @@ export declare class ExmFormDrawerBase extends ExmgElement {
      */
     protected renderFormContent(): import("lit-html").TemplateResult<1>;
     protected renderError(): import("lit-html").TemplateResult<1>;
+    protected handleDrawerOpenedChanged(e: CustomEvent): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -113,6 +113,7 @@ export class ExmFormDrawerBase extends ExmgElement {
     }
     async handleSubmit() {
         const form = this.getForm();
+        this.errorMessage = null;
         // Return when there are invalid fields
         if (!this.formValid) {
             return;
@@ -131,7 +132,7 @@ export class ExmFormDrawerBase extends ExmgElement {
             }
             finally {
                 this.submitting = false;
-                if (!this.keepOpenedOnSubmitSuccess) {
+                if (this.errorMessage === null && !this.keepOpenedOnSubmitSuccess) {
                     this.opened = false;
                 }
             }
@@ -156,11 +157,18 @@ export class ExmFormDrawerBase extends ExmgElement {
     renderError() {
         return html `<div class="error"><div>${this.errorMessage}</div></div>`;
     }
+    handleDrawerOpenedChanged(e) {
+        this.opened = e.detail.value;
+        if (this.opened) {
+            this._checkFormValidity();
+        }
+    }
     render() {
         return html `
       <exm-drawer
         ?opened="${this.opened}"
         ?no-cancel-on-outside-click="${this.noCancelOnOutsideClick}"
+        @exm-drawer-opened-changed=${this.handleDrawerOpenedChanged}
         scroll-action=${ifDefined(this.scrollAction)}
         style="max-width: ${this.style.maxWidth || '547px'}"
       >

package/src/styles/exm-form-drawer-styles-css.js

@@ -1,4 +1,4 @@
 import { css } from 'lit';
-export const style = css `:host{display:flex}:host .header{display:flex;flex-direction:row;align-items:center;margin:0;padding:20px;border-bottom:1px solid var(--exm-form-drawer-header-separator-color, var(--mdc-theme-on-surface, rgba(2, 24, 43, 0.1)))}:host .header .title{font-size:1.4rem}:host .form-elements{padding:0 0px}.header-buttons{display:flex;flex-direction:row;flex:1;justify-content:flex-end}.header-buttons>*{margin-left:20px}:host(:not([disable-sticky-header])) .header{position:sticky;top:0;background-color:var(--exm-drawer-bg-color, var(--md-sys-color-surface-variant, white));z-index:2}form{margin:0 !important;padding:.5rem 1rem;box-sizing:border-box}`;
+export const style = css `:host{display:flex}:host .header{display:flex;flex-direction:row;align-items:center;margin:0;padding:20px;border-bottom:1px solid var(--exm-form-drawer-header-separator-color, var(--mdc-theme-on-surface, rgba(2, 24, 43, 0.1)))}:host .header .title{font-size:1.4rem}:host .form-elements{padding:0 0px}.header-buttons{display:flex;flex-direction:row;flex:1;justify-content:flex-end}.header-buttons>*{margin-left:20px}:host(:not([disable-sticky-header])) .header{position:sticky;top:0;background-color:var(--exm-drawer-bg-color, var(--md-sys-color-surface-variant, white));z-index:2}form{margin:0 !important;padding:.5rem 1rem;box-sizing:border-box}.error{background-color:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);padding:.5rem}.error>*{margin:1rem}`;
 export default style;
 //# sourceMappingURL=exm-form-drawer-styles-css.js.map

package/src/styles/exm-form-drawer-styles.scss

@@ -44,3 +44,12 @@ form {
   padding: 0.5rem 1rem;
   box-sizing: border-box;
 }
+
+.error {
+  background-color: var(--md-sys-color-error-container);
+  color: var(--md-sys-color-on-error-container);
+  padding: 0.5rem;
+  > * {
+    margin: 1rem;
+  }
+}