import { r as b, c as r, h as s, H as n, g as c } from "./index.e6beb8d9.js";
import { n as e } from "./utils-CCck-DTo.e4e43b6a.js";
import "react";
import "react-dom";
const d = () => ".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl-tabs{box-sizing:border-box}.tabs.sc-swirl-tabs{width:100%}", h = class {
  constructor(t) {
    b(this, t), this.tabActivated = r(this, "tabActivated", 7), this.tabBarVariant = "default", this.tabBarTabs = [], this.tabs = [], this.onActivateNextTab = () => {
      this.activateNextTab();
    }, this.onActivatePreviousTab = () => {
      this.activatePreviousTab();
    }, this.onActivateTab = (i) => {
      this.activateTab(i.detail);
    };
  }
  componentWillLoad() {
    this.collectTabs(), this.updateTabBarTabs();
  }
  async activateTab(t) {
    if (this.activeTab === t)
      return;
    this.activeTab = t, this.tabs.forEach((a) => a.active = !1);
    const i = this.tabs.find((a) => a.tabId === t);
    !Boolean(i) || (i.active = !0, this.tabActivated.emit(i), this.updateTabBarTabs());
  }
  activateNextTab() {
    const t = this.tabs.findIndex((a) => a.tabId === this.activeTab), i = e(t + 1, this.tabs.length);
    this.activateTab(this.tabs[i].tabId), requestAnimationFrame(() => {
      var a;
      (a = this.el.querySelector(".tabs__tab--active")) == null || a.focus();
    });
  }
  activatePreviousTab() {
    const t = this.tabs.findIndex((a) => a.tabId === this.activeTab), i = e(t - 1, this.tabs.length);
    this.activateTab(this.tabs[i].tabId), requestAnimationFrame(() => {
      var a;
      (a = this.el.querySelector(".tabs__tab--active")) == null || a.focus();
    });
  }
  collectTabs() {
    if (this.tabs = Array.from(this.el.querySelectorAll("swirl-tab")), this.tabs.length === 0)
      return;
    const t = this.tabs.find((i) => i.tabId === this.initialTab);
    this.activateTab(Boolean(t) ? t.tabId : this.tabs[0].tabId);
  }
  updateTabBarTabs() {
    this.tabBarTabs = this.tabs.map((t) => ({
      icon: t.icon,
      id: t.tabId,
      label: t.label,
      active: this.activeTab === t.tabId
    }));
  }
  render() {
    return s(n, { key: "ed8ef1a3ee8e8955a3a1bd53c422a496c9395086" }, s("div", { key: "574fdf9c677e95732bb0c217d74315bd8e752bd8", class: "tabs" }, s("swirl-tab-bar", { key: "639b07ee9dc84c3b11dd32c0f08aa83d1edfd5b3", label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), s("slot", { key: "d93a9fb2873d0b24cbea725220f8b909f0af4629" }));
  }
  get el() {
    return c(this);
  }
};
h.style = d();
export {
  h as swirl_tabs
};
