kemet-ui 1.4.0 → 2.0.0

package/dist/src/components/kemet-modal/docs/stories.js

@@ -0,0 +1,101 @@
+import { html } from 'lit';
+import '../kemet-modal';
+import '../kemet-modal-close';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+const meta = {
+    title: 'Components / Modal',
+    component: 'kemet-modal',
+};
+export default meta;
+const Template = ({ displayCloseBtn = true, minWidth = '0', maxWidth = 'none', overlayColor = 'rgba(0,0,0,0.2)', transitionSpeed = '0.3s', opened = false, effect = 'fall', closeOnClick = false, }) => {
+    const openModal = () => {
+        const modal = document.querySelector('kemet-modal');
+        modal.opened = true;
+    };
+    const makeCloseBtn = (display) => {
+        if (display) {
+            return html `
+        <kemet-modal-close tabindex="0" role="button" aria-label="Close Button">
+          <kemet-icon icon="x-circle" size="24"></kemet-icon>
+        </kemet-modal-close>
+      `;
+        }
+        return null;
+    };
+    const temp = html `
+    <style>
+      kemet-modal {
+        --kemet-modal-min-width: ${minWidth};
+        --kemet-modal-max-width: ${maxWidth};
+        --kemet-modal-overlay-background-color: ${overlayColor};
+        --kemet-modal-transition-speed: ${transitionSpeed};
+      }
+    </style>
+    <kemet-button @click="${() => openModal()}">Open Modal</kemet-button>
+    <kemet-modal ?opened=${opened} effect="${effect}" ?close-on-click="${closeOnClick}">
+      <div kemet-elevation="layer5" kemet-padding="tiny:normal">
+        ${makeCloseBtn(displayCloseBtn)}
+        <h2 kemet-margin="tiny:none">Modal Title</h2>
+        <p>Your modal contents <a href="http://google.com">here</a>.</p>
+      </div>
+    </kemet-modal>
+  `;
+    return temp;
+};
+export const Standard = {
+    render: (args) => Template(args),
+    argTypes: {
+        displayCloseBtn: {
+            control: { type: 'boolean' },
+        },
+        minWidth: {
+            control: { type: 'text' },
+        },
+        maxWidth: {
+            control: { type: 'text' },
+        },
+        overlayColor: {
+            control: { type: 'color' },
+        },
+        transitionSpeed: {
+            control: { type: 'text' },
+        },
+        opened: {
+            control: { type: 'boolean' },
+        },
+        effect: {
+            control: { type: 'select' },
+            options: [
+                'fadein-scaleup',
+                'slide-right',
+                'slide-bottom',
+                'newspaper',
+                'fall',
+                'side-fall',
+                'flip-horizontal',
+                'flip-vertical',
+                'sign-3d',
+                'super-scaled',
+                'slit',
+                'rotate-bottom',
+                'rotate-left',
+            ],
+        },
+        closeOnClick: {
+            control: { type: 'boolean' },
+        },
+    },
+    args: {
+        displayCloseBtn: true,
+        minWidth: '0',
+        maxWidth: 'none',
+        overlayColor: 'rgba(0,0,0,0.2)',
+        transitionSpeed: '0.3s',
+        opened: false,
+        effect: 'fall',
+        closeOnClick: false,
+    },
+};
+//# sourceMappingURL=stories.js.map

