import { n as i, C as u } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as g } from "../chunks/component.styles.CRO4Odto.js";
import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
import { i as x, x as f } from "../chunks/lit-element.jLBm65_O.js";
import { e as h } from "../chunks/query.BBf1UFkC.js";
import { e as w } from "../chunks/class-map.BiVq-cVR.js";
import { o as d } from "../chunks/style-map.llVFPd__.js";
const S = x`:host{display:block;box-sizing:border-box!important}.grid{flex-direction:row;display:flex}.grid--no-wrap{flex-wrap:nowrap}.grid--wrap{flex-wrap:wrap}.grid--wrap-reverse{flex-wrap:wrap-reverse}.grid--flex-gap{gap:var(--cx-flex-row-spacing) var(--cx-flex-column-spacing)}.grid--container{container-type:inline-size}`;
var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (e, t, n, a) => {
  for (var s = a > 1 ? void 0 : a ? v(t, n) : t, p = e.length - 1, l; p >= 0; p--)
    (l = e[p]) && (s = (a ? l(t, n, s) : l(s)) || s);
  return a && s && y(t, n, s), s;
};
const b = 12, c = /\d$/;
let r = class extends u {
  constructor() {
    super(...arguments), this.spacing = "0px", this.columns = b, this.useFlexGap = !1, this.columnSpacing = 0, this.rowSpacing = 0, this.wrap = "wrap", this.useContainer = !1;
  }
  handleSlotChange() {
    this.defaultSlot.assignedElements().forEach((t) => {
      this.useContainer ? t.setAttribute("use-container", "") : t.removeAttribute("use-container");
    });
  }
  /** Helper for getter */
  resolveSpacing(e, t) {
    return e === 0 || e === "0" || e === "" ? t ?? 0 : e;
  }
  get columnSpacingValue() {
    let e = this.resolveSpacing(this.columnSpacing, this.spacing);
    return (typeof e == "number" || c.test(e)) && (e = e + "px"), e;
  }
  get rowSpacingValue() {
    let e = this.resolveSpacing(this.rowSpacing, this.spacing);
    return (typeof e == "number" || c.test(e)) && (e = e + "px"), e;
  }
  render() {
    const e = this.columnSpacingValue, t = this.rowSpacingValue;
    return f`<div class=${w({
      grid: !0,
      "grid--container": this.useContainer,
      "grid--flex-gap": this.useFlexGap,
      "grid--no-wrap": this.wrap === "nowrap",
      "grid--wrap": this.wrap === "wrap",
      "grid--wrap-reverse": this.wrap === "wrap-reverse"
    })} style=${d({
      "--cx-flex-column-spacing": this.useFlexGap ? e : "0px",
      "--cx-flex-row-spacing": this.useFlexGap ? t : "0px",
      "--cx-grid-column-spacing": this.useFlexGap ? "0px" : e,
      "--cx-grid-columns": this.columns,
      "--cx-grid-row-spacing": this.useFlexGap ? "0px" : t
    })} part="base"><slot part="content" @slotchange=${this.handleSlotChange}></slot></div>`;
  }
};
r.styles = [g, S];
o([
  h("slot")
], r.prototype, "defaultSlot", 2);
o([
  i({ reflect: !0 })
], r.prototype, "spacing", 2);
o([
  i({ reflect: !0, type: Number })
], r.prototype, "columns", 2);
o([
  i({ attribute: "use-flex-gap", reflect: !0, type: Boolean })
], r.prototype, "useFlexGap", 2);
o([
  i({ attribute: "column-spacing", reflect: !0, type: String })
], r.prototype, "columnSpacing", 2);
o([
  i({ attribute: "row-spacing", reflect: !0, type: String })
], r.prototype, "rowSpacing", 2);
o([
  i({ reflect: !0 })
], r.prototype, "wrap", 2);
o([
  i({ attribute: "use-container", reflect: !0, type: Boolean })
], r.prototype, "useContainer", 2);
r = o([
  m("cx-grid")
], r);
export {
  r as default
};
