import { a as TailwindElement, x } from '../../index-8c5a9941.js';
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
import { o } from '../../style-map-1ee93d7f.js';
import { c as customClassMap } from '../../index-5e194caf.js';
import '../../directive-2bb7789e.js';

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
let LuksoSwitch = class extends TailwindElement {
  constructor() {
    super(...arguments);
    this.color = "green-54";
    this.isChecked = false;
    this.isDisabled = false;
    this.defaultLabelStyles = `transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10`;
    this.defaultInputStyles = `absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in`;
  }
  async handleChange(event) {
    const target = event.target;
    this.isChecked = target.checked;
    await this.updateComplete;
    const changeEvent = new CustomEvent("on-change", {
      detail: {
        value: target.checked,
        event
      },
      bubbles: false,
      composed: true
    });
    this.dispatchEvent(changeEvent);
  }
  render() {
    return x`
      <label
        for="switch"
        class=${customClassMap({
      [this.defaultLabelStyles]: true
    })}
        style=${o({
      backgroundColor: `var(--${this.isChecked ? this.color : "neutral-90"})`,
      opacity: this.isDisabled ? 0.7 : 1,
      cursor: this.isDisabled ? "not-allowed" : "pointer"
    })}
      >
        <input
          type="checkbox"
          id="switch"
          ?checked=${this.isChecked}
          ?disabled=${this.isDisabled}
          class=${customClassMap({
      [this.defaultInputStyles]: true,
      ["translate-x-4"]: this.isChecked
    })}
          style=${o({
      borderColor: `var(--${this.isChecked ? this.color : "neutral-90"})`,
      cursor: this.isDisabled ? "not-allowed" : "pointer"
    })}
          @change=${this.handleChange}
        />
      </label>
    `;
  }
};
__decorateClass([
  n({ type: String })
], LuksoSwitch.prototype, "color", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-checked" })
], LuksoSwitch.prototype, "isChecked", 2);
__decorateClass([
  n({
    type: Boolean,
    attribute: "is-disabled"
  })
], LuksoSwitch.prototype, "isDisabled", 2);
LuksoSwitch = __decorateClass([
  e("lukso-switch")
], LuksoSwitch);

export { LuksoSwitch };
