{"version":3,"names":["tabItemCss","LgrTabItemStyle0","TabItem","this","handleClick","event","preventDefault","selected","lgrTabItemSelected","emit","handleKeydown","target","el","key","selectPreviousSibling","selectNextSibling","previousSibling","previousElementSibling","disabled","tagName","toLowerCase","click","nextSibling","nextElementSibling","handleSelectedStateChange","content","document","querySelector","removeAttribute","setAttribute","componentDidLoad","render","h","Host","onClick","onKeyDown","slot","class","addClass","inverse","style","pointerEvents","undefined","role","ref","anchorElement","tabIndex","toString","href"],"sources":["src/components/tab/tabItem.scss?tag=lgr-tab-item&encapsulation=shadow","src/components/tab/tabItem.tsx"],"sourcesContent":["@import '../../global/styles/anchors/anchor';\n@import '../../global/variables/grid';\n\n:host {\n  height: var(--lgr-spacing-xs);\n  box-sizing: border-box;\n  border-bottom: var(--lgr-border-size-default) solid var(--lgr-color-neutral-low-light);\n  flex: 1;\n  font-size: var(--lgr-font-size-sm);\n\n  @media (min-width: $lgr-grid-md-break-point) {\n    font-size: var(--lgr-font-size-md);\n  }\n\n  li {\n    all: unset;\n    display: block;\n    height: 100%;\n\n    a {\n      @include common-link-styles;\n      display: block;\n      height: 100%;\n      box-sizing: border-box;\n      margin: 0;\n      padding-inline: var(--lgr-spacing-nano);\n      padding-bottom: var(--lgr-spacing-nano);\n      text-align: center;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      color: var(--lgr-color-neutral-low-dark);\n\n      &.highlighted {\n        padding-bottom: calc(var(--lgr-spacing-nano) - 1px);\n        border-bottom: 2px solid var(--lgr-color-neutral-low-dark);\n        outline: unset;\n      }\n\n      &:hover {\n        color: var(--lgr-color-neutral-low-dark);\n        border-color: var(--lgr-color-neutral-low-dark);\n      }\n\n      &:active {\n        color: var(--lgr-color-neutral-low-dark);\n        border-color: var(--lgr-color-neutral-low-dark);\n      }\n\n      &.disabled {\n        border-color: var(--lgr-color-neutral-low-light);\n      }\n\n      &.inverse {\n        border-color: var(--lgr-color-neutral-high-pure);\n\n        &:hover,\n        &.disabled {\n          opacity: var(--lgr-alpha-intense);\n        }\n\n        &:active {\n          opacity: 1;\n        }\n      }\n    }\n  }\n}\n\n:host(.inverse) {\n  border-color: var(--lgr-color-neutral-high-pure);\n}","import { Component, h, Host, Event, EventEmitter, Element, Prop, Watch } from '@stencil/core';\nimport { addClass } from '../../utils/helpers/helpers';\n\n@Component({\n  tag: 'lgr-tab-item',\n  styleUrl: 'tabItem.scss',\n  shadow: true,\n})\nexport class TabItem {\n  @Element() el!: HTMLLgrTabItemElement;\n  /**\n   * Inverse or not.\n   */\n  @Prop({ reflect: true }) inverse: boolean = false;\n  /**\n   * Indicates whether the tab is the currently selected or not.\n   */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n  /**\n   * Disabled or not.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n   * The id of the content associated with the tab item.\n   */\n  @Prop({ reflect: true }) target?: string;\n\n  private anchorElement!: HTMLAnchorElement;\n\n  /**\n   * Event emitted when the tab item is seleced.\n   */\n  @Event() lgrTabItemSelected!: EventEmitter<boolean>;\n\n  @Watch('selected')\n  handleSelectedStateChange() {\n    const content = document.querySelector(`#${this.target}`);\n    if (this.selected) {\n      content?.removeAttribute('hidden');\n      this.anchorElement;\n    } else {\n      content?.setAttribute('hidden', '');\n    }\n  }\n\n  componentDidLoad() {\n    this.handleSelectedStateChange();\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeydown}\n        slot=\"items\"\n        class={addClass([this.inverse ? 'inverse' : null])}\n        style={{ pointerEvents: this.disabled ? 'none' : undefined }}\n      >\n        <li role=\"presentation\" aria-role=\"presentation\">\n          <a\n            ref={el => (this.anchorElement = el as HTMLAnchorElement)}\n            tabIndex={this.selected ? 0 : -1}\n            role=\"tab\"\n            aria-role=\"tab\"\n            aria-selected={this.selected.toString()}\n            href={this.target}\n            class={addClass([this.selected ? 'highlighted' : null, this.inverse ? 'inverse' : null, this.disabled ? 'disabled' : null])}\n          >\n            <span class=\"content\">\n              <slot></slot>\n            </span>\n          </a>\n        </li>\n      </Host>\n    );\n  }\n\n  private handleClick = (event: any) => {\n    event.preventDefault();\n    this.selected = true;\n    this.lgrTabItemSelected.emit();\n  };\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    if (event.target !== this.el) return;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        this.selectPreviousSibling();\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        this.selectNextSibling();\n    }\n  };\n\n  private selectPreviousSibling = () => {\n    let previousSibling = this.el.previousElementSibling as HTMLLgrTabItemElement;\n\n    while (previousSibling && (previousSibling.disabled || !(previousSibling.tagName.toLowerCase() === 'lgr-tab-item'))) {\n      previousSibling = previousSibling.previousElementSibling as HTMLLgrTabItemElement;\n    }\n    if (previousSibling !== null && previousSibling.tagName.toLowerCase() === 'lgr-tab-item') {\n      previousSibling.click();\n    }\n  };\n\n  private selectNextSibling = () => {\n    let nextSibling = this.el.nextElementSibling as HTMLLgrTabItemElement;\n\n    while (nextSibling && (nextSibling.disabled || !(nextSibling.tagName.toLowerCase() === 'lgr-tab-item'))) {\n      nextSibling = nextSibling.nextElementSibling as HTMLLgrTabItemElement;\n    }\n    if (nextSibling !== null && nextSibling.tagName.toLowerCase() === 'lgr-tab-item') {\n      nextSibling.click();\n    }\n  };\n}\n"],"mappings":"oGAAA,MAAMA,EAAa,i3DACnB,MAAAC,EAAeD,E,MCOFE,EAAO,M,gFAqEVC,KAAAC,YAAeC,IACrBA,EAAMC,iBACNH,KAAKI,SAAW,KAChBJ,KAAKK,mBAAmBC,MAAM,EAGxBN,KAAAO,cAAiBL,IACvB,GAAIA,EAAMM,SAAWR,KAAKS,GAAI,OAE9B,OAAQP,EAAMQ,KACZ,IAAK,YACHR,EAAMC,iBACNH,KAAKW,wBACL,MACF,IAAK,aACHT,EAAMC,iBACNH,KAAKY,oB,EAIHZ,KAAAW,sBAAwB,KAC9B,IAAIE,EAAkBb,KAAKS,GAAGK,uBAE9B,MAAOD,IAAoBA,EAAgBE,YAAcF,EAAgBG,QAAQC,gBAAkB,iBAAkB,CACnHJ,EAAkBA,EAAgBC,sB,CAEpC,GAAID,IAAoB,MAAQA,EAAgBG,QAAQC,gBAAkB,eAAgB,CACxFJ,EAAgBK,O,GAIZlB,KAAAY,kBAAoB,KAC1B,IAAIO,EAAcnB,KAAKS,GAAGW,mBAE1B,MAAOD,IAAgBA,EAAYJ,YAAcI,EAAYH,QAAQC,gBAAkB,iBAAkB,CACvGE,EAAcA,EAAYC,kB,CAE5B,GAAID,IAAgB,MAAQA,EAAYH,QAAQC,gBAAkB,eAAgB,CAChFE,EAAYD,O,gBAtG4B,M,cAIgB,M,cAIf,M,sBAc7C,yBAAAG,GACE,MAAMC,EAAUC,SAASC,cAAc,IAAIxB,KAAKQ,UAChD,GAAIR,KAAKI,SAAU,CACjBkB,IAAO,MAAPA,SAAO,SAAPA,EAASG,gBAAgB,S,KAEpB,CACLH,IAAO,MAAPA,SAAO,SAAPA,EAASI,aAAa,SAAU,G,EAIpC,gBAAAC,GACE3B,KAAKqB,2B,CAGP,MAAAO,GACE,OACEC,EAACC,EAAI,CAAApB,IAAA,2CACHqB,QAAS/B,KAAKC,YACd+B,UAAWhC,KAAKO,cAChB0B,KAAK,QACLC,MAAOC,EAAS,CAACnC,KAAKoC,QAAU,UAAY,OAC5CC,MAAO,CAAEC,cAAetC,KAAKe,SAAW,OAASwB,YAEjDV,EAAA,MAAAnB,IAAA,2CAAI8B,KAAK,eAAc,YAAW,gBAChCX,EAAA,KAAAnB,IAAA,2CACE+B,IAAKhC,GAAOT,KAAK0C,cAAgBjC,EACjCkC,SAAU3C,KAAKI,SAAW,GAAK,EAC/BoC,KAAK,MAAK,YACA,MAAK,gBACAxC,KAAKI,SAASwC,WAC7BC,KAAM7C,KAAKQ,OACX0B,MAAOC,EAAS,CAACnC,KAAKI,SAAW,cAAgB,KAAMJ,KAAKoC,QAAU,UAAY,KAAMpC,KAAKe,SAAW,WAAa,QAErHc,EAAA,QAAAnB,IAAA,2CAAMwB,MAAM,WACVL,EAAA,QAAAnB,IAAA,gD"}