kemet-ui 3.1.0 → 4.0.1

package/dist/components/kemet-draggable/kemet-draggable.js

@@ -1,138 +0,0 @@
-import { __decorate } from "tslib";
-import { html, css, LitElement } from 'lit';
-import { customElement, property, query, state, } from 'lit/decorators.js';
-import { emitEvent } from '../../utilities/misc/events';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-draggable
- * @summary A draggable element with the ability to remember its position.
- *
- * @prop {string} memory - A unique identifier used to store the element's position in local storage.
- * @prop {string} top - The elements top position in pixels.
- * @prop {string} left - The element's left position in pixels.
- * @prop {boolean} measure - If set to true, will measure the width and height of the element's content and apply it to the host element.
- *
- * @event kemet-draggable-start
- * @event kemet-draggable-stop
- *
- */
-let KemetDraggable = class KemetDraggable extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.top = 'auto';
-        this.left = 'auto';
-        this.measure = false;
-    }
-    firstUpdated() {
-        // standard properties
-        /** @internal */
-        this.position1 = 0;
-        this.position2 = 0;
-        this.position3 = 0;
-        this.position4 = 0;
-        this.mouseMove = event => this.drag(event);
-        this.mouseUp = () => this.stopDrag();
-        const savedPosition = JSON.parse(localStorage.getItem(this.memory));
-        if (savedPosition) {
-            this.top = savedPosition.top;
-            this.left = savedPosition.left;
-        }
-        if (this.measure) {
-            this.measureContent();
-        }
-    }
-    render() {
-        return html `
-      <div id="draggable" @mousedown=${(event) => this.startDrag(event)} style="top:${this.top}; left:${this.left}">
-        <slot></slot>
-      </div>
-    `;
-    }
-    startDrag(event) {
-        if (event) {
-            event.preventDefault();
-            this.position3 = event.clientX;
-            this.position4 = event.clientY;
-        }
-        document.addEventListener('mouseup', this.mouseUp);
-        document.addEventListener('mousemove', this.mouseMove);
-        emitEvent(this, 'kemet-draggable-start', this);
-    }
-    drag(event) {
-        event.preventDefault();
-        this.position1 = this.position3 - event.clientX;
-        this.position2 = this.position4 - event.clientY;
-        this.position3 = event.clientX;
-        this.position4 = event.clientY;
-        if (this.draggableElement) {
-            this.top = `${this.draggableElement.offsetTop - this.position2}px`;
-            this.left = `${this.draggableElement.offsetLeft - this.position1}px`;
-        }
-    }
-    stopDrag() {
-        document.removeEventListener('mouseup', this.mouseUp);
-        document.removeEventListener('mousemove', this.mouseMove);
-        if (this.memory) {
-            const savedPosition = {
-                top: this.top,
-                left: this.left,
-            };
-            localStorage.setItem(this.memory, JSON.stringify(savedPosition));
-        }
-        emitEvent(this, 'kemet-draggable-stop', this);
-    }
-    measureContent() {
-        var _a, _b;
-        this.style.width = `${(_a = this.draggableElement) === null || _a === void 0 ? void 0 : _a.offsetWidth}px`;
-        this.style.height = `${(_b = this.draggableElement) === null || _b === void 0 ? void 0 : _b.offsetHeight}px`;
-    }
-};
-KemetDraggable.styles = [css `
-    :host {
-      display: inline-block;
-    }
-
-    #draggable {
-      position: absolute;
-    }
-  `];
-__decorate([
-    property({ type: String })
-], KemetDraggable.prototype, "memory", void 0);
-__decorate([
-    property({ type: String })
-], KemetDraggable.prototype, "top", void 0);
-__decorate([
-    property({ type: String })
-], KemetDraggable.prototype, "left", void 0);
-__decorate([
-    property({ type: Boolean })
-], KemetDraggable.prototype, "measure", void 0);
-__decorate([
-    state()
-], KemetDraggable.prototype, "position1", void 0);
-__decorate([
-    state()
-], KemetDraggable.prototype, "position2", void 0);
-__decorate([
-    state()
-], KemetDraggable.prototype, "position3", void 0);
-__decorate([
-    state()
-], KemetDraggable.prototype, "position4", void 0);
-__decorate([
-    state()
-], KemetDraggable.prototype, "mouseMove", void 0);
-__decorate([
-    state()
-], KemetDraggable.prototype, "mouseUp", void 0);
-__decorate([
-    query('#draggable')
-], KemetDraggable.prototype, "draggableElement", void 0);
-KemetDraggable = __decorate([
-    customElement('kemet-draggable')
-], KemetDraggable);
-export default KemetDraggable;
-//# sourceMappingURL=kemet-draggable.js.map

