import { r as u, s as b, D as p, u as f, y as h, e as v, g as n } from "./base-408a2cb0.js";
import { e as l } from "./property-ca27685b.js";
import { t as m } from "./state-fcb7c7f1.js";
const g = `@charset "UTF-8";.sil-checkbox{font-family:inherit;position:relative;display:flex;flex-direction:column-reverse}.sil-checkbox,.sil-checkbox *{box-sizing:border-box}.sil-checkbox__control{width:0;height:0;position:absolute}.sil-checkbox__control:focus+sil-checkbox__label:before{box-shadow:var(--input-field--focus-shadow, 0 0 0 3px var(--input-field--focus-color, var(--primary)))}.sil-checkbox__control:checked+.sil-checkbox__label:before{content:"\\2713";font-weight:700;color:var(--input-field--checked-text-color, var(--background));border-color:var(--input-field--checked-background-color, var(--foreground));background-color:var(--input-field--checked-background-color, var(--foreground))}.sil-checkbox__label{display:flex;gap:1em;align-items:center;padding:var(--input-field--label-padding, var(--input-field--padding, .75em 0em))}.sil-checkbox__label:before{text-align:center;line-height:1.33;border-radius:var(--input-field--border-radius, var(--border-radius, .25em));border:2px solid var(--input-field--border-color, rgba(var(--foreground-r), var(--foreground-g), var(--foreground-b), .25));color:var(--input-field--text-color, var(--foreground, #fff));content:"";width:1.33em;height:1.33em}.sil-checkbox--has-error .sil-checkbox__input{border-color:var(--error, red);--border-radius-bottom-right: 0em;--border-radius-bottom-left: 0em}.sil-checkbox__error{background-color:var(--error);border-radius:0 0 var(--border-radius, .5em) var(--border-radius, .5em);color:var(--error-text);padding:.5em 1em;font-size:.85em;display:block}
`;
var x = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (r, i, a, s) => {
  for (var t = s > 1 ? void 0 : s ? _(i, a) : i, c = r.length - 1, d; c >= 0; c--)
    (d = r[c]) && (t = (s ? d(i, a, t) : d(t)) || t);
  return s && t && x(i, a, t), t;
};
let e = class extends b {
  constructor() {
    super(...arguments), this._touched = !1, this.name = "", this.id = "", this.label = "", this.value = !1, this.required = !1, this.requiredError = p.required;
  }
  handleChange(r) {
    this.value = r.target.value, this._touched = !0;
  }
  hasError() {
    return this.required && this._touched && !this.value;
  }
  render() {
    const { bemm: r, classes: i } = f(n("checkbox"));
    return h`
      <div
        class="${i(
      {},
      !this._touched && { m: "is-pristine" },
      this._touched && { m: "is-touched" },
      this.hasError() && { m: "has-error" }
    )}"
      >
        ${this.hasError() ? h`<div class="${r("error")}">${this.requiredError}</div>` : null}
        <input
          id="${this.id ? this.id : "check"}"
          ${this.name ? `name="${this.name}"` : null}
          type="checkbox"
          class="${r("control")}"
          value="${this.value}"
          @input="${this.handleChange}"
          @blur="${this.handleChange}"
        />
        <label for="${this.id ? this.id : "check"}" class="${r("label")}"
          >${this.label}</label
        >
      </div>
    `;
  }
};
e.styles = u(g);
o([
  m()
], e.prototype, "_touched", 2);
o([
  l({ type: String })
], e.prototype, "name", 2);
o([
  l({ type: String })
], e.prototype, "id", 2);
o([
  l({ type: String })
], e.prototype, "label", 2);
o([
  l({ type: Boolean })
], e.prototype, "value", 2);
o([
  l({ type: Boolean })
], e.prototype, "required", 2);
o([
  l({ type: String })
], e.prototype, "requiredError", 2);
e = o([
  v(n("checkbox"))
], e);
export {
  e as Checkbox
};