package/dist/src/components/kemet-modal/docs/stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/components/kemet-modal/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;CACzB,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,eAAe,GAAG,IAAI,EACtB,QAAQ,GAAG,GAAG,EACd,QAAQ,GAAG,MAAM,EACjB,YAAY,GAAG,iBAAiB,EAChC,eAAe,GAAG,MAAM,EACxB,MAAM,GAAG,KAAK,EACd,MAAM,GAAG,MAAM,EACf,YAAY,GAAG,KAAK,GACrB,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACpD,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,EAAE;QAC/B,IAAI,OAAO,EAAE;YACX,OAAO,IAAI,CAAA;;;;OAIV,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG,IAAI,CAAA;;;mCAGgB,QAAQ;mCACR,QAAQ;kDACO,YAAY;0CACpB,eAAe;;;4BAG7B,GAAG,EAAE,CAAC,SAAS,EAAE;2BAClB,MAAM,YAAY,MAAM,sBAAsB,YAAY;;UAE3E,YAAY,CAAC,eAAe,CAAC;;;;;GAKpC,CAAC;IAEF,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAEhC,QAAQ,EAAE;QACR,eAAe,EAAE;YACf,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,eAAe,EAAE;YACf,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE;gBACP,gBAAgB;gBAChB,aAAa;gBACb,cAAc;gBACd,WAAW;gBACX,MAAM;gBACN,WAAW;gBACX,iBAAiB;gBACjB,eAAe;gBACf,SAAS;gBACT,cAAc;gBACd,MAAM;gBACN,eAAe;gBACf,aAAa;aACd;SACF;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;KACF;IAED,IAAI,EAAE;QACJ,eAAe,EAAE,IAAI;QACrB,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,MAAM;QAChB,YAAY,EAAE,iBAAiB;QAC/B,eAAe,EAAE,MAAM;QACvB,MAAM,EAAE,KAAK;QACb,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;KACpB;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-modal';\nimport '../kemet-modal-close';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Modal',\n  component: 'kemet-modal',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  displayCloseBtn = true,\n  minWidth = '0',\n  maxWidth = 'none',\n  overlayColor = 'rgba(0,0,0,0.2)',\n  transitionSpeed = '0.3s',\n  opened = false,\n  effect = 'fall',\n  closeOnClick = false,\n}) => {\n  const openModal = () => {\n    const modal = document.querySelector('kemet-modal');\n    modal.opened = true;\n  };\n\n  const makeCloseBtn = (display) => {\n    if (display) {\n      return html`\n        <kemet-modal-close tabindex=\"0\" role=\"button\" aria-label=\"Close Button\">\n          <kemet-icon icon=\"x-circle\" size=\"24\"></kemet-icon>\n        </kemet-modal-close>\n      `;\n    }\n\n    return null;\n  };\n\n  const temp = html`\n    <style>\n      kemet-modal {\n        --kemet-modal-min-width: ${minWidth};\n        --kemet-modal-max-width: ${maxWidth};\n        --kemet-modal-overlay-background-color: ${overlayColor};\n        --kemet-modal-transition-speed: ${transitionSpeed};\n      }\n    </style>\n    <kemet-button @click=\"${() => openModal()}\">Open Modal</kemet-button>\n    <kemet-modal ?opened=${opened} effect=\"${effect}\" ?close-on-click=\"${closeOnClick}\">\n      <div kemet-elevation=\"layer5\" kemet-padding=\"tiny:normal\">\n        ${makeCloseBtn(displayCloseBtn)}\n        <h2 kemet-margin=\"tiny:none\">Modal Title</h2>\n        <p>Your modal contents <a href=\"http://google.com\">here</a>.</p>\n      </div>\n    </kemet-modal>\n  `;\n\n  return temp;\n};\n\nexport const Standard: Story = {\n  render: (args) => Template(args),\n\n  argTypes: {\n    displayCloseBtn: {\n      control: { type: 'boolean' },\n    },\n    minWidth: {\n      control: { type: 'text' },\n    },\n    maxWidth: {\n      control: { type: 'text' },\n    },\n    overlayColor: {\n      control: { type: 'color' },\n    },\n    transitionSpeed: {\n      control: { type: 'text' },\n    },\n    opened: {\n      control: { type: 'boolean' },\n    },\n    effect: {\n      control: { type: 'select' },\n      options: [\n        'fadein-scaleup',\n        'slide-right',\n        'slide-bottom',\n        'newspaper',\n        'fall',\n        'side-fall',\n        'flip-horizontal',\n        'flip-vertical',\n        'sign-3d',\n        'super-scaled',\n        'slit',\n        'rotate-bottom',\n        'rotate-left',\n      ],\n    },\n    closeOnClick: {\n      control: { type: 'boolean' },\n    },\n  },\n\n  args: {\n    displayCloseBtn: true,\n    minWidth: '0',\n    maxWidth: 'none',\n    overlayColor: 'rgba(0,0,0,0.2)',\n    transitionSpeed: '0.3s',\n    opened: false,\n    effect: 'fall',\n    closeOnClick: false,\n  },\n};\n"]}