package/dist/components/kemet-draggable/kemet-draggable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-draggable.js","sourceRoot":"","sources":["../../../src/components/kemet-draggable/kemet-draggable.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport {\n customElement, property, query, state,\n} from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-draggable\n * @summary A draggable element with the ability to remember its position.\n *\n * @prop {string} memory - A unique identifier used to store the element's position in local storage.\n * @prop {string} top - The elements top position in pixels.\n * @prop {string} left - The element's left position in pixels.\n * @prop {boolean} measure - If set to true, will measure the width and height of the element's content and apply it to the host element.\n *\n * @event kemet-draggable-start\n * @event kemet-draggable-stop\n *\n */\n\n@customElement('kemet-draggable')\nexport default class KemetDraggable extends LitElement {\n  static styles = [css`\n    :host {\n      display: inline-block;\n    }\n\n    #draggable {\n      position: absolute;\n    }\n  `];\n\n  @property({ type: String })\n  memory: string;\n\n  @property({ type: String })\n  top: string = 'auto';\n\n  @property({ type: String })\n  left: string = 'auto';\n\n  @property({ type: Boolean })\n  measure: boolean = false;\n\n  /** @internal */\n  @state()\n  position1: number;\n\n  /** @internal */\n  @state()\n  position2: number;\n\n  /** @internal */\n  @state()\n  position3: number;\n\n  /** @internal */\n  @state()\n  position4: number;\n\n  /** @internal */\n  @state()\n  mouseMove: (event: MouseEvent) => void;\n\n  /** @internal */\n  @state()\n  mouseUp: () => void;\n\n  /** @internal */\n  @query('#draggable')\n  draggableElement: HTMLElement;\n\n  firstUpdated() {\n    // standard properties\n    /** @internal */\n    this.position1 = 0;\n    this.position2 = 0;\n    this.position3 = 0;\n    this.position4 = 0;\n    this.mouseMove = event => this.drag(event);\n    this.mouseUp = () => this.stopDrag();\n\n    const savedPosition = JSON.parse(localStorage.getItem(this.memory));\n\n    if (savedPosition) {\n      this.top = savedPosition.top;\n      this.left = savedPosition.left;\n    }\n\n    if (this.measure) {\n      this.measureContent();\n    }\n  }\n\n  render() {\n    return html`\n      <div id=\"draggable\" @mousedown=${(event: MouseEvent) => this.startDrag(event)} style=\"top:${this.top}; left:${this.left}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  startDrag(event: MouseEvent) {\n    if (event) {\n      event.preventDefault();\n\n      this.position3 = event.clientX;\n      this.position4 = event.clientY;\n    }\n\n    document.addEventListener('mouseup', this.mouseUp);\n    document.addEventListener('mousemove', this.mouseMove);\n\n    emitEvent(this, 'kemet-draggable-start', this);\n  }\n\n  drag(event: MouseEvent) {\n    event.preventDefault();\n\n    this.position1 = this.position3 - event.clientX;\n    this.position2 = this.position4 - event.clientY;\n    this.position3 = event.clientX;\n    this.position4 = event.clientY;\n\n    if (this.draggableElement) {\n      this.top = `${this.draggableElement.offsetTop - this.position2}px`;\n      this.left = `${this.draggableElement.offsetLeft - this.position1}px`;\n    }\n  }\n\n  stopDrag() {\n    document.removeEventListener('mouseup', this.mouseUp);\n    document.removeEventListener('mousemove', this.mouseMove);\n\n    if (this.memory) {\n      const savedPosition = {\n        top: this.top,\n        left: this.left,\n      };\n\n      localStorage.setItem(this.memory, JSON.stringify(savedPosition));\n    }\n\n    emitEvent(this, 'kemet-draggable-stop', this);\n  }\n\n  measureContent() {\n    this.style.width = `${this.draggableElement?.offsetWidth}px`;\n    this.style.height = `${this.draggableElement?.offsetHeight}px`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-draggable': KemetDraggable\n  }\n}\n"]}

