import { r as p, s as w, u as f, y as n, e as b, g as d } from "./base-408a2cb0.js";
import { e as s } from "./property-ca27685b.js";
const v = `.sil-switch{font-family:inherit;position:relative;display:flex;flex-direction:column-reverse}.sil-switch,.sil-switch *{box-sizing:border-box}.sil-switch__control{width:0;height:0;position:absolute}.sil-switch__control:focus+sil-switch__label:before{box-shadow:var(--input-field--focus-shadow, 0 0 0 3px var(--input-field--focus-color, var(--primary)))}.sil-switch__control:checked+.sil-switch__label .sil-switch__switch:after{transform:translate(calc(var(--switch-width) - var(--switch-bullet-width) - var(--switch-border-weight)),-50%)}.sil-switch__switch{width:var(--switch-width);height:1.33em;position:relative;--switch-border-weight: 2px;--switch-bullet-width: 1em;--switch-space: 2px;--switch-width: 2em}.sil-switch__switch:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;line-height:1.33;border-radius:var(--input-field--border-radius, 1em);border:var(--switch-border-weight) 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:100%;height:100%;display:block}.sil-switch__switch:after{content:"";width:var(--switch-bullet-width);height:calc(100% - (var(--switch-border-weight) + var(--switch-space)));background-color:var(--foreground);display:block;position:absolute;top:50%;left:0%;transform:translate(var(--switch-border-weight),-50%);border-radius:50%}.sil-switch__label{display:flex;gap:1em;align-items:center;padding:var(--input-field--label-padding, var(--input-field--padding, .75em 0em))}
`;
var u = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (t, l, a, o) => {
  for (var i = o > 1 ? void 0 : o ? g(l, a) : l, h = t.length - 1, c; h >= 0; h--)
    (c = t[h]) && (i = (o ? c(l, a, i) : c(i)) || i);
  return o && i && u(l, a, i), i;
};
let e = class extends w {
  constructor() {
    super(...arguments), this.label = "", this.labelOff = "", this.labelOn = "", this.value = !1, this.required = !1, this.id = "";
  }
  handleChange(t) {
    this.value = !!t.target.checked;
  }
  render() {
    const t = f(d("switch"));
    return n`
      <div class="${t()}">
        <input
          id="switch"
          type="checkbox"
          class="${t("control")}"
          value="${this.value}"
          @input="${this.handleChange}"
        />
        <label for="switch" class="${t("label")}">
          <div class="${t("switch")}"></div>
          ${this.label}
          ${this.value ? n`<div>${this.labelOff}</div>` : n`<div>${this.labelOn}</div>`}
        </label>
      </div>
    `;
  }
};
e.styles = p(v);
r([
  s({ type: String })
], e.prototype, "label", 2);
r([
  s({ type: String })
], e.prototype, "labelOff", 2);
r([
  s({ type: String })
], e.prototype, "labelOn", 2);
r([
  s({ type: Boolean })
], e.prototype, "value", 2);
r([
  s({ type: Boolean })
], e.prototype, "required", 2);
r([
  s({ type: String })
], e.prototype, "id", 2);
e = r([
  b(d("switch"))
], e);
export {
  e as Switch
};
