'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-ca0e0765.js');

const tabsCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.tabs{display:flex;font-family:var(--ifx-font-family)}.tabs.horizontal{flex-direction:column}.tabs.vertical{flex-direction:row}.tabs-list{display:flex;list-style:none;padding:0;margin:0;position:relative;font-weight:600}.tabs-list:focus-within .active-border{display:none}.active-border{content:\"\";position:absolute;transition:left 0.3s ease-in-out, width 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out}.tabs.horizontal .active-border{bottom:0;left:0;height:2px;background-color:#0A8276}.tabs.vertical .tabs-list{flex-direction:column;border-bottom:none}.tabs.vertical .tab-content{padding-top:0px;padding-left:32px}.tab-item{padding:8px 16px;cursor:pointer;position:relative}.tab-item:hover{color:#0A8276}.tab-item:active,.tab-item.active{color:#0A8276}.tab-item:focus,.tab-item.focus{outline:none;border-radius:1px;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.tab-item:focus+.active-border,.tab-item.focus+.active-border{display:none}.tab-item.disabled{color:#BFBBBB;pointer-events:none}.tabs.vertical .tab-item{border-right:2px solid transparent;min-width:7em}.tabs.vertical .active-border{left:0;top:0;width:2px;background-color:#0A8276}.tab-content{padding-top:24px;padding-left:0px;flex-grow:1}.tabs.small .tab-item{font-size:0.875rem}";

const IfxTabs = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.ifxTabChange = index.createEvent(this, "ifxTabChange", 7);
    this.tabs = [];
    this.orientation = "horizontal";
    this.activeTabIndex = 0;
    this.internalOrientation = undefined;
    this.internalActiveTabIndex = 0;
    this.internalFocusedTabIndex = 0;
    this.tabRefs = [];
    this.tabHeaderRefs = [];
    this.disabledTabs = [];
    this.tabObjects = [];
  }
  setActiveAndFocusedTab(index) {
    this.internalActiveTabIndex = index;
    this.internalFocusedTabIndex = index;
  }
  activeTabIndexChanged(newValue, oldValue) {
    if (newValue !== oldValue) {
      this.setActiveAndFocusedTab(newValue);
    }
  }
  componentWillLoad() {
    this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';
    if (this.internalActiveTabIndex !== this.activeTabIndex) {
      this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });
    }
    // this.internalActiveTabIndex = this.activeTabIndex;
    this.internalFocusedTabIndex = this.internalActiveTabIndex;
    this.updateTabStyles();
    this.onSlotChange();
  }
  updateTabStyles() {
    this.tabHeaderRefs.forEach((tab, index) => {
      tab.classList.toggle('active', index === this.internalActiveTabIndex);
      tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false');
    });
  }
  // needed for smooth border transition
  reRenderBorder() {
    const borderElement = this.el.shadowRoot.querySelector('.active-border');
    if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {
      if (this.orientation === 'horizontal') {
        borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;
        borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;
        borderElement.style.top = '';
        borderElement.style.height = '';
      }
      else {
        borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;
        borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;
        borderElement.style.left = '';
        borderElement.style.width = '';
      }
    }
  }
  // when a slot is removed / added
  onSlotChange() {
    const tabs = this.el.querySelectorAll('ifx-tab');
    this.tabObjects = Array.from(tabs).map((tab) => {
      return {
        header: tab === null || tab === void 0 ? void 0 : tab.header,
        disabled: (tab === null || tab === void 0 ? void 0 : tab.disabled) === true
      };
    });
    this.tabRefs = Array.from(tabs);
    this.tabRefs.forEach((tab, index) => {
      tab.setAttribute('slot', `tab-${index}`);
    });
  }
  setDefaultOrientation() {
    const validOrientations = ['horizontal', 'vertical'];
    const lowercaseOrientation = this.orientation.toLowerCase();
    if (!validOrientations.includes(lowercaseOrientation)) {
      this.internalOrientation = 'horizontal';
    }
    else
      this.internalOrientation = this.orientation;
  }
  componentDidLoad() {
    this.updateBorderAndFocus();
    // Add keyboard event listeners for each tab header
    this.tabHeaderRefs.forEach((tab, index) => {
      tab.addEventListener('focus', this.onTabFocus(index));
    });
  }
  onTabFocus(index) {
    return () => {
      this.internalFocusedTabIndex = index;
    };
  }
  disconnectedCallback() {
    // Remove keyboard event listeners when component is unmounted
    this.tabHeaderRefs.forEach((tab, index) => {
      tab.removeEventListener('focus', this.onTabFocus(index));
    });
  }
  componentDidUpdate() {
    this.updateBorderAndFocus();
  }
  updateBorderAndFocus() {
    this.reRenderBorder();
    this.updateTabFocusability();
  }
  updateTabFocusability() {
    this.tabHeaderRefs.forEach((tab, index) => {
      tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;
    });
  }
  focusNextTab() {
    let nextIndex = this.internalFocusedTabIndex + 1;
    while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {
      nextIndex++;
    }
    if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {
      this.internalFocusedTabIndex = nextIndex;
      this.tabHeaderRefs[nextIndex].focus();
    }
  }
  focusPreviousTab() {
    let prevIndex = this.internalFocusedTabIndex - 1;
    while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {
      prevIndex--;
    }
    if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {
      this.internalFocusedTabIndex = prevIndex;
      this.tabHeaderRefs[prevIndex].focus();
    }
  }
  getTabItemClass(index) {
    const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;
    const isDisabled = this.tabObjects[index].disabled;
    return `tab-item ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;
  }
  handleClick(tab, index) {
    this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index });
    if (!tab.disabled)
      this.internalActiveTabIndex = index;
  }
  handleKeyDown(ev) {
    if (ev.key === 'Tab') {
      if (ev.shiftKey) {
        // Shift + Tab
        if (this.internalFocusedTabIndex === 0) {
          // Allow default behavior to move focus out of component
          return;
        }
        else {
          ev.preventDefault();
          this.focusPreviousTab();
        }
      }
      else {
        // Tab
        if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {
          // Allow default behavior to move focus out of component
          return;
        }
        else {
          ev.preventDefault();
          this.focusNextTab();
        }
      }
    }
    else if (ev.key === 'Enter') {
      if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {
        const previouslyActiveTabIndex = this.internalActiveTabIndex;
        this.internalActiveTabIndex = this.internalFocusedTabIndex;
        this.ifxTabChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex });
      }
    }
  }
  render() {
    var _a;
    return (index.h("div", { "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, index.h("ul", { role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
      _a.map((tab, index$1) => (index.h("li", { class: this.getTabItemClass(index$1), ref: (el) => (this.tabHeaderRefs[index$1] = el), tabindex: "0", onClick: () => this.handleClick(tab, index$1), "aria-selected": index$1 === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, tab === null || tab === void 0 ? void 0 : tab.header))), index.h("div", { class: "active-border" })), index.h("div", { class: "tab-content" }, Array.from(this.tabObjects).map((_, index$1) => (index.h("div", { style: { display: index$1 === this.internalActiveTabIndex ? 'block' : 'none' } }, index.h("slot", { name: `tab-${index$1}` })))))));
  }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "activeTabIndex": ["activeTabIndexChanged"]
  }; }
};
IfxTabs.style = tabsCss;

exports.ifx_tabs = IfxTabs;

//# sourceMappingURL=ifx-tabs.cjs.entry.js.map