'use strict';

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

const index = require('./index-b7293b2f.js');
const helpers = require('./helpers-2489a184.js');

const tabsCss = ":host{--lu-tabs-min-width:0;display:flex;width:100%;min-width:0;min-width:var(--lu-tabs-min-width)}.inner-container{margin-left:auto;margin-right:auto;display:flex;position:relative;flex-flow:row;width:var(--lu-tabs-max-inner-width, 100%);height:100%;white-space:nowrap}.box.expand{transition-duration:0.15s;transition-timing-function:cubic-bezier(0.4, 0, 1, 1)}.box.contract{transition-duration:0.18s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.box.align-bottom{bottom:0}.box.hidden{display:none}.box{left:0;right:0;position:absolute;bottom:0;height:3px;-webkit-transform:scale(0);-webkit-transform:translateZ(0);transform:scale(0);-webkit-transform-origin:left center;transform-origin:left center;transition-property:-webkit-transform;transition-property:transform;background-color:var(--lu-tabs-selection-bar-color, #256EC1)}";

const Tabs = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.luTabsUpdated = index.createEvent(this, "luTabsUpdated", 7);
    this.luTabFocused = index.createEvent(this, "luTabFocused", 3);
    this.luTabBlurred = index.createEvent(this, "luTabBlurred", 3);
    this.tabsId = `lu-rg-${tabsIds++}`;
    /**
     * Array of tabs in tabs
     */
    this.tabs = [];
    /**
     * increment tab
     * @internal
     */
    this.tabIncrement = 1;
    /**
     * dont do cool animation, if set to false the component needs to know when it's size has changed through the elementResized method
     */
    this.noSlide = true;
    this.onBarTransitionEnd = () => {
      if (!this.noSlide) {
        let cl = this.selectionBar.classList;
        // bar animation: expand -> contract
        if (cl.contains("expand")) {
          cl.remove("expand");
          cl.add("contract");
          this.positionBar(this.pos.width, this.pos.left);
          // bar animation done
        }
        else if (cl.contains("contract")) {
          cl.remove("contract");
        }
      }
    };
  }
  connectedCallback() {
    this.currentNodes = this.getNodes();
  }
  componentDidLoad() {
    helpers.sleep(25).then(() => this.tabs.forEach((tab) => {
      if (tab.active) {
        this.updateItYo(tab);
      }
    }));
    if (this.selectionBar) {
      this.selectionBar.addEventListener("webkitTransitionEnd", this.onBarTransitionEnd);
    }
  }
  disconnectedCallback() {
    if (this.selectionBar) {
      this.selectionBar.removeEventListener("webkitTransitionEnd", this.onBarTransitionEnd);
    }
  }
  onTabDidLoad(ev) {
    const tab = ev.target;
    tab.noSlide = this.noSlide;
    if (!tab.name) {
      tab.name = this.tabsId + "-tab-" + this.tabIncrement;
      this.tabIncrement++;
    }
    if (tab.active) {
      this.value = tab.name;
    }
    this.tabs.push(tab);
  }
  onTabDidDisconnect(ev) {
    const index = this.tabs.indexOf(ev.target);
    if (index > -1) {
      this.tabs.splice(index, 1);
    }
  }
  onTabSelect(ev) {
    const selectedTab = ev.target;
    if (selectedTab) {
      this.updateItYo(selectedTab);
    }
  }
  handleKeyDown(ev) {
    // Prevents default behavior from occurring when pressing certain keys while focused on menu
    let flag = false;
    // Finds currently focused node in tabs
    this.focusedNode = this.currentNodes.find((node) => getComputedStyle(node.shadowRoot.querySelector(".focus-box"))
      .display === "block");
    switch (ev.key) {
      case "ArrowRight":
        this.focusedNode.nextElementSibling
          ? this.focusedNode.nextElementSibling.focus()
          : this.currentNodes[0].focus();
        flag = true;
        break;
      case "ArrowLeft":
        this.focusedNode.previousElementSibling
          ? this.focusedNode.previousElementSibling.focus()
          : this.currentNodes[this.currentNodes.length - 1].focus();
        flag = true;
        break;
      case "Home":
        this.currentNodes[0].focus();
        flag = true;
        break;
      case "End":
        this.currentNodes[this.currentNodes.length - 1].focus();
        flag = true;
        break;
    }
    if (flag) {
      ev.preventDefault();
    }
  }
  onFocus() {
    this.luTabFocused.emit();
  }
  onBlur() {
    if (document.activeElement.nodeName !== "LU-TAB") {
      this.luTabBlurred.emit();
    }
  }
  /**
   * If fancyAnimation is true then the component needs to know when t
   */
  async elementResized() {
    if (this.value && !this.noSlide) {
      this.tabChanged(this.tabs.filter((tab) => {
        return tab.name === this.value;
      })[0], null);
    }
    return true;
  }
  updateItYo(selectedTab) {
    let oldTab = null;
    let newTab;
    this.currentOrderedTabsArray = this.getNodes();
    this.value = selectedTab.name;
    this.currentOrderedTabsArray.forEach((tab) => {
      if (tab !== selectedTab && tab.active === true) {
        tab.active = false;
        oldTab = tab;
      }
      if (tab === selectedTab) {
        newTab = tab;
      }
    });
    if (!this.noSlide) {
      this.tabChanged(newTab, oldTab);
    }
    this.luTabsUpdated.emit({ value: this.value });
  }
  tabChanged(tab, old) {
    if (!tab) {
      // Remove the bar without animation.
      this.selectionBar.classList.remove("expand");
      this.selectionBar.classList.remove("contract");
      this.positionBar(0, 0);
      return;
    }
    let r = this.tabsContent.getBoundingClientRect();
    let w = r.width;
    let tabRect = tab.getBoundingClientRect();
    let tabOffsetLeft = tabRect.left - r.left;
    this.pos = {
      width: this.calcPercent(tabRect.width, w),
      left: this.calcPercent(tabOffsetLeft, w),
    };
    if (this.noSlide || old == null) {
      // Position the bar without animation.
      this.selectionBar.classList.remove("expand");
      this.selectionBar.classList.remove("contract");
      this.positionBar(this.pos.width, this.pos.left);
      return;
    }
    let oldRect = old.getBoundingClientRect();
    let oldIndex = this.tabs.indexOf(old);
    let index = this.tabs.indexOf(tab);
    let m = 5;
    // bar animation: expand
    this.selectionBar.classList.add("expand");
    let moveRight = oldIndex < index;
    if (moveRight) {
      this.positionBar(this.calcPercent(tabRect.left + tabRect.width - oldRect.left, w) - m, this.left);
    }
    else {
      this.positionBar(this.calcPercent(oldRect.left + oldRect.width - tabRect.left, w) - m, this.calcPercent(tabOffsetLeft, w) + m);
    }
  }
  positionBar(width, left) {
    width = width || 0;
    left = left || 0;
    this.width = width;
    this.left = left;
    this.selectionBar.style.webkitTransform =
      "translateX(" + left + "%) scaleX(" + width / 100 + ")";
    this.selectionBar.style.transform =
      "translateX(" + left + "%) scaleX(" + width / 100 + ")";
  }
  getNodes() {
    let nodes = Array.from(this.tabsElement.children);
    if (nodes[0] && nodes[0].tagName.toLowerCase() === "div") {
      nodes = Array.from(Array.from(this.tabsElement.children)[0].children).filter((child) => child.tagName.toLowerCase() === "lu-tab");
    }
    return nodes;
  }
  calcPercent(w, w0) {
    return (100 * w) / w0;
  }
  render() {
    return (index.h("div", { "aria-label": this.label, class: "inner-container", ref: (el) => (this.tabsContent = el), role: "tablist" }, index.h("slot", null), this.noSlide ? null : (index.h("div", { class: "box align-bottom", onTransitionEnd: this.onBarTransitionEnd, ref: (el) => (this.selectionBar = el) }))));
  }
  get tabsElement() { return index.getElement(this); }
};
let tabsIds = 0;
Tabs.style = tabsCss;

exports.lu_tabs = Tabs;

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