@exmg/exm-form-drawer 1.1.12 → 1.1.13

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

@@ -1,9 +1,9 @@
 import '@exmg/exm-drawer/exm-drawer.js';
 import '@exmg/exm-button/exm-filled-button.js';
 import '@material/web/button/text-button.js';
+import { ExmFormBase } from '@exmg/exm-form';
 import { ExmgElement } from '@exmg/lit-base';
-declare const ExmFormDrawerBase_base: import("@exmg/exm-form").Constructor<import("@exmg/exm-form/dist/exm-form-validate-mixin.js").FormValidateMixinInterface> & typeof ExmgElement;
-export declare class ExmFormDrawerBase extends ExmFormDrawerBase_base {
+export declare class ExmFormDrawerBase extends ExmgElement {
     /**
      * Opened state of the form-drawer
      * @type {Boolean}
@@ -13,17 +13,12 @@ export declare class ExmFormDrawerBase extends ExmFormDrawerBase_base {
      * The title of the 'submit' button
      * @type {String}
      */
-    submitBtnTitle: string;
-    /**
-     * Whether or not to hide the submit button
-     * @type {Boolean}
-     */
-    submitBtnHidden: boolean;
+    submitBtn: string;
     /**
      * Title of the cancel button
      * @type {String}
      */
-    cancelBtnTitle: string;
+    cancelBtn: string;
     /**
      * Whether or not to keep the form drawer opened on submit success
      * @type {Boolean}
@@ -34,21 +29,12 @@ export declare class ExmFormDrawerBase extends ExmFormDrawerBase_base {
      * @type {Boolean}
      */
     noCancelOnOutsideClick: boolean;
-    /**
-     * Disable sticky header in drawer
-     * @type {Boolean}
-     */
-    disableStickyHeader: boolean;
     /**
      * Internall used to show button spinner.
      */
     submitting: boolean;
-    /**
-     * Scroll action of the drawer
-     * @type {'lock' | 'refit' | 'cancel' | undefined}
-     */
-    scrollAction?: 'lock' | 'refit' | 'cancel' | undefined;
     errorMessage?: string | null;
+    exmForm?: ExmFormBase;
     /**
      * Opens and shows the drawer.
      */
@@ -67,15 +53,11 @@ export declare class ExmFormDrawerBase extends ExmFormDrawerBase_base {
      * @param {CustomEvent} e
      */
     doAction?(formData: unknown): Promise<void> | void;
-    protected handleSubmit(): Promise<void>;
-    private handleCancelBtnClick;
-    showError(message: string): void;
+    private handleSubmitFinished;
     /**
      * Method should be overriden to render form content
      */
-    protected renderFormContent(): import("lit-html").TemplateResult<1>;
-    protected renderError(): import("lit-html").TemplateResult<1>;
+    protected renderFormContent(): import("lit-html").TemplateResult<1> | undefined;
     protected handleDrawerOpenedChanged(e: CustomEvent): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }
-export {};

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

@@ -1,13 +1,12 @@
 import { __decorate } from "tslib";
-import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
+import { html } from 'lit';
+import { property, query } from 'lit/decorators.js';
 import '@exmg/exm-drawer/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, ExmFormValidateMixin } from '@exmg/exm-form';
-export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
+import { ifDefined } from 'lit/directives/if-defined.js';
+export class ExmFormDrawerBase extends ExmgElement {
     constructor() {
         super(...arguments);
         /**
@@ -19,17 +18,12 @@ export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
          * The title of the 'submit' button
          * @type {String}
          */
-        this.submitBtnTitle = 'Submit';
-        /**
-         * Whether or not to hide the submit button
-         * @type {Boolean}
-         */
-        this.submitBtnHidden = false;
+        this.submitBtn = 'Submit';
         /**
          * Title of the cancel button
          * @type {String}
          */
-        this.cancelBtnTitle = 'Cancel';
+        this.cancelBtn = 'Reset';
         /**
          * Whether or not to keep the form drawer opened on submit success
          * @type {Boolean}
@@ -40,11 +34,6 @@ export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
          * @type {Boolean}
          */
         this.noCancelOnOutsideClick = false;
-        /**
-         * Disable sticky header in drawer
-         * @type {Boolean}
-         */
-        this.disableStickyHeader = false;
         /**
          * Internall used to show button spinner.
          */
@@ -74,62 +63,32 @@ export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
         }
     }
     reset() {
+        if (!this.exmForm) {
+            return;
+        }
         this.errorMessage = null;
-        const form = this.getForm();
+        const form = this.exmForm.getForm();
         form.reset();
     }
-    async handleSubmit() {
-        const form = this.getForm();
-        this.errorMessage = null;
-        // Check form validity
-        this.checkFormValidity();
-        // Return when there are invalid fields
-        if (!this.formValid) {
-            return;
-        }
-        // Serialize form data
-        const data = serializeForm(form);
-        if (this.doAction) {
-            try {
-                this.submitting = true;
-                await this.doAction(data);
-                this.fire('action-success');
-            }
-            catch (error) {
-                this.errorMessage = error instanceof Error ? error.message : 'Unkbnown error';
-                this.fire('action-error', { message: this.errorMessage }, true);
-            }
-            finally {
-                this.submitting = false;
-                if (this.errorMessage === null && !this.keepOpenedOnSubmitSuccess) {
-                    this.opened = false;
-                }
-            }
-        }
-        else {
-            this.fire('action-submit', data, true);
+    handleSubmitFinished({ detail }) {
+        if (detail.success && !this.keepOpenedOnSubmitSuccess) {
+            this.opened = false;
         }
     }
-    handleCancelBtnClick() {
-        this.reset();
-        this.close();
-    }
-    showError(message) {
-        this.errorMessage = message;
-    }
     /**
      * Method should be overriden to render form content
      */
     renderFormContent() {
-        return html `<slot></slot>`;
-    }
-    renderError() {
-        return html `<div class="error"><div>${this.errorMessage}</div></div>`;
+        var _a;
+        return (_a = this.exmForm) === null || _a === void 0 ? void 0 : _a.renderFormContent();
     }
     handleDrawerOpenedChanged(e) {
         this.opened = e.detail.value;
+        if (!this.exmForm) {
+            return;
+        }
         if (this.opened) {
-            this.checkFormValidity();
+            this.exmForm.checkFormValidity();
         }
     }
     render() {
@@ -138,28 +97,29 @@ export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
         ?opened="${this.opened}"
         ?no-cancel-on-outside-click="${this.noCancelOnOutsideClick}"
         @exm-drawer-opened-changed=${this.handleDrawerOpenedChanged}
-        scroll-action=${ifDefined(this.scrollAction)}
         maxWidth="${this.style.maxWidth || '547px'}"
       >
-        <div class="header">
-          <slot name="title" class="title">${this.title}</slot>
-          <div class="header-buttons">
-            <md-text-button slot="footer" dialogFocus @click=${() => this.handleCancelBtnClick()}
-              >${this.cancelBtnTitle}</md-text-button
-            >
-            ${this.submitBtnHidden
-            ? ''
-            : html ` <exm-filled-button
-                  slot="footer"
-                  @click=${this.handleSubmit}
-                  ?disabled=${this.submitting || !this.formValid}
-                  ?loading=${this.submitting}
-                  >${this.submitBtnTitle}</exm-filled-button
-                >`}
-          </div>
-        </div>
-        ${this.errorMessage ? this.renderError() : nothing}
-        <div class="form-elements">${this.renderFormContent()}</div>
+        <section class="drawer-content">
+          <header class="header">
+            <slot name="title" class="title">${this.title}</slot>
+            <div class="actions">
+              <md-icon-button @click=${this.close}>
+                <md-icon>close</md-icon>
+              </md-icon-button>
+            </div>
+          </header>
+          <exm-form
+            submitBtn=${this.submitBtn}
+            cancelBtn=${this.cancelBtn}
+            .errorMessage=${this.errorMessage}
+            class="form-elements"
+            @form-submit-finished=${this.handleSubmitFinished}
+            @form-cancel=${this.reset}
+            doAction=${ifDefined(this.doAction)}
+          >
+            ${this.renderFormContent()}
+          </exm-form>
+        </section>
       </exm-drawer>
     `;
     }
@@ -169,29 +129,23 @@ __decorate([
 ], ExmFormDrawerBase.prototype, "opened", void 0);
 __decorate([
     property({ type: String, attribute: 'submit-btn-title' })
-], ExmFormDrawerBase.prototype, "submitBtnTitle", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'submit-btn-hidden' })
-], ExmFormDrawerBase.prototype, "submitBtnHidden", void 0);
+], ExmFormDrawerBase.prototype, "submitBtn", void 0);
 __decorate([
     property({ type: String, attribute: 'cancel-btn-title' })
-], ExmFormDrawerBase.prototype, "cancelBtnTitle", void 0);
+], ExmFormDrawerBase.prototype, "cancelBtn", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'keep-opened-on-submit-success' })
 ], ExmFormDrawerBase.prototype, "keepOpenedOnSubmitSuccess", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'no-cancel-on-outside-click' })
 ], ExmFormDrawerBase.prototype, "noCancelOnOutsideClick", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'disable-sticky-header' })
-], ExmFormDrawerBase.prototype, "disableStickyHeader", void 0);
 __decorate([
     property({ type: Boolean })
 ], ExmFormDrawerBase.prototype, "submitting", void 0);
-__decorate([
-    property({ type: String, attribute: 'scroll-action' })
-], ExmFormDrawerBase.prototype, "scrollAction", void 0);
 __decorate([
     property({ type: String })
 ], ExmFormDrawerBase.prototype, "errorMessage", void 0);
+__decorate([
+    query('exm-form')
+], ExmFormDrawerBase.prototype, "exmForm", void 0);
 //# sourceMappingURL=exm-form-drawer-base.js.map

package/dist/exm-form-drawer.d.ts

@@ -1,7 +1,7 @@
 import { ExmFormDrawerBase } from './exm-form-drawer-base.js';
 export declare class ExmFormDrawer extends ExmFormDrawerBase {
     static styles: import("lit").CSSResult[];
-    getForm(): HTMLFormElement | null;
+    protected firstUpdated(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/exm-form-drawer.js

@@ -4,8 +4,14 @@ import { style } from './styles/exm-form-drawer-styles-css.js';
 import { ExmFormDrawerBase } from './exm-form-drawer-base.js';
 import { formStyles } from '@exmg/exm-form';
 let ExmFormDrawer = class ExmFormDrawer extends ExmFormDrawerBase {
-    getForm() {
-        return this.querySelector('form');
+    firstUpdated() {
+        if (!this.exmForm) {
+            return;
+        }
+        /**
+         * We have to overwrite the getForm method because for whatever reason the form is not properly accessible from within the exm-form component
+         */
+        this.exmForm.getForm = () => this.querySelector('form');
     }
 };
 ExmFormDrawer.styles = [style, formStyles];

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

@@ -1,60 +1,18 @@
 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)));
+  .drawer-content {
+    height: 100%;
+    display: grid;
+    grid-template-rows: auto 1fr;
   }
 
-  :host .header .title {
+  .header {
     font-size: 1.4rem;
-  }
-
-  :host .form-elements {
-    padding: 0 0px;
-  }
-
-  .header-buttons {
+    padding: 1rem;
     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;
-    color: var(--exm-drawer-color, var(--md-sys-color-on-surface-variant, black));
-    background-color: var(--exm-drawer-bg-color, var(--md-sys-color-surface-variant, white));
-    z-index: 2;
-  }
-
-  form {
-    margin: 1rem 0 !important;
-    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;
-  }
-
-  .error > * {
-    margin: 1rem;
+    min-height: 3rem;
+    align-items: center;
+    justify-content: space-between;
   }
 `;
 //# sourceMappingURL=exm-form-drawer-styles-css.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-form-drawer",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,8 +31,8 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@exmg/exm-drawer": "^1.1.12",
-    "@exmg/exm-form": "^1.1.12"
+    "@exmg/exm-drawer": "^1.1.13",
+    "@exmg/exm-form": "^1.1.13"
   },
   "peerDependencies": {
     "lit": "^3.2.1",
@@ -42,5 +42,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1478e41cdcc8b109995cf78f8ccfadd7699c22aa"
+  "gitHead": "f482775e785f3e1fe8dde56cf7614428ff9a7e80"
 }