import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c269755a.js';
import { T as TabNavigationTypes } from './TabNavigation-5195f8a6.js';

const teliaTabCss = ".telia-tab{}.telia-tab telia-tab-header[active]{background-color:white}.telia-tab__wrapper{position:relative;-ms-overflow-style:none;scrollbar-width:none;}.telia-tab__wrapper ::-webkit-scrollbar{display:none;}.telia-tab__wrapper .telia-tab__scroll-button{color:#29003e;background-color:#ffffff;box-shadow:0 calc(0.1rem * var(--voca-rem-multiplier)) calc(0.4rem * var(--voca-rem-multiplier)) rgba(0, 0, 0, 0.1);border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.15);display:none;position:absolute;top:0;z-index:10;height:100%;padding:0;cursor:pointer}.telia-tab__wrapper .telia-tab__scroll-button:hover{box-shadow:0 calc(0.4rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier)) rgba(0, 0, 0, 0.1);border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-tab__wrapper .telia-tab__scroll-button:focus{outline:calc(0.2rem * var(--voca-rem-multiplier)) solid #0099ff;outline-offset:calc(0.2rem * var(--voca-rem-multiplier))}.telia-tab__wrapper .telia-tab__scroll-button--left{left:0}.telia-tab__wrapper .telia-tab__scroll-button--right{right:0}.telia-tab__wrapper--scroll-end .telia-tab__scroll-button--left{display:block}.telia-tab__wrapper--scroll-start .telia-tab__scroll-button--right{display:block}.telia-tab__list{display:inline-flex;gap:calc(0.4rem * var(--voca-rem-multiplier));max-width:100%;min-width:100%;overflow:auto;padding:0;position:relative}@media (any-pointer: coarse){.telia-tab__list{overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;}}.telia-tab__list::before{content:\"small\";display:none}@media screen and (min-width: 37.5em){.telia-tab__list::before{content:\"medium\"}}@media screen and (min-width: 64em){.telia-tab__list::before{content:\"large\"}}.telia-tab__content{background-color:#ffffff;padding:calc(1.6rem * var(--voca-rem-multiplier)) 0}.telia-tab__content--light-background{background-color:#ffffff}.telia-tab__content .telia-tab__container{padding:0 calc(1.6rem * var(--voca-rem-multiplier))}@media screen and (min-width: 37.5em){.telia-tab__content .telia-tab__container{padding:0 calc(2.4rem * var(--voca-rem-multiplier))}}@media screen and (min-width: 64em){.telia-tab__content .telia-tab__container{padding:0 calc(2.4rem * var(--voca-rem-multiplier))}}.telia-tab--default .telia-tab__container{box-sizing:border-box;display:block;margin-left:auto;margin-right:auto;max-width:calc(144rem * var(--voca-rem-multiplier));padding:0 calc(1.6rem * var(--voca-rem-multiplier));width:100%}@media screen and (min-width: 37.5em){.telia-tab--default .telia-tab__container{padding:0 calc(2.4rem * var(--voca-rem-multiplier))}}@media screen and (min-width: 64em){.telia-tab--default .telia-tab__container{padding:0 calc(4.8rem * var(--voca-rem-multiplier))}}@media screen and (min-width: 90em){.telia-tab--default .telia-tab__container{padding:0 calc(4.8rem * var(--voca-rem-multiplier))}}.telia-tab--light,.telia-tab--light-wide{}.telia-tab--light telia-tab-header[active],.telia-tab--light-wide telia-tab-header[active]{background-color:transparent}.telia-tab--light .telia-tab__list,.telia-tab--light-wide .telia-tab__list{gap:0;position:static;width:100%}.telia-tab--light .telia-tab__list::after,.telia-tab--light-wide .telia-tab__list::after{background-color:#c8c8cd;bottom:0;content:\"\";display:block;height:calc(0.2rem * var(--voca-rem-multiplier));left:0;position:absolute;right:0;width:100%}.telia-tab--light .telia-tab__content,.telia-tab--light-wide .telia-tab__content{background-color:transparent}.telia-tab--wide telia-tab-header,.telia-tab--light-wide telia-tab-header,.telia-tab--full-width:is(.telia-tab--light) telia-tab-header,.telia-tab--full-width:is(.telia-tab--contained) telia-tab-header,.telia-tab--full-width:is(.telia-tab--contained-on-negative) telia-tab-header{flex-basis:auto;flex-grow:1;flex-shrink:0;min-width:fit-content;width:calc(17.7rem * var(--voca-rem-multiplier))}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}";

