import { P as k, r as C, n as a } from "./plus-base-1920dd44.mjs";
import { e as I } from "./custom-element-eaccb8d2.mjs";
import { t as F } from "./state-4d7d9621.mjs";
import { i as z } from "./query-48157d42.mjs";
import { l as B } from "./live-cd074699.mjs";
import { n as h } from "./static-be5c3b1c.mjs";
import { l as P, c as _ } from "./label.style-1b60b221.mjs";
import { s as j } from "./index-975d3293.mjs";
import "./directive-daf4e9b6.mjs";
const O = j({
  slots: {
    host: ["antialiased font-sans flex flex-col  items-start justify-start w-full relative gap-0.5"],
    base: ["flex flex-row items-center justify-start gap-2 group/base cursor-pointer text-color-default w-max py-2 border border-transparent"],
    inputElement: ["checkbox sr-only"],
    checkbox: ["rounded bg-color-base border border-color-default"],
    checkIcon: ["text-color-transparent transition-all ease-in-out scale-0 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"],
    textSlot: [],
    error: []
  },
  variants: {
    checked: {
      true: {
        checkIcon: ["scale-100 text-color-base"],
        checkbox: ["border-color-primary bg-color-primary"]
      }
    },
    focus: {
      true: {
        checkbox: "ring-2 ring-offset-2 z-[1] border-color-primary"
      },
      false: [""]
    },
    readonly: {
      true: {
        base: ["cursor-default"],
        checkbox: ["bg-color-base", "border-color-disabled"]
      }
    },
    disabled: {
      true: {
        base: ["cursor-not-allowed text-color-disabled"],
        checkbox: ["bg-color-disabled", "border-color-disabled"]
      }
    },
    error: {
      true: {
        checkbox: ["border-color-error"]
      }
    },
    size: {
      sm: {
        host: ["text-sm "],
        checkbox: ["w-4 h-4"],
        checkIcon: ["text-[8px] leading-[8px]"]
      },
      md: {
        host: ["text-base"],
        checkbox: ["w-4.5 h-4.5"],
        checkIcon: ["text-[10px] leading-[10px]"]
      },
      lg: {
        host: ["text-lg "],
        checkbox: ["w-5 h-5"],
        checkIcon: ["text-[12px] leading-[12px]"]
      }
    },
    required: {
      true: { textSlot: "after:content-['*'] after:text-color-default after:ml-0.5" },
      false: ""
    }
  },
  compoundVariants: [
    {
      disabled: !1,
      readonly: !1,
      checked: !1,
      class: {
        checkbox: ["group-hover/base:bg-color-base-hover", "group-active/base:bg-color-base-pressed"]
      }
    },
    {
      disabled: !1,
      readonly: !1,
      checked: !1,
      error: !0,
      class: {
        checkbox: ["group-hover/base:bg-color-invert-error-hover", "group-active/base:bg-color-invert-error-pressed"]
      }
    },
    {
      disabled: !1,
      readonly: !1,
      checked: !0,
      class: {
        checkbox: ["group-hover/base:bg-color-primary-hover", "group-active/base:bg-color-primary-pressed"]
      }
    },
    {
      disabled: !1,
      readonly: !1,
      checked: !0,
      error: !0,
      class: {
        checkbox: ["border-color-error bg-color-error group-hover/base:bg-color-error-hover", "group-active/base:bg-color-error-pressed"]
      }
    },
    {
      readonly: !0,
      checked: !0,
      class: {
        checkbox: [],
        checkIcon: ["text-color-default"]
      }
    },
    {
      disabled: !0,
      checked: !0,
      class: {
        checkbox: [],
        checkIcon: ["text-color-disabled"]
      }
    }
  ],
  defaultVariants: {
    disabled: !1,
    readonly: !1,
    checked: !1,
    size: "md",
    required: !1,
    error: !1
  }
}), q = `:host{display:inline-flex}
`;
var D = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (t, s, c, i) => {
  for (var o = i > 1 ? void 0 : i ? E(s, c) : s, d = t.length - 1, l; d >= 0; d--)
    (l = t[d]) && (o = (i ? l(s, c, o) : l(o)) || o);
  return i && o && D(s, c, o), o;
};
let e = class extends k {
  constructor() {
    super(...arguments), this.size = "md", this.checked = !1, this.indeterminate = !1, this.error = !1, this.hasFocus = !1;
  }
  handleClick() {
    this.checked = !this.checked, this.emit("plus-change");
  }
  handleFocus() {
    this.hasFocus = !0, this.emit("plus-focus");
  }
  handleBlur() {
    this.hasFocus = !1, this.emit("plus-blur");
  }
  handleChange() {
    this.checked = this.checkbox.checked, this.emit("plus-change");
  }
  render() {
    const { disabled: t, readonly: s, checked: c, text: i, title: o, id: d, size: l, label: n, caption: b, error: p, required: u, indeterminate: f } = this, { base: m, inputElement: y, checkbox: g, checkIcon: x, host: v, textSlot: $ } = O({
      disabled: t,
      readonly: s,
      checked: c || f,
      size: l,
      focus: this.hasFocus,
      required: u,
      error: p
    }), S = () => n ? h`<label class=${P({ required: u, size: l })} @click=${this.focus}>${n}</label>` : null, w = () => b ? h`<div class=${_({ error: p, size: l })}>${b}</div>` : null;
    return h`
      <div class=${v()}>
        ${S()}
        <input
          id=${d}
          class=${y()}
          type="checkbox"
          title=${o}
          .checked=${B(c)}
          .disabled=${t || s}
          role="checkbox"
          aria-checked=${c ? "true" : "false"}
          @blur=${this.handleBlur}
          @focus=${this.handleFocus}
          @click=${this.handleClick}
          @change=${this.handleChange}
        />
        <label for=${d} class=${m()}>
          <div class="relative">
            <div class=${g()}>
              ${f ? h`<i class=${x() + " fa-solid fa-minus"}></i>` : h`<i class=${x() + " fa-solid fa-check"}></i>`}
            </div>
          </div>
          <span class=${$()}><slot>${i}</slot></span>
        </label>
        ${w()}
      </div>
    `;
  }
};
e.styles = [...k.styles, C(q)];
r([
  z(".checkbox")
], e.prototype, "checkbox", 2);
r([
  a({ type: String })
], e.prototype, "size", 2);
r([
  a({ type: String })
], e.prototype, "text", 2);
r([
  a({ type: Boolean, reflect: !0 })
], e.prototype, "checked", 2);
r([
  a({ type: Boolean, reflect: !0 })
], e.prototype, "indeterminate", 2);
r([
  a({ type: String })
], e.prototype, "label", 2);
r([
  a({ type: String })
], e.prototype, "caption", 2);
r([
  a({ type: Boolean, converter: (t) => t != "false" })
], e.prototype, "error", 2);
r([
  F()
], e.prototype, "hasFocus", 2);
e = r([
  I("plus-checkbox")
], e);
export {
  e as CheckboxComponent
};
