import { e as f } from "./custom-element-eaccb8d2.mjs";
import { P as h, n } from "./plus-base-1920dd44.mjs";
import { i as d } from "./query-48157d42.mjs";
import { n as c } from "./static-be5c3b1c.mjs";
import { l as v, c as z } from "./label.style-1b60b221.mjs";
import { s as y } from "./index-975d3293.mjs";
const S = y({
  slots: {
    host: ["font-sans antialiased flex flex-col  items-start justify-start w-full relative gap-0.5"],
    inputWrapper: ["flex flex-row items-center justify-start gap-2 "]
  },
  variants: {
    size: {
      sm: "",
      md: "",
      lg: ""
    },
    aligment: {
      horizontal: {
        inputWrapper: ["flex-row"]
      },
      vertical: {
        inputWrapper: ["flex-col"]
      }
    }
  },
  compoundVariants: [
    {
      size: "sm",
      aligment: "horizontal",
      class: {
        inputWrapper: ["gap-4"]
      }
    },
    {
      size: "sm",
      aligment: "vertical",
      class: {
        inputWrapper: ["gap-2"]
      }
    },
    {
      size: "md",
      aligment: "horizontal",
      class: {
        inputWrapper: ["gap-5"]
      }
    },
    {
      size: "md",
      aligment: "vertical",
      class: {
        inputWrapper: ["gap-2.5"]
      }
    },
    {
      size: "lg",
      aligment: "horizontal",
      class: {
        inputWrapper: ["gap-6"]
      }
    },
    {
      size: "lg",
      aligment: "vertical",
      class: {
        inputWrapper: ["gap-3"]
      }
    }
  ],
  defaultVariants: {
    size: "md",
    aligment: "horizontal"
  }
});
var W = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, p = (a, r, t, s) => {
  for (var e = s > 1 ? void 0 : s ? $(r, t) : r, i = a.length - 1, o; i >= 0; i--)
    (o = a[i]) && (e = (s ? o(r, t, e) : o(e)) || e);
  return s && e && W(r, t, e), e;
};
let l = class extends h {
  constructor() {
    super(...arguments), this.aligment = "horizontal", this.size = "md", this.error = !1;
  }
  handleSlotChange() {
    var r;
    const a = [...(r = this.defaultSlot) == null ? void 0 : r.assignedElements({ flatten: !0 })].filter((t) => t.tagName.toLowerCase() === "plus-radio");
    a == null || a.forEach((t) => {
      t == null || t.addEventListener("plus-change", (s) => {
        a.forEach((e) => {
          e !== s.target ? (e.checked = !1, this.emit("plus-change", e)) : e.checked = !0;
        });
      });
    });
  }
  render() {
    const { aligment: a, label: r, caption: t, size: s, error: e, required: i } = this, { host: o, inputWrapper: m } = S({ aligment: a }), u = () => r ? c`<label class=${v({ size: s, required: i })} for="input">${r}</label>` : null, g = () => t ? c`<div class=${z({ error: e, size: s })}>${t}</div>` : null;
    return c`
      <div class=${o()}>
        ${u()}
        <div class=${m()}>
          <slot class="radio-group" @slotchange=${this.handleSlotChange}> </slot>
        </div>
        ${g()}
      </div>
    `;
  }
};
p([
  n({ type: String })
], l.prototype, "aligment", 2);
p([
  d("slot")
], l.prototype, "defaultSlot", 2);
p([
  n({ type: String })
], l.prototype, "size", 2);
p([
  n({ type: String })
], l.prototype, "label", 2);
p([
  n({ type: String })
], l.prototype, "caption", 2);
p([
  n({ type: Boolean, converter: (a) => a != "false" })
], l.prototype, "error", 2);
l = p([
  f("plus-radio-group")
], l);
export {
  l as RadioGroupComponent
};
