kemet-ui 3.1.0 → 4.0.0

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

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-accordion.js","sourceRoot":"","sources":["../../../src/components/kemet-accordion/kemet-accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase } from './styles';\nimport KemetAccordionPanel from './kemet-accordion-panel';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-accordion\n * @summary A component that acts like a standard accordion.\n *\n * @prop {number} currentPanel - The index value for the most recently opened panel\n * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened\n *\n */\n\n@customElement('kemet-accordion')\nexport default class KemetAccordion extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Number, attribute: 'current-panel' })\n  currentPanel: number = 0;\n\n  @property({ type: Boolean, attribute: 'toggle-panels' })\n  togglePanels: boolean = false;\n\n  /** @internal */\n  @state()\n  panels: NodeListOf<KemetAccordionPanel>;\n\n  /** @internal */\n  @state()\n  onKeyDown: (event: KeyboardEvent) => void;\n\n  /** @internal */\n  @state()\n  currentPanelFocus: number;\n\n  constructor() {\n    super();\n\n    // bindings\n    this.addEventListener('kemet-accordion-panel-opened', this.handlePanelOpened.bind(this));\n  }\n\n  firstUpdated() {\n    this.onKeyDown = event => this.handleKeyDown(event);\n  }\n\n  render() {\n    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;\n  }\n\n  handleSlotChange() {\n    this.panels = this.querySelectorAll('kemet-accordion-panel');\n\n    this.panels.forEach((panel: KemetAccordionPanel, index) => {\n      panel.index = index;\n      panel.removeEventListener('keydown', this.onKeyDown);\n      panel.addEventListener('keydown', this.onKeyDown);\n    });\n  }\n\n  handlePanelOpened(event: CustomEvent) {\n    this.panels?.forEach((panel: KemetAccordionPanel) => {\n      if (panel === event.detail) {\n        this.currentPanel = panel.index;\n      }\n    });\n\n    if (this.togglePanels) {\n      this.panels?.forEach((panel: KemetAccordionPanel) => {\n        if (panel !== event.detail) {\n          panel.opened = false;\n        }\n      });\n    }\n  }\n\n  navigatePanels(direction: string) {\n    switch (direction) {\n      case 'home':\n        this.currentPanel = 0;\n        break;\n      case 'end':\n        this.currentPanel = this.panels.length - 1;\n        break;\n      case 'next':\n        this.currentPanel += 1;\n        break;\n      case 'prev':\n        this.currentPanel -= 1;\n        break;\n      default:\n        this.currentPanelFocus = 0;\n        break;\n    }\n\n    if (this.currentPanel > this.panels.length - 1) this.currentPanel = 0;\n    if (this.currentPanel < 0) this.currentPanel = this.panels.length - 1;\n\n    this.panels[this.currentPanel].shadowRoot.querySelector('button').focus();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    switch (event.key) {\n      case 'Enter':\n      case 'Space':\n        event.preventDefault();\n        target.click();\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.navigatePanels('prev');\n        break;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.navigatePanels('next');\n        break;\n      case 'End':\n        event.preventDefault();\n        this.navigatePanels('end');\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.navigatePanels('home');\n        break;\n      default:\n        break;\n    }\n  }\n\n  expandAll() {\n    this.panels.forEach((panel) => {\n      panel.opened = true;\n    });\n  }\n\n  collapseAll() {\n    this.panels.forEach((panel) => {\n      panel.opened = false;\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-accordion': KemetAccordion\n  }\n}\n"]}

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

@@ -1,2 +0,0 @@
-import './kemet-accordion';
-import './kemet-accordion-panel';

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

@@ -1,132 +0,0 @@
-import { html, render } from 'lit';
-import { expect } from '@wdio/globals';
-import userEvent from '@testing-library/user-event';
-import { fireEvent, getByText, waitFor } from '@testing-library/dom';
-import './kemet-accordion';
-import './kemet-accordion-panel';
-describe('Accordion', () => {
-    const templates = {
-        default: html `
-      <kemet-accordion toggle-panels>
-        <kemet-accordion-panel>
-          <h3 slot="trigger">Trigger 1</h3>
-          <svg slot="icon" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
-            <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"></path>
-          </svg>
-          <svg slot="icon-opened" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
-            <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"></path>
-          </svg>
-          <div slot="body">
-            <p><a href="https://google.com">Google</a>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
-          </div>
-        </kemet-accordion-panel>
-        <kemet-accordion-panel>
-          <h3 slot="trigger">Trigger 2</h3>
-          <svg slot="icon" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
-            <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"></path>
-          </svg>
-          <svg slot="icon-opened" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
-            <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"></path>
-          </svg>
-          <div slot="body">
-            <p><a href="https://google.com">Google</a> The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
-          </div>
-        </kemet-accordion-panel>
-        <kemet-accordion-panel>
-          <h3 slot="trigger">Trigger 3</h3>
-          <svg slot="icon" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
-            <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"></path>
-          </svg>
-          <svg slot="icon-opened" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
-            <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"></path>
-          </svg>
-          <div slot="body">
-            <p><a href="https://google.com">Google</a> The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
-          </div>
-        </kemet-accordion-panel>
-      </kemet-accordion>
-    `,
-    };
-    it('opens a closed panel', async () => {
-        render(templates.default, document.body);
-        const trigger1 = getByText(document.documentElement, 'Trigger 1');
-        const kemetPanel = trigger1.closest('kemet-accordion-panel');
-        await userEvent.click(trigger1);
-        expect(kemetPanel.opened).toBe(true);
-    });
-    it('toggles a panel correctly', async () => {
-        render(templates.default, document.body);
-        const kemetPanel = document.querySelector('kemet-accordion-panel');
-        await waitFor(() => {
-            kemetPanel.toggle();
-            expect(kemetPanel.hasAttribute('opened')).toBe(false);
-        });
-    });
-    it('open a panel with the enter key', async () => {
-        render(templates.default, document.body);
-        const trigger1 = getByText(document.documentElement, 'Trigger 1');
-        const kemetPanel = trigger1.closest('kemet-accordion-panel');
-        trigger1.focus();
-        fireEvent.keyDown(trigger1, { key: 'Enter' });
-        expect(kemetPanel.opened).toBe(true);
-    });
-    it('should toggle panels', async () => {
-        render(templates.default, document.body);
-        const trigger1 = getByText(document.documentElement, 'Trigger 1');
-        const trigger2 = getByText(document.documentElement, 'Trigger 2');
-        const panel1 = trigger1.closest('kemet-accordion-panel');
-        await waitFor(async () => {
-            await userEvent.click(trigger1);
-            expect(panel1.opened).toBe(true);
-            await userEvent.click(trigger2);
-            expect(panel1.opened).toBe(false);
-        });
-    });
-    it('should expand and collapse all panels', () => {
-        render(templates.default, document.body);
-        const accordion = document.querySelector('kemet-accordion');
-        const panel1 = getByText(document.documentElement, 'Trigger 1').closest('kemet-accordion-panel');
-        const panel2 = getByText(document.documentElement, 'Trigger 2').closest('kemet-accordion-panel');
-        const panel3 = getByText(document.documentElement, 'Trigger 3').closest('kemet-accordion-panel');
-        accordion.expandAll();
-        expect(panel1.opened).toBe(true);
-        expect(panel2.opened).toBe(true);
-        expect(panel3.opened).toBe(true);
-        accordion.collapseAll();
-        expect(panel1.opened).toBe(false);
-        expect(panel2.opened).toBe(false);
-        expect(panel3.opened).toBe(false);
-    });
-    it('should handle keyboard navigation', async () => {
-        render(templates.default, document.body);
-        const accordion = document.querySelector('kemet-accordion');
-        const trigger1 = getByText(document.documentElement, 'Trigger 1');
-        fireEvent.keyDown(trigger1, { key: 'ArrowDown' });
-        expect(accordion.currentPanel).toBe(2);
-        fireEvent.keyDown(trigger1, { key: 'ArrowUp' });
-        expect(accordion.currentPanel).toBe(1);
-        fireEvent.keyDown(trigger1, { key: 'ArrowRight' });
-        expect(accordion.currentPanel).toBe(2);
-        fireEvent.keyDown(trigger1, { key: 'ArrowLeft' });
-        expect(accordion.currentPanel).toBe(1);
-        fireEvent.keyDown(trigger1, { key: 'Home' });
-        expect(accordion.currentPanel).toBe(0);
-        fireEvent.keyDown(trigger1, { key: 'End' });
-        expect(accordion.currentPanel).toBe(2);
-    });
-    it('should loop back to first panel when end of panels is reached', () => {
-        render(templates.default, document.body);
-        const accordion = document.querySelector('kemet-accordion');
-        const trigger1 = getByText(document.documentElement, 'Trigger 1');
-        fireEvent.keyDown(trigger1, { key: 'ArrowDown' });
-        expect(accordion.currentPanel).toBe(0);
-    });
-    it('should go to last panel when up is pressed on first panel', () => {
-        render(templates.default, document.body);
-        const accordion = document.querySelector('kemet-accordion');
-        const trigger1 = getByText(document.documentElement, 'Trigger 1');
-        fireEvent.keyDown(trigger1, { key: 'ArrowUp' });
-        expect(accordion.currentPanel).toBe(2);
-    });
-});
-//# sourceMappingURL=spec.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-accordion/spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport userEvent from '@testing-library/user-event';\nimport { fireEvent, getByText, waitFor } from '@testing-library/dom';\n\nimport './kemet-accordion';\nimport './kemet-accordion-panel';\n\ndescribe('Accordion', () => {\n  const templates = {\n    default: html`\n      <kemet-accordion toggle-panels>\n        <kemet-accordion-panel>\n          <h3 slot=\"trigger\">Trigger 1</h3>\n          <svg slot=\"icon\" width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n            <path fill-rule=\"evenodd\" d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708\"></path>\n          </svg>\n          <svg slot=\"icon-opened\" width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n            <path fill-rule=\"evenodd\" d=\"M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z\"></path>\n          </svg>\n          <div slot=\"body\">\n            <p><a href=\"https://google.com\">Google</a>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>\n          </div>\n        </kemet-accordion-panel>\n        <kemet-accordion-panel>\n          <h3 slot=\"trigger\">Trigger 2</h3>\n          <svg slot=\"icon\" width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n            <path fill-rule=\"evenodd\" d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708\"></path>\n          </svg>\n          <svg slot=\"icon-opened\" width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n            <path fill-rule=\"evenodd\" d=\"M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z\"></path>\n          </svg>\n          <div slot=\"body\">\n            <p><a href=\"https://google.com\">Google</a> The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>\n          </div>\n        </kemet-accordion-panel>\n        <kemet-accordion-panel>\n          <h3 slot=\"trigger\">Trigger 3</h3>\n          <svg slot=\"icon\" width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n            <path fill-rule=\"evenodd\" d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708\"></path>\n          </svg>\n          <svg slot=\"icon-opened\" width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n            <path fill-rule=\"evenodd\" d=\"M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z\"></path>\n          </svg>\n          <div slot=\"body\">\n            <p><a href=\"https://google.com\">Google</a> The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>\n          </div>\n        </kemet-accordion-panel>\n      </kemet-accordion>\n    `,\n  };\n\n  it('opens a closed panel', async () => {\n    render(templates.default, document.body);\n    const trigger1 = getByText(document.documentElement, 'Trigger 1');\n    const kemetPanel = trigger1.closest('kemet-accordion-panel');\n    await userEvent.click(trigger1);\n    expect(kemetPanel.opened).toBe(true);\n  });\n\n  it('toggles a panel correctly', async () => {\n    render(templates.default, document.body);\n    const kemetPanel = document.querySelector('kemet-accordion-panel');\n\n    await waitFor(() => {\n      kemetPanel.toggle();\n      expect(kemetPanel.hasAttribute('opened')).toBe(false);\n    });\n  });\n\n  it('open a panel with the enter key', async () => {\n    render(templates.default, document.body);\n    const trigger1 = getByText(document.documentElement, 'Trigger 1');\n    const kemetPanel = trigger1.closest('kemet-accordion-panel');\n    trigger1.focus();\n    fireEvent.keyDown(trigger1, { key: 'Enter' });\n    expect(kemetPanel.opened).toBe(true);\n  });\n\n  it('should toggle panels', async () => {\n    render(templates.default, document.body);\n\n    const trigger1 = getByText(document.documentElement, 'Trigger 1');\n    const trigger2 = getByText(document.documentElement, 'Trigger 2');\n    const panel1 = trigger1.closest('kemet-accordion-panel');\n\n    await waitFor(async () => {\n      await userEvent.click(trigger1);\n      expect(panel1.opened).toBe(true);\n      await userEvent.click(trigger2);\n      expect(panel1.opened).toBe(false);\n    });\n  });\n\n  it('should expand and collapse all panels', () => {\n    render(templates.default, document.body);\n\n    const accordion = document.querySelector('kemet-accordion');\n    const panel1 = getByText(document.documentElement, 'Trigger 1').closest('kemet-accordion-panel');\n    const panel2 = getByText(document.documentElement, 'Trigger 2').closest('kemet-accordion-panel');\n    const panel3 = getByText(document.documentElement, 'Trigger 3').closest('kemet-accordion-panel');\n\n    accordion.expandAll();\n\n    expect(panel1.opened).toBe(true);\n    expect(panel2.opened).toBe(true);\n    expect(panel3.opened).toBe(true);\n\n    accordion.collapseAll();\n\n    expect(panel1.opened).toBe(false);\n    expect(panel2.opened).toBe(false);\n    expect(panel3.opened).toBe(false);\n  });\n\n  it('should handle keyboard navigation', async () => {\n    render(templates.default, document.body);\n\n    const accordion = document.querySelector('kemet-accordion');\n    const trigger1 = getByText(document.documentElement, 'Trigger 1');\n\n    fireEvent.keyDown(trigger1, { key: 'ArrowDown' });\n    expect(accordion.currentPanel).toBe(2);\n    fireEvent.keyDown(trigger1, { key: 'ArrowUp' });\n    expect(accordion.currentPanel).toBe(1);\n    fireEvent.keyDown(trigger1, { key: 'ArrowRight' });\n    expect(accordion.currentPanel).toBe(2);\n    fireEvent.keyDown(trigger1, { key: 'ArrowLeft' });\n    expect(accordion.currentPanel).toBe(1);\n    fireEvent.keyDown(trigger1, { key: 'Home' });\n    expect(accordion.currentPanel).toBe(0);\n    fireEvent.keyDown(trigger1, { key: 'End' });\n    expect(accordion.currentPanel).toBe(2);\n  });\n\n  it('should loop back to first panel when end of panels is reached', () => {\n    render(templates.default, document.body);\n    const accordion = document.querySelector('kemet-accordion');\n    const trigger1 = getByText(document.documentElement, 'Trigger 1');\n    fireEvent.keyDown(trigger1, { key: 'ArrowDown' });\n    expect(accordion.currentPanel).toBe(0);\n  });\n\n  it('should go to last panel when up is pressed on first panel', () => {\n    render(templates.default, document.body);\n    const accordion = document.querySelector('kemet-accordion');\n    const trigger1 = getByText(document.documentElement, 'Trigger 1');\n    fireEvent.keyDown(trigger1, { key: 'ArrowUp' });\n    expect(accordion.currentPanel).toBe(2);\n  });\n});\n"]}

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

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

package/dist/components/kemet-accordion/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-accordion/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAI,GAAG,CAAA;;;;CAI7B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC7B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase =  css`\n  :host {\n    display: block;\n  }\n`;\n\nexport const stylesPanel = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    display: block;\n    padding: 1.5rem 1rem;\n    border-bottom: 1px solid rgb(var(--kemet-color-foreground));\n  }\n\n  .trigger {\n    color: inherit;\n    cursor: pointer;\n    display: grid;\n    gap: 1rem;\n    grid-template-columns: 1fr auto;\n    width: 100%;\n    text-align: left;\n    padding: 0;\n    border: none;\n    background: none;\n  }\n\n  .body {\n    overflow: hidden;\n    transition: all 300ms ease;\n  }\n\n  ::slotted([slot='body']) {\n    padding: 1rem 0;\n  }\n`;\n"]}

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

@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-alert';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-import '../../kemet-icon/kemet-icon';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Standard: Story;
-export declare const Heading: Story;
-export declare const Icon: Story;
-export declare const Closable: Story;
-export declare const BorderTop: Story;
-export declare const BorderRight: Story;
-export declare const BorderBottom: Story;
-export declare const BorderLeft: Story;
-export declare const Primary: Story;
-export declare const Success: Story;
-export declare const Warning: Story;
-export declare const Error: Story;

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

@@ -1,222 +0,0 @@
-import { html, nothing } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { userEvent, within, expect } from '@storybook/test';
-import '../kemet-alert';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-import '../../kemet-icon/kemet-icon';
-const meta = {
-    title: 'Components / Alert',
-    component: 'kemet-alert',
-    argTypes: {
-        heading: {
-            control: { type: 'text' },
-        },
-        text: {
-            control: { type: 'text' },
-        },
-        icon: {
-            control: { type: 'select' },
-            options: ['none', 'info-circle', 'check-circle', 'gear', 'exclamation-circle'],
-        },
-        status: {
-            control: { type: 'select' },
-            options: ['standard', 'primary', 'success', 'warning', 'error'],
-        },
-        closable: {
-            control: { type: 'boolean' },
-        },
-        border: {
-            control: { type: 'select' },
-            options: ['none', 'top', 'right', 'bottom', 'left'],
-        },
-        opened: {
-            control: { type: 'boolean' },
-        },
-        overlay: {
-            control: { type: 'select' },
-            options: ['none', 'top-full', 'bottom-full', 'top-right', 'top-left', 'bottom-right', 'bottom-left'],
-        },
-    },
-};
-export default meta;
-const Template = (args) => {
-    const makeIcon = () => {
-        if (args.icon !== 'none' && args.icon) {
-            return html `<kemet-icon slot="icon" icon=${args.icon} size="24" ></kemet-icon>`;
-        }
-        return null;
-    };
-    const makeHeading = () => {
-        if (args.heading !== '' && args.heading) {
-            return html `<h3 kemet-margin-bottom="none" kemet-margin-top="none">${args.heading}</h3>`;
-        }
-        return null;
-    };
-    return html `
-    <kemet-alert
-      status=${ifDefined(args.status)}
-      ?closable=${args.closable}
-      ?opened=${args.opened}
-      border-status=${args.border}
-      overlay=${ifDefined(args.overlay !== 'none' ? args.overlay : null)}
-      kemet-margin=${ifDefined(args.overlay.indexOf('full') < 0 ? '2xl' : nothing)}>
-      ${makeIcon()}
-      ${makeHeading()}
-      ${args.text}
-    </kemet-alert>
-  `;
-};
-export const Standard = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        text: 'The brown fox jumped over the lazy dog.',
-        overlay: 'none',
-    },
-};
-export const Heading = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        overlay: 'none',
-    },
-};
-export const Icon = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'info-circle',
-        overlay: 'none',
-    },
-};
-export const Closable = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'info-circle',
-        closable: true,
-        overlay: 'none',
-    },
-    play: async ({ canvasElement, step }) => {
-        const canvas = within(canvasElement);
-        const alert = canvas.getByText('This is a heading.').closest('kemet-alert');
-        const closeButton = alert.shadowRoot.querySelector('.close kemet-icon');
-        await step('Close the Alert', async () => {
-            await userEvent.click(closeButton);
-            expect(alert.opened).toBeFalsy();
-        });
-        await step('Reopen the Alert', async () => {
-            alert.opened = true;
-            expect(alert.opened).toBeTruthy();
-        });
-    },
-};
-export const BorderTop = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'info-circle',
-        closable: true,
-        border: 'top',
-        overlay: 'none',
-    },
-};
-export const BorderRight = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'info-circle',
-        closable: true,
-        border: 'right',
-        overlay: 'none',
-    },
-};
-export const BorderBottom = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'info-circle',
-        closable: true,
-        border: 'bottom',
-        overlay: 'none',
-    },
-};
-export const BorderLeft = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'info-circle',
-        closable: true,
-        border: 'left',
-        overlay: 'none',
-    },
-};
-export const Primary = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'info-circle',
-        closable: true,
-        border: 'left',
-        overlay: 'none',
-        status: 'primary',
-    },
-};
-export const Success = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'check-circle',
-        closable: true,
-        border: 'left',
-        overlay: 'none',
-        status: 'success',
-    },
-};
-export const Warning = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'exclamation-triangle',
-        closable: true,
-        border: 'left',
-        overlay: 'none',
-        status: 'warning',
-    },
-};
-export const Error = {
-    render: (args) => Template(args),
-    args: {
-        opened: true,
-        heading: 'This is a heading.',
-        text: 'The brown fox jumped over the lazy dog.',
-        icon: 'exclamation-octagon',
-        closable: true,
-        border: 'left',
-        overlay: 'none',
-        status: 'error',
-    },
-};
-//# sourceMappingURL=stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-alert/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Args, Meta, StoryObj } from '@storybook/web-components';\nimport { userEvent, within, expect } from '@storybook/test';\n\nimport '../kemet-alert';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nimport '../../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n  title: 'Components / Alert',\n  component: 'kemet-alert',\n  argTypes: {\n    heading: {\n      control: { type: 'text' },\n    },\n    text: {\n      control: { type: 'text' },\n    },\n    icon: {\n      control: { type: 'select' },\n      options: ['none', 'info-circle', 'check-circle', 'gear', 'exclamation-circle'],\n    },\n    status: {\n      control: { type: 'select' },\n      options: ['standard', 'primary', 'success', 'warning', 'error'],\n    },\n    closable: {\n      control: { type: 'boolean' },\n    },\n    border: {\n      control: { type: 'select' },\n      options: ['none', 'top', 'right', 'bottom', 'left'],\n    },\n    opened: {\n      control: { type: 'boolean' },\n    },\n    overlay: {\n      control: { type: 'select' },\n      options: ['none', 'top-full', 'bottom-full', 'top-right', 'top-left', 'bottom-right', 'bottom-left'],\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args: Args) => {\n  const makeIcon = () => {\n    if (args.icon !== 'none' && args.icon) {\n      return html`<kemet-icon slot=\"icon\" icon=${args.icon} size=\"24\" ></kemet-icon>`;\n    }\n\n    return null;\n  };\n\n  const makeHeading = () => {\n    if (args.heading !== '' && args.heading) {\n      return html`<h3 kemet-margin-bottom=\"none\" kemet-margin-top=\"none\">${args.heading}</h3>`;\n    }\n\n    return null;\n  };\n\n  return html`\n    <kemet-alert\n      status=${ifDefined(args.status)}\n      ?closable=${args.closable}\n      ?opened=${args.opened}\n      border-status=${args.border}\n      overlay=${ifDefined(args.overlay !== 'none' ? args.overlay : null)}\n      kemet-margin=${ifDefined(args.overlay.indexOf('full') < 0 ? '2xl' : nothing)}>\n      ${makeIcon()}\n      ${makeHeading()}\n      ${args.text}\n    </kemet-alert>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args: Args) => Template(args),\n  args: {\n    opened: true,\n    text: 'The brown fox jumped over the lazy dog.',\n    overlay: 'none',\n  },\n};\n\nexport const Heading: Story = {\n  render: (args: Args) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    overlay: 'none',\n  },\n};\n\nexport const Icon: Story = {\n  render: (args: Args) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'info-circle',\n    overlay: 'none',\n  },\n};\n\nexport const Closable: Story = {\n  render: (args: Args) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'info-circle',\n    closable: true,\n    overlay: 'none',\n  },\n  play: async ({ canvasElement, step }) => {\n    const canvas = within(canvasElement);\n    const alert = canvas.getByText('This is a heading.').closest('kemet-alert');\n    const closeButton = alert.shadowRoot.querySelector('.close kemet-icon');\n\n    await step('Close the Alert', async () => {\n      await userEvent.click(closeButton);\n      expect(alert.opened).toBeFalsy();\n    });\n\n    await step('Reopen the Alert', async () => {\n      alert.opened = true;\n      expect(alert.opened).toBeTruthy();\n    });\n  },\n};\n\nexport const BorderTop: Story = {\n  render: (args: Args) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'info-circle',\n    closable: true,\n    border: 'top',\n    overlay: 'none',\n  },\n};\n\nexport const BorderRight: Story = {\n  render: (args: Args) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'info-circle',\n    closable: true,\n    border: 'right',\n    overlay: 'none',\n  },\n};\n\nexport const BorderBottom: Story = {\n  render: (args: Args) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'info-circle',\n    closable: true,\n    border: 'bottom',\n    overlay: 'none',\n  },\n};\n\nexport const BorderLeft: Story = {\n  render: (args: Args) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'info-circle',\n    closable: true,\n    border: 'left',\n    overlay: 'none',\n  },\n};\n\nexport const Primary: Story = {\n  render: (args: Args) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'info-circle',\n    closable: true,\n    border: 'left',\n    overlay: 'none',\n    status: 'primary',\n  },\n};\n\nexport const Success: Story = {\n  render: (args: Args) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'check-circle',\n    closable: true,\n    border: 'left',\n    overlay: 'none',\n    status: 'success',\n  },\n};\n\nexport const Warning: Story = {\n  render: (args: Args) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'exclamation-triangle',\n    closable: true,\n    border: 'left',\n    overlay: 'none',\n    status: 'warning',\n  },\n};\n\nexport const Error: Story = {\n  render: (args: Args) => Template(args),\n  args: {\n    opened: true,\n    heading: 'This is a heading.',\n    text: 'The brown fox jumped over the lazy dog.',\n    icon: 'exclamation-octagon',\n    closable: true,\n    border: 'left',\n    overlay: 'none',\n    status: 'error',\n  },\n};\n"]}

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