const TeliaTab = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.vocaTabChange = createEvent(this, "vocaTabChange", 7);
    /** State scroll used for toggling horizontal scroll shadow */
    this.scrollClasses = {};
    /** Array of slotted children */
    this.children = [];
    /** sets background on content */
    this.background = false;
    /** variant */
    this.variant = 'default';
    /** Controls wether the tabs should fill the entire available width */
    this.fullWidth = false;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-tab';
    this.componentClass = 'telia-tab';
    this.activeIndex = 0;
    this.isKeyPress = true;
    this.sideScrollAdjustmentSize = 200;
    this.onIntersection = (entries) => {
      const allEntriesVisible = entries.every(entry => entry.isIntersecting) &&
        entries.length === this.tabItems.length;
      if (allEntriesVisible) {
        this.scrollClasses = {};
        return;
      }
      entries.forEach(entry => {
        const entryIndex = Number(entry.target.children[0].getAttribute('data-index'));
        const isStartEntry = entryIndex === 0;
        const isLastEntry = entryIndex === this.tabItems.length - 1;
        this.scrollClasses = Object.assign(Object.assign(Object.assign({ 'telia-tab__wrapper--scroll-start': true }, this.scrollClasses), (isStartEntry && {
          'telia-tab__wrapper--scroll-end': !entry.isIntersecting,
        })), (isLastEntry && {
          'telia-tab__wrapper--scroll-start': !entry.isIntersecting,
        }));
      });
    };
  }
  handleInternalUpdate(e) {
    e.stopPropagation();
    this.createChildren();
  }
  handleTabNavigation(e) {
    const { location, key } = e.detail.value;
    const currentIndex = this.activeIndex;
    let nextIndex;
    this.isKeyPress = true;
    if (location > -1) {
      nextIndex = location;
      this.isKeyPress = false;
    }
    switch (key) {
      case TabNavigationTypes.ArrowLeft:
        if (currentIndex > 0) {
          nextIndex = currentIndex - 1;
        }
        else {
          nextIndex = this.children.length - 1;
        }
        break;
      case TabNavigationTypes.ArrowRight:
        if (currentIndex < this.children.length - 1) {
          nextIndex = currentIndex + 1;
        }
        else {
          nextIndex = 0;
        }
        break;
      case TabNavigationTypes.Home:
        nextIndex = 0;
        break;
      case TabNavigationTypes.End:
        nextIndex = this.children.length - 1;
        break;
    }
    this.activeIndex = nextIndex;
    this.children.forEach((child, index) => {
      child.active = index === nextIndex;
    });
    this.vocaTabChange.emit({ value: this.children[this.activeIndex].tabId });
    this.createChildren();
  }
  handleResize() {
    this.scrollToTarget(this.getActiveTabListItem());
  }
  componentWillLoad() {
    this.createChildren();
    this.findPreSelectedTab();
  }
  componentDidLoad() {
    this.tabItems = this.host.shadowRoot.querySelectorAll('telia-tab-header');
    const tablist = this.host.shadowRoot.querySelector('.telia-tab__list');
    this.observer = new IntersectionObserver(this.onIntersection, {
      threshold: [0.99],
      root: tablist,
    });
    this.tabItems.forEach(el => this.observer.observe(el));
    this.scrollToTarget(this.getActiveTabListItem());
  }
  disconnectedCallback() {
    var _a, _b;
    // if we have an intersection observer, disconnect it
    (_b = (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
  }
  /**
   * Check if there is a pre-selected tab,
   * else set first tab as pre-selected
   * @private
   */
  findPreSelectedTab() {
    if (this.children.length === 0)
      return;
    /**
     * flag to indicate that an active tab
     * was found on render
     */
    let activePreSet = false;
    this.children.forEach((child, index) => {
      if (activePreSet) {
        /**
         * since flag is true
         * all other tabs should
         * be set to not active
         */
        child.active = false;
      }
      if (child.active) {
        activePreSet = true;
        this.activeIndex = index;
      }
    });
    if (this.activeIndex === 0) {
      this.children[this.activeIndex].active = true;
    }
  }
  /**
   * Will scroll tab list to keyboard focused tab header
   * @param target
   * @private
   */
  scrollToTarget(target) {
    var _a, _b;
    /**
     * scroll may not be available in test runner, so check existence before
     * proceeding. We can't use scrollIntoView() because Safari doesn't support
     * it fully.
     */
    if (typeof (target === null || target === void 0 ? void 0 : target.getBoundingClientRect) !== 'function' ||
      typeof ((_a = this.tabList) === null || _a === void 0 ? void 0 : _a.scroll) !== 'function') {
      return;
    }
    const targetRect = target.getBoundingClientRect();
    const wrapperRect = this.tabList.getBoundingClientRect();
    const wrapperWidth = this.tabList.clientWidth;
    const wrapperOffset = parseInt((_b = getComputedStyle(this.tabList)['border-width-left']) === null || _b === void 0 ? void 0 : _b.split('px')[0], 10);
    let offset = wrapperRect.left + (isNaN(wrapperOffset) ? 0 : wrapperOffset);
    let left;
    //Handle forward navigation
    if (targetRect.right > wrapperRect.right) {
      left = targetRect.left + this.tabList.scrollLeft;
      left = left + targetRect.width - wrapperWidth + wrapperWidth * 0.1;
      left = left - offset;
    }
    //Handle backwards navigation
    if (targetRect.left < wrapperRect.left) {
      left = targetRect.left + this.tabList.scrollLeft;
      left = left - wrapperWidth * 0.1;
      left = left - offset;
    }
    if (left !== undefined) {
      this.tabList.scroll({ left: left, behavior: 'smooth' });
    }
  }
  /**
   * Create child array
   * @private
   */
  createChildren() {
    this.children = [];
    let slotted = this.host.querySelectorAll('telia-tab-content');
    slotted.forEach(node => {
      if (node.nodeName.indexOf('TELIA-TAB') > -1) {
        this.children.push(node);
      }
    });
  }
  getActiveTabListItem() {
    var _a;
    return (_a = this.tabList) === null || _a === void 0 ? void 0 : _a.querySelector('telia-tab-header[active]');
  }
  handleScrollButtonClick(side) {
    const { scrollLeft } = this.tabList;
    const modifier = side === 'left'
      ? -this.sideScrollAdjustmentSize
      : this.sideScrollAdjustmentSize;
    this.tabList.scroll({ left: scrollLeft + modifier, behavior: 'smooth' });
  }
  renderScrollButton(side) {
    return (h("button", { class: `${this.componentClass}__scroll-button ${this.componentClass}__scroll-button--${side}`, onClick: () => this.handleScrollButtonClick(side) }, h("telia-icon", { size: "md", name: `chevron-${side}` })));
  }
  render() {
    const classNames = {
      'telia-tab': true,
      [`telia-tab--${this.variant}`]: !!this.variant,
      [`telia-tab--full-width`]: this.fullWidth,
    };
    return (h("div", { class: classNames }, h("telia-vst", { dataTrackingId: this.dataTrackingId }), h("div", { class: "telia-tab__container" }, h("div", { class: Object.assign({ 'telia-tab__wrapper': true }, this.scrollClasses) }, h("div", { ref: el => {
        this.tabList = el;
      }, class: "telia-tab__list", role: "tablist" }, this.children.map((child, index) => {
      return (h("telia-tab-header", { onFocusin: e => {
          this.scrollToTarget(e.target);
        }, tabId: child.tabId, icon: child.icon, name: child.name, active: child.active, "data-testid": child.dataTestid, "data-index": index, "is-key-press": this.isKeyPress, variant: this.variant }, child.name));
    })), this.renderScrollButton('left'), this.renderScrollButton('right'))), h("div", { class: {
        'telia-tab__content': true,
        'telia-tab__content--light-background': this.background,
      }, role: "presentation" }, h("div", { class: "telia-tab__container", role: "presentation" }, h("slot", null)))));
  }
  get host() { return getElement(this); }
};
TeliaTab.style = teliaTabCss;

export { TeliaTab as telia_tab };
