import { P as h, r as P, n as s } from "./plus-base-1920dd44.mjs";
import { e as S } from "./custom-element-eaccb8d2.mjs";
import { t as T } from "./state-4d7d9621.mjs";
import { i as F } from "./query-48157d42.mjs";
import { l as _ } from "./live-cd074699.mjs";
import { n } from "./static-be5c3b1c.mjs";
import { l as A, c as j } from "./label.style-1b60b221.mjs";
import { s as B } from "./index-975d3293.mjs";
import { l as C } from "./if-defined-66202ed0.mjs";
import "./directive-daf4e9b6.mjs";
const O = `:host{display:block;width:100%;max-width:256px}:host([full-width]){max-width:none}
`, q = B({
  slots: {
    host: ["antialiased font-sans  flex flex-col items-start justify-start w-full relative"],
    base: ["flex flex-row items-center justify-start group/base cursor-pointer text-color-default"],
    inputElement: ["sr-only"],
    toggle: [" rounded-full bg-color-invert-default border border-transparent"],
    toggleText: [""],
    toggleDot: ["absolute  rounded-full bg-color-base transform transition-all duration-300", "flex items-center justify-center"]
  },
  variants: {
    focus: {
      true: {
        toggle: "ring-2 ring-offset-2 z-[1]"
      },
      false: [""]
    },
    error: {
      true: {
        toggle: [""]
      },
      false: [""]
    },
    checked: {
      true: {
        toggle: ["bg-color-primary"],
        toggleDot: ["text-color-primary"]
      },
      false: {
        toggleDot: ["text-color-caption"]
      }
    },
    textPosition: {
      left: {
        toggleText: ["order-0"]
      },
      right: {
        toggleText: ["order-2"]
      }
    },
    readonly: {
      true: {
        base: ["cursor-default"],
        toggle: ["bg-color-base border-color-default"],
        toggleDot: ["bg-color-invert-default"]
      }
    },
    disabled: {
      true: {
        base: ["cursor-not-allowed text-color-disabled"],
        toggle: ["bg-color-disabled text-color-disabled"]
      }
    },
    size: {
      sm: {
        host: "text-sm gap-0.5",
        base: "",
        toggle: "w-10 h-5",
        toggleDot: "top-1 left-1 w-3 h-3 text-[6px] leading-[6px] group-active/base:w-4"
      },
      md: {
        host: "text-base  gap-1 ",
        base: "gap-2 ",
        toggle: "w-12 h-6",
        toggleDot: "top-1 left-1 w-4 h-4 text-[8px] leading-[8px] group-active/base:w-5 "
      },
      lg: {
        host: "text-lg gap-1.5",
        base: "",
        toggle: "w-14 h-7",
        toggleDot: "top-1 left-1 w-5 h-5 text-[10px] leading-[10px] group-active/base:w-6"
      }
    }
  },
  compoundVariants: [
    {
      checked: !0,
      size: "sm",
      class: {
        toggleDot: ["translate-x-5"]
      }
    },
    {
      checked: !0,
      size: "md",
      class: {
        toggleDot: ["translate-x-6"]
      }
    },
    {
      checked: !0,
      size: "lg",
      class: {
        toggleDot: ["translate-x-7"]
      }
    },
    {
      disabled: !1,
      readonly: !1,
      class: {
        toggleDot: [""],
        toggle: ["group-hover/base:bg-color-invert-default-hover", "group-active/base:cursor-grabbing", "group-active/base:bg-color-invert-default-pressed"]
      }
    },
    {
      disabled: !1,
      readonly: !1,
      checked: !0,
      error: !1,
      class: {
        toggle: ["group-hover/base:bg-color-primary-hover", "group-active/base:bg-color-primary-pressed"]
      }
    },
    {
      error: !0,
      class: {
        toggle: ["bg-color-error", "group-hover/base:bg-color-error-hover", "group-active/base:bg-color-error-pressed"]
      }
    },
    {
      disabled: !1,
      readonly: !1,
      checked: !0,
      size: "sm",
      class: {
        toggleDot: ["group-active/base:translate-x-4"]
      }
    },
    {
      disabled: !1,
      readonly: !1,
      checked: !0,
      size: "md",
      class: {
        toggleDot: ["group-active/base:translate-x-5"]
      }
    },
    {
      disabled: !1,
      readonly: !1,
      checked: !0,
      size: "lg",
      class: {
        toggleDot: ["group-active/base:translate-x-6"]
      }
    }
  ],
  defaultVariants: {
    focus: !1,
    error: !1,
    disabled: !1,
    readonly: !1,
    checked: !1,
    textPosition: "right",
    size: "md"
  }
});
var E = Object.defineProperty, K = Object.getOwnPropertyDescriptor, l = (e, a, i, r) => {
  for (var o = r > 1 ? void 0 : r ? K(a, i) : a, g = e.length - 1, c; g >= 0; g--)
    (c = e[g]) && (o = (r ? c(a, i, o) : c(o)) || o);
  return r && o && E(a, i, o), o;
};
let t = class extends h {
  constructor() {
    super(...arguments), this.hasFocus = !1, this.name = "", this.value = "", this.checked = !1, this.size = "md", this.textPosition = "right", this.error = !1;
  }
  handleBlur() {
    this.hasFocus = !1, this.emit("plus-blur");
  }
  handleInput() {
    this.emit("plus-input");
  }
  handleInvalid(e) {
  }
  handleClick() {
    this.checked = !this.checked, this.emit("plus-change");
  }
  handleFocus() {
    this.hasFocus = !0, this.emit("plus-focus");
  }
  handleKeyDown(e) {
    e.key === "ArrowLeft" && (e.preventDefault(), this.checked = !1, this.emit("plus-change"), this.emit("plus-input")), e.key === "ArrowRight" && (e.preventDefault(), this.checked = !0, this.emit("plus-change"), this.emit("plus-input"));
  }
  click() {
    this.input.click();
  }
  focus(e) {
    this.input.focus(e);
  }
  blur() {
    this.input.blur();
  }
  getToggleIcon() {
    const { checked: e, toggleIcon: a, toggleActiveIcon: i, toggleInActiveIcon: r } = this;
    let o = "";
    return e && i ? o = i : !e && r ? o = r : a && (o = a), o ? n`<i class=${o}></i>` : "";
  }
  render() {
    const { label: e, hasFocus: a, error: i, disabled: r, caption: o, value: g, checked: c, title: f, name: b, required: u, textPosition: m, text: v, readonly: d, size: p } = this, { inputElement: y, host: x, toggle: $, toggleText: k, toggleDot: w, base: D } = q({ focus: a, error: i, disabled: r, checked: c, textPosition: m, readonly: d, size: p }), I = () => e ? n`<label class=${A({ required: u, size: p })} @click=${this.focus}>${e}</label>` : null, z = () => o ? n`<div class=${j({ error: i, size: p })}>${o}</div>` : null;
    return n`<div class=${x()}>
      ${I()}

      <input
        id="input"
        class=${y()}
        type="checkbox"
        title=${f}
        name=${b}
        value=${C(g)}
        .checked=${_(c)}
        .disabled=${r || d}
        .required=${u}
        role="switch"
        aria-checked=${c ? "true" : "false"}
        @click=${this.handleClick}
        @input=${this.handleInput}
        @invalid=${this.handleInvalid}
        @blur=${this.handleBlur}
        @focus=${this.handleFocus}
        @keydown=${this.handleKeyDown}
      />
      <label for="input" class=${D()}>
        <div class="relative order-1">
          <div class=${$()}>
            <div class=${w()}>${this.getToggleIcon()}</div>
          </div>
        </div>
        <div class=${k()}><slot>${v}</slot></div>
      </label>

      ${z()}
    </div>`;
  }
};
t.styles = [...h.styles, P(O)];
l([
  F("#input")
], t.prototype, "input", 2);
l([
  T()
], t.prototype, "hasFocus", 2);
l([
  s()
], t.prototype, "name", 2);
l([
  s()
], t.prototype, "value", 2);
l([
  s({ type: Boolean, reflect: !0 })
], t.prototype, "checked", 2);
l([
  s({ reflect: !0 })
], t.prototype, "size", 2);
l([
  s({ type: String })
], t.prototype, "label", 2);
l([
  s({ type: String })
], t.prototype, "text", 2);
l([
  s({ type: String, attribute: "text-position" })
], t.prototype, "textPosition", 2);
l([
  s({ type: String, attribute: "toggle-icon" })
], t.prototype, "toggleIcon", 2);
l([
  s({ type: String, attribute: "toggle-active-icon" })
], t.prototype, "toggleActiveIcon", 2);
l([
  s({ type: String, attribute: "toggle-inactive-icon" })
], t.prototype, "toggleInActiveIcon", 2);
l([
  s({ type: String })
], t.prototype, "caption", 2);
l([
  s({ type: Boolean, converter: (e) => e != "false" })
], t.prototype, "error", 2);
t = l([
  S("plus-toggle")
], t);
export {
  t as ToggleComponent
};