package/dist/src/components/kemet-modal/kemet-modal-close.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-modal-close
+ * @summary A close button for a modal.
+ *
+ * @event kemet-modal-close-pressed - Fires when the close button is pressed
+ *
+ */
+export default class KemetModalClose extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+    close(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-modal-close': KemetModalClose;
+    }
+}

package/dist/src/components/kemet-modal/kemet-modal-close.js

@@ -0,0 +1,40 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { emitEvent } from '../../utilities/misc/events';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-modal-close
+ * @summary A close button for a modal.
+ *
+ * @event kemet-modal-close-pressed - Fires when the close button is pressed
+ *
+ */
+let KemetModalClose = class KemetModalClose extends LitElement {
+    render() {
+        return html `
+      <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>
+    `;
+    }
+    close() {
+        emitEvent(this, 'kemet-modal-close-pressed', this);
+    }
+};
+KemetModalClose.styles = [
+    css `
+      :host {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        border-radius: 50%;
+        cursor: pointer;
+      }
+    `,
+];
+KemetModalClose = __decorate([
+    customElement('kemet-modal-close')
+], KemetModalClose);
+export default KemetModalClose;
+//# sourceMappingURL=kemet-modal-close.js.map

package/dist/src/components/kemet-modal/kemet-modal-close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-modal-close.js","sourceRoot":"","sources":["../../../../src/components/kemet-modal/kemet-modal-close.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD;;;;;;;;;GASG;AAGH,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,UAAU;IAarD,MAAM;QACJ,OAAO,IAAI,CAAA;qBACM,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;KAC/D,CAAC;IACJ,CAAC;IAED,KAAK;QACH,SAAS,CAAC,IAAI,EAAE,2BAA2B,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC;CACF,CAAA;AArBQ,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;KAQF;CACF,CAAC;AAXiB,eAAe;IADnC,aAAa,CAAC,mBAAmB,CAAC;GACd,eAAe,CAsBnC;eAtBoB,eAAe","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal-close\n * @summary A close button for a modal.\n *\n * @event kemet-modal-close-pressed - Fires when the close button is pressed\n *\n */\n\n@customElement('kemet-modal-close')\nexport default class KemetModalClose extends LitElement {\n  static styles = [\n    css`\n      :host {\n        position: absolute;\n        top: 0.5rem;\n        right: 0.5rem;\n        border-radius: 50%;\n        cursor: pointer;\n      }\n    `,\n  ];\n\n  render() {\n    return html`\n      <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>\n    `;\n  }\n\n  close() {\n    emitEvent(this, 'kemet-modal-close-pressed', this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-modal-close': KemetModalClose\n  }\n}\n"]}

package/dist/src/components/kemet-modal/kemet-modal.d.ts

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+import { TypeEffect } from './types';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-modal
+ * @summary A dialog that has many built in effects and flexible styles.
+ *
+ * @prop {boolean} opened
+ * @prop {string} effect
+ * @prop {boolean} closeOnClick
+ * @prop {string} breakpoint
+ * @prop {boolean} mobile
+ *
+ * @csspart content - The main contents of the modal.
+ * @csspart overlay - The surrounding scrim of the modal.
+ *
+ * @cssproperty --kemet-modal-content-min-width - The minimum width of the content. Default: 0.
+ * @cssproperty --kemet-modal-content-max-width - The maximum width of the content. Default: none.
+ * @cssproperty --kemet-modal-content-background-color - The background color of the content. Default: --kemet-color-white.
+ * @cssproperty --kemet-modal-content-mobile-min-width - The min with of the mobile content. Default: 100%.
+ * @cssproperty --kemet-modal-content-mobile-min-height - The min height of the mobile content. Default: 80vh.
+ *
+ * @event kemet-modal-opened - Fires when the modal opens
+ * @event kemet-modal-closed - Fires when the modal closes
+ *
+ */
+export default class KemetModal extends LitElement {
+    static styles: import("lit").CSSResult[];
+    opened: boolean;
+    effect: TypeEffect;
+    closeOnClick: boolean;
+    breakpoint: string;
+    mobile: boolean;
+    focusableSelector: string;
+    focusableElements: any;
+    constructor();
+    firstUpdated(): void;
+    updated(prevProps: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+    isMobile(): void;
+    handleFocusableDown(event: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-modal': KemetModal;
+    }
+}

package/dist/src/components/kemet-modal/kemet-modal.js

@@ -0,0 +1,131 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { stylesBase, stylesEffects } from './styles';
+import { emitEvent } from '../../utilities/misc/events';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-modal
+ * @summary A dialog that has many built in effects and flexible styles.
+ *
+ * @prop {boolean} opened
+ * @prop {string} effect
+ * @prop {boolean} closeOnClick
+ * @prop {string} breakpoint
+ * @prop {boolean} mobile
+ *
+ * @csspart content - The main contents of the modal.
+ * @csspart overlay - The surrounding scrim of the modal.
+ *
+ * @cssproperty --kemet-modal-content-min-width - The minimum width of the content. Default: 0.
+ * @cssproperty --kemet-modal-content-max-width - The maximum width of the content. Default: none.
+ * @cssproperty --kemet-modal-content-background-color - The background color of the content. Default: --kemet-color-white.
+ * @cssproperty --kemet-modal-content-mobile-min-width - The min with of the mobile content. Default: 100%.
+ * @cssproperty --kemet-modal-content-mobile-min-height - The min height of the mobile content. Default: 80vh.
+ *
+ * @event kemet-modal-opened - Fires when the modal opens
+ * @event kemet-modal-closed - Fires when the modal closes
+ *
+ */
+let KemetModal = class KemetModal extends LitElement {
+    constructor() {
+        super();
+        this.opened = false;
+        this.closeOnClick = false;
+        this.breakpoint = '600px';
+        // bindings
+        this.addEventListener('kemet-modal-close-pressed', () => { this.opened = false; });
+    }
+    firstUpdated() {
+        // standard properties
+        /** @internal */
+        this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';
+        this.focusableElements = this.querySelectorAll(this.focusableSelector);
+        // events
+        this.addEventListener('keyup', (event) => {
+            if (event.key === 'Escape') {
+                this.opened = false;
+            }
+        });
+        this.addEventListener('click', (event) => {
+            const targetElement = event.target;
+            if (this.opened && this.closeOnClick && targetElement.tagName.toLowerCase() === 'kemet-modal') {
+                this.opened = false;
+            }
+        });
+        window.addEventListener('resize', () => {
+            this.isMobile();
+        });
+        this.focusableElements.forEach((element) => {
+            element.addEventListener('keydown', event => this.handleFocusableDown(event));
+        });
+    }
+    updated(prevProps) {
+        if (!prevProps.get('opened') && this.opened === true) {
+            setTimeout(() => {
+                var _a;
+                (_a = this.focusableElements[0]) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 100);
+            emitEvent(this, 'kemet-modal-opened', this);
+        }
+        if (prevProps.get('opened') && this.opened === false) {
+            emitEvent(this, 'kemet-modal-closed', this);
+        }
+        this.isMobile();
+    }
+    render() {
+        return html `
+      <div class="content" part="content">
+        <slot></slot>
+      </div>
+      <div class="overlay" part="overlay"></div>
+    `;
+    }
+    isMobile() {
+        const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
+        this.mobile = mediaQuery.matches;
+    }
+    handleFocusableDown(event) {
+        const firstFocusable = this.focusableElements[0];
+        const lastFocusable = this.focusableElements[this.focusableElements.length - 1];
+        if (event.key === 'Tab') {
+            if (event.shiftKey && document.activeElement === firstFocusable) {
+                event.preventDefault();
+                lastFocusable.focus();
+            }
+            else if (!event.shiftKey && document.activeElement === lastFocusable) {
+                event.preventDefault();
+                firstFocusable.focus();
+            }
+        }
+    }
+};
+KemetModal.styles = [stylesBase, stylesEffects];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetModal.prototype, "opened", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], KemetModal.prototype, "effect", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'close-on-click' })
+], KemetModal.prototype, "closeOnClick", void 0);
+__decorate([
+    property({ type: String })
+], KemetModal.prototype, "breakpoint", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetModal.prototype, "mobile", void 0);
+__decorate([
+    state()
+], KemetModal.prototype, "focusableSelector", void 0);
+__decorate([
+    state()
+], KemetModal.prototype, "focusableElements", void 0);
+KemetModal = __decorate([
+    customElement('kemet-modal')
+], KemetModal);
+export default KemetModal;
+//# sourceMappingURL=kemet-modal.js.map

