'use strict';

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

const shared_tailwindElement_index = require('../../chunks/index-BxQ_0s_1.js');
const property = require('../../chunks/property-D6IL6zax.js');
const styleMap = require('../../chunks/style-map-B7XFhSOK.js');
const index = require('../../chunks/index-CaJky2qL.js');
const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
const uniqId = require('../../chunks/uniq-id-Cszs24DQ.js');
require('../../chunks/index-BHAtoIlu.js');
require('../lukso-form-label/index.cjs');
require('../lukso-form-description/index.cjs');
require('../lukso-form-error/index.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;
};
const DEFAULT_COLOR = "green-54";
exports.LuksoSwitch = class LuksoSwitch extends shared_tailwindElement_index.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 = index.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.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 shared_tailwindElement_index.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=${styleMap.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=${styleMap.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([
  property.n({ type: String })
], exports.LuksoSwitch.prototype, "color", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoSwitch.prototype, "id", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoSwitch.prototype, "name", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoSwitch.prototype, "label", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoSwitch.prototype, "description", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoSwitch.prototype, "error", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "is-checked" })
], exports.LuksoSwitch.prototype, "isChecked", 2);
__decorateClass([
  property.n({
    type: Boolean,
    attribute: "is-disabled"
  })
], exports.LuksoSwitch.prototype, "isDisabled", 2);
exports.LuksoSwitch = __decorateClass([
  safeCustomElement.safeCustomElement("lukso-switch")
], exports.LuksoSwitch);
