@exmg/exm-drawer 1.1.27 → 1.1.29

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

@@ -22,31 +22,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 +58,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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-drawer",
-  "version": "1.1.27",
+  "version": "1.1.29",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4e9a663fa89175607c2cdffaf3611cc2125939f8"
+  "gitHead": "4f87060160e9545bc7190a0f5e1e47a311933e9c"
 }