import { a as TailwindElement, x, E } from '../../index-a0a19546.js';
import { n, t } from '../../property-800ef45c.js';
import { o } from '../../style-map-5181f976.js';
import { c as ce } from '../../index-d14b6a34.js';
import { u as uniqId } from '../../uniq-id-ce2d165c.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;
};
const DEFAULT_COLOR = "green-54";
let LuksoSwitch = class extends TailwindElement {
  color = DEFAULT_COLOR;
  id = "";
  name = "switch";
  label = "";
  description = "";
  error = "";
  isChecked = false;
  isDisabled = false;
  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);
  }
  constructor() {
    super();
    if (!this.id) {
      this.id = `switch-${uniqId()}`;
    }
  }
  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"
        }
      }
    }
  });
  labelTemplate() {
    return x`
      <div
        class="heading-inter-14-bold text-neutral-20 pb-2 block"
        >${this.label}</label
      >
    `;
  }
  descriptionTemplate() {
    return x`
      <div class="paragraph-inter-12-regular text-neutral-20 pb-2">
        ${this.description ?? E}
      </div>
    `;
  }
  errorTemplate() {
    return x`<div class="paragraph-inter-12-regular text-red-65 pt-2">
      ${this.error}
    </div>`;
  }
  render() {
    const { label, input } = this.styles({
      isChecked: this.isChecked,
      isDisabled: this.isDisabled,
      hasError: this.error !== ""
    });
    if (!this.color) {
      this.color = DEFAULT_COLOR;
    }
    return x`
      <label for=${this.id} class="w-[inherit]">
        ${this.label ? this.labelTemplate() : E}
        ${this.description ? this.descriptionTemplate() : E}
        <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}
            />
          </label>
        </div>
        ${this.error ? this.errorTemplate() : E}
      </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([
  t("lukso-switch")
], LuksoSwitch);

export { LuksoSwitch };
