{"version":3,"names":["AdsHorizontalTabsErrors","Object","defineProperty","exports","value","prefix","iconName","width","height","aliases","unicode","svgPathData","definition","icon","faCircleXmark","ligatures","source","faTimesCircle","AdsHorizontalTabsTab","tabsId","id","isActive","label","dismissible","isFirst","isLast","onSelect","onBlur","onClose","onFocus","selectHandler","blurHandler","closeHandler","focusHandler","blur","evt","emit","isNullOrUndefined","close","stopImmediatePropagation","focus","click","keyUp","code","key","preventDefault","attributes","role","toString","buttonClasses","push","$closeButton","h","class","onClick","tabIndex","style","generateSVGImage","data","assign","join","onKeyUp","adsHorizontalTabsCss","AdsHorizontalTabs","constructor","hostRef","this","firstRender","onDirChange","navigationEl","getNavigationContainer","classList","add","updateActiveLine","setTimeout","remove","getFirstTabIdentifier","isNil","length","setActiveTabState","newActiveTab","activeTabInternal","activeTab","getActiveTabElement","activeTabClientRect","getBoundingClientRect","$container","el","shadowRoot","querySelector","setProperty","left","x","Breakpoints","XL","setAttribute","identifier","generateId","component","handleIdentifierChange","newValue","handleDirectionChange","onTabSelected","isNullOrUndefinedOrEmpty","changeActiveTab","detail","isKeyboardClickEvent","onActiveTabChanged","onDataChanged","every","tab","Promise","resolve","focusSlottedContent","slottedContentElements","getSlottedElements","newActiveTabEl","find","slotElement","getAttribute","setFocusOnArea","showErrorMessage","TAB_DOESNT_EXIST","updateSlottedContentActiveStates","$slottedContentElements","map","$slotElement","slotElementIdentifier","componentWillLoad","mutationObs","getHtmlDirObserver","componentDidLoad","Pipeline.addComponent","disconnectedCallback","Pipeline.removeComponent","disconnect","renderTabs","index","tabSelect","tabSelectHandler","tabBlur","tabBlurHandler","tabClose","tabCloseHandler","tabFocus","tabFocusHandler","render","$tabElements","srLabel","cssVars","navigationClasses","getMediaQueryBreakpointClassUp","breakpoint","$navigation","$content","name"],"sources":["src/components/ads-horizontal-tabs/ads-horizontal-tabs.types.ts","node_modules/@fortawesome/pro-regular-svg-icons/faCircleXmark.js","node_modules/@fortawesome/pro-regular-svg-icons/faTimesCircle.js","src/components/ads-horizontal-tabs/components/ads-horizontal-tabs-tab/ads-horizontal-tabs-tab.tsx","src/components/ads-horizontal-tabs/ads-horizontal-tabs.scss?tag=ads-horizontal-tabs&encapsulation=shadow","src/components/ads-horizontal-tabs/ads-horizontal-tabs.tsx"],"sourcesContent":["export enum AdsHorizontalTabsErrors {\n  TAB_DOESNT_EXIST = \"No tab matching prop 'activeTab' value\",\n}\n\n/**\n * An interface for the horizontal Tab\n * @docs\n */\nexport interface HorizontalTab {\n  id: string;\n  label: string;\n  dismissible?: boolean;\n}\n\n/**\n * An interface for the `TabSelectEvent` event\n * @docs\n */\nexport interface TabSelectEvent {\n  evt: Event;\n  id: string;\n}\n\n/**\n * An interface that describes the tab selection handler\n */\nexport type TabSelectHandler = (evt: TabSelectEvent) => void;\n\n/**\n * An interface that describes the tab close event\n * @docs\n */\nexport interface TabCloseEvent {\n  evt: MouseEvent;\n  id: string;\n}\n\n/**\n * An interface that describes the tab close handler\n */\nexport type TabCloseHandler = (evt: TabCloseEvent) => void;\n\n/**\n * An interface that describes the tab blur event\n * @docs\n */\nexport interface TabBlurEvent {\n  evt: FocusEvent;\n  id: string;\n}\n\n/**\n * An interface that describes the tab blur handler\n */\nexport type TabBlurHandler = (evt: TabBlurEvent) => void;\n\n/**\n * An interface that describes the tab focus event\n * @docs\n */\nexport interface TabFocusEvent {\n  evt: FocusEvent;\n  id: string;\n}\n\n/**\n * An interface that describes the tab focus handler\n */\nexport type TabFocusHandler = (evt: TabFocusEvent) => void;\n","'use strict';\nObject.defineProperty(exports, '__esModule', { value: true });\nvar prefix = 'far';\nvar iconName = 'circle-xmark';\nvar width = 512;\nvar height = 512;\nvar aliases = [61532,\"times-circle\",\"xmark-circle\"];\nvar unicode = 'f057';\nvar svgPathData = 'M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z';\n\nexports.definition = {\n  prefix: prefix,\n  iconName: iconName,\n  icon: [\n    width,\n    height,\n    aliases,\n    unicode,\n    svgPathData\n  ]};\n\nexports.faCircleXmark = exports.definition;\nexports.prefix = prefix;\nexports.iconName = iconName;\nexports.width = width;\nexports.height = height;\nexports.ligatures = aliases;\nexports.unicode = unicode;\nexports.svgPathData = svgPathData;\nexports.aliases = aliases;","'use strict';\nObject.defineProperty(exports, '__esModule', { value: true });\nvar source = require('./faCircleXmark');\nexports.definition = {\n  prefix: source.prefix,\n  iconName: source.iconName,\n  icon: [\n    source.width,\n    source.height,\n    source.aliases,\n    source.unicode,\n    source.svgPathData\n  ]};\n\nexports.faTimesCircle = exports.definition;\nexports.prefix = source.prefix;\nexports.iconName = source.iconName;\nexports.width = source.width;\nexports.height = source.height;\nexports.ligatures = source.aliases;\nexports.unicode = source.unicode;\nexports.svgPathData = source.svgPathData;\nexports.aliases = source.aliases;","import { EventEmitter, FunctionalComponent, VNode, h } from '@stencil/core';\nimport { height, svgPathData, width } from '@fortawesome/pro-regular-svg-icons/faTimesCircle';\n\nimport { isNullOrUndefined } from 'utils/collection';\n\nimport {\n  TabBlurEvent,\n  TabBlurHandler,\n  TabCloseEvent,\n  TabCloseHandler,\n  TabFocusEvent,\n  TabFocusHandler,\n  TabSelectEvent,\n  TabSelectHandler,\n} from '../../ads-horizontal-tabs.types';\nimport { generateSVGImage } from 'utils/imageHelper';\n\ninterface AdsHorizontalTabsTabProps {\n  tabsId: string;\n  id: string;\n  isActive: boolean;\n  label: string;\n  dismissible?: boolean;\n  isFirst: boolean;\n  isLast: boolean;\n  onSelect: EventEmitter<TabSelectEvent>;\n  selectHandler?: TabSelectHandler;\n  onBlur: EventEmitter<TabBlurEvent>;\n  blurHandler?: TabBlurHandler;\n  onClose: EventEmitter<TabCloseEvent>;\n  closeHandler?: TabCloseHandler;\n  onFocus: EventEmitter<TabFocusEvent>;\n  focusHandler?: TabFocusHandler;\n}\n\nexport const AdsHorizontalTabsTab: FunctionalComponent<AdsHorizontalTabsTabProps> = ({\n  tabsId,\n  id,\n  isActive,\n  label,\n  dismissible,\n  isFirst,\n  isLast,\n  onSelect,\n  onBlur,\n  onClose,\n  onFocus,\n  selectHandler,\n  blurHandler,\n  closeHandler,\n  focusHandler,\n}) => {\n  const blur = (evt: FocusEvent): void => {\n    onBlur.emit({ evt: evt, id: id });\n    if (!isNullOrUndefined(blurHandler)) {\n      blurHandler({ evt: evt, id: id });\n    }\n  };\n  const close = (evt: MouseEvent): void => {\n    evt.stopImmediatePropagation();\n    onClose.emit({ evt: evt, id: id });\n    if (!isNullOrUndefined(closeHandler)) {\n      closeHandler({ evt: evt, id: id });\n    }\n  };\n  const focus = (evt: FocusEvent): void => {\n    onFocus.emit({ evt: evt, id: id });\n    if (!isNullOrUndefined(focusHandler)) {\n      focusHandler({ evt: evt, id: id });\n    }\n  };\n  const click = (evt: MouseEvent): void => {\n    onSelect.emit({ evt: evt, id: id });\n    if (!isNullOrUndefined(selectHandler)) {\n      selectHandler({ evt: evt, id: id });\n    }\n  };\n  const keyUp = (evt: KeyboardEvent): void => {\n    if (evt.code === 'Enter' || evt.code === 'Space' || evt.key === 'Enter' || evt.key === 'Spacebar') {\n      evt.preventDefault();\n      onSelect.emit({ evt: evt, id: id });\n      if (!isNullOrUndefined(selectHandler)) {\n        selectHandler({ evt: evt, id: id });\n      }\n    }\n  };\n\n  const attributes = {\n    role: 'tab',\n    'aria-controls': `tabs:${tabsId}:panel:${id}`,\n    'aria-describedby': `tabs:${tabsId}:panel:${id}`,\n    'aria-label': label,\n    'aria-selected': (!!isActive).toString(),\n  };\n\n  const buttonClasses = ['c-horizontal-tabs__tab'];\n  if (isActive) {\n    buttonClasses.push('is-active');\n  }\n  if (isFirst) {\n    buttonClasses.push('is-first');\n  }\n  if (isLast) {\n    buttonClasses.push('is-last');\n  }\n\n  const $closeButton = dismissible\n    ? ((\n        <span class=\"close-button\" onClick={close} tabIndex={0} role=\"button\" style={{ height: '1rem' }}>\n          {generateSVGImage({ data: svgPathData, height, width })}\n        </span>\n      ) as VNode)\n    : null;\n\n  return (\n    <div role=\"none\" class={`c-horizontal-tabs__navigation__tab`} data-active={isActive}>\n      <button\n        id={`tabs:${tabsId}:tab:${id}`}\n        data-slot={id}\n        class={buttonClasses.join(' ')}\n        onClick={click}\n        onBlur={blur}\n        onFocus={focus}\n        onKeyUp={keyUp}\n        {...attributes}\n      >\n        <div class={'c-horizontal-tabs__tab__label'}>\n          {label}\n          {$closeButton}\n        </div>\n      </button>\n    </div>\n  ) as VNode;\n};\n","@import 'core';\n\n@import 'components/ads-horizontal-tabs-tab/ads-horizontal-tabs-tab.scss';\n\n/**\n * @prop --ads-horizontal-tabs-gradient-transparency: Top level transparency for border image gradient\n * @prop --ads-horizontal-tabs-navigation-background-color: Default top level background color\n * @prop --ads-horizontal-tabs-navigation-border-gradient: Top level border image gradient\n * @prop --ads-horizontal-tabs-tab-background-color: Default tab background color\n * @prop --ads-horizontal-tabs-tab-border-color: Default tab border color\n * @prop --ads-horizontal-tabs-tab-color: Default tab font color\n * @prop --ads-horizontal-tabs-tab-color-active: Tab font color on active\n * @prop --ads-horizontal-tabs-tab-color-hover: Tab font color on hover\n * @prop --ads-horizontal-tabs-tab-container-position: Tab container position behaviour\n * @prop --ads-horizontal-tabs-tab-container-top: Tab container vertical positioning\n * @prop --ads-horizontal-tabs-tab-content-background-color: Tab content color\n * @prop --ads-horizontal-tabs-underline-color: Tab border color on active\n * @prop --ads-horizontal-tabs-wrapper-left: Left element of wrapper\n */\n\n$ads-horizontal-tabs-active-left: 0;\n$ads-horizontal-tabs-active-width: 0;\n\n::slotted(*) {\n  display: none !important;\n}\n\n::slotted(.active) {\n  box-sizing: border-box !important;\n  display: block !important;\n  min-height: 100%;\n  padding: 0 !important;\n  width: 100%;\n}\n\n:host {\n  --ads-horizontal-tabs-active-left: #{$ads-horizontal-tabs-active-left};\n  --ads-horizontal-tabs-active-width: #{$ads-horizontal-tabs-active-width};\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n:host([theme='default']) {\n  @include ads-vars-component-horizontal-tabs-default;\n  @include ads-vars-component-paragraph-default;\n  @include ads-vars-component-heading-default;\n}\n\n:host([theme='dark']) {\n  @include ads-vars-component-horizontal-tabs-dark;\n  @include ads-vars-component-paragraph-dark;\n  @include ads-vars-component-heading-dark;\n}\n\n:host([dir='ltr']) {\n  @include ads-vars-component-horizontal-tabs-ltr;\n}\n\n:host([dir='rtl']) {\n  @include ads-vars-component-horizontal-tabs-rtl;\n}\n\n.c-horizontal-tabs {\n  background: var(--ads-horizontal-tabs-tab-content-background-color, $ads-horizontal-tabs-tab-content-background-color);\n  font-family: var(--ads-font-family);\n\n  &__content {\n    background-color: var(--ads-horizontal-tabs-tab-content-background-color, $ads-horizontal-tabs-tab-content-background-color);\n  }\n\n  &__navigation {\n    display: grid;\n    gap: 2rem;\n    grid-auto-columns: max-content;\n    grid-auto-flow: column;\n    padding-right: 1rem;\n    position: relative;\n\n    @include breakpoints-up() {\n      padding-right: 0;\n    }\n\n    &::after {\n      background-color: var(--ads-horizontal-tabs-underline-color, $ads-horizontal-tabs-underline-color);\n      bottom: 0;\n      content: '';\n      height: 1px;\n      left: var(--ads-horizontal-tabs-active-left, $ads-horizontal-tabs-active-left);\n      position: absolute;\n      transition: width 0.3s ease-in-out, left 0.3s ease-in-out;\n      width: var(--ads-horizontal-tabs-active-width, $ads-horizontal-tabs-active-width);\n    }\n\n    &.no-transition::after {\n      transition: none !important;\n    }\n  }\n\n  &__tab {\n    background-color: var(--ads-horizontal-tabs-tab-background-color, $ads-horizontal-tabs-tab-background-color);\n    border-color: var(--ads-horizontal-tabs-tab-border-color, $ads-horizontal-tabs-tab-border-color);\n    color: var(--ads-horizontal-tabs-tab-color, $ads-horizontal-tabs-tab-color);\n    fill: var(--ads-horizontal-tabs-tab-color, $ads-horizontal-tabs-tab-color);\n\n    &:focus,\n    &:hover {\n      color: var(--ads-horizontal-tabs-tab-color-hover, $ads-horizontal-tabs-tab-color-hover);\n      fill: var(--ads-horizontal-tabs-tab-color-hover, $ads-horizontal-tabs-tab-color-hover);\n    }\n\n    &.is-active {\n      color: var(--ads-horizontal-tabs-tab-color-active, $ads-horizontal-tabs-tab-color-active);\n      fill: var(--ads-horizontal-tabs-tab-color-active, $ads-horizontal-tabs-tab-color-active);\n    }\n  }\n\n  &__tab-container {\n    background-color: var(--ads-horizontal-tabs-navigation-background-color, $ads-horizontal-tabs-navigation-background-color);\n    border: 0;\n    border-bottom: 3px solid;\n    border-image: var(--ads-horizontal-tabs-navigation-border-gradient, $ads-horizontal-tabs-navigation-border-gradient);\n    border-image-slice: 1;\n    display: flex;\n    margin: 0 0 -1px 0;\n    overflow-x: auto;\n    position: var(--ads-horizontal-tabs-tab-container-position, $ads-horizontal-tabs-tab-container-position);\n    top: var(--ads-horizontal-tabs-tab-container-top, $ads-horizontal-tabs-tab-container-top);\n    z-index: $layer-4;\n\n    &::before {\n      background: linear-gradient(\n          var(--ads-horizontal-tabs-gradient-rotation, $ads-horizontal-tabs-gradient-rotation-ltr),\n          var(--ads-horizontal-tabs-gradient-transparency, $ads-horizontal-tabs-gradient-transparency) 75%,\n          var(--ads-horizontal-tabs-navigation-background-color, $ads-horizontal-tabs-navigation-background-color) 100%\n      );\n      content: '';\n      display: inline-block;\n      flex-shrink: 0;\n      height: 46px;\n      left: 0;\n      pointer-events: none;\n      position: sticky;\n      right: 0;\n      width: 100%;\n      z-index: $layer-12;\n    }\n  }\n\n  &__navigation-wrapper {\n    left: var(--ads-horizontal-tabs-wrapper-left, $ads-horizontal-tabs-wrapper-left);\n    position: absolute;\n\n    @include breakpoints-up() {\n      left: 0;\n    }\n  }\n}\n","import * as Pipeline from '../core/utils/pipeline';\nimport {\n  AdsHorizontalTabsErrors,\n  HorizontalTab,\n  TabBlurEvent,\n  TabBlurHandler,\n  TabCloseEvent,\n  TabCloseHandler,\n  TabFocusEvent,\n  TabFocusHandler,\n  TabSelectEvent,\n  TabSelectHandler,\n} from './ads-horizontal-tabs.types';\nimport { AdsHorizontalTabsTab } from './components/ads-horizontal-tabs-tab/ads-horizontal-tabs-tab';\nimport { BaseComponent } from '../core/interfaces/BaseComponent';\nimport { Breakpoint, Breakpoints } from '../core/types/globalTypes';\nimport { Component, Element, Event, EventEmitter, Listen, Method, Prop, State, VNode, Watch, h } from '@stencil/core';\nimport { Theme } from '../core/types/globalTypes';\nimport { generateId, getMediaQueryBreakpointClassUp, showErrorMessage } from '../core/utils/components';\nimport {\n  getHtmlDirObserver,\n  getSlottedElements,\n  isKeyboardClickEvent,\n  isNil,\n  isNullOrUndefined,\n  isNullOrUndefinedOrEmpty,\n  setFocusOnArea,\n} from 'utils/index';\n\n/**\n * Tabs are used to navigate between views within the same context. Tabs are best used to separate content into smaller groups of related information. As default one tab will already be selected and its related content will be visible. Only one tab can be selected at a time.\n * @tag `<ads-horizontal-tabs>`\n * @slot content - The content associated with a tab\n * @example <ads-horizontal-tabs><div slot=\"content\" data-id=\"slot-1\">slot-1 text</div><div slot=\"content\" data-id=\"slot-2\">slot-2 text</div></ads-horizontal-tabs>\n */\n@Component({\n  tag: 'ads-horizontal-tabs',\n  styleUrl: 'ads-horizontal-tabs.scss',\n  shadow: true,\n})\nexport class AdsHorizontalTabs implements BaseComponent {\n  public component: string;\n\n  private firstRender = true;\n\n  private mutationObs: MutationObserver;\n\n  constructor() {\n    this.el.setAttribute('id', this.identifier || generateId('ads-horizontal-tabs'));\n    this.component = 'ads-horizontal-tabs';\n  }\n\n  @Element() private el: HTMLAdsHorizontalTabsElement;\n\n  /**\n   * @hidden\n   */\n  @State() activeTabInternal: string;\n\n  /**\n   * The unique identifier (optional)\n   */\n  @Prop({ attribute: 'id' }) identifier?: string;\n\n  /**\n   * The dir attribute (optional)\n   */\n  @Prop({ attribute: 'dir' }) direction?: string;\n\n  /**\n   * The theme for this component instance (optional)\n   * Values: \"default\", \"dark\"\n   */\n  @Prop({ reflect: true }) theme?: Theme;\n\n  /**\n   * The breakpoint for the components responsiveness (optional)\n   * @default \"xl\"\n   */\n  @Prop({ reflect: true }) breakpoint: Breakpoint = Breakpoints.XL;\n\n  /**\n   * The currently active tab (optional)\n   */\n  @Prop({ reflect: true }) activeTab?: string;\n\n  /**\n   * The data that defines the tabs\n   */\n  @Prop() data: HorizontalTab[];\n\n  /**\n   * Text to display as the aria-label of the component (optional)\n   */\n  @Prop({ reflect: true }) srLabel?: string;\n\n  /**\n   * Callback function triggered on tab selection (optional)\n   */\n  @Prop() tabSelectHandler?: TabSelectHandler;\n\n  /**\n   * Callback function triggered on tab blur (optional)\n   */\n  @Prop() tabBlurHandler?: TabBlurHandler;\n\n  /**\n   * Callback function triggered on tab close (optional)\n   */\n  @Prop() tabCloseHandler?: TabCloseHandler;\n\n  /**\n   * Callback function triggered on tab focus (optional)\n   */\n  @Prop() tabFocusHandler?: TabFocusHandler;\n\n  /**\n   * Emits 'tabBlur' custom event.\n   * Usage: `document.querySelector('ads-horizontal-tabs').addEventListener('tabBlur', function(evt) {});`\n   * @event\n   */\n  @Event({ bubbles: false }) tabBlur: EventEmitter<TabBlurEvent>;\n\n  /**\n   * Emits 'tabClose' custom event.\n   * Usage: `document.querySelector('ads-horizontal-tabs').addEventListener('tabClose', function(evt) {});`\n   * @event\n   */\n  @Event({ bubbles: false }) tabClose: EventEmitter<TabCloseEvent>;\n\n  /**\n   * Emits 'tabFocus' custom event.\n   * Usage: `document.querySelector('ads-horizontal-tabs').addEventListener('tabFocus', function(evt) {});`\n   * @event\n   */\n  @Event({ bubbles: false }) tabFocus: EventEmitter<TabFocusEvent>;\n\n  /**\n   * Emits 'tabSelect' custom event.\n   * Usage: `document.querySelector('ads-horizontal-tabs').addEventListener('tabSelect', function(evt) {});`\n   * @event\n   */\n  @Event({ bubbles: false }) tabSelect: EventEmitter<TabSelectEvent>;\n\n  /**\n   * Handle identifier property changes\n   * @param {string} newValue The new value for \"identifier\"\n   * @hidden\n   */\n  @Watch('identifier')\n  handleIdentifierChange(newValue: string): void {\n    this.el.setAttribute('id', newValue || generateId('ads-horizontal-tabs'));\n  }\n\n  /**\n   * Handle direction property changes\n   */\n  @Watch('direction')\n  handleDirectionChange(): void {\n    this.onDirChange();\n  }\n\n  /**\n   * Listen to tabSelect event. (triggered by the tab component)\n   * @param {CustomEvent} evt the selection event\n   * @returns {void}\n   * @hidden\n   */\n  @Listen('tabSelect')\n  protected onTabSelected(evt: CustomEvent<TabSelectEvent>): void {\n    if (isNullOrUndefinedOrEmpty(this.activeTab)) {\n      this.changeActiveTab(evt.detail.id, isKeyboardClickEvent(evt.detail.evt));\n    }\n  }\n\n  /**\n   * Watch for activeTab prop change.\n   * @param {string} newValue the new prop value\n   * @returns {void}\n   * @hidden\n   */\n  @Watch('activeTab')\n  onActiveTabChanged(newValue: string): void {\n    if (!isNullOrUndefinedOrEmpty(newValue)) {\n      this.changeActiveTab(newValue);\n    }\n  }\n\n  /**\n   * Watch for data prop change.\n   * @param {HorizontalTab[]} newValue the new prop value\n   * @returns {void}\n   * @hidden\n   */\n  @Watch('data')\n  onDataChanged(newValue: HorizontalTab[]): void {\n    if (isNullOrUndefined(newValue)) {\n      return;\n    }\n    if (\n      isNullOrUndefinedOrEmpty(this.activeTab) &&\n      (isNullOrUndefinedOrEmpty(this.activeTabInternal) || newValue.every((tab: HorizontalTab) => tab.id !== this.activeTabInternal))\n    ) {\n      this.setActiveTabState(this.getFirstTabIdentifier(newValue));\n    } else {\n      this.updateActiveLine();\n    }\n  }\n\n  /**\n   * Returns the id of the current active tab\n   * @return {Promise<string>}  The active tab id\n   */\n  @Method()\n  value(): Promise<string> {\n    return Promise.resolve(this.activeTabInternal);\n  }\n\n  /**\n   * Updates underline with transition\n   */\n  private onDirChange = () => {\n    const navigationEl = this.getNavigationContainer();\n    navigationEl.classList.add('no-transition');\n    this.updateActiveLine();\n    setTimeout(() => {\n      navigationEl.classList.remove('no-transition');\n    }, 50);\n  };\n\n  /**\n   * Gets the first tab id\n   * @param {HorizontalTab[]} data the data to go through\n   * @returns {string} the fist id\n   */\n  private getFirstTabIdentifier = (data: HorizontalTab[]): string => {\n    return !isNullOrUndefined(data) && !isNil(data.length) ? data[0].id : '';\n  };\n\n  /**\n   * Sets the active tab state\n   * @param {string} newActiveTab The new active tab value\n   */\n  private setActiveTabState = (newActiveTab: string): void => {\n    this.activeTabInternal = newActiveTab;\n    this.updateActiveLine();\n  };\n\n  /**\n   * Update the css props that drive the underline\n   */\n  private updateActiveLine = (): void => {\n    const activeTab = this.getActiveTabElement();\n    if (!isNullOrUndefined(activeTab)) {\n      const activeTabClientRect = activeTab.getBoundingClientRect();\n      const $container = this.el.shadowRoot.querySelector('.c-horizontal-tabs__navigation');\n      this.el.style.setProperty('--ads-horizontal-tabs-active-width', `${activeTabClientRect.width}px`);\n      this.el.style.setProperty('--ads-horizontal-tabs-active-left', `${activeTabClientRect.left - $container.getBoundingClientRect().x}px`);\n    }\n  };\n\n  /**\n   * Gets the active tab element\n   * @returns {Element} The active tab element\n   */\n  private getActiveTabElement = (): Element => this.el.shadowRoot.querySelector(`[data-slot=\"${this.activeTabInternal}\"]`);\n\n  /**\n   * Gets the navigation container element\n   * @returns {HTMLElement} The navigation container element\n   */\n  private getNavigationContainer = (): HTMLElement => this.el.shadowRoot.querySelector('.c-horizontal-tabs__navigation');\n\n  /**\n   * Sets the current active tab\n   * @param {string} id The tab id to set as active\n   * @param {boolean} focusSlottedContent Should focus slotted content\n   */\n  private changeActiveTab(id: string, focusSlottedContent = false): void {\n    const slottedContentElements = getSlottedElements(this.el, 'content');\n    const newActiveTabEl = slottedContentElements.find((slotElement: HTMLElement) => slotElement.getAttribute('data-id') === id);\n    if (!isNullOrUndefined(newActiveTabEl)) {\n      if (focusSlottedContent) {\n        setFocusOnArea(newActiveTabEl);\n      }\n      this.setActiveTabState(id);\n    } else {\n      // if customer defined active tab doesn't exist, show error message\n      if (!isNullOrUndefinedOrEmpty(this.activeTab) && !this.firstRender) {\n        showErrorMessage(AdsHorizontalTabsErrors.TAB_DOESNT_EXIST, this.el);\n      }\n    }\n  }\n\n  /**\n   * Updates the content attributes based on active tab\n   */\n  private updateSlottedContentActiveStates(): void {\n    const $slottedContentElements = getSlottedElements(this.el, 'content');\n    if (isNil($slottedContentElements.length)) {\n      return;\n    }\n    $slottedContentElements.map(($slotElement: HTMLElement) => {\n      const slotElementIdentifier = $slotElement.getAttribute('data-id');\n      $slotElement.setAttribute('id', `tabs:${this.identifier}:panel:${slotElementIdentifier}`);\n      $slotElement.setAttribute('role', 'tabpanel');\n      $slotElement.classList.remove('active');\n      if (slotElementIdentifier === this.activeTabInternal) {\n        $slotElement.classList.add('active');\n      }\n    });\n  }\n\n  protected componentWillLoad(): void {\n    if (isNullOrUndefinedOrEmpty(this.activeTab)) {\n      this.setActiveTabState(this.getFirstTabIdentifier(this.data));\n    } else {\n      this.setActiveTabState(this.activeTab);\n    }\n    this.mutationObs = getHtmlDirObserver(this.onDirChange);\n  }\n\n  protected componentDidLoad(): void {\n    this.updateSlottedContentActiveStates();\n    this.updateActiveLine();\n    Pipeline.addComponent(this.el);\n    this.firstRender = false;\n    setTimeout(() => {\n      this.getNavigationContainer().classList.remove('no-transition');\n    }, 50);\n  }\n  protected disconnectedCallback(): void {\n    Pipeline.removeComponent(this.el);\n    this.mutationObs.disconnect();\n  }\n\n  /**\n   * Renders the tabs sub-components\n   * @returns {VNode} the tab elements\n   */\n  private renderTabs() {\n    return !isNullOrUndefined(this.data) && this.data.length > 0\n      ? this.data.map((tab: HorizontalTab, index) => {\n          return (\n            <AdsHorizontalTabsTab\n              tabsId={this.identifier}\n              id={tab.id}\n              isActive={tab.id === this.activeTabInternal}\n              label={tab.label}\n              dismissible={tab.dismissible}\n              isFirst={index === 0}\n              isLast={this.data.length === index + 1}\n              onSelect={this.tabSelect}\n              selectHandler={this.tabSelectHandler}\n              onBlur={this.tabBlur}\n              blurHandler={this.tabBlurHandler}\n              onClose={this.tabClose}\n              closeHandler={this.tabCloseHandler}\n              onFocus={this.tabFocus}\n              focusHandler={this.tabFocusHandler}\n            />\n          ) as VNode;\n        })\n      : null;\n  }\n\n  protected render(): VNode {\n    if (isNullOrUndefined(this.data)) {\n      return;\n    }\n\n    this.updateSlottedContentActiveStates();\n    const $tabElements = this.renderTabs();\n    const attributes = {\n      'aria-label': this.srLabel,\n      'aria-orientation': 'horizontal',\n    };\n\n    const cssVars: { 'background-color'?: string } = {};\n\n    const navigationClasses = ['c-horizontal-tabs__navigation', `${getMediaQueryBreakpointClassUp(this.breakpoint)}`];\n    if (this.firstRender) {\n      navigationClasses.push('no-transition');\n    }\n\n    const $navigation = (\n      <div class={navigationClasses.join(' ')} role=\"tablist\" {...attributes}>\n        {$tabElements}\n      </div>\n    ) as HTMLElement;\n\n    const $content = (\n      <div class=\"c-horizontal-tabs__content js-horizontal-tabs-content\" style={cssVars}>\n        <slot name=\"content\" />\n      </div>\n    ) as HTMLElement;\n\n    return (\n      <div class=\"c-horizontal-tabs js-horizontal-tabs\">\n        <div class={`c-horizontal-tabs__tab-container ${getMediaQueryBreakpointClassUp(this.breakpoint)}`}>\n          <div class={`c-horizontal-tabs__navigation-wrapper ${getMediaQueryBreakpointClassUp(this.breakpoint)}`}>{$navigation}</div>\n        </div>\n        {$content}\n      </div>\n    ) as VNode;\n  }\n}\n"],"mappings":"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"}