{"file":"vds-tab.vds-tabs.entry.js","mappings":"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","names":[],"sources":["src/components/vds-tab/vds-tab.scss?tag=vds-tab&encapsulation=shadow","src/components/vds-tab/vds-tab.tsx","src/components/vds-tabs/vds-tabs.scss?tag=vds-tabs&encapsulation=shadow","src/components/vds-tabs/vds-tabs.tsx"],"sourcesContent":[":host {\r\n  @apply block;\r\n}\r\n\r\nbutton {\r\n  @apply relative text-center text-grey whitespace-nowrap;\r\n\r\n  &.disabled {\r\n    @apply pointer-events-none;\r\n  }\r\n\r\n  &:hover,\r\n  &.active {\r\n    @apply text-berry transition-colors;\r\n\r\n    font-weight: bold;\r\n\r\n    // Target Safari 10+\r\n    @media not all and (min-resolution:.001dpcm) {\r\n      letter-spacing: -1px;\r\n    }\r\n  }\r\n\r\n  &:hover:after {\r\n    @apply w-full;\r\n  }\r\n\r\n  &:after {\r\n      content: '';\r\n      position: absolute;\r\n      height: 1px;\r\n      background: var(--vt-color-berry-default, #D7004B);;\r\n      bottom: 0;\r\n      left: 50%;\r\n      width: 0;\r\n      transition: width 0.25s linear;\r\n      transform: translateX(-50%);\r\n  }\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\nimport { VdsTabBackgroundColor } from './vds-tab.interface';\r\n\r\n@Component({\r\n  tag: 'vds-tab',\r\n  styleUrl: 'vds-tab.scss',\r\n  shadow: true,\r\n})\r\nexport class VdsTab {\r\n\r\n  /**\r\n   * The displayed text for the tab item\r\n   */\r\n  @Prop() label: string;\r\n\r\n  /**\r\n   * Sets theme of the tab\r\n   * @deprecated Since changing the design with v0.0.61 this is no longer used\r\n   */\r\n  @Prop() color: VdsTabBackgroundColor = 'light';\r\n\r\n  /**\r\n   * Sets the active state\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) active: boolean = false;\r\n\r\n  private tabId = `vds-tab-${tabIds++}`;\r\n\r\n  render() {\r\n    const { tabId, label, active } = this;\r\n    return (\r\n      <Host id={tabId} aria-controls={tabId + '-content'} role=\"tab\" aria-selected={active}>\r\n        {/* <div\r\n          class={{\r\n            'h-full min-h-[31px] font-regular text-[14px] leading-[17px]': true,\r\n            'relative flex w-fit justify-center bg-white text-grey hover:text-berry cursor-pointer text-left tablet-portrait:text-center py-[8px] whitespace-nowrap tab-underline': true,\r\n            'tab-active': active\r\n          }}\r\n        >\r\n          {label}\r\n        </div> */}\r\n        <button class={{\r\n          'active': active\r\n        }}>\r\n          {label}\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\nlet tabIds = 0;\r\n",":host {\r\n  @apply block;\r\n}\r\n\r\n.scrollbar-none {\r\n  overflow: auto;\r\n  -ms-overflow-style: none;  /* IE and Edge */\r\n  scrollbar-width: none;  /* Firefox */\r\n\r\n  &::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.bg-transparent-to-white {\r\n    background-image: linear-gradient(to right, transparent, white);\r\n}\r\n\r\n::slotted([slot=tabs]:last-of-type) {\r\n  @apply pr-4 md:pr-0;\r\n}\r\n","import { Component, Host, h, Element, Prop, ComponentInterface } from '@stencil/core';\r\n\r\n/**\r\n * @slot tabs - Shadow DOM Slot where the tabs will be rendered\r\n * @slot content - Shadow DOM Slot to place the content. The Tabs Component will iterate over each child in the slot to match it to a tab\r\n */\r\n@Component({\r\n  tag: 'vds-tabs',\r\n  styleUrl: 'vds-tabs.scss',\r\n  shadow: true,\r\n})\r\nexport class VdsTabs implements ComponentInterface {\r\n\r\n  @Element() el: HTMLElement;\r\n\r\n  /**\r\n   * Set the default active tab\r\n   */\r\n  @Prop() default: number = 0;\r\n\r\n  /**\r\n   * Tabs label for accessability only\r\n   */\r\n  @Prop() label: string;\r\n\r\n  private content: HTMLElement[];\r\n\r\n  private tabs: HTMLVdsTabElement[];\r\n\r\n  private handleClick(event: Event) {\r\n    let index = 0;\r\n\r\n    this.tabs.forEach((x, i) => {\r\n      if (x === event.target) {\r\n        index = i;\r\n        x.active = true;\r\n      }\r\n      else {\r\n        x.active = false;\r\n      }\r\n    });\r\n\r\n    this.content.forEach((tabContent, i) => {\r\n      if (index === i) {\r\n        tabContent.style.display = 'block';\r\n        tabContent.setAttribute('aria-hidden', 'false');\r\n      } else {\r\n        tabContent.style.display = 'none';\r\n        tabContent.setAttribute('aria-hidden', 'true');\r\n      }\r\n    });\r\n  }\r\n\r\n  componentWillRender(): void {\r\n    this.tabs = Array.from(this.el.querySelectorAll<HTMLVdsTabElement>('[slot=tabs]'));\r\n    this.content = Array.from(this.el.querySelector('[slot=content]').children as HTMLCollectionOf<HTMLElement>);\r\n    this.content.forEach((tabContent, i) => {\r\n      tabContent.setAttribute('role', 'tabpanel');\r\n      if (i === this.default) {\r\n        tabContent.style.display = 'block';\r\n        tabContent.setAttribute('aria-hidden', 'false');\r\n      } else {\r\n        tabContent.style.display = 'none';\r\n        tabContent.setAttribute('aria-hidden', 'true');\r\n      }\r\n    });\r\n  }\r\n\r\n  componentDidRender(): void {\r\n    this.tabs[this.default].active = true;\r\n    // this.tabs[this.default].setAttribute('aria-selected', 'true');\r\n    // this.tabs[this.default].shadowRoot.children[0].classList.add('tab-active');\r\n    this.content.forEach((tabContent, i) => {\r\n      tabContent.setAttribute('id', this.tabs[i].getAttribute('aria-controls'));\r\n      tabContent.setAttribute('aria-labelledby', this.tabs[i].id);\r\n    });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"relative\">\r\n          <div\r\n            class=\"flex align-text-top flex-row gap-[25px] md:gap-[40px] pb-2 md:pb-4 scrollbar-none\"\r\n            onClick={event => this.handleClick(event)}\r\n            role=\"tablist\"\r\n            aria-label={this.label}>\r\n            <slot name=\"tabs\"></slot>\r\n          </div>\r\n          <div class=\"content-[''] absolute w-[33px] h-[44px] top-0 right-0 bg-transparent-to-white\"></div>\r\n          <slot name=\"content\"></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}