import { P as u, r as h, n as b } from "./plus-base-1920dd44.mjs";
import { e as f } from "./custom-element-eaccb8d2.mjs";
import { i as m } from "./query-48157d42.mjs";
import { n as v } from "./static-be5c3b1c.mjs";
import { t as g, s as y } from "./tab.style-24ee8994.mjs";
import "./index-975d3293.mjs";
var _ = Object.defineProperty, C = Object.getOwnPropertyDescriptor, n = (t, e, l, a) => {
  for (var s = a > 1 ? void 0 : a ? C(e, l) : e, i = t.length - 1, p; i >= 0; i--)
    (p = t[i]) && (s = (a ? p(e, l, s) : p(s)) || s);
  return a && s && _(e, l, s), s;
};
let o = class extends u {
  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, l) => {
      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, s, i;
    const l = t.parentElement;
    if (console.log({ _parent: l }), t instanceof HTMLElement && t.tagName.toLowerCase() === "plus-tab") {
      const { id: p } = t;
      (a = this.tabItems) == null || a.forEach((r, c) => {
        r.active = r.id === p;
      });
      const d = (s = this.tabItems) == null ? void 0 : s.find((r) => r.active);
      (i = this.panelItems) == null || i.forEach((r, c) => {
        r.active = (d == null ? void 0 : d.value) === r.value;
      });
    }
  }
  render() {
    const { size: t, disabled: e, kind: l } = this, { tabHeader: a, tabGroup: s } = g({ size: t, disabled: e, kind: l });
    return v`
      <div class=${s()} role="tablist" aria-label="Tab Group">
        <div class=${a()}>
          <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 = [...u.styles, h(y)];
n([
  m(".tab-group")
], o.prototype, "tabGroup", 2);
n([
  m("slot[name='tabItem'")
], o.prototype, "tabSlot", 2);
n([
  m("slot[name='content']")
], o.prototype, "panelSlot", 2);
n([
  b({ type: String })
], o.prototype, "size", 2);
n([
  b({ type: String })
], o.prototype, "kind", 2);
n([
  b({ type: Boolean, converter: (t) => t != "false" })
], o.prototype, "disabled", 2);
o = n([
  f("plus-tab-group")
], o);
export {
  o as TabGroupComponent
};