package/dist/components/kemet-draggable/spec.d.ts

@@ -1 +0,0 @@
-import './kemet-draggable';

package/dist/components/kemet-draggable/spec.js

@@ -1,30 +0,0 @@
-import { html, render } from 'lit';
-import { expect } from '@wdio/globals';
-import { waitFor } from '@testing-library/dom';
-import './kemet-draggable';
-import drag from '../../utilities/misc/drag';
-describe('Draggable', () => {
-    const templates = {
-        default: html `
-      <kemet-draggable measure memory="memory">
-        <kemet-button>Drag Me!</kemet-button>
-      </kemet-draggable>
-    `,
-    };
-    it('should drag the component', async () => {
-        render(templates.default, document.body);
-        const kemetDraggable = document.querySelector('kemet-draggable');
-        const initialX = kemetDraggable.left;
-        const initialY = kemetDraggable.top;
-        await waitFor(async () => {
-            const draggable = kemetDraggable.shadowRoot.querySelector('#draggable');
-            await drag(draggable, {
-                to: { x: 0, y: 0 },
-                delta: { x: 100, y: 100 },
-            });
-            expect(kemetDraggable.style.left).not.toBe(initialX);
-            expect(kemetDraggable.style.top).not.toBe(initialY);
-        });
-    });
-});
-//# sourceMappingURL=spec.js.map

package/dist/components/kemet-draggable/spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-draggable/spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,IAAI,MAAM,2BAA2B,CAAC;AAE7C,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,MAAM,SAAS,GAAG;QAChB,OAAO,EAAE,IAAI,CAAA;;;;KAIZ;KACF,CAAC;IAEF,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QACjE,MAAM,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC;QACrC,MAAM,QAAQ,GAAG,cAAc,CAAC,GAAG,CAAC;QAEpC,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;YAExE,MAAM,IAAI,CAAC,SAAS,EAAE;gBACpB,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;gBAClB,KAAK,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;aAC1B,CAAC,CAAC;YAEH,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACrD,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACtD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport { waitFor } from '@testing-library/dom';\n\nimport './kemet-draggable';\nimport drag from '../../utilities/misc/drag';\n\ndescribe('Draggable', () => {\n  const templates = {\n    default: html`\n      <kemet-draggable measure memory=\"memory\">\n        <kemet-button>Drag Me!</kemet-button>\n      </kemet-draggable>\n    `,\n  };\n\n  it('should drag the component', async () => {\n    render(templates.default, document.body);\n    const kemetDraggable = document.querySelector('kemet-draggable');\n    const initialX = kemetDraggable.left;\n    const initialY = kemetDraggable.top;\n\n    await waitFor(async () => {\n      const draggable = kemetDraggable.shadowRoot.querySelector('#draggable');\n\n      await drag(draggable, {\n        to: { x: 0, y: 0 },\n        delta: { x: 100, y: 100 },\n      });\n\n      expect(kemetDraggable.style.left).not.toBe(initialX);\n      expect(kemetDraggable.style.top).not.toBe(initialY);\n    });\n  });\n});\n"]}

package/dist/components/kemet-drawer/docs/stories.d.ts

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-drawer';
-import '../../kemet-button/kemet-button';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Standard: Story;
-export declare const Overlay: Story;
-export declare const Top: Story;
-export declare const Right: Story;
-export declare const Bottom: Story;
-export declare const Push: Story;
-export declare const Scale: Story;

package/dist/components/kemet-drawer/docs/stories.js

