@exmg/exm-drawer 0.0.2-alpha.0

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

@@ -0,0 +1,39 @@
+import { PropertyValues } from 'lit';
+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;
+    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

@@ -0,0 +1,110 @@
+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;
+    }
+    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));
+        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;
+        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();
+        }
+        else {
+            (_d = this.dialogElement) === null || _d === void 0 ? void 0 : _d.close();
+        }
+    }
+    /**
+     * 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 (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}">
+        <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/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/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/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/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/dist/styles/exm-drawer-styles-css.d.ts

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

package/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-container, #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/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@exmg/exm-drawer",
+  "version": "0.0.2-alpha.0+df24e0c",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./exm-drawer.js": "./dist/exm-drawer.js"
+  },
+  "description": "Drawer element",
+  "contributors": [
+    "Ex Machina"
+  ],
+  "keywords": [
+    "web-components",
+    "lit",
+    "form"
+  ],
+  "files": [
+    "**/*.scss",
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@bitbucket.org:exmachina/exm-web-components.git",
+    "directory": "packages/exm-drawer"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "lit": "^3.2.1",
+    "tslib": "^2.6.2"
+  },
+  "scripts": {},
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "df24e0c74a76a7e1c258f69386036e24e7860256"
+}