'use strict';

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

const shared_tailwindElement_index = require('../../index-38fa78cb.cjs');
const property = require('../../property-f2662999.cjs');
const styleMap = require('../../style-map-66641ea3.cjs');
const index = require('../../index-2b104ecb.cjs');
const uniqId = require('../../uniq-id-f0b18085.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;
};
const DEFAULT_COLOR = "green-54";
exports.LuksoSwitch = class LuksoSwitch extends shared_tailwindElement_index.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.uniqId()}`;
    }
  }
  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"
        }
      }
    }
  });
  labelTemplate() {
    return shared_tailwindElement_index.x`
      <div
        class="heading-inter-14-bold text-neutral-20 pb-2 block"
        >${this.label}</label
      >
    `;
  }
  descriptionTemplate() {
    return shared_tailwindElement_index.x`
      <div class="paragraph-inter-12-regular text-neutral-20 pb-2">
        ${this.description ?? shared_tailwindElement_index.E}
      </div>
    `;
  }
  errorTemplate() {
    return shared_tailwindElement_index.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 shared_tailwindElement_index.x`
      <label for=${this.id} class="w-[inherit]">
        ${this.label ? this.labelTemplate() : shared_tailwindElement_index.E}
        ${this.description ? this.descriptionTemplate() : shared_tailwindElement_index.E}
        <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}
            />
          </label>
        </div>
        ${this.error ? this.errorTemplate() : shared_tailwindElement_index.E}
      </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([
  property.t("lukso-switch")
], exports.LuksoSwitch);