@@ -1,90 +0,0 @@
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import '../kemet-drawer';
-import '../../kemet-button/kemet-button';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-const meta = {
-    title: 'Components / Drawer',
-    component: 'kemet-drawer',
-    argTypes: {
-        effect: {
-            control: { type: 'select' },
-            options: ['slide', 'reveal', 'push', 'scale'],
-        },
-        side: {
-            control: { type: 'select' },
-            options: ['top', 'right', 'bottom', 'left'],
-        },
-    },
-};
-export default meta;
-const Template = (args) => {
-    return html `
-    <kemet-drawer ?opened=${args.opened} effect="${ifDefined(args.effect)}" side="${ifDefined(args.side)}" ?overlay=${args.overlay}>
-      <nav slot="navigation" kemet-padding="2xl">
-        <p>Your navigation goes here.</p>
-        <kemet-button @click=${(event) => toggleDrawer(event)}>Toggle the Drawer</kemet-button>
-      </nav>
-      <section slot="content">
-        <div kemet-padding="2xl">
-          <h2>Your content goes here.</h2>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Pharetra magna ac placerat vestibulum lectus. Placerat duis ultricies lacus sed turpis tincidunt id aliquet. Turpis egestas maecenas pharetra convallis posuere. Gravida in fermentum et sollicitudin ac orci phasellus egestas. Faucibus a pellentesque sit amet porttitor eget. Vitae aliquet nec ullamcorper sit. Nisi lacus sed viverra tellus in hac habitasse platea. Aenean sed adipiscing diam donec adipiscing. Nunc eget lorem dolor sed. Fermentum dui faucibus in ornare quam viverra. Eget arcu dictum varius duis at consectetur lorem donec.</p>
-          <br />
-          <kemet-button @click=${(event) => toggleDrawer(event)}>Toggle the Drawer</kemet-button>
-        </div>
-      </section>
-    </kemet-drawer>
-  `;
-};
-const toggleDrawer = (event) => {
-    const drawer = event.target.closest('kemet-drawer');
-    drawer.opened = !drawer.opened;
-};
-export const Standard = {
-    render: args => Template(args),
-};
-export const Overlay = {
-    render: args => Template(args),
-    args: {
-        overlay: true,
-    }
-};
-export const Top = {
-    render: args => Template(args),
-    args: {
-        overlay: true,
-        side: 'top'
-    }
-};
-export const Right = {
-    render: args => Template(args),
-    args: {
-        overlay: true,
-        side: 'right'
-    }
-};
-export const Bottom = {
-    render: args => Template(args),
-    args: {
-        overlay: true,
-        side: 'bottom'
-    }
-};
-export const Push = {
-    render: args => Template(args),
-    args: {
-        overlay: true,
-        effect: 'push'
-    }
-};
-export const Scale = {
-    render: args => Template(args),
-    args: {
-        overlay: true,
-        effect: 'scale'
-    }
-};
-//# sourceMappingURL=stories.js.map

