import { r as b, c as r, h as s, H as n, g as c } from "./index.61732cef.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: "183f244eac3ad3253b30ec3190138ce0d0403d76" }, s("div", { key: "314635bc254ace9d3889c55f6c48f97a1efd9718", class: "tabs" }, s("swirl-tab-bar", { key: "774c79dd65d0fae9358bbf2b7951cbb4ee90b4f6", 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: "378857296abb9940ac843450e3d3719666a526f0" }));
  }
  get el() {
    return c(this);
  }
};
h.style = d();
export {
  h as swirl_tabs
};
