adwaveui/dist/esm/components/switch/switch.mjs

Interactive Web Components inspired by the Gtk Adwaita theme.

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });

// src/components/switch/switch.tsx
import "../../base-elements.mjs";
import { Switch } from "adwavecss";
import { customElement } from "wc_toolkit";
import { CustomKeyboardEvent, CustomMouseEvent } from "../../utils/events.mjs";
import { stopEvent } from "../../utils/prevent-default.mjs";
import { jsx, jsxs } from "@ncpa0cpl/vanilla-jsx/jsx-runtime";
var AdwSwitchChangeEvent = class extends Event {
  static {
    __name(this, "AdwSwitchChangeEvent");
  }
  constructor(type, active) {
    super("change", {
      bubbles: true
    });
    this.active = active;
  }
};
var { CustomElement } = customElement("adw-switch").attributes({
  active: "boolean",
  disabled: "boolean",
  name: "string",
  form: "string"
}).events({
  "change": AdwSwitchChangeEvent,
  "click": CustomMouseEvent,
  "keydown": CustomKeyboardEvent
}).context().methods((wc) => {
  const { attribute: { active, disabled } } = wc;
  const setActiveValue = /* @__PURE__ */ __name((v) => {
    v = !!v;
    active.set(v);
    wc.emitEvent("change", v);
  }, "setActiveValue");
  return {
    toggle() {
      const v = !active.get();
      active.set(v);
    },
    focus() {
      wc.thisElement.querySelector(`.${Switch.switch}`)?.focus();
    },
    _handleClick(e) {
      e.stopPropagation();
      const nextValue = !active.get();
      wc.emitEvent("click", { nextValue }, e).onCommit(() => {
        if (disabled.get()) return;
        setActiveValue(nextValue);
      });
    },
    _handleKeyDown(e) {
      e.stopPropagation();
      wc.emitEvent("keydown", {}, e).onCommit(() => {
        if (disabled.get()) return;
        if (e.key === " " || e.key === "Enter") {
          const nextValue = !active.get();
          setActiveValue(nextValue);
        }
      });
    }
  };
}).connected((wc) => {
  const { attribute, method } = wc;
  const { active, disabled, form, name } = attribute;
  wc.attach(
    /* @__PURE__ */ jsxs(
      "div",
      {
        class: {
          [Switch.switch]: true,
          [Switch.disabled]: disabled.signal,
          [Switch.active]: active.signal
        },
        onclick: method._handleClick,
        onkeydown: method._handleKeyDown,
        tabIndex: 0,
        role: "switch",
        "aria-checked": active.signal,
        "aria-disabled": disabled.signal,
        children: [
          /* @__PURE__ */ jsx("div", { class: Switch.knob }),
          /* @__PURE__ */ jsx(
            "input",
            {
              type: "checkbox",
              class: "_adw_hidden",
              disabled: disabled.signal,
              checked: active.signal,
              name: name.signal,
              "attribute:form": form.signal,
              onclick: method._handleClick,
              onchange: stopEvent,
              "aria-hidden": "true"
            }
          )
        ]
      }
    )
  );
}).register();
var AdwSwitch = CustomElement;
export {
  AdwSwitch
};