'use strict';

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

const index = require('./index-a7b0c73d.js');
const core = require('@sankhyalabs/core');

const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;--tabselector--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--tabselector--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.middle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;background-color:unset;min-width:100px;max-width:260px;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Roboto\");font-size:var(--title--small, 14px);flex-shrink:0;margin-bottom:var(--space--extra-small, 3px)}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active ez-icon{--ez-icon--color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}.left-icon{padding-right:var(--space--small)}.right-icon{padding-left:var(--space--small)}";

const EzTabselector = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.ezChange = index.createEvent(this, "ezChange", 7);
    this.setFocusedParam = (ev) => {
      if (ev.key === "Enter") {
        const selectedTab = this._processedTabs[this._focusedIndex];
        this.handleTabClick(selectedTab);
        ev.preventDefault();
        this.setFocusedTab(selectedTab.index);
      }
      else if (ev.key === "ArrowLeft" || ev.key === "ArrowRight") {
        let operator = undefined;
        if (ev.key === "ArrowLeft") {
          operator = false;
        }
        else if (ev.key === "ArrowRight") {
          operator = true;
        }
        else {
          return;
        }
        if (this._focusedIndex === undefined) {
          if (operator === false) {
            this._focusedIndex = this.selectedIndex !== undefined ? this.selectedIndex - 1 : undefined;
          }
          else {
            this._focusedIndex = this.selectedIndex !== undefined ? this.selectedIndex + 1 : undefined;
          }
        }
        else {
          if (operator === false) {
            this._focusedIndex = this._focusedIndex - 1;
          }
          else {
            this._focusedIndex = this._focusedIndex + 1;
          }
        }
        if (this._focusedIndex < 0) {
          this._focusedIndex = 0;
        }
        else if (this._focusedIndex > this._processedTabs.length - 1) {
          this._focusedIndex = this._processedTabs.length - 1;
        }
        this.setFocusedBtn(true, this._focusedIndex);
        this.setFocusedTab(this._focusedIndex);
      }
      else if (ev.key === "Tab" || ev.key === "Escape") {
        const currentTab = this._processedTabs[this.selectedIndex];
        this._focusedIndex = undefined;
        this.handleTabClick(currentTab);
        ev.preventDefault();
        this.setFocusedTab(this.selectedIndex);
      }
    };
    this._processedTabs = undefined;
    this.selectedIndex = undefined;
    this.selectedTab = undefined;
    this.tabs = undefined;
  }
  observeTabs(newValue, oldValue) {
    if (newValue && typeof newValue !== "string") {
      this._processedTabs = newValue;
      return;
    }
    if (newValue !== oldValue) {
      this.processesTabs();
    }
  }
  async goToTab(tabIndex, silent = false) {
    const tab = this._processedTabs.find(tab => tab.index === tabIndex);
    this.handleTabClick(tab, !silent);
  }
  handleTabClick(tab, emitChange = true) {
    this.selectedIndex = tab.index;
    this._focusedIndex = undefined;
    this.selectedTab = tab.tabKey;
    if (emitChange) {
      this.ezChange.emit(tab);
    }
    this.setFocusedBtn(false, tab.index);
  }
  componentWillLoad() {
    this.processesTabs();
  }
  processesTabs() {
    if (this.tabs) {
      if (Array.isArray(this.tabs)) {
        this._processedTabs = [...this.tabs];
      }
      else {
        this._processedTabs = [];
        this.tabs.split(",").forEach((label) => {
          label = label.trim();
          this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });
          this.buildElementIdTab(this._processedTabs);
        });
      }
    }
    this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
      const tabKey = elem.getAttribute("tabKey");
      const label = elem.getAttribute("label");
      const leftIcon = elem.getAttribute("leftIcon");
      const rightIcon = elem.getAttribute("rightIcon");
      const tab = { label, tabKey, leftIcon, rightIcon, index: this._processedTabs.length };
      const content = elem.firstChild;
      if (content) {
        content.setAttribute("slot", "tab" + tab.index);
        this._hostElem.appendChild(content);
      }
      this._processedTabs.push(tab);
      this.buildElementIdTab(this._processedTabs);
    });
  }
  componentDidRender() {
    this.updateScroll();
  }
  componentDidLoad() {
    core.ElementIDUtils.addIDInfo(this._hostElem, "itemsSelector");
    this._hostElem.shadowRoot.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
      var _a;
      const label = (_a = elem.querySelector('span.tab-label')) === null || _a === void 0 ? void 0 : _a.innerText;
      const dataInfo = { id: `${core.StringUtils.toCamelCase(label)}` };
      core.ElementIDUtils.addIDInfo(elem, "itemSelector", dataInfo);
    });
  }
  handleSlotChange(ev) {
    const slot = ev.target;
    const content = slot.assignedElements()[0];
    if (content) {
      content.style.marginLeft = "6px";
    }
  }
  scrollBackward() {
    const container = this._scrollContainer;
    if (container) {
      container.scrollLeft -= container.clientWidth;
    }
  }
  scrollFoward() {
    const container = this._scrollContainer;
    if (container) {
      let lastTab = null;
      container.querySelectorAll(".tab").forEach((tab) => {
        if (tab.getBoundingClientRect().right < container.clientWidth) {
          lastTab = tab;
        }
      });
      container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
    }
  }
  updateScroll() {
    const container = this._scrollContainer;
    if (container) {
      const { scrollWidth, clientWidth, scrollLeft } = container;
      const remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
      this._startHidden = container.scrollLeft > 0;
      this._endHidden = remainingScroll > 0;
      if (this._startHidden) {
        this._backwardButton.classList.remove("hidden");
      }
      else {
        this._backwardButton.classList.add("hidden");
      }
      if (this._endHidden) {
        this._forwardButton.classList.remove("hidden");
      }
      else {
        this._forwardButton.classList.add("hidden");
      }
      const classNames = ["", "startHidden", "endHidden", "middle"];
      const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
      classNames.forEach((name) => {
        if (name !== currentClass && container.classList.contains(name)) {
          container.classList.remove(name);
        }
      });
      if (currentClass && !container.classList.contains(currentClass)) {
        container.classList.add(currentClass);
      }
    }
  }
  domScrollHandler() {
    window.clearTimeout(this._scrollCallBack);
    this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
  }
  setFocusedTab(index) {
    window.clearTimeout(this._scrollCallBackTest);
    this._scrollCallBackTest = window.setTimeout(() => {
      const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
      tabtoscroll.scrollIntoView();
    }, 200);
  }
  setFocusedBtn(visible, parameter) {
    const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
    tabsButtons.forEach((el) => {
      el.classList.remove("is-focused");
      if (el.id === "tab" + parameter && visible) {
        el.classList.add("is-focused");
      }
    });
  }
  buildElementIdTab(tabs) {
    tabs.forEach(tab => {
      if (!tab.hasOwnProperty(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)) {
        const elemIdTabSelector = this._hostElem.getAttribute(core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
        const dataElementID = `${elemIdTabSelector}_${core.StringUtils.toCamelCase(tab.tabKey)}`;
        tab[core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = dataElementID;
      }
    });
  }
  render() {
    return (index.h(index.Host, null, index.h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), index.h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev) }, this._processedTabs.map((tab, index$1) => {
      const tabId = "tab" + index$1;
      const isSelected = index$1 === this.selectedIndex || (this.selectedTab && tab.tabKey === this.selectedTab);
      if (isSelected) {
        this.selectedTab = tab.tabKey;
        this.selectedIndex = index$1;
      }
      return index.h("button", { id: tabId, name: "tab-button", class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab) }, tab.leftIcon && index.h("ez-icon", { iconName: tab.leftIcon, class: "left-icon" }), index.h("span", { class: "tab-label", title: tab.label }, tab.label), tab.rightIcon && index.h("ez-icon", { iconName: tab.rightIcon, class: "right-icon" }), index.h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
    })), index.h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
  }
  get _hostElem() { return index.getElement(this); }
  static get watchers() { return {
    "tabs": ["observeTabs"]
  }; }
};
EzTabselector.style = ezTabselectorCss;

exports.ez_tabselector = EzTabselector;
