@exmg/exm-form-drawer 1.0.10 → 1.0.12

package/README.md

@@ -1,6 +1,6 @@
 # `<exm-form-drawer>` [![Published on npm](https://img.shields.io/npm/v/@exmg/exm-form-drawer.svg)](https://www.npmjs.com/package/@exmg/exm-form-drawer)
 
-This package provides dialog drawer functionality.
+This package provides dialog drawer functionality
 
 Components included:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-form-drawer",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "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.6",
+    "@exmg/exm-form": "^1.0.8",
     "@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": "9d2407c15858e2a7331ff7b2a16e344d9bb6af9e"
+  "gitHead": "e88a21046d092a883458fbecd09d2ebe853fe134"
 }

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

@@ -7,7 +7,7 @@ paper-dialog {
   bottom: 0;
   width: 100%;
   box-shadow: none;
-  overflow: scroll;
+  overflow: auto;
 
   color: var(--exm-drawer-color, var(--md-sys-color-on-surface, black));
   // background-color: var(--exm-drawer-bg-color, var(--mdc-theme-surface, $exm-drawer-bg-color));

package/index.d.ts

@@ -1,5 +0,0 @@
-export { ExmDrawer } from './src/exm-drawer.js';
-export { ExmFormDrawer } from './src/exm-form-drawer.js';
-export { ExmFormDrawerBase } from './src/exm-form-drawer-base.js';
-export { style as drawerStyles } from './src/styles/exm-drawer-styles-css.js';
-export { style as formDrawerStyles } from './src/styles/exm-form-drawer-styles-css.js';

package/index.js

@@ -1,6 +0,0 @@
-export { ExmDrawer } from './src/exm-drawer.js';
-export { ExmFormDrawer } from './src/exm-form-drawer.js';
-export { ExmFormDrawerBase } from './src/exm-form-drawer-base.js';
-export { style as drawerStyles } from './src/styles/exm-drawer-styles-css.js';
-export { style as formDrawerStyles } from './src/styles/exm-form-drawer-styles-css.js';
-//# sourceMappingURL=index.js.map

package/src/exm-drawer.d.ts

@@ -1,30 +0,0 @@
-import { LitElement } from 'lit';
-import '@polymer/neon-animation/animations/slide-from-right-animation.js';
-import '@polymer/neon-animation/animations/slide-right-animation.js';
-import '@polymer/paper-dialog/paper-dialog.js';
-export declare class ExmDrawer extends LitElement {
-    /**
-     * The opened state of the drawer
-     * @type {Boolean}
-     */
-    opened: boolean;
-    /**
-     * Prevent cancel on outside click or not
-     * @type {Boolean}
-     */
-    noCancelOnOutsideClick: boolean;
-    /**
-     * Scroll action of the drawer
-     * @type {'lock' | 'refit' | 'cancel' | undefined}
-     */
-    scrollAction?: 'lock' | 'refit' | 'cancel' | undefined;
-    handleOpenedChanged(e: CustomEvent): void;
-    openDialog(): void;
-    static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'exm-drawer': ExmDrawer;
-    }
-}

package/src/exm-drawer.js

@@ -1,71 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import '@polymer/neon-animation/animations/slide-from-right-animation.js';
-import '@polymer/neon-animation/animations/slide-right-animation.js';
-import '@polymer/paper-dialog/paper-dialog.js';
-import { style } from './styles/exm-drawer-styles-css.js';
-let ExmDrawer = class ExmDrawer extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The opened state of the drawer
-         * @type {Boolean}
-         */
-        this.opened = false;
-        /**
-         * Prevent cancel on outside click or not
-         * @type {Boolean}
-         */
-        this.noCancelOnOutsideClick = false;
-    }
-    handleOpenedChanged(e) {
-        this.opened = e.detail.value;
-        this.dispatchEvent(new CustomEvent('exm-drawer-opened-changed', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                value: e.detail.value,
-            },
-        }));
-    }
-    openDialog() {
-        this.opened = true;
-    }
-    render() {
-        return html `
-      <style>
-        paper-dialog {
-          max-width: var(--exm-drawer-max-width, ${this.style.maxWidth || '547px'});
-        }
-      </style>
-      <paper-dialog
-        scroll-action=${ifDefined(this.scrollAction)}
-        ?opened="${this.opened}"
-        ?no-cancel-on-outside-click="${this.noCancelOnOutsideClick}"
-        @opened-changed="${this.handleOpenedChanged}"
-        entry-animation="slide-from-right-animation"
-        exit-animation="slide-right-animation"
-        with-backdrop
-      >
-        <slot></slot>
-      </paper-dialog>
-    `;
-    }
-};
-ExmDrawer.styles = [style];
-__decorate([
-    property({ type: Boolean })
-], ExmDrawer.prototype, "opened", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'no-cancel-on-outside-click' })
-], ExmDrawer.prototype, "noCancelOnOutsideClick", void 0);
-__decorate([
-    property({ type: String, attribute: 'scroll-action' })
-], ExmDrawer.prototype, "scrollAction", void 0);
-ExmDrawer = __decorate([
-    customElement('exm-drawer')
-], ExmDrawer);
-export { ExmDrawer };
-//# sourceMappingURL=exm-drawer.js.map

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