package/dist/components/kemet-drawer/docs/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-drawer/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-drawer';\n\nimport '../../kemet-button/kemet-button';\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Drawer',\n  component: 'kemet-drawer',\n  argTypes: {\n    effect: {\n      control: { type: 'select' },\n      options: ['slide', 'reveal', 'push', 'scale'],\n    },\n    side: {\n      control: { type: 'select' },\n      options: ['top', 'right', 'bottom', 'left'],\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  return html`\n    <kemet-drawer ?opened=${args.opened} effect=\"${ifDefined(args.effect)}\" side=\"${ifDefined(args.side)}\" ?overlay=${args.overlay}>\n      <nav slot=\"navigation\" kemet-padding=\"2xl\">\n        <p>Your navigation goes here.</p>\n        <kemet-button @click=${(event) => toggleDrawer(event)}>Toggle the Drawer</kemet-button>\n      </nav>\n      <section slot=\"content\">\n        <div kemet-padding=\"2xl\">\n          <h2>Your content goes here.</h2>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n          <p>Pharetra magna ac placerat vestibulum lectus. Placerat duis ultricies lacus sed turpis tincidunt id aliquet. Turpis egestas maecenas pharetra convallis posuere. Gravida in fermentum et sollicitudin ac orci phasellus egestas. Faucibus a pellentesque sit amet porttitor eget. Vitae aliquet nec ullamcorper sit. Nisi lacus sed viverra tellus in hac habitasse platea. Aenean sed adipiscing diam donec adipiscing. Nunc eget lorem dolor sed. Fermentum dui faucibus in ornare quam viverra. Eget arcu dictum varius duis at consectetur lorem donec.</p>\n          <br />\n          <kemet-button @click=${(event) => toggleDrawer(event)}>Toggle the Drawer</kemet-button>\n        </div>\n      </section>\n    </kemet-drawer>\n  `;\n};\n\nconst toggleDrawer = (event) => {\n  const drawer = event.target.closest('kemet-drawer');\n  drawer.opened = !drawer.opened;\n};\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const Overlay: Story = {\n  render: args => Template(args),\n  args: {\n    overlay: true,\n  }\n};\n\nexport const Top: Story = {\n  render: args => Template(args),\n  args: {\n    overlay: true,\n    side: 'top'\n  }\n};\n\nexport const Right: Story = {\n  render: args => Template(args),\n  args: {\n    overlay: true,\n    side: 'right'\n  }\n};\n\nexport const Bottom: Story = {\n  render: args => Template(args),\n  args: {\n    overlay: true,\n    side: 'bottom'\n  }\n};\n\nexport const Push: Story = {\n  render: args => Template(args),\n  args: {\n    overlay: true,\n    effect: 'push'\n  }\n};\n\nexport const Scale: Story = {\n  render: args => Template(args),\n  args: {\n    overlay: true,\n    effect: 'scale'\n  }\n};\n"]}

package/dist/components/kemet-drawer/kemet-drawer.d.ts

@@ -1,48 +0,0 @@
-import { LitElement } from 'lit';
-import { TypeEffect, TypeSide } from './types';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-drawer
- * @summary A component that adds an off-canvas menu with different effects.
- *
- * @prop {boolean} opened - Determines if the drawer is opened or not.
- * @prop {string} effect - The animation effect for opening and closing the drawer. Values include: (slide | reveal | push | scale)
- * @prop {string} side - Allows you to control which side the drawer opens from. Values include: (left | right | top | bottom)
- * @prop {boolean} overlay - Adds an overlay over the content section of the Drawer when opened
- *
- * @slot navigation - The off-screen nav area of your app or site
- * @slot content - The main content area of your app or site.
- *
- * @csspart container
- * @csspart drawer
- * @csspart pusher
- * @csspart content
- * @csspart wrapper
- *
- * @cssproperty --kemet-drawer-width - The width of the drawer.
- * @cssproperty --kemet-drawer-height - The height of the drawer.
- * @cssproperty --kemet-drawer-color - The text color of the drawer.
- * @cssproperty --kemet-drawer-background-color - The background color of the drawer.
- * @cssproperty --kemet-drawer-overlay-color - The color of the overlay.
- *
- * @event kemet-drawer-opened - Fires when the drawer opens.
- * @event kemet-drawer-closed - Fires when the drawer closes.
- *
- */
-export default class KemetDrawer extends LitElement {
-    static styles: import("lit").CSSResult[];
-    opened: boolean;
-    effect: TypeEffect;
-    side: TypeSide;
-    overlay: boolean;
-    firstUpdated(): void;
-    updated(prevProps: Map<string, never>): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-drawer': KemetDrawer;
-    }
-}

package/dist/components/kemet-drawer/kemet-drawer.js