@@ -1,51 +0,0 @@
-import { LitElement } from 'lit';
-import { TypeStatus } from './types';
-/**
- * @since 1.4.0
- * @status stable
- *
- * @tagname kemet-alert
- * @summary Calls out important messages and notifications.
- *
- * @prop {boolean} opened - Determines if the alert is opened or not.
- * @prop {boolean} reveal - Fades in the alert when opened.
- * @prop {boolean} closable - Adds a close button to the alert.
- * @prop {string} borderStatus - Adds a border that indicates the status.
- * @prop {boolean} hidden - Hides the element from document flow.
- * @prop {string} overlay - Fixes the alert over content in specified position.
- *
- * @slot default - The contents of the alert.
- *
- * @event kemet-alert-opened - Fires when alert is opened.
- * @event kemet-alert-closed - Fires when alert is closed.
- *
- * @csspart close - Container for the close button.
- *
- * @cssproperty --kemet-alert-padding - The padding on the alert.
- * @cssproperty --kemet-alert-border-thickness - The thickness of the border.
- * @cssproperty --kemet-alert-status-color - The status color. Default: inherit.
- * @cssproperty --kemet-alert-align-items - The alert's alignment.
- * @cssproperty --kemet-alert-border - The border around the alert.
- *
- */
-export default class KemetAlert extends LitElement {
-    static styles: import("lit").CSSResult[];
-    opened: boolean;
-    reveal: boolean;
-    closable: boolean;
-    status: TypeStatus;
-    borderStatus: string;
-    hidden: boolean;
-    overlay: string;
-    shouldUpdate(prevProps: Map<string, never>): boolean;
-    firstUpdated(): void;
-    updated(prevProps: Map<string, never>): void;
-    render(): import("lit-html").TemplateResult<1>;
-    makeCloseBtn(): import("lit-html").TemplateResult<1>;
-    handleMotion(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-alert': KemetAlert;
-    }
-}

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

