import { l as h, s as f, x as c, e as d } from "./query-assigned-elements-D930kELM.mjs";
import { n as p } from "./property-DJzm_oB9.mjs";
var u = Object.defineProperty, P = Object.getOwnPropertyDescriptor, a = (n, t, s, l) => {
  for (var e = l > 1 ? void 0 : l ? P(t, s) : t, i = n.length - 1, o; i >= 0; i--)
    (o = n[i]) && (e = (l ? o(t, s, e) : o(e)) || e);
  return l && e && u(t, s, e), e;
};
let r = class extends f {
  constructor() {
    super(...arguments), this.noSurface = !1, this.titleWidth = "150px", this._handleToggle = (n) => {
      const t = n.detail.index, s = this.panelItems[t], l = s.open;
      this.panelItems.forEach((e) => {
        e.resetPanel();
      }), l && (s.open = !0, this.panelItems.forEach((e) => {
        e.index == t - 1 ? e.index == 0 ? e.separateSinglePanel = !0 : e.aboveOpenInnerPanel = !0 : e.index == t + 1 && (e.index == this.panelItems.length - 1 && (e.separateSinglePanel = !0), e.belowOpenInnerPanel = !0);
      }));
    };
  }
  render() {
    return c`
      <div class="container">
        <div class="content">
          <slot id="mainSlot"></slot>
        </div>
      </div>
    `;
  }
  firstUpdated() {
    if (window.addEventListener(
      "cv-expansionPanel-togglePanel",
      (n) => this._handleToggle(n)
    ), this.style.setProperty(
      "--cv-expansion-panel-item-title-width",
      this.titleWidth
    ), this.noSurface && this.style.setProperty("--cv-theme-surface-container", "transparent"), this.panelItems.length == 1)
      this.panelItems[0].isSinglePanel = !0;
    else {
      let n = 0;
      this.panelItems.forEach((t) => {
        n == 0 ? t.isTopPanel = !0 : n == this.panelItems.length - 1 ? t.isBottomPanel = !0 : t.isInnerPanel = !0, t.index = n, n++;
      });
    }
  }
};
a([
  p({ type: Boolean, reflect: !0 })
], r.prototype, "noSurface", 2);
a([
  p({ type: String })
], r.prototype, "titleWidth", 2);
a([
  h()
], r.prototype, "panelItems", 2);
r = a([
  d("cv-expansion-panel")
], r);
export {
  r as CovalentExpansionPanel
};
