kemet-ui 1.4.0 → 2.0.0

package/dist/components/kemet-sortable/kemet-sortable-item.js

@@ -1,5 +1,7 @@
-import { html, css, LitElement } from 'lit';
-
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { stylesSortableItem } from './styles';
 /**
  * @since 1.3.0
  * @status stable
@@ -9,40 +11,20 @@ import { html, css, LitElement } from 'lit';
  *
  * @prop {boolean} ghost - Automatically set to true when an item is dragged to a new spot.
  */
-
-export default class KemetSortableItem extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          cursor: grab;
-          display: block;
-          padding: 1rem;
-          border: 1px solid var(--kemet-color-primary);
-        }
-
-        :host([ghost]) {
-          opacity: 0.5;
-          border-style: dashed;
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      ghost: { type: Boolean, reflect: true },
-    };
-  }
-
-  firstUpdated() {
-    this.draggable = true;
-  }
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-sortable-item') || customElements.define('kemet-sortable-item', KemetSortableItem);
+let KemetSortableItem = class KemetSortableItem extends LitElement {
+    firstUpdated() {
+        this.draggable = true;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+KemetSortableItem.styles = [stylesSortableItem];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetSortableItem.prototype, "ghost", void 0);
+KemetSortableItem = __decorate([
+    customElement('kemet-sortable-item')
+], KemetSortableItem);
+export default KemetSortableItem;
+//# sourceMappingURL=kemet-sortable-item.js.map

package/dist/components/kemet-sortable/kemet-sortable-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-sortable-item.js","sourceRoot":"","sources":["../../../src/components/kemet-sortable/kemet-sortable-item.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,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C;;;;;;;;GAQG;AAGH,IAAqB,iBAAiB,GAAtC,MAAqB,iBAAkB,SAAQ,UAAU;IAMvD,YAAY;QACV,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAZQ,wBAAM,GAAG,CAAC,kBAAkB,CAAC,CAAC;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC5B;AAJI,iBAAiB;IADrC,aAAa,CAAC,qBAAqB,CAAC;GAChB,iBAAiB,CAarC;eAboB,iBAAiB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesSortableItem } from './styles';\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-sortable-item\n * @summary An item in a sortable list.\n *\n * @prop {boolean} ghost - Automatically set to true when an item is dragged to a new spot.\n */\n\n@customElement('kemet-sortable-item')\nexport default class KemetSortableItem extends LitElement {\n  static styles = [stylesSortableItem];\n\n  @property({ type: Boolean, reflect: true })\n  ghost: boolean;\n\n  firstUpdated() {\n    this.draggable = true;\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-sortable-item': KemetSortableItem\n  }\n}\n"]}

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

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+import { KemetSortableItemInterface } from './types';
+/**
+ * @since 1.3.0
+ * @status stable
+ *
+ * @tagname kemet-sortable
+ * @summary A list that can be sorted by drag and drop.
+ *
+ * @event kemet-sortable-drag-end - Fires when an item has been moved to a new spot.
+ */
+export default class KemetSortable extends LitElement {
+    static styles: import("lit").CSSResult[];
+    sortableItem: KemetSortableItemInterface;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    handleDragStart(event: any): void;
+    handleDragOver(event: any): void;
+    handleDragEnd(event: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-sortable': KemetSortable;
+    }
+}

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

@@ -1,22 +1,21 @@
-import { html, css, LitElement } from 'lit';
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
 import { polyfill } from 'mobile-drag-drop';
-import { emitEvent } from '../../utilities/misc/events.js';
-
+import { emitEvent } from '../../utilities/misc/events';
+import { stylesSortable } from './styles';
 const getMouseOffset = (event) => {
-  const targetRect = event.target.getBoundingClientRect();
-  const offset = {
-    x: event.pageX - targetRect.left,
-    y: event.pageY - targetRect.top,
-  };
-
-  return offset;
+    const targetRect = event.target.getBoundingClientRect();
+    const offset = {
+        x: event.pageX - targetRect.left,
+        y: event.pageY - targetRect.top,
+    };
+    return offset;
 };
-
 const getElementVerticalCenter = (element) => {
-  const rect = element.getBoundingClientRect();
-  return (rect.bottom - rect.top) / 2;
+    const rect = element.getBoundingClientRect();
+    return (rect.bottom - rect.top) / 2;
 };
-
 /**
  * @since 1.3.0
  * @status stable
@@ -26,70 +25,53 @@ const getElementVerticalCenter = (element) => {
  *
  * @event kemet-sortable-drag-end - Fires when an item has been moved to a new spot.
  */
-
-export default class KemetSortable extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          gap: 1rem;
-          flex-direction: column;
+let KemetSortable = class KemetSortable extends LitElement {
+    firstUpdated() {
+        polyfill();
+        this.addEventListener('dragstart', event => this.handleDragStart(event), false);
+        this.addEventListener('dragenter', (event) => { event.preventDefault(); });
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    handleDragStart(event) {
+        this.sortableItem = event.target;
+        this.addEventListener('dragover', dragOverEvent => this.handleDragOver(dragOverEvent), false);
+        this.addEventListener('dragend', dragEndEvent => this.handleDragEnd(dragEndEvent), false);
+        setTimeout(() => {
+            this.sortableItem.ghost = true;
+        }, 0);
+    }
+    handleDragOver(event) {
+        event.preventDefault();
+        const { target } = event;
+        if (target && target.tagName === 'KEMET-SORTABLE-ITEM') {
+            const offset = getMouseOffset(event);
+            const middleY = getElementVerticalCenter(event.target);
+            if (offset.y > middleY) {
+                this.insertBefore(this.sortableItem, target.nextSibling);
+            }
+            else {
+                this.insertBefore(this.sortableItem, target);
+            }
         }
-      `,
-    ];
-  }
-
-  firstUpdated() {
-    polyfill();
-
-    this.addEventListener('dragstart', event => this.handleDragStart(event), false);
-    this.addEventListener('dragenter', (event) => { event.preventDefault(); });
-  }
-
-  render() {
-    return html`<slot></slot>`;
-  }
-
-  handleDragStart(event) {
-    this.sortableItem = event.target;
-
-    this.addEventListener('dragover', dragOverEvent => this.handleDragOver(dragOverEvent), false);
-    this.addEventListener('dragend', dragEndEvent => this.handleDragEnd(dragEndEvent), false);
-
-    setTimeout(() => {
-      this.sortableItem.ghost = true;
-    }, 0);
-  }
-
-  handleDragOver(event) {
-    event.preventDefault();
-
-    const { target } = event;
-
-    if (target && target.tagName === 'KEMET-SORTABLE-ITEM') {
-      const offset = getMouseOffset(event);
-      const middleY = getElementVerticalCenter(event.target);
-
-      if (offset.y > middleY) {
-        this.insertBefore(this.sortableItem, target.nextSibling);
-      } else {
-        this.insertBefore(this.sortableItem, target);
-      }
     }
-  }
-
-  handleDragEnd(event) {
-    event.preventDefault();
-    this.sortableItem.ghost = false;
-
-    emitEvent(this, 'kemet-sortable-drag-end', {
-      event,
-      current: this.sortableItem,
-      all: this.querySelectorAll('kemet-sortable-item'),
-    });
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-sortable') || customElements.define('kemet-sortable', KemetSortable);
+    handleDragEnd(event) {
+        event.preventDefault();
+        this.sortableItem.ghost = false;
+        emitEvent(this, 'kemet-sortable-drag-end', {
+            event,
+            current: this.sortableItem,
+            all: this.querySelectorAll('kemet-sortable-item'),
+        });
+    }
+};
+KemetSortable.styles = [stylesSortable];
+__decorate([
+    state()
+], KemetSortable.prototype, "sortableItem", void 0);
+KemetSortable = __decorate([
+    customElement('kemet-sortable')
+], KemetSortable);
+export default KemetSortable;
+//# sourceMappingURL=kemet-sortable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-sortable.js","sourceRoot":"","sources":["../../../src/components/kemet-sortable/kemet-sortable.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport { polyfill } from 'mobile-drag-drop';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesSortable } from './styles';\nimport { KemetSortableItemInterface } from './types';\n\nconst getMouseOffset = (event) => {\n  const targetRect = event.target.getBoundingClientRect();\n  const offset = {\n    x: event.pageX - targetRect.left,\n    y: event.pageY - targetRect.top,\n  };\n\n  return offset;\n};\n\nconst getElementVerticalCenter = (element) => {\n  const rect = element.getBoundingClientRect();\n  return (rect.bottom - rect.top) / 2;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-sortable\n * @summary A list that can be sorted by drag and drop.\n *\n * @event kemet-sortable-drag-end - Fires when an item has been moved to a new spot.\n */\n\n@customElement('kemet-sortable')\nexport default class KemetSortable extends LitElement {\n  static styles = [stylesSortable];\n\n  @state()\n  sortableItem: KemetSortableItemInterface;\n\n  firstUpdated() {\n    polyfill();\n\n    this.addEventListener('dragstart', event => this.handleDragStart(event), false);\n    this.addEventListener('dragenter', (event) => { event.preventDefault(); });\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  handleDragStart(event) {\n    this.sortableItem = event.target;\n\n    this.addEventListener('dragover', dragOverEvent => this.handleDragOver(dragOverEvent), false);\n    this.addEventListener('dragend', dragEndEvent => this.handleDragEnd(dragEndEvent), false);\n\n    setTimeout(() => {\n      this.sortableItem.ghost = true;\n    }, 0);\n  }\n\n  handleDragOver(event) {\n    event.preventDefault();\n\n    const { target } = event;\n\n    if (target && target.tagName === 'KEMET-SORTABLE-ITEM') {\n      const offset = getMouseOffset(event);\n      const middleY = getElementVerticalCenter(event.target);\n\n      if (offset.y > middleY) {\n        this.insertBefore(this.sortableItem, target.nextSibling);\n      } else {\n        this.insertBefore(this.sortableItem, target);\n      }\n    }\n  }\n\n  handleDragEnd(event) {\n    event.preventDefault();\n    this.sortableItem.ghost = false;\n\n    emitEvent(this, 'kemet-sortable-drag-end', {\n      event,\n      current: this.sortableItem,\n      all: this.querySelectorAll('kemet-sortable-item'),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-sortable': KemetSortable\n  }\n}\n"]}

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

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

package/dist/components/kemet-sortable/styles.js

@@ -0,0 +1,22 @@
+import { css } from 'lit';
+export const stylesSortable = css `
+  :host {
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
+  }
+`;
+export const stylesSortableItem = css `
+  :host {
+    cursor: grab;
+    display: block;
+    padding: 1rem;
+    border: 1px solid var(--kemet-color-background);
+  }
+
+  :host([ghost]) {
+    opacity: 0.5;
+    border-style: dashed;
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-sortable/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;CAMhC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;CAYpC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesSortable = css`\n  :host {\n    display: flex;\n    gap: 1rem;\n    flex-direction: column;\n  }\n`;\n\nexport const stylesSortableItem = css`\n  :host {\n    cursor: grab;\n    display: block;\n    padding: 1rem;\n    border: 1px solid var(--kemet-color-background);\n  }\n\n  :host([ghost]) {\n    opacity: 0.5;\n    border-style: dashed;\n  }\n`;\n"]}

package/dist/components/kemet-sortable/types.d.ts

@@ -0,0 +1,3 @@
+export interface KemetSortableItemInterface extends HTMLElement {
+    ghost?: boolean;
+}

package/dist/components/kemet-sortable/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/kemet-sortable/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-sortable/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetSortableItemInterface extends HTMLElement {\n  ghost?: boolean,\n}\n"]}

package/dist/components/kemet-svgs/kemet-svg.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-svg
+ * @summary A svg from a set of custom SVGs.
+ *
+ * @prop {string} set - Defines which set of svgs is referenced.
+ * @prop {string} svg - The name (id) of the svg to be displayed.
+ * @prop {number} size - Sets the width and height of a the svg to the given value in pixels.
+ * @prop {string} ratio - The value for the preserveAspectRatio attribute of the svg.
+ * @prop {string} viewBox - The value for the viewBox attribute of the svg.
+ *
+ * @csspart svg - The svg element.
+ *
+ */
+export default class KemetSVG extends LitElement {
+    static styles: import("lit").CSSResult[];
+    set: string;
+    svg: string;
+    size: number;
+    ratio: string;
+    viewBox: string;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    setSize(): void;
+    getIcon(): void;
+    fillSVG(element: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-svg': KemetSVG;
+    }
+    interface Document {
+        kemetSVGs: any;
+    }
+}

package/dist/components/kemet-svgs/kemet-svg.js

@@ -1,5 +1,6 @@
+import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
-
+import { customElement, property } from 'lit/decorators.js';
 /**
  * @since 1.0.0
  * @status stable
@@ -16,96 +17,81 @@ import { html, css, LitElement } from 'lit';
  * @csspart svg - The svg element.
  *
  */
-
-export default class KemetSVG extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        display: inline-block;
-      }
-
-      svg {
-        width: 100%;
-        height: 100%;
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      set: {
-        type: String,
-      },
-      svg: {
-        type: String,
-      },
-      size: {
-        type: Number,
-      },
-      ratio: {
-        type: String,
-      },
-      viewBox: {
-        type: String,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.set = 'svgs';
-    this.ratio = 'none';
-    this.viewBox = '0 0 128 128';
-  }
-
-  updated() {
-    this.setSize();
-    this.getIcon();
-  }
-
-  render() {
-    return html`
-      <svg part="svg" viewBox="${this.viewBox}" preserveAspectRatio="${this.ratio}"></svg>
+let KemetSVG = class KemetSVG extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.svg = 'svgs';
+        this.ratio = 'none';
+        this.viewBox = '0 0 128 128';
+    }
+    updated() {
+        this.setSize();
+        this.getIcon();
+    }
+    render() {
+        return html `
+      <svg part="svg" viewBox="${this.viewBox}" preserveAspectRatio="${this.ratio}" fill="currentColor"></svg>
     `;
-  }
-
-  setSize() {
-    if (this.size) {
-      this.style.width = `${this.size}px`;
-      this.style.height = `${this.size}px`;
     }
-  }
-
-  getIcon() {
-    let svgElement;
-    const svgs = document.kemetSVGs[this.set];
-
-    svgs.forEach((svg, index) => {
-      const id = svg.getAttribute('id');
-
-      if (id && id === this.svg) {
-        svgElement = svgs[index];
-      }
-    });
-
-    if (svgElement) {
-      this.fillSVG(svgElement);
-    } else {
-      // eslint-disable-next-line no-console
-      console.error(`Could not find svg "${this.svg}" in set "${this.set}".`);
+    setSize() {
+        if (this.size) {
+            this.style.width = `${this.size}px`;
+            this.style.height = `${this.size}px`;
+        }
+    }
+    getIcon() {
+        let svgElement;
+        const svgs = document.kemetSVGs[this.set];
+        svgs.forEach((svg, index) => {
+            const id = svg.getAttribute('id');
+            if (id && id === this.svg) {
+                svgElement = svgs[index];
+            }
+        });
+        if (svgElement) {
+            this.fillSVG(svgElement);
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.error(`Could not find svg "${this.svg}" in set "${this.set}".`);
+        }
+    }
+    fillSVG(element) {
+        const content = element.cloneNode(true);
+        const svg = this.shadowRoot.querySelector('svg');
+        const g = svg.querySelector('g');
+        if (g)
+            g.remove();
+        svg.appendChild(content);
+    }
+};
+KemetSVG.styles = [css `
+    :host {
+      display: inline-block;
     }
-  }
-
-  fillSVG(element) {
-    const content = element.cloneNode(true);
-    const svg = this.shadowRoot.querySelector('svg');
-    const g = svg.querySelector('g');
-
-    if (g) g.remove();
-    svg.appendChild(content);
-  }
-}
 
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-svg') || customElements.define('kemet-svg', KemetSVG);
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  `];
+__decorate([
+    property({ type: String })
+], KemetSVG.prototype, "set", void 0);
+__decorate([
+    property({ type: String })
+], KemetSVG.prototype, "svg", void 0);
+__decorate([
+    property({ type: Number })
+], KemetSVG.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], KemetSVG.prototype, "ratio", void 0);
+__decorate([
+    property({ type: String })
+], KemetSVG.prototype, "viewBox", void 0);
+KemetSVG = __decorate([
+    customElement('kemet-svg')
+], KemetSVG);
+export default KemetSVG;
+//# sourceMappingURL=kemet-svg.js.map

package/dist/components/kemet-svgs/kemet-svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-svg.js","sourceRoot":"","sources":["../../../src/components/kemet-svgs/kemet-svg.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;;;GAeG;AAGH,IAAqB,QAAQ,GAA7B,MAAqB,QAAS,SAAQ,UAAU;IAAhD;;QAgBE,QAAG,GAAW,MAAM,CAAC;QAMrB,UAAK,GAAW,MAAM,CAAC;QAGvB,YAAO,GAAW,aAAa,CAAC;IAgDlC,CAAC;IA9CC,OAAO;QACL,IAAI,CAAC,OAAO,EAAE,CAAC;QACf,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;iCACkB,IAAI,CAAC,OAAO,0BAA0B,IAAI,CAAC,KAAK;KAC5E,CAAC;IACJ,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;YACpC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;SACtC;IACH,CAAC;IAED,OAAO;QACL,IAAI,UAAU,CAAC;QACf,MAAM,IAAI,GAAG,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE1C,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAC1B,MAAM,EAAE,GAAG,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAElC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC,GAAG,EAAE;gBACzB,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;aAC1B;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;SAC1B;aAAM;YACL,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,uBAAuB,IAAI,CAAC,GAAG,aAAa,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;SACzE;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QACxC,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACjD,MAAM,CAAC,GAAG,GAAG,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAEjC,IAAI,CAAC;YAAE,CAAC,CAAC,MAAM,EAAE,CAAC;QAClB,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC;CACF,CAAA;AAxEQ,eAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;;;GASnB,CAAC,CAAC;AAGH;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACN;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACJ;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACK;AAzBb,QAAQ;IAD5B,aAAa,CAAC,WAAW,CAAC;GACN,QAAQ,CAyE5B;eAzEoB,QAAQ","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-svg\n * @summary A svg from a set of custom SVGs.\n *\n * @prop {string} set - Defines which set of svgs is referenced.\n * @prop {string} svg - The name (id) of the svg to be displayed.\n * @prop {number} size - Sets the width and height of a the svg to the given value in pixels.\n * @prop {string} ratio - The value for the preserveAspectRatio attribute of the svg.\n * @prop {string} viewBox - The value for the viewBox attribute of the svg.\n *\n * @csspart svg - The svg element.\n *\n */\n\n@customElement('kemet-svg')\nexport default class KemetSVG extends LitElement {\n  static styles = [css`\n    :host {\n      display: inline-block;\n    }\n\n    svg {\n      width: 100%;\n      height: 100%;\n    }\n  `];\n\n  @property({ type: String })\n  set: string;\n\n  @property({ type: String })\n  svg: string = 'svgs';\n\n  @property({ type: Number })\n  size: number;\n\n  @property({ type: String })\n  ratio: string = 'none';\n\n  @property({ type: String })\n  viewBox: string = '0 0 128 128';\n\n  updated() {\n    this.setSize();\n    this.getIcon();\n  }\n\n  render() {\n    return html`\n      <svg part=\"svg\" viewBox=\"${this.viewBox}\" preserveAspectRatio=\"${this.ratio}\" fill=\"currentColor\"></svg>\n    `;\n  }\n\n  setSize() {\n    if (this.size) {\n      this.style.width = `${this.size}px`;\n      this.style.height = `${this.size}px`;\n    }\n  }\n\n  getIcon() {\n    let svgElement;\n    const svgs = document.kemetSVGs[this.set];\n\n    svgs.forEach((svg, index) => {\n      const id = svg.getAttribute('id');\n\n      if (id && id === this.svg) {\n        svgElement = svgs[index];\n      }\n    });\n\n    if (svgElement) {\n      this.fillSVG(svgElement);\n    } else {\n      // eslint-disable-next-line no-console\n      console.error(`Could not find svg \"${this.svg}\" in set \"${this.set}\".`);\n    }\n  }\n\n  fillSVG(element) {\n    const content = element.cloneNode(true);\n    const svg = this.shadowRoot.querySelector('svg');\n    const g = svg.querySelector('g');\n\n    if (g) g.remove();\n    svg.appendChild(content);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-svg': KemetSVG\n  }\n\n  interface Document {\n    kemetSVGs: any;\n  }\n}\n"]}

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

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-svgs
+ * @summary A set of SVG graphics that can be referenced any where in a page or app.
+ *
+ * @prop {string} set - Defines the name for the set of svgs.
+ *
+ */
+export default class KemetSVGs extends LitElement {
+    static styles: import("lit").CSSResult[];
+    set: string;
+    slotElement: HTMLSlotElement;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    populateIcons(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-svgs': KemetSVGs;
+    }
+    interface Document {
+        kemetSVGs: any;
+    }
+}

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

@@ -1,5 +1,6 @@
+import { __decorate } from "tslib";
 import { LitElement, html, css } from 'lit';
-
+import { customElement, property, state } from 'lit/decorators.js';
 /**
  * @since 1.0.0
  * @status stable
@@ -10,51 +11,41 @@ import { LitElement, html, css } from 'lit';
  * @prop {string} set - Defines the name for the set of svgs.
  *
  */
-
-export default class KemetSVGs extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        display: none;
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      set: {
-        type: String,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.set = 'svgs';
-  }
-
-  firstUpdated() {
-    this.slotElement = this.shadowRoot.querySelector('slot');
-    document.kemetSVGs = document.kemetSVGs || {};
-
-    this.populateIcons();
-    this.slotElement.addEventListener('slotchange', this.populateIcons());
-  }
-
-  render() {
-    return html`<slot></slot>`;
-  }
-
-  populateIcons() {
-    const svg = this.slotElement.assignedElements()[0];
-    const svgContents = svg ? svg.querySelectorAll('defs > g') : null;
-
-    if (svgContents) {
-      document.kemetSVGs[this.set] = svgContents;
+let KemetSVGs = class KemetSVGs extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.set = 'svgs';
     }
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-svgs') || customElements.define('kemet-svgs', KemetSVGs);
+    firstUpdated() {
+        this.slotElement = this.shadowRoot.querySelector('slot');
+        document.kemetSVGs = document.kemetSVGs || {};
+        this.populateIcons();
+        this.slotElement.addEventListener('slotchange', () => this.populateIcons());
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    populateIcons() {
+        const svg = this.slotElement.assignedElements()[0];
+        const svgContents = svg ? svg.querySelectorAll('defs > g') : null;
+        if (svgContents) {
+            document.kemetSVGs[this.set] = svgContents;
+        }
+    }
+};
+KemetSVGs.styles = [css `
+    :host {
+      display: none;
+    }
+  `];
+__decorate([
+    property({ type: String })
+], KemetSVGs.prototype, "set", void 0);
+__decorate([
+    state()
+], KemetSVGs.prototype, "slotElement", void 0);
+KemetSVGs = __decorate([
+    customElement('kemet-svgs')
+], KemetSVGs);
+export default KemetSVGs;
+//# sourceMappingURL=kemet-svgs.js.map