@exmg/exm-drawer 1.1.36 → 1.2.0

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.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);
         /**
@@ -96,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);
@@ -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.36",
+  "version": "1.2.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0fb4c4b7fdbc8d149a825e172b63f7e00c8e8a4a"
+  "gitHead": "b5f4ed4f41d79e3cce85dc0c44181ef4413d7458"
 }