@exmg/exm-drawer 1.1.9 → 1.1.10-alpha.26

package/.rollup.cache/root/repo/packages/exm-drawer/dist/exm-drawer-base.d.ts

@@ -0,0 +1,34 @@
+import { ExmgElement } from '@exmg/lit-base';
+export declare class ExmDrawerBase extends ExmgElement {
+    /**
+     * The opened state of the drawer
+     */
+    opened: boolean;
+    /**
+     * Which side should we show the drawer
+     * @type {String}
+     */
+    side: 'right' | 'left';
+    /**
+     * Prevent cancel on outside click or not
+     */
+    noCancelOnOutsideClick: boolean;
+    /**
+     * Prevent cancel on use of the escape key
+     */
+    disableEsc: boolean;
+    dialogElement?: HTMLDialogElement;
+    private onBackdropPointerDown;
+    private onCancel;
+    protected firstUpdated(): void;
+    disconnectedCallback(): void;
+    private handleOpenedChange;
+    /**
+     * Handle the backdrop click. Check if the clicked element is the dialog. If so close it.
+     * In the dialog is a div.content element. When clicking this area, the target is not the dialog, so will not close the client
+     */
+    private handleBackdropClick;
+    openDialog(): void;
+    closeDialog(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/.rollup.cache/root/repo/packages/exm-drawer/dist/exm-drawer-base.js

@@ -0,0 +1,99 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { ExmgElement, observer } from '@exmg/lit-base';
+export class ExmDrawerBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The opened state of the drawer
+         */
+        this.opened = false;
+        /**
+         * Which side should we show the drawer
+         * @type {String}
+         */
+        this.side = 'right';
+        /**
+         * Prevent cancel on outside click or not
+         */
+        this.noCancelOnOutsideClick = false;
+        /**
+         * Prevent cancel on use of the escape key
+         */
+        this.disableEsc = false;
+        this.onBackdropPointerDown = (event) => this.handleBackdropClick(event);
+        this.onCancel = (event) => {
+            if (this.disableEsc) {
+                event.preventDefault();
+            }
+        };
+    }
+    firstUpdated() {
+        if (!this.dialogElement)
+            return;
+        this.dialogElement.addEventListener('pointerdown', this.onBackdropPointerDown);
+        this.dialogElement.addEventListener('cancel', this.onCancel);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('pointerdown', this.onBackdropPointerDown);
+        (_b = this.dialogElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('cancel', this.onCancel);
+        super.disconnectedCallback();
+    }
+    async handleOpenedChange(opened) {
+        if (!this.dialogElement)
+            return;
+        if (opened) {
+            this.dialogElement.showModal();
+        }
+        else {
+            this.dialogElement.close();
+        }
+        this.fire('exm-drawer-opened-changed', { value: opened }, true);
+    }
+    /**
+     * Handle the backdrop click. Check if the clicked element is the dialog. If so close it.
+     * In the dialog is a div.content element. When clicking this area, the target is not the dialog, so will not close the client
+     */
+    handleBackdropClick(event) {
+        var _a;
+        if (!this.noCancelOnOutsideClick && event.target === this.dialogElement) {
+            (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.close();
+        }
+    }
+    openDialog() {
+        this.opened = true;
+    }
+    closeDialog() {
+        this.opened = false;
+    }
+    render() {
+        return html `
+      <dialog class="${this.side}" @close=${() => (this.opened = false)}>
+        <div class="content">
+          <slot></slot>
+        </div>
+      </dialog>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean }),
+    observer(function (opened) {
+        this.handleOpenedChange(opened);
+    })
+], ExmDrawerBase.prototype, "opened", void 0);
+__decorate([
+    property({ type: String })
+], ExmDrawerBase.prototype, "side", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-cancel-on-outside-click' })
+], ExmDrawerBase.prototype, "noCancelOnOutsideClick", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-cancel-on-escape' })
+], ExmDrawerBase.prototype, "disableEsc", void 0);
+__decorate([
+    query('dialog')
+], ExmDrawerBase.prototype, "dialogElement", void 0);
+//# sourceMappingURL=exm-drawer-base.js.map

package/.rollup.cache/root/repo/packages/exm-drawer/dist/exm-drawer.d.ts

@@ -0,0 +1,9 @@
+import { ExmDrawerBase } from './exm-drawer-base.js';
+export declare class ExmDrawer extends ExmDrawerBase {
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-drawer': ExmDrawer;
+    }
+}

package/.rollup.cache/root/repo/packages/exm-drawer/dist/exm-drawer.js

@@ -0,0 +1,12 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { style } from './styles/exm-drawer-styles-css.js';
+import { ExmDrawerBase } from './exm-drawer-base.js';
+let ExmDrawer = class ExmDrawer extends ExmDrawerBase {
+};
+ExmDrawer.styles = [style];
+ExmDrawer = __decorate([
+    customElement('exm-drawer')
+], ExmDrawer);
+export { ExmDrawer };
+//# sourceMappingURL=exm-drawer.js.map

package/.rollup.cache/root/repo/packages/exm-drawer/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { ExmDrawer } from './exm-drawer.js';
+export { ExmDrawerBase } from './exm-drawer-base.js';
+export { style as drawerStyles } from './styles/exm-drawer-styles-css.js';

package/.rollup.cache/root/repo/packages/exm-drawer/dist/index.js

@@ -0,0 +1,4 @@
+export { ExmDrawer } from './exm-drawer.js';
+export { ExmDrawerBase } from './exm-drawer-base.js';
+export { style as drawerStyles } from './styles/exm-drawer-styles-css.js';
+//# sourceMappingURL=index.js.map

package/.rollup.cache/root/repo/packages/exm-drawer/dist/styles/exm-drawer-styles-css.d.ts

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

package/.rollup.cache/root/repo/packages/exm-drawer/dist/styles/exm-drawer-styles-css.js

@@ -0,0 +1,81 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    --_exm-drawer-max-width: var(--exm-drawer-max-width, 574px);
+    --_exm-drawer-top-offset: var(--exm-drawer-top-offset, 0);
+  }
+
+  dialog {
+    --drawer-animation-start: var(--_exm-drawer-max-width);
+    --drawer-animation-end: 0;
+
+    position: fixed;
+    top: var(--_exm-drawer-top-offset);
+    right: 0;
+    left: auto;
+    width: var(--_exm-drawer-max-width);
+    margin: 0;
+    height: calc(100vh - var(--_exm-drawer-top-offset));
+    max-height: calc(100vh - var(--_exm-drawer-top-offset));
+    padding: 0;
+    transition:
+      display 0.3s allow-discrete,
+      overlay 0.3s allow-discrete;
+    animation: drawerClose 0.3s forwards;
+    border: 0;
+    background-color: var(--exm-drawer-container-color, var(--md-sys-color-surface-container, #f3edf7));
+    color: var(--exm-drawer-container-on-color, var(--md-sys-color-on-surface, #f3edf7));
+
+    &[open] {
+      animation: drawerShow 0.3s forwards;
+    }
+
+    &::backdrop {
+      background: rgba(0, 0, 0, 0.7);
+      backdrop-filter: blur(4px);
+      top: var(--_exm-drawer-top-offset);
+      animation: overlayShow 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    }
+
+    &.left {
+      --drawer-animation-start: calc(var(--_exm-drawer-max-width) * -1);
+
+      left: 0;
+      right: auto;
+    }
+
+    .content {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes drawerShow {
+    from {
+      transform: translateX(var(--drawer-animation-start));
+    }
+    to {
+      transform: translateX(var(--drawer-animation-end));
+    }
+  }
+
+  @keyframes drawerClose {
+    from {
+      transform: translateX(var(--drawer-animation-end));
+    }
+    to {
+      transform: translateX(var(--drawer-animation-start));
+    }
+  }
+`;
+//# sourceMappingURL=exm-drawer-styles-css.js.map

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

@@ -1,4 +1,3 @@
-import { PropertyValues } from 'lit';
 import { ExmgElement } from '@exmg/lit-base';
 export declare class ExmDrawerBase extends ExmgElement {
     /**
@@ -19,21 +18,17 @@ export declare class ExmDrawerBase extends ExmgElement {
      */
     disableEsc: boolean;
     dialogElement?: HTMLDialogElement;
+    private onBackdropPointerDown;
+    private onCancel;
+    protected firstUpdated(): void;
     disconnectedCallback(): void;
-    protected firstUpdated(_changedProperties: PropertyValues): void;
     private handleOpenedChange;
     /**
      * Handle the backdrop click. Check if the clicked element is the dialog. If so close it.
      * In the dialog is a div.content element. When clicking this area, the target is not the dialog, so will not close the client
      */
     private handleBackdropClick;
-    private catchEscKey;
-    private handleCloseEvent;
-    private handleOpenedChanged;
     openDialog(): void;
     closeDialog(): void;
-    /**
-     * The div.content in the render is needed for making the backdrop click work
-     */
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/exm-drawer-base.js

@@ -1,8 +1,9 @@
-import { __decorate } from "tslib";
+import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import { ExmgElement, observer } from '@exmg/lit-base';
-export class ExmDrawerBase extends ExmgElement {
+import { observer, ExmgElement } from '@exmg/lit-base';
+
+class ExmDrawerBase extends ExmgElement {
     constructor() {
         super(...arguments);
         /**
@@ -22,31 +23,35 @@ export class ExmDrawerBase extends ExmgElement {
          * Prevent cancel on use of the escape key
          */
         this.disableEsc = false;
+        this.onBackdropPointerDown = (event) => this.handleBackdropClick(event);
+        this.onCancel = (event) => {
+            if (this.disableEsc) {
+                event.preventDefault();
+            }
+        };
+    }
+    firstUpdated() {
+        if (!this.dialogElement)
+            return;
+        this.dialogElement.addEventListener('pointerdown', this.onBackdropPointerDown);
+        this.dialogElement.addEventListener('cancel', this.onCancel);
     }
     disconnectedCallback() {
         var _a, _b;
-        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('close', this.handleCloseEvent.bind(this));
-        (_b = this.dialogElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', this.catchEscKey.bind(this));
+        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('pointerdown', this.onBackdropPointerDown);
+        (_b = this.dialogElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('cancel', this.onCancel);
         super.disconnectedCallback();
     }
-    firstUpdated(_changedProperties) {
-        var _a;
-        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.addEventListener('close', this.handleCloseEvent.bind(this));
-    }
-    handleOpenedChange(opened) {
-        var _a, _b, _c, _d;
+    async handleOpenedChange(opened) {
+        if (!this.dialogElement)
+            return;
         if (opened) {
-            if (!this.noCancelOnOutsideClick) {
-                (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.handleBackdropClick.bind(this));
-            }
-            if (this.disableEsc) {
-                (_b = this.dialogElement) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.catchEscKey.bind(this));
-            }
-            (_c = this.dialogElement) === null || _c === void 0 ? void 0 : _c.showModal();
+            this.dialogElement.showModal();
         }
         else {
-            (_d = this.dialogElement) === null || _d === void 0 ? void 0 : _d.close();
+            this.dialogElement.close();
         }
+        this.fire('exm-drawer-opened-changed', { value: opened }, true);
     }
     /**
      * Handle the backdrop click. Check if the clicked element is the dialog. If so close it.
@@ -54,34 +59,19 @@ export class ExmDrawerBase extends ExmgElement {
      */
     handleBackdropClick(event) {
         var _a;
-        if (event.target === this.dialogElement) {
+        if (!this.noCancelOnOutsideClick && event.target === this.dialogElement) {
             (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.close();
         }
     }
-    catchEscKey(event) {
-        if (event.code === 'Escape') {
-            event.preventDefault();
-        }
-    }
-    handleCloseEvent() {
-        this.handleOpenedChanged({ detail: { value: false } });
-    }
-    handleOpenedChanged(e) {
-        this.opened = e.detail.value;
-        this.fire('exm-drawer-opened-changed', this.opened, true);
-    }
     openDialog() {
         this.opened = true;
     }
     closeDialog() {
         this.opened = false;
     }
-    /**
-     * The div.content in the render is needed for making the backdrop click work
-     */
     render() {
         return html `
-      <dialog class="${this.side}" @opened-changed="${this.handleOpenedChanged}">
+      <dialog class="${this.side}" @close=${() => (this.opened = false)}>
         <div class="content">
           <slot></slot>
         </div>
@@ -107,4 +97,6 @@ __decorate([
 __decorate([
     query('dialog')
 ], ExmDrawerBase.prototype, "dialogElement", void 0);
-//# sourceMappingURL=exm-drawer-base.js.map
+
+export { ExmDrawerBase };
+//# sourceMappingURL=exm-drawer-base.js.map

package/dist/exm-drawer.js

@@ -1,12 +1,14 @@
-import { __decorate } from "tslib";
+import { __decorate } from 'tslib';
 import { customElement } from 'lit/decorators.js';
 import { style } from './styles/exm-drawer-styles-css.js';
 import { ExmDrawerBase } from './exm-drawer-base.js';
+
 let ExmDrawer = class ExmDrawer extends ExmDrawerBase {
 };
 ExmDrawer.styles = [style];
 ExmDrawer = __decorate([
     customElement('exm-drawer')
 ], ExmDrawer);
+
 export { ExmDrawer };
-//# sourceMappingURL=exm-drawer.js.map
+//# sourceMappingURL=exm-drawer.js.map

package/dist/index.js

@@ -1,4 +1,4 @@
 export { ExmDrawer } from './exm-drawer.js';
 export { ExmDrawerBase } from './exm-drawer-base.js';
 export { style as drawerStyles } from './styles/exm-drawer-styles-css.js';
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const style = css `
+
+const style = css `
   :host {
     --_exm-drawer-max-width: var(--exm-drawer-max-width, 574px);
     --_exm-drawer-top-offset: var(--exm-drawer-top-offset, 0);
@@ -24,7 +25,7 @@ export const style = css `
     animation: drawerClose 0.3s forwards;
     border: 0;
     background-color: var(--exm-drawer-container-color, var(--md-sys-color-surface-container, #f3edf7));
-    color: var(--exm-drawer-container-on-color, var(--md-sys-color-on-surface-container, #f3edf7));
+    color: var(--exm-drawer-container-on-color, var(--md-sys-color-on-surface, #f3edf7));
 
     &[open] {
       animation: drawerShow 0.3s forwards;
@@ -78,4 +79,6 @@ export const style = css `
     }
   }
 `;
-//# sourceMappingURL=exm-drawer-styles-css.js.map
+
+export { style };
+//# sourceMappingURL=exm-drawer-styles-css.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-drawer",
-  "version": "1.1.9",
+  "version": "1.1.10-alpha.26+dffd4ec",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,16 +29,13 @@
     "directory": "packages/exm-drawer"
   },
   "license": "MIT",
-  "dependencies": {
-    "lit": "^3.0.0",
+  "peerDependencies": {
+    "lit": "^3.2.1",
     "tslib": "^2.6.2"
   },
-  "devDependencies": {
-    "@exmg/lit-cli": "1.1.13"
-  },
   "scripts": {},
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ac876ab3f3d6d83a43a3944c052c8e71de300832"
+  "gitHead": "dffd4ecb68fdeb061f4e8ad585af221bfb0f8e8b"
 }