@@ -1,95 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesBase, stylesEffects } from './styles';
-/**
- * @since 1.0.0
- * @status stable
- *
- * @tagname kemet-drawer
- * @summary A component that adds an off-canvas menu with different effects.
- *
- * @prop {boolean} opened - Determines if the drawer is opened or not.
- * @prop {string} effect - The animation effect for opening and closing the drawer. Values include: (slide | reveal | push | scale)
- * @prop {string} side - Allows you to control which side the drawer opens from. Values include: (left | right | top | bottom)
- * @prop {boolean} overlay - Adds an overlay over the content section of the Drawer when opened
- *
- * @slot navigation - The off-screen nav area of your app or site
- * @slot content - The main content area of your app or site.
- *
- * @csspart container
- * @csspart drawer
- * @csspart pusher
- * @csspart content
- * @csspart wrapper
- *
- * @cssproperty --kemet-drawer-width - The width of the drawer.
- * @cssproperty --kemet-drawer-height - The height of the drawer.
- * @cssproperty --kemet-drawer-color - The text color of the drawer.
- * @cssproperty --kemet-drawer-background-color - The background color of the drawer.
- * @cssproperty --kemet-drawer-overlay-color - The color of the overlay.
- *
- * @event kemet-drawer-opened - Fires when the drawer opens.
- * @event kemet-drawer-closed - Fires when the drawer closes.
- *
- */
-let KemetDrawer = class KemetDrawer extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.opened = undefined;
-        this.effect = 'slide';
-        this.side = 'left';
-        this.overlay = false;
-    }
-    firstUpdated() {
-        this.addEventListener('click', (event) => {
-            const targetElement = event.target;
-            if (this.opened && targetElement.tagName.toLowerCase() === 'kemet-drawer') {
-                this.opened = false;
-            }
-        });
-    }
-    updated(prevProps) {
-        if (!prevProps.get('opened') && this.opened === true) {
-            emitEvent(this, 'kemet-drawer-opened', this);
-        }
-        if (prevProps.get('opened') && this.opened === false) {
-            emitEvent(this, 'kemet-drawer-closed', this);
-        }
-    }
-    render() {
-        return html `
-      <section class="off-canvas" part="container">
-        <nav class="off-canvas__nav" part="drawer" title="Drawer">
-          <slot name="navigation"></slot>
-        </nav>
-        <div class="off-canvas__pusher" part="pusher">
-          <div class="off-canvas__content" part="content">
-            <div class="off-canvas__wrapper" part="wrapper">
-              <slot name="content"></slot>
-            </div>
-          </div>
-        </div>
-      </section>
-    `;
-    }
-};
-KemetDrawer.styles = [stylesBase, stylesEffects];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetDrawer.prototype, "opened", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetDrawer.prototype, "effect", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetDrawer.prototype, "side", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetDrawer.prototype, "overlay", void 0);
-KemetDrawer = __decorate([
-    customElement('kemet-drawer')
-], KemetDrawer);
-export default KemetDrawer;
-//# sourceMappingURL=kemet-drawer.js.map

