{"version":3,"sources":["../src/elements/svg.ts"],"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      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"],"mappings":";;;;;AAAA,SAAS,MAAM,KAAK,kBAAkB;AACtC,SAAS,eAAe,gBAAgB;AAoBxC,IAAqB,WAArB,cAAsC,WAAW;AAAA,EAAjD;AAAA;AAgBE,eAAc;AAMd,iBAAgB;AAGhB,mBAAkB;AAAA;AAAA,EAElB,UAAU;AACR,SAAK,QAAQ;AACb,SAAK,QAAQ;AAAA,EACf;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,iCACsB,KAAK,OAAO,0BAA0B,KAAK,KAAK;AAAA;AAAA,EAE/E;AAAA,EAEA,UAAU;AACR,QAAI,KAAK,MAAM;AACb,WAAK,MAAM,QAAQ,GAAG,KAAK,IAAI;AAC/B,WAAK,MAAM,SAAS,GAAG,KAAK,IAAI;AAAA,IAClC;AAAA,EACF;AAAA,EAEA,UAAU;AACR,QAAI;AACJ,UAAM,OAAO,SAAS,UAAU,KAAK,GAAG;AAExC,SAAK,QAAQ,CAAC,KAAK,UAAU;AAC3B,YAAM,KAAK,IAAI,aAAa,IAAI;AAEhC,UAAI,MAAM,OAAO,KAAK,KAAK;AACzB,qBAAa,KAAK,KAAK;AAAA,MACzB;AAAA,IACF,CAAC;AAED,QAAI,YAAY;AACd,WAAK,QAAQ,UAAU;AAAA,IACzB,OAAO;AACL,cAAQ,MAAM,uBAAuB,KAAK,GAAG,aAAa,KAAK,GAAG,IAAI;AAAA,IACxE;AAAA,EACF;AAAA,EAEA,QAAQ,SAAS;AACf,UAAM,UAAU,QAAQ,UAAU,IAAI;AACtC,UAAM,MAAM,KAAK,WAAW,cAAc,KAAK;AAC/C,UAAM,IAAI,IAAI,cAAc,GAAG;AAE/B,QAAI,EAAG,GAAE,OAAO;AAChB,QAAI,YAAY,OAAO;AAAA,EACzB;AACF;AAxEqB,SACZ,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAShB;AAGD;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,SAanB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAfP,SAgBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlBP,SAmBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArBP,SAsBnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAxBP,SAyBnB;AAzBmB,WAArB;AAAA,EADC,cAAc,WAAW;AAAA,GACL;","names":[]}