@@ -1,81 +0,0 @@
-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';
-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}
-     */
-    opened: boolean;
-    /**
-     * The title of the 'submit' button
-     * @type {String}
-     */
-    submitBtnTitle: string;
-    /**
-     * Whether or not to hide the submit button
-     * @type {Boolean}
-     */
-    submitBtnHidden: boolean;
-    /**
-     * Title of the cancel button
-     * @type {String}
-     */
-    cancelBtnTitle: string;
-    /**
-     * Whether or not to keep the form drawer opened on submit success
-     * @type {Boolean}
-     */
-    keepOpenedOnSubmitSuccess: boolean;
-    /**
-     * No cancel on outside click
-     * @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;
-    /**
-     * Opens and shows the drawer.
-     */
-    show(): void;
-    /**
-     * Closes the drawer.
-     */
-    close(): void;
-    /**
-     * Opens and shows the dialog if it is closed; otherwise closes it.
-     */
-    toggleShow(): void;
-    reset(): void;
-    /**
-     * Action method that needs to be implemented
-     * @param {CustomEvent} e
-     */
-    doAction?(formData: unknown): Promise<void> | void;
-    protected handleSubmit(): Promise<void>;
-    private handleCancelBtnClick;
-    showError(message: string): void;
-    /**
-     * Method should be overriden to render form content
-     */
-    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>;
-}
-export {};

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

@@ -1,198 +0,0 @@
-import { __decorate } from "tslib";
-import { html, nothing } from 'lit';
-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';
-import { ExmFormValidateMixin } from '@exmg/exm-form';
-export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
-    constructor() {
-        super(...arguments);
-        /**
-         * Opened state of the form-drawer
-         * @type {Boolean}
-         */
-        this.opened = false;
-        /**
-         * The title of the 'submit' button
-         * @type {String}
-         */
-        this.submitBtnTitle = 'Submit';
-        /**
-         * Whether or not to hide the submit button
-         * @type {Boolean}
-         */
-        this.submitBtnHidden = false;
-        /**
-         * Title of the cancel button
-         * @type {String}
-         */
-        this.cancelBtnTitle = 'Cancel';
-        /**
-         * Whether or not to keep the form drawer opened on submit success
-         * @type {Boolean}
-         */
-        this.keepOpenedOnSubmitSuccess = false;
-        /**
-         * No cancel on outside click
-         * @type {Boolean}
-         */
-        this.noCancelOnOutsideClick = false;
-        /**
-         * Disable sticky header in drawer
-         * @type {Boolean}
-         */
-        this.disableStickyHeader = false;
-        /**
-         * Internall used to show button spinner.
-         */
-        this.submitting = false;
-    }
-    /**
-     * Opens and shows the drawer.
-     */
-    show() {
-        this.opened = true;
-    }
-    /**
-     * Closes the drawer.
-     */
-    close() {
-        this.opened = false;
-    }
-    /**
-     * Opens and shows the dialog if it is closed; otherwise closes it.
-     */
-    toggleShow() {
-        if (this.opened) {
-            this.close();
-        }
-        else {
-            this.show();
-        }
-    }
-    reset() {
-        this.errorMessage = null;
-        const form = this.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);
-        }
-    }
-    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>`;
-    }
-    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'}"
-      >
-        <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>
-      </exm-drawer>
-    `;
-    }
-}
-__decorate([
-    property({ type: Boolean })
-], 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);
-__decorate([
-    property({ type: String, attribute: 'cancel-btn-title' })
-], ExmFormDrawerBase.prototype, "cancelBtnTitle", 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);
-//# sourceMappingURL=exm-form-drawer-base.js.map

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

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

package/src/exm-form-drawer.js

@@ -1,16 +0,0 @@
-import { __decorate } from "tslib";
-import { customElement } from 'lit/decorators.js';
-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');
-    }
-};
-ExmFormDrawer.styles = [style, formStyles];
-ExmFormDrawer = __decorate([
-    customElement('exm-form-drawer')
-], ExmFormDrawer);
-export { ExmFormDrawer };
-//# sourceMappingURL=exm-form-drawer.js.map

package/src/styles/exm-drawer-styles-css.d.ts

@@ -1,2 +0,0 @@
-export declare const style: import("lit").CSSResult;
-export default style;

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

@@ -1,4 +0,0 @@
-import { css } from 'lit';
-export const style = css `paper-dialog{margin:0;padding:0;position:fixed;top:0;right:0;bottom:0;width:100%;box-shadow:none;overflow:scroll;color:var(--exm-drawer-color, var(--md-sys-color-on-surface, black));background-color:var(--exm-drawer-bg-color, var(--md-sys-color-surface-variant, white))}`;
-export default style;
-//# sourceMappingURL=exm-drawer-styles-css.js.map

package/src/styles/exm-form-drawer-styles-css.d.ts

@@ -1,2 +0,0 @@
-export declare const style: import("lit").CSSResult;
-export default style;

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

@@ -1,4 +0,0 @@
-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}.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