import { T as TailwindElement, x } from '../../chunks/index-5X9ujrWL.js';
import { n } from '../../chunks/property-DfumgIL6.js';
import { o } from '../../chunks/style-map-BPljJihp.js';
import { c as ce } from '../../chunks/index-B9iart53.js';
import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
import { u as uniqId } from '../../chunks/uniq-id-CGUN-pJV.js';
import '../../chunks/index-B_H2eYG_.js';
import '../lukso-form-label/index.js';
import '../lukso-form-description/index.js';
import '../lukso-form-error/index.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;
};
const DEFAULT_COLOR = "green-54";
let LuksoSwitch = class extends TailwindElement {
  constructor() {
    super();
    this.color = DEFAULT_COLOR;
    this.id = "";
    this.name = "switch";
    this.label = "";
    this.description = "";
    this.error = "";
    this.isChecked = false;
    this.isDisabled = false;
    this.styles = ce({
      slots: {
        label: "transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10",
        input: "absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in"
      },
      variants: {
        isChecked: {
          true: {
            input: "translate-x-4"
          },
          false: {
            label: "bg-neutral-90",
            input: "border-neutral-90"
          }
        },
        isDisabled: {
          true: {
            label: "opacity-70 cursor-not-allowed",
            input: "cursor-not-allowed"
          },
          false: {
            label: "cursor-pointer",
            input: "cursor-pointer"
          }
        },
        hasError: {
          true: {
            label: "!bg-red-65",
            input: "!border-red-65"
          }
        }
      }
    });
    if (!this.id) {
      this.id = `switch-${uniqId()}`;
    }
  }
  async handleChange(event) {
    const target = event.target;
    await this.updateComplete;
    const changeEvent = new CustomEvent("on-change", {
      detail: {
        value: target.checked,
        event
      },
      bubbles: false,
      composed: true
    });
    this.dispatchEvent(changeEvent);
  }
  render() {
    const { label, input } = this.styles({
      isChecked: this.isChecked,
      isDisabled: this.isDisabled,
      hasError: !!this.error
    });
    if (!this.color) {
      this.color = DEFAULT_COLOR;
    }
    return x`
      <div>
        <lukso-form-label
          for-name=${this.name}
          label=${this.label}
        ></lukso-form-label>
        <lukso-form-description
          description=${this.description}
        ></lukso-form-description>
        <label for=${this.id} class="w-[inherit]">
          <div class="flex">
            <div
              class=${label()}
              style=${o({
      backgroundColor: `var(--${this.isChecked ? this.color : "neutral-90"})`
    })}
            >
              <input
                type="checkbox"
                id=${this.id}
                name=${this.name}
                ?checked=${this.isChecked}
                ?disabled=${this.isDisabled}
                class=${input()}
                style=${o({
      borderColor: `var(--${this.isChecked ? this.color : "neutral-90"})`
    })}
                @change=${this.handleChange}
              />
            </div>
          </div>
        </label>
        <lukso-form-error error=${this.error}></lukso-form-error>
      </div>
    `;
  }
};
__decorateClass([
  n({ type: String })
], LuksoSwitch.prototype, "color", 2);
__decorateClass([
  n({ type: String })
], LuksoSwitch.prototype, "id", 2);
__decorateClass([
  n({ type: String })
], LuksoSwitch.prototype, "name", 2);
__decorateClass([
  n({ type: String })
], LuksoSwitch.prototype, "label", 2);
__decorateClass([
  n({ type: String })
], LuksoSwitch.prototype, "description", 2);
__decorateClass([
  n({ type: String })
], LuksoSwitch.prototype, "error", 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([
  safeCustomElement("lukso-switch")
], LuksoSwitch);

export { LuksoSwitch };
