'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const shared_tailwindElement_index = require('../../index-179a633e.cjs');
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
const styleMap = require('../../style-map-f36cc35f.cjs');
const index = require('../../index-e9668573.cjs');
require('../../directive-8278ab14.cjs');

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;
};
exports.LuksoSwitch = class LuksoSwitch extends shared_tailwindElement_index.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 shared_tailwindElement_index.x`
      <label
        for="switch"
        class=${index.customClassMap({
      [this.defaultLabelStyles]: true
    })}
        style=${styleMap.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=${index.customClassMap({
      [this.defaultInputStyles]: true,
      ["translate-x-4"]: this.isChecked
    })}
          style=${styleMap.o({
      borderColor: `var(--${this.isChecked ? this.color : "neutral-90"})`,
      cursor: this.isDisabled ? "not-allowed" : "pointer"
    })}
          @change=${this.handleChange}
        />
      </label>
    `;
  }
};
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoSwitch.prototype, "color", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-checked" })
], exports.LuksoSwitch.prototype, "isChecked", 2);
__decorateClass([
  queryAssignedElements.n({
    type: Boolean,
    attribute: "is-disabled"
  })
], exports.LuksoSwitch.prototype, "isDisabled", 2);
exports.LuksoSwitch = __decorateClass([
  queryAssignedElements.e("lukso-switch")
], exports.LuksoSwitch);
