'use strict';

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

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

const ruxTabsCss = ":host{box-sizing:border-box;display:flex;justify-content:flex-start;height:100%;width:auto;margin:0;padding:0;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host(:not(:focus-within)){contain:content;}:host([hidden]){display:none}";

const RuxTabs = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.ruxSelected = index.createEvent(this, "ruxselected", 7);
    this._panels = [];
    this._tabs = [];
    this.small = undefined;
  }
  // This allows us to hear the selected prop change on tab.
  // Once we hear it, we need to update the related panels visibilty accordingly.
  handleTabselected(e) {
    const target = e.target;
    //* only change the classlist of panels associated with this rux-tabs component
    const children = Array.from(this.el.children);
    if (target.selected && children.includes(target)) {
      //filter through tabs and set the corresponding panel to not be hidden
      const selectedPanel = this._panels.find((panel) => panel.getAttribute('aria-labelledby') ===
        target.getAttribute('id'));
      this._panels.forEach((panel) => panel.classList.add('hidden'));
      selectedPanel === null || selectedPanel === void 0 ? void 0 : selectedPanel.classList.remove('hidden');
    }
    this._checkSelected();
  }
  handleListen(e) {
    const sourcePanel = e.target;
    const sourcePanelLabelId = sourcePanel.getAttribute('aria-labelledby');
    /**
     * The registerPanel event will be emitted from any Tab Panel,
     * not just the Panels associated with this component.
     * In scenarios where there could be multiple tab panels,
     * we want to filter out and only add the panels that belong
     * to this specific Tab group.
     */
    if (sourcePanelLabelId === this.el.id) {
      this._registerPanels(e);
    }
  }
  handleSmallChange() {
    //determine whether or not to pass small attr to child tabs
    if (this.small) {
      this._tabs.forEach((tab) => tab.setAttribute('small', ''));
    }
    else {
      this._tabs.forEach((tab) => {
        if (tab.hasAttribute('small')) {
          tab.removeAttribute('small');
        }
      });
    }
  }
  onKeydown(e) {
    var _a;
    // Get all tabs inside of the tab group and then
    // filter out disabled tabs since we need to skip those
    const tabs = this._tabs.filter((tab) => !tab.disabled);
    // Only move the tab if the current focus is in the tab group
    if (e.target && tabs.includes(e.target)) {
      const index = tabs.findIndex((tab) => tab === e.target);
      let next;
      // If hitting arrow down or arrow right, move to the next tab
      // If we're on the last tab, move to the first tab
      if (['ArrowDown', 'ArrowRight'].includes(e.code)) {
        next = index === tabs.length - 1 ? tabs[0] : tabs[index + 1];
      }
      // If hitting arrow up or arrow left, move to the previous tab
      // If we're on the first tab, move to the last tab
      if (['ArrowUp', 'ArrowLeft'].includes(e.code)) {
        next = index === 0 ? tabs[tabs.length - 1] : tabs[index - 1];
      }
      if (next && tabs.includes(next)) {
        const nextFocus = (_a = next.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.rux-tab');
        nextFocus.focus();
      }
    }
  }
  connectedCallback() {
    this._addTabs();
  }
  componentWillUpdate() {
    this._checkSelected();
  }
  _addTabs() {
    var _a;
    this._tabs = Array.from((_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('rux-tab'));
  }
  _checkSelected() {
    // If no selected tab exists, we need to set an item to tabindex = 0
    // so that we can still tab into the tabs list
    //** note: we also have to account for if the first tab IS selected
    //** otherwise it is possible to have tab 1 selected but also be tabIndex = -1
    const firstTab = this._tabs[0].shadowRoot.querySelector('[part="container"]');
    if (firstTab) {
      firstTab.tabIndex =
        !this._tabs.find((tab) => tab.selected) ||
          this._tabs[0].hasAttribute('selected')
          ? 0
          : -1;
    }
  }
  _registerPanels(e) {
    this._panels = [];
    e.detail.forEach((panel) => {
      this._panels.push(panel);
    });
    // run addTabs if this event was heard.
    this._addTabs();
    // Default to first tab if none are selected
    const selectedTab = this._tabs.find((tab) => tab.selected) || this._tabs[0];
    this._setTab(selectedTab);
  }
  _onPress(e) {
    e.key === 'Enter' ? this._onClick(e) : null;
  }
  _onClick(e) {
    const target = e.target;
    //get the tab in case complex html is nested inside rux-tab
    const tab = target.closest('rux-tab');
    //if user does not click on a tab but instead on rux-tabs, tab will be null
    if (tab !== null) {
      this.ruxSelected.emit(tab);
      if (tab.getAttribute('disabled') === null) {
        this._setTab(tab);
      }
    }
  }
  _reset() {
    // hide everything
    // Only reset the tabs and panels that are part of this instance of rux-tabs
    this._tabs.forEach((tab) => {
      if (tab.parentElement === this.el)
        tab.selected = false;
    });
    this._panels.forEach((panel) => {
      var _a;
      if (((_a = panel.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-labelledby')) ===
        this.el.id)
        panel.classList.add('hidden');
    });
  }
  _setTab(selectedTab) {
    this._reset();
    // find the panel whose aria-labeldby attribute matches the tab’s id
    const selectedPanel = this._panels.find((panel) => panel.getAttribute('aria-labelledby') ===
      selectedTab.getAttribute('id'));
    if (selectedTab)
      selectedTab.selected = true;
    if (selectedPanel)
      selectedPanel.classList.remove('hidden');
  }
  render() {
    return (index.h(index.Host, { onClick: (e) => this._onClick(e), onKeyPress: (e) => this._onPress(e), role: "tablist" }, index.h("slot", { onSlotchange: this._addTabs.bind(this) })));
  }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "small": ["handleSmallChange"]
  }; }
};
RuxTabs.style = ruxTabsCss;

exports.rux_tabs = RuxTabs;
