{"version":3,"sources":["../src/elements/tab.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport { stylesKemetTab } from '../styles/elements/tabs';\nimport './icon-bootstrap';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-tab\n * @summary A tab in a set of tabs.\n *\n * @prop {boolean} selected - Is true when the tab is selected\n * @prop {string} link - Links to a panel name\n * @prop {boolean} closable - Determines if the tab can be closed\n *\n * @cssproperty --kemet-tab-padding - The padding of the tab.\n * @cssproperty --kemet-tab-color - The color of the selected tab.\n *\n * @event kemet-selected - Fires when a tab is selected\n * @event kemet-closed - Fires when the tab should close\n *\n */\n\n@customElement('kemet-tab')\nexport default class KemetTab extends LitElement {\n  static styles = [stylesKemetTab];\n\n  @property({ type: Number })\n  index: number;\n\n  @property({ type: Boolean, reflect: true })\n  selected: boolean = false;\n\n  @property({ type: String })\n  link: string;\n\n  @property({ type: Boolean })\n  closable: boolean;\n\n  firstUpdated() {\n    this.addEventListener('click', this.select.bind(this));\n  }\n\n  updated() {\n    this.a11y();\n  }\n\n  render() {\n    return html`\n      <slot></slot>\n      ${this.makeCloseable()}\n    `;\n  }\n\n  select() {\n    emitEvent(this, 'kemet-selected', this);\n  }\n\n  a11y() {\n    this.setAttribute('role', 'tab');\n\n    if (this.selected) {\n      this.setAttribute('aria-selected', 'true');\n      this.setAttribute('tabindex', '0');\n    } else {\n      this.setAttribute('aria-selected', 'false');\n      this.setAttribute('tabindex', '-1');\n    }\n  }\n\n  makeCloseable() {\n    if (this.closable) {\n      return html`&nbsp;<kemet-icon-bootstrap icon=\"x-lg\" size=\"16\" @click=${() => this.handleClosable()}></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n\n  handleClosable() {\n    emitEvent(this, 'kemet-closed', this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tab': KemetTab\n  }\n}\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,YAAY,YAAY;AACjC,SAAS,eAAe,gBAAgB;AAyBxC,IAAqB,WAArB,cAAsC,WAAW;AAAA,EAAjD;AAAA;AAOE,oBAAoB;AAAA;AAAA,EAQpB,eAAe;AACb,SAAK,iBAAiB,SAAS,KAAK,OAAO,KAAK,IAAI,CAAC;AAAA,EACvD;AAAA,EAEA,UAAU;AACR,SAAK,KAAK;AAAA,EACZ;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA,QAEH,KAAK,cAAc,CAAC;AAAA;AAAA,EAE1B;AAAA,EAEA,SAAS;AACP,cAAU,MAAM,kBAAkB,IAAI;AAAA,EACxC;AAAA,EAEA,OAAO;AACL,SAAK,aAAa,QAAQ,KAAK;AAE/B,QAAI,KAAK,UAAU;AACjB,WAAK,aAAa,iBAAiB,MAAM;AACzC,WAAK,aAAa,YAAY,GAAG;AAAA,IACnC,OAAO;AACL,WAAK,aAAa,iBAAiB,OAAO;AAC1C,WAAK,aAAa,YAAY,IAAI;AAAA,IACpC;AAAA,EACF;AAAA,EAEA,gBAAgB;AACd,QAAI,KAAK,UAAU;AACjB,aAAO,gEAAgE,MAAM,KAAK,eAAe,CAAC;AAAA,IACpG;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,iBAAiB;AACf,cAAU,MAAM,gBAAgB,IAAI;AAAA,EACtC;AACF;AAzDqB,SACZ,SAAS,CAAC,cAAc;AAG/B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,SAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GANvB,SAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,SAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAZR,SAanB;AAbmB,WAArB;AAAA,EADC,cAAc,WAAW;AAAA,GACL;","names":[]}