@exmg/exm-form-drawer 1.0.13 → 1.0.15

package/index.d.ts

@@ -1,5 +1,3 @@
-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 +1,4 @@
-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-form-drawer",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -30,11 +30,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@exmg/exm-button": "^1.0.3",
-    "@exmg/exm-form": "^1.0.8",
+    "@exmg/exm-drawer": "^1.0.1",
+    "@exmg/exm-form": "^1.0.10",
     "@material/typography": "^14.0.0",
-    "@polymer/neon-animation": "^3.0.1",
-    "@polymer/paper-dialog": "^3.0.1",
     "lit": "^3.0.0",
     "tslib": "^2.6.2"
   },
@@ -47,5 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a446e21753fb94b2f8995796b0cd905e82c45ed1"
+  "gitHead": "5747be50ecb7c46ed349c74a6e8d66895d835455"
 }

package/src/exm-drawer.d.ts

@@ -1,7 +1,4 @@
 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
@@ -18,9 +15,28 @@ export declare class ExmDrawer extends LitElement {
      * @type {'lock' | 'refit' | 'cancel' | undefined}
      */
     scrollAction?: 'lock' | 'refit' | 'cancel' | undefined;
-    handleOpenedChanged(e: CustomEvent): void;
+    /**
+     * A query to the native <dialog> element.
+     */
+    dialogElement: HTMLDialogElement;
+    /**
+     * Internal flag used when animating the closing.
+     */
+    private _isClosing;
+    updated(changedProperties: Map<string, any>): void;
+    private _onDialogClick;
+    private _onDialogCancel;
+    private _onDialogClose;
+    private _animateClose;
+    /**
+     * Public method to open the drawer.
+     */
     openDialog(): void;
-    static styles: import("lit").CSSResult[];
+    /**
+     * Public method to close the drawer.
+     */
+    closeDialog(): void;
+    static styles: import("lit").CSSResult;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1,4 +1,4 @@
-import './exm-drawer.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';

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

@@ -2,7 +2,7 @@ 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-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';
@@ -140,7 +140,7 @@ export class ExmFormDrawerBase extends ExmFormValidateMixin(ExmgElement) {
         ?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'}"
+        maxWidth="${this.style.maxWidth || '547px'}"
       >
         <div class="header">
           <slot name="title" class="title">${this.title}</slot>

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

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

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

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

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

@@ -1,4 +1,59 @@
 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;
+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: 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;
+  }
+`;
 //# sourceMappingURL=exm-form-drawer-styles-css.js.map

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 '@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';
-import { ifDefined } from 'lit/directives/if-defined.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/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-drawer-styles.scss

@@ -1,15 +0,0 @@
-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(--mdc-theme-surface, $exm-drawer-bg-color));
-  background-color: var(--exm-drawer-bg-color, var(--md-sys-color-surface-variant, white));
-}

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

@@ -1,55 +0,0 @@
-:host {
-  display: flex;
-
-  .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(#02182b, 0.1)));
-
-    .title {
-      font-size: 1.4rem;
-    }
-  }
-
-  .form-elements {
-    padding: 0 0px;
-  }
-}
-
-.header-buttons {
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  justify-content: flex-end;
-
-  > * {
-    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: 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;
-  }
-}