import { P as h, r as u, n as d } from "./plus-base-cd557806.mjs";
import { e as c } from "./custom-element-eaccb8d2.mjs";
import { i as b } from "./query-48157d42.mjs";
import { n as f } from "./static-aefc0385.mjs";
import { t as v, s as g } from "./tab.style-24ee8994.mjs";
import "./index-975d3293.mjs";
var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (t, e, a, l) => {
  for (var s = l > 1 ? void 0 : l ? _(e, a) : e, p = t.length - 1, r; p >= 0; p--)
    (r = t[p]) && (s = (l ? r(e, a, s) : r(s)) || s);
  return l && s && y(e, a, s), s;
};
let o = class extends h {
  constructor() {
    super(...arguments), this.size = "md", this.kind = "horizontal", this.disabled = !1;
  }
  get tabItems() {
    var t;
    return [...(t = this.tabSlot) == null ? void 0 : t.assignedElements({ flatten: !0 })].filter((e) => e.tagName.toLowerCase() === "plus-tab");
  }
  get panelItems() {
    var t;
    return [...(t = this.panelSlot) == null ? void 0 : t.assignedElements({ flatten: !0 })].filter((e) => e.tagName.toLowerCase() === "plus-tab-panel");
  }
  handleSlotChange() {
    var t;
    (t = this.tabItems) == null || t.forEach((e, a) => {
      e.setAttribute("size", this.size), e.setAttribute("kind", this.kind), e.disabled = this.disabled || e.disabled;
    });
  }
  updated(t) {
    super.updated(t), this.handleSlotChange();
  }
  handleClickItem({ target: t }) {
    var a, l, s;
    if (t.parentElement, t instanceof HTMLElement && t.tagName.toLowerCase() === "plus-tab") {
      const { id: p } = t;
      (a = this.tabItems) == null || a.forEach((i, m) => {
        i.active = i.id === p, this.emit("plus-change", { detail: { id: p } });
      });
      const r = (l = this.tabItems) == null ? void 0 : l.find((i) => i.active);
      (s = this.panelItems) == null || s.forEach((i, m) => {
        i.active = (r == null ? void 0 : r.value) === i.value;
      });
    }
  }
  render() {
    const { size: t, disabled: e, kind: a } = this, { tabHeader: l, tabGroup: s } = v({ size: t, disabled: e, kind: a });
    return f`
      <div class=${s()} role="tablist" aria-label="Tab Group">
        <div class=${l()}>
          <slot name="tabItem" @slotchange=${this.handleSlotChange} @plus-tab-click=${this.handleClickItem}></slot>
        </div>
        <div class="flex w-full flex-col items-start justify-start">
          <slot name="content"></slot>
        </div>
      </div>
    `;
  }
};
o.styles = [...h.styles, u(g)];
n([
  b(".tab-group")
], o.prototype, "tabGroup", 2);
n([
  b("slot[name='tabItem'")
], o.prototype, "tabSlot", 2);
n([
  b("slot[name='content']")
], o.prototype, "panelSlot", 2);
n([
  d({ type: String })
], o.prototype, "size", 2);
n([
  d({ type: String })
], o.prototype, "kind", 2);
n([
  d({ type: Boolean, converter: (t) => t != "false" })
], o.prototype, "disabled", 2);
o = n([
  c("plus-tab-group")
], o);
export {
  o as TabGroupComponent
};