package/dist/components/kemet-drawer/kemet-drawer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-drawer.js","sourceRoot":"","sources":["../../../src/components/kemet-drawer/kemet-drawer.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAGY,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAIb,WAAM,GAAY,SAAS,CAAC;QAG5B,WAAM,GAAe,OAAO,CAAC;QAG7B,SAAI,GAAa,MAAM,CAAC;QAGxB,YAAO,GAAY,KAAK,CAAC;IAqC3B,CAAC;IAnCC,YAAY;QACV,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACvC,MAAM,aAAa,GAAG,KAAK,CAAC,MAAqB,CAAC;YAClD,IAAI,IAAI,CAAC,MAAM,IAAI,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,cAAc,EAAE,CAAC;gBAC1E,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,CAAC,SAA6B;QACnC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;YACrD,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,CAAC;QAC/C,CAAC;QAED,IAAI,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;YACrD,SAAS,CAAC,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;KAaV,CAAC;IACJ,CAAC;;AAhDM,kBAAM,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC,AAA9B,CAA+B;AAG5C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACf;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACb;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAClB;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAClB;AAbN,WAAW;IAD/B,aAAa,CAAC,cAAc,CAAC;GACT,WAAW,CAkD/B;eAlDoB,WAAW","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { TypeEffect, TypeSide } from './types';\nimport { stylesBase, stylesEffects } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-drawer\n * @summary A component that adds an off-canvas menu with different effects.\n *\n * @prop {boolean} opened - Determines if the drawer is opened or not.\n * @prop {string} effect - The animation effect for opening and closing the drawer. Values include: (slide | reveal | push | scale)\n * @prop {string} side - Allows you to control which side the drawer opens from. Values include: (left | right | top | bottom)\n * @prop {boolean} overlay - Adds an overlay over the content section of the Drawer when opened\n *\n * @slot navigation - The off-screen nav area of your app or site\n * @slot content - The main content area of your app or site.\n *\n * @csspart container\n * @csspart drawer\n * @csspart pusher\n * @csspart content\n * @csspart wrapper\n *\n * @cssproperty --kemet-drawer-width - The width of the drawer.\n * @cssproperty --kemet-drawer-height - The height of the drawer.\n * @cssproperty --kemet-drawer-color - The text color of the drawer.\n * @cssproperty --kemet-drawer-background-color - The background color of the drawer.\n * @cssproperty --kemet-drawer-overlay-color - The color of the overlay.\n *\n * @event kemet-drawer-opened - Fires when the drawer opens.\n * @event kemet-drawer-closed - Fires when the drawer closes.\n *\n */\n\n@customElement('kemet-drawer')\nexport default class KemetDrawer extends LitElement {\n  static styles = [stylesBase, stylesEffects];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean = undefined;\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect = 'slide';\n\n  @property({ type: String, reflect: true })\n  side: TypeSide = 'left';\n\n  @property({ type: Boolean, reflect: true })\n  overlay: boolean = false;\n\n  firstUpdated() {\n    this.addEventListener('click', (event) => {\n      const targetElement = event.target as HTMLElement;\n      if (this.opened && targetElement.tagName.toLowerCase() === 'kemet-drawer') {\n        this.opened = false;\n      }\n    });\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-drawer-opened', this);\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      emitEvent(this, 'kemet-drawer-closed', this);\n    }\n  }\n\n  render() {\n    return html`\n      <section class=\"off-canvas\" part=\"container\">\n        <nav class=\"off-canvas__nav\" part=\"drawer\" title=\"Drawer\">\n          <slot name=\"navigation\"></slot>\n        </nav>\n        <div class=\"off-canvas__pusher\" part=\"pusher\">\n          <div class=\"off-canvas__content\" part=\"content\">\n            <div class=\"off-canvas__wrapper\" part=\"wrapper\">\n              <slot name=\"content\"></slot>\n            </div>\n          </div>\n        </div>\n      </section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-drawer': KemetDrawer\n  }\n}\n"]}

package/dist/components/kemet-drawer/spec.d.ts

@@ -1 +0,0 @@
-import './kemet-drawer';

package/dist/components/kemet-drawer/spec.js

@@ -1,21 +0,0 @@
-import { html, render } from 'lit';
-import { expect } from '@wdio/globals';
-import userEvent from '@testing-library/user-event';
-import './kemet-drawer';
-describe('Drawer', () => {
-    const templates = {
-        default: html `
-      <kemet-drawer opened>
-        <nav slot="navigation">Your navigation goes here.</nav>
-        <section slot="content">Your content goes here.</section>
-      </kemet-drawer>
-    `,
-    };
-    it('should close when self is clicked', async () => {
-        render(templates.default, document.body);
-        const kemetDrawer = document.querySelector('kemet-drawer');
-        await userEvent.click(kemetDrawer);
-        expect(kemetDrawer.opened).toBe(false);
-    });
-});
-//# sourceMappingURL=spec.js.map

package/dist/components/kemet-drawer/spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-drawer/spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,OAAO,gBAAgB,CAAC;AAExB,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,MAAM,SAAS,GAAG;QAChB,OAAO,EAAE,IAAI,CAAA;;;;;KAKZ;KACF,CAAC;IAEF,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC3D,MAAM,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACnC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport userEvent from '@testing-library/user-event';\n\nimport './kemet-drawer';\n\ndescribe('Drawer', () => {\n  const templates = {\n    default: html`\n      <kemet-drawer opened>\n        <nav slot=\"navigation\">Your navigation goes here.</nav>\n        <section slot=\"content\">Your content goes here.</section>\n      </kemet-drawer>\n    `,\n  };\n\n  it('should close when self is clicked', async () => {\n    render(templates.default, document.body);\n    const kemetDrawer = document.querySelector('kemet-drawer');\n    await userEvent.click(kemetDrawer);\n    expect(kemetDrawer.opened).toBe(false);\n  });\n});\n"]}

package/dist/components/kemet-drawer/styles.d.ts

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