@@ -1,111 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesBase } from './styles';
-/**
- * @since 1.4.0
- * @status stable
- *
- * @tagname kemet-alert
- * @summary Calls out important messages and notifications.
- *
- * @prop {boolean} opened - Determines if the alert is opened or not.
- * @prop {boolean} reveal - Fades in the alert when opened.
- * @prop {boolean} closable - Adds a close button to the alert.
- * @prop {string} borderStatus - Adds a border that indicates the status.
- * @prop {boolean} hidden - Hides the element from document flow.
- * @prop {string} overlay - Fixes the alert over content in specified position.
- *
- * @slot default - The contents of the alert.
- *
- * @event kemet-alert-opened - Fires when alert is opened.
- * @event kemet-alert-closed - Fires when alert is closed.
- *
- * @csspart close - Container for the close button.
- *
- * @cssproperty --kemet-alert-padding - The padding on the alert.
- * @cssproperty --kemet-alert-border-thickness - The thickness of the border.
- * @cssproperty --kemet-alert-status-color - The status color. Default: inherit.
- * @cssproperty --kemet-alert-align-items - The alert's alignment.
- * @cssproperty --kemet-alert-border - The border around the alert.
- *
- */
-let KemetAlert = class KemetAlert extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.status = 'standard';
-    }
-    shouldUpdate(prevProps) {
-        if (prevProps.has('opened') && !prevProps.get('opened')) {
-            this.hidden = false;
-            this.reveal = true;
-        }
-        return true;
-    }
-    firstUpdated() {
-        this.handleMotion();
-    }
-    updated(prevProps) {
-        if (!prevProps.get('opened') && this.opened === true) {
-            emitEvent(this, 'kemet-alert-opened', this);
-        }
-        else {
-            emitEvent(this, 'kemet-alert-closed', this);
-        }
-    }
-    render() {
-        return html `
-      <slot name="icon"></slot>
-      <div>
-        <slot></slot>
-      </div>
-      <div class="close" part="close">
-        ${this.makeCloseBtn()}
-      </div>
-    `;
-    }
-    makeCloseBtn() {
-        if (this.closable) {
-            return html `<kemet-icon icon="x-lg" @click=${() => { this.opened = false; }}></kemet-icon>`;
-        }
-        return null;
-    }
-    handleMotion() {
-        this.addEventListener('transitionend', () => {
-            if (!this.opened) {
-                this.hidden = true;
-            }
-        });
-        this.addEventListener('animationend', () => {
-            this.reveal = false;
-        });
-    }
-};
-KemetAlert.styles = [stylesBase];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetAlert.prototype, "opened", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetAlert.prototype, "reveal", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetAlert.prototype, "closable", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetAlert.prototype, "status", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'border-status' })
-], KemetAlert.prototype, "borderStatus", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetAlert.prototype, "hidden", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], KemetAlert.prototype, "overlay", void 0);
-KemetAlert = __decorate([
-    customElement('kemet-alert')
-], KemetAlert);
-export default KemetAlert;
-//# sourceMappingURL=kemet-alert.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-alert.js","sourceRoot":"","sources":["../../../src/components/kemet-alert/kemet-alert.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAGY,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAab,WAAM,GAAe,UAAU,CAAC;IA+DlC,CAAC;IApDC,YAAY,CAAC,SAA6B;QACxC,IAAI,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACxD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACrB,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,YAAY;QACV,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,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,oBAAoB,EAAE,IAAI,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,SAAS,CAAC,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;UAML,IAAI,CAAC,YAAY,EAAE;;KAExB,CAAC;IACJ,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO,IAAI,CAAA,kCAAkC,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC;QAC9F,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,YAAY;QACV,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE;YAC1C,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACjB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACrB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,GAAG,EAAE;YACzC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC,CAAC,CAAC;IACL,CAAC;;AA1EM,iBAAM,GAAG,CAAC,UAAU,CAAC,AAAf,CAAgB;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACzB;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACV;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;gDACjD;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC1B;AAtBG,UAAU;IAD9B,aAAa,CAAC,aAAa,CAAC;GACR,UAAU,CA4E9B;eA5EoB,UAAU","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesBase } from './styles';\nimport { TypeStatus } from './types';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-alert\n * @summary Calls out important messages and notifications.\n *\n * @prop {boolean} opened - Determines if the alert is opened or not.\n * @prop {boolean} reveal - Fades in the alert when opened.\n * @prop {boolean} closable - Adds a close button to the alert.\n * @prop {string} borderStatus - Adds a border that indicates the status.\n * @prop {boolean} hidden - Hides the element from document flow.\n * @prop {string} overlay - Fixes the alert over content in specified position.\n *\n * @slot default - The contents of the alert.\n *\n * @event kemet-alert-opened - Fires when alert is opened.\n * @event kemet-alert-closed - Fires when alert is closed.\n *\n * @csspart close - Container for the close button.\n *\n * @cssproperty --kemet-alert-padding - The padding on the alert.\n * @cssproperty --kemet-alert-border-thickness - The thickness of the border.\n * @cssproperty --kemet-alert-status-color - The status color. Default: inherit.\n * @cssproperty --kemet-alert-align-items - The alert's alignment.\n * @cssproperty --kemet-alert-border - The border around the alert.\n *\n */\n\n@customElement('kemet-alert')\nexport default class KemetAlert extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  reveal: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  closable: boolean;\n\n  @property({ type: String, reflect: true })\n  status: TypeStatus = 'standard';\n\n  @property({ type: String, reflect: true, attribute: 'border-status' })\n  borderStatus: string;\n\n  @property({ type: Boolean, reflect: true })\n  hidden: boolean;\n\n  @property({ type: String, reflect: true })\n  overlay: string;\n\n  shouldUpdate(prevProps: Map<string, never>) {\n    if (prevProps.has('opened') && !prevProps.get('opened')) {\n      this.hidden = false;\n      this.reveal = true;\n    }\n\n    return true;\n  }\n\n  firstUpdated() {\n    this.handleMotion();\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-alert-opened', this);\n    } else {\n      emitEvent(this, 'kemet-alert-closed', this);\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"icon\"></slot>\n      <div>\n        <slot></slot>\n      </div>\n      <div class=\"close\" part=\"close\">\n        ${this.makeCloseBtn()}\n      </div>\n    `;\n  }\n\n  makeCloseBtn() {\n    if (this.closable) {\n      return html`<kemet-icon icon=\"x-lg\" @click=${() => { this.opened = false; }}></kemet-icon>`;\n    }\n\n    return null;\n  }\n\n  handleMotion() {\n    this.addEventListener('transitionend', () => {\n      if (!this.opened) {\n        this.hidden = true;\n      }\n    });\n\n    this.addEventListener('animationend', () => {\n      this.reveal = false;\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-alert': KemetAlert\n  }\n}\n"]}

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

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