@exmg/exm-form-drawer 1.0.14 → 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.14",
+  "version": "1.0.15",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -30,11 +30,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@exmg/exm-button": "^1.0.4",
-    "@exmg/exm-form": "^1.0.9",
+    "@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": "e7086831faea0bdfe8628b0de9b7ddcc45174558"
+  "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-form-drawer-styles-css.js

@@ -41,7 +41,7 @@ export const style = css `
   }
 
   form {
-    margin: 0 !important;
+    margin: 1rem 0 !important;
     padding: 0.5rem 1rem;
     box-sizing: border-box;
   }

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,17 +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));
-  }
-`;
-//# sourceMappingURL=exm-drawer-styles-css.js.map