package/dist/src/components/kemet-modal/kemet-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-modal.js","sourceRoot":"","sources":["../../../../src/components/kemet-modal/kemet-modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase, stylesEffects } from './styles';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { TypeEffect } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-modal\n * @summary A dialog that has many built in effects and flexible styles.\n *\n * @prop {boolean} opened\n * @prop {string} effect\n * @prop {boolean} closeOnClick\n * @prop {string} breakpoint\n * @prop {boolean} mobile\n *\n * @csspart content - The main contents of the modal.\n * @csspart overlay - The surrounding scrim of the modal.\n *\n * @cssproperty --kemet-modal-content-min-width - The minimum width of the content. Default: 0.\n * @cssproperty --kemet-modal-content-max-width - The maximum width of the content. Default: none.\n * @cssproperty --kemet-modal-content-background-color - The background color of the content. Default: --kemet-color-white.\n * @cssproperty --kemet-modal-content-mobile-min-width - The min with of the mobile content. Default: 100%.\n * @cssproperty --kemet-modal-content-mobile-min-height - The min height of the mobile content. Default: 80vh.\n *\n * @event kemet-modal-opened - Fires when the modal opens\n * @event kemet-modal-closed - Fires when the modal closes\n *\n */\n\n@customElement('kemet-modal')\nexport default class KemetModal extends LitElement {\n  static styles = [stylesBase, stylesEffects];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = false;\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect;\n\n  @property({ type: Boolean, attribute: 'close-on-click' })\n  closeOnClick: boolean = false;\n\n  @property({ type: String })\n  breakpoint: string = '600px';\n\n  @property({ type: Boolean, reflect: true })\n  mobile: boolean;\n\n  @state()\n  focusableSelector: string;\n\n  @state()\n  focusableElements: any;\n\n  constructor() {\n    super();\n\n    // bindings\n    this.addEventListener('kemet-modal-close-pressed', () => { this.opened = false; });\n  }\n\n  firstUpdated() {\n    // standard properties\n    /** @internal */\n    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';\n    this.focusableElements = this.querySelectorAll(this.focusableSelector);\n\n    // events\n    this.addEventListener('keyup', (event) => {\n      if (event.key === 'Escape') {\n        this.opened = false;\n      }\n    });\n\n    this.addEventListener('click', (event) => {\n      const targetElement = event.target as HTMLElement;\n      if (this.opened && this.closeOnClick && targetElement.tagName.toLowerCase() === 'kemet-modal') {\n        this.opened = false;\n      }\n    });\n\n    window.addEventListener('resize', () => {\n      this.isMobile();\n    });\n\n    this.focusableElements.forEach((element) => {\n      element.addEventListener('keydown', event => this.handleFocusableDown(event));\n    });\n  }\n\n  updated(prevProps) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      setTimeout(() => {\n        this.focusableElements[0]?.focus();\n      }, 100);\n\n      emitEvent(this, 'kemet-modal-opened', this);\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      emitEvent(this, 'kemet-modal-closed', this);\n    }\n\n    this.isMobile();\n  }\n\n  render() {\n    return html`\n      <div class=\"content\" part=\"content\">\n        <slot></slot>\n      </div>\n      <div class=\"overlay\" part=\"overlay\"></div>\n    `;\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n    this.mobile = mediaQuery.matches;\n  }\n\n  handleFocusableDown(event) {\n    const firstFocusable = this.focusableElements[0];\n    const lastFocusable = this.focusableElements[this.focusableElements.length - 1];\n\n    if (event.key === 'Tab') {\n      if (event.shiftKey && document.activeElement === firstFocusable) {\n        event.preventDefault();\n        lastFocusable.focus();\n      } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n        event.preventDefault();\n        firstFocusable.focus();\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-modal': KemetModal\n  }\n}\n"]}

package/dist/src/components/kemet-modal/styles.d.ts

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

package/dist/src/components/kemet-modal/styles.js

@@ -0,0 +1,267 @@
+import { css } from 'lit';
+export const stylesBase = css `
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    position: fixed;
+    display: flex;
+    top: 0;
+    left: 0;
+    z-index: 99;
+    width: 100%;
+    height: 100vh;
+    visibility: hidden;
+    backface-visibility: hidden;
+  }
+
+  :host([opened]) {
+    visibility: visible;
+  }
+
+  .content {
+    position: relative;
+    z-index: 3;
+    margin: auto;
+    min-width: var(--kemet-modal-content-min-width, 0);
+    max-width: var(--kemet-modal-content-max-width, none);
+    background-color: var(--kemet-modal-content-background-color, var(--kemet-color-white-to-primary));
+  }
+
+  :host([mobile]) .content {
+    min-width: var(--kemet-modal-content-mobile-min-width, 100%);
+    min-height: var(--kemet-modal-content-mobile-min-height, 80vh);
+    padding: var(--kemet-modal-content-mobile-padding, 1rem);
+  }
+
+  .overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    visibility: hidden;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    opacity: 0;
+    background: var(--kemet-modal-overlay-background-color, rgba(0,0,0,0.2));
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
+  }
+
+  :host([opened]) .overlay {
+    opacity: 1;
+    visibility: visible;
+  }
+`;
+export const stylesEffects = css `
+  /* fadein-scaleup */
+  :host([effect="fadein-scaleup"]) .content {
+    transform: scale(0.7);
+    opacity: 0;
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
+  }
+
+  :host([effect="fadein-scaleup"][opened]) .content {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  /* slide-right */
+  :host([effect="slide-right"]) .content {
+    transform: translateX(20%);
+    opacity: 0;
+    transition: all var(--kemet-modal-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);
+  }
+
+  :host([effect="slide-right"][opened]) .content {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  /* slide-bottom */
+  :host([effect="slide-bottom"]) .content {
+    transform: translateY(20%);
+    opacity: 0;
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
+  }
+
+  :host([effect="slide-bottom"][opened]) .content {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  /* newspaper */
+  :host([effect="newspaper"]) .content {
+    transform: scale(0) rotate(720deg);
+    opacity: 0;
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
+  }
+
+  :host([effect="newspaper"][opened]) .content {
+    transform: scale(1) rotate(0deg);
+    opacity: 1;
+  }
+
+  /* fall */
+  :host([effect="fall"]) {
+    perspective: 1300px;
+  }
+
+  :host([effect="fall"]) .content {
+    transform-style: preserve-3d;
+    transform: translateZ(600px) rotateX(20deg);
+    opacity: 0;
+  }
+
+  :host([effect="fall"][opened]) .content {
+    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;
+    transform: translateZ(0px) rotateX(0deg);
+    opacity: 1;
+  }
+
+  /* side-fall */
+  :host([effect="side-fall"]) {
+    perspective: 1300px;
+  }
+
+  :host([effect="side-fall"]) .content {
+    transform-style: preserve-3d;
+    transform: translate(30%) translateZ(600px) rotate(10deg);
+    opacity: 0;
+  }
+
+  :host([effect="side-fall"][opened]) .content {
+    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;
+    transform: translate(0%) translateZ(0) rotate(0deg);
+    opacity: 1;
+  }
+
+  /* flip-horizontal */
+  :host([effect="flip-horizontal"]) {
+    perspective: 1300px;
+  }
+
+  :host([effect="flip-horizontal"]) .content {
+    transform-style: preserve-3d;
+    transform: rotateY(-70deg);
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
+    opacity: 0;
+  }
+
+  :host([effect="flip-horizontal"][opened]) .content {
+    transform: rotateY(0deg);
+    opacity: 1;
+  }
+
+  /* flip-vertical */
+  :host([effect="flip-vertical"]) {
+    perspective: 1300px;
+  }
+
+  :host([effect="flip-vertical"]) .content {
+    transform-style: preserve-3d;
+    transform: rotateX(-70deg);
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
+    opacity: 0;
+  }
+
+  :host([effect="flip-vertical"][opened]) .content {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+
+  /* sign-3d */
+  :host([effect="sign-3d"]) {
+    perspective: 1300px;
+  }
+
+  :host([effect="sign-3d"]) .content {
+    transform-style: preserve-3d;
+    transform: rotateX(-60deg);
+    transform-origin: 50% 0;
+    opacity: 0;
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
+  }
+
+  :host([effect="sign-3d"][opened]) .content {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+
+  /* super-scaled */
+  :host([effect="super-scaled"]) .content {
+    transform: scale(2);
+    opacity: 0;
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
+  }
+
+  :host([effect="super-scaled"][opened]) .content {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  /* slit */
+  :host([effect="slit"]) {
+    perspective: 1300px;
+  }
+
+  :host([effect="slit"]) .content {
+    transform-style: preserve-3d;
+    transform: translateZ(-3000px) rotateY(90deg);
+    opacity: 0;
+  }
+
+  :host([effect="slit"][opened]) .content {
+    animation: slit .7s forwards ease-out;
+  }
+
+  @keyframes slit {
+    50% {
+      transform: translateZ(-250px) rotateY(89deg);
+      opacity: 1;
+      animation-timing-function: ease-in;}
+    100% {
+      transform: translateZ(0) rotateY(0deg);
+      opacity: 1;
+    }
+  }
+
+  /* rotate-bottom */
+  :host([effect="rotate-bottom"]) {
+    perspective: 1300px;
+  }
+
+  :host([effect="rotate-bottom"]) .content {
+    transform-style: preserve-3d;
+    transform: translateY(100%) rotateX(90deg);
+    transform-origin: 0 100%;
+    opacity: 0;
+    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-out;
+  }
+
+  :host([effect="rotate-bottom"][opened]) .content {
+    transform: translateY(0%) rotateX(0deg);
+    opacity: 1;
+  }
+
+  /* rotate-left */
+  :host([effect="rotate-left"]) {
+    perspective: 1300px;
+  }
+
+  :host([effect="rotate-left"]) .content {
+    transform-style: preserve-3d;
+    transform: translateZ(100px) translateX(-30%) rotateY(90deg);
+    transform-origin: 0 100%;
+    opacity: 0;
+    transition: all var(--kemet-modal-transition-speed, 0.3s);
+  }
+
+  :host([effect="rotate-left"][opened]) .content {
+    transform: translateZ(0px) translateX(0%) rotateY(0deg);
+    opacity: 1;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/src/components/kemet-modal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/kemet-modal/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuD5B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgN/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    position: fixed;\n    display: flex;\n    top: 0;\n    left: 0;\n    z-index: 99;\n    width: 100%;\n    height: 100vh;\n    visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  :host([opened]) {\n    visibility: visible;\n  }\n\n  .content {\n    position: relative;\n    z-index: 3;\n    margin: auto;\n    min-width: var(--kemet-modal-content-min-width, 0);\n    max-width: var(--kemet-modal-content-max-width, none);\n    background-color: var(--kemet-modal-content-background-color, var(--kemet-color-white-to-primary));\n  }\n\n  :host([mobile]) .content {\n    min-width: var(--kemet-modal-content-mobile-min-width, 100%);\n    min-height: var(--kemet-modal-content-mobile-min-height, 80vh);\n    padding: var(--kemet-modal-content-mobile-padding, 1rem);\n  }\n\n  .overlay {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    visibility: hidden;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    opacity: 0;\n    background: var(--kemet-modal-overlay-background-color, rgba(0,0,0,0.2));\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([opened]) .overlay {\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n\nexport const stylesEffects = css`\n  /* fadein-scaleup */\n  :host([effect=\"fadein-scaleup\"]) .content {\n    transform: scale(0.7);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"fadein-scaleup\"][opened]) .content {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  /* slide-right */\n  :host([effect=\"slide-right\"]) .content {\n    transform: translateX(20%);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);\n  }\n\n  :host([effect=\"slide-right\"][opened]) .content {\n    transform: translateX(0);\n    opacity: 1;\n  }\n\n  /* slide-bottom */\n  :host([effect=\"slide-bottom\"]) .content {\n    transform: translateY(20%);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"slide-bottom\"][opened]) .content {\n    transform: translateY(0);\n    opacity: 1;\n  }\n\n  /* newspaper */\n  :host([effect=\"newspaper\"]) .content {\n    transform: scale(0) rotate(720deg);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"newspaper\"][opened]) .content {\n    transform: scale(1) rotate(0deg);\n    opacity: 1;\n  }\n\n  /* fall */\n  :host([effect=\"fall\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"fall\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateZ(600px) rotateX(20deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"fall\"][opened]) .content {\n    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;\n    transform: translateZ(0px) rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* side-fall */\n  :host([effect=\"side-fall\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"side-fall\"]) .content {\n    transform-style: preserve-3d;\n    transform: translate(30%) translateZ(600px) rotate(10deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"side-fall\"][opened]) .content {\n    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-in;\n    transform: translate(0%) translateZ(0) rotate(0deg);\n    opacity: 1;\n  }\n\n  /* flip-horizontal */\n  :host([effect=\"flip-horizontal\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-horizontal\"]) .content {\n    transform-style: preserve-3d;\n    transform: rotateY(-70deg);\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-horizontal\"][opened]) .content {\n    transform: rotateY(0deg);\n    opacity: 1;\n  }\n\n  /* flip-vertical */\n  :host([effect=\"flip-vertical\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-vertical\"]) .content {\n    transform-style: preserve-3d;\n    transform: rotateX(-70deg);\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-vertical\"][opened]) .content {\n    transform: rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* sign-3d */\n  :host([effect=\"sign-3d\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"sign-3d\"]) .content {\n    transform-style: preserve-3d;\n    transform: rotateX(-60deg);\n    transform-origin: 50% 0;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"sign-3d\"][opened]) .content {\n    transform: rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* super-scaled */\n  :host([effect=\"super-scaled\"]) .content {\n    transform: scale(2);\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"super-scaled\"][opened]) .content {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  /* slit */\n  :host([effect=\"slit\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"slit\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateZ(-3000px) rotateY(90deg);\n    opacity: 0;\n  }\n\n  :host([effect=\"slit\"][opened]) .content {\n    animation: slit .7s forwards ease-out;\n  }\n\n  @keyframes slit {\n    50% {\n      transform: translateZ(-250px) rotateY(89deg);\n      opacity: 1;\n      animation-timing-function: ease-in;}\n    100% {\n      transform: translateZ(0) rotateY(0deg);\n      opacity: 1;\n    }\n  }\n\n  /* rotate-bottom */\n  :host([effect=\"rotate-bottom\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"rotate-bottom\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateY(100%) rotateX(90deg);\n    transform-origin: 0 100%;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s) ease-out;\n  }\n\n  :host([effect=\"rotate-bottom\"][opened]) .content {\n    transform: translateY(0%) rotateX(0deg);\n    opacity: 1;\n  }\n\n  /* rotate-left */\n  :host([effect=\"rotate-left\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"rotate-left\"]) .content {\n    transform-style: preserve-3d;\n    transform: translateZ(100px) translateX(-30%) rotateY(90deg);\n    transform-origin: 0 100%;\n    opacity: 0;\n    transition: all var(--kemet-modal-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"rotate-left\"][opened]) .content {\n    transform: translateZ(0px) translateX(0%) rotateY(0deg);\n    opacity: 1;\n  }\n`;\n"]}

package/dist/src/components/kemet-modal/types.d.ts

@@ -0,0 +1,8 @@
+export declare type TypeEffect = 'fadein-scaleup' | 'slide-right' | 'slide-bottom' | 'newspaper' | 'fall' | 'side-fall' | 'flip-horizontal' | 'flip-vertical' | 'sign-3d' | 'super-scaled' | 'slit' | 'rotate-bottom' | 'rotate-left';
+export interface KemetModalInterface extends HTMLElement {
+    opened?: boolean;
+    effect?: TypeEffect;
+    closeOnClick?: boolean;
+    breakpoint?: string;
+    mobile?: boolean;
+}