'use strict';

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

const shared_tailwindElement_index = require('../../index-aaa67d55.cjs');
const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
const state = require('../../state-f73a8b4f.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.LuksoInput = class LuksoInput extends shared_tailwindElement_index.TailwindElement {
  constructor() {
    super(...arguments);
    this.value = "";
    this.name = "";
    this.type = "text";
    this.placeholder = "";
    this.label = "";
    this.autocomplete = "on";
    this.id = "";
    this.ref = void 0;
    this.accept = void 0;
    this.description = "";
    this.error = "";
    this.unit = "";
    this.customClass = "";
    this.isFullWidth = false;
    this.isReadonly = false;
    this.isDisabled = false;
    this.autofocus = false;
    this.max = void 0;
    this.min = void 0;
    this.borderless = false;
    this.hasHocus = false;
    this.hasHighlight = false;
    this.defaultInputStyles = `bg-neutral-100 paragraph-inter-14-regular px-4 py-3
    border-solid h-[48px] placeholder:text-neutral-70
    outline-none transition transition-all duration-150 appearance-none`;
    this.defaultUnitStyles = `paragraph-inter-12-regular text-neutral-60 flex px-3.5 items-center relative
    border-solid h-[48px] transition transition-all duration-150
    rounded-r-12 border-l-0 before:bg-neutral-90 before:absolute before:top-[calc(50%-12px)] before:left-0
    before:w-[1px] before:h-[24px] whitespace-nowrap cursor-pointer`;
  }
  // @input works better in vue
  inputTemplate() {
    return shared_tailwindElement_index.x`
      <input
        name=${this.name}
        type=${this.type}
        .value=${this.value}
        placeholder=${this.placeholder}
        ?autofocus=${this.autofocus}
        min=${this.min}
        max=${this.max}
        autocomplete=${this.autocomplete}
        ref=${this.ref}
        id=${this.id || this.name}
        data-testid=${this.name ? `input-${this.name}` : "input"}
        accept=${this.accept}
        ?readonly=${this.isReadonly ? true : void 0}
        ?disabled=${this.isDisabled ? true : void 0}
        class=${index.customClassMap({
      [this.defaultInputStyles]: true,
      [this.error === "" ? "border-neutral-90" : "border-red-85"]: !this.hasHighlight,
      [this.error === "" ? "border-neutral-35" : "border-red-65"]: this.hasHighlight,
      ["rounded-l-12 border-r-0"]: this.unit !== "",
      ["rounded-12"]: this.unit === "",
      ["w-full"]: this.isFullWidth,
      ["w-[350px]"]: !this.isFullWidth && this.unit === "",
      ["w-[300px]"]: !this.isFullWidth && this.unit !== "",
      ["cursor-not-allowed text-neutral-60"]: this.isDisabled,
      ["text-neutral-20"]: !this.isDisabled,
      ["cursor-not-allowed"]: this.isReadonly,
      [this.customClass]: !!this.customClass,
      [this.borderless ? "border-0" : "border"]: true
    })}
        @focus=${this.handleFocus}
        @input=${this.handleInput}
        @change=${this.handleChange}
        @blur=${this.handleBlur}
        @keyup=${this.handleKeyUp}
        @keydown=${this.handleKeyDown}
        @keypress=${this.handleKeyPress}
        @mouseenter=${this.handleMouseOver}
        @mouseleave=${this.handleMouseOut}
      />
    `;
  }
  labelTemplate() {
    return shared_tailwindElement_index.x`
      <label
        for=${this.name}
        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.A}
      </div>
    `;
  }
  errorTemplate() {
    return shared_tailwindElement_index.x`<div class="paragraph-inter-12-regular text-red-65 pt-2">
      ${this.error}
    </div>`;
  }
  unitTemplate() {
    return shared_tailwindElement_index.x`<div
      class=${index.customClassMap({
      [this.defaultUnitStyles]: true,
      [this.error === "" ? "border-neutral-90" : "border-red-85"]: !this.hasHighlight,
      [this.error === "" ? "border-neutral-35" : "border-red-65"]: this.hasHighlight,
      [this.borderless ? "border-0" : "border"]: true
    })}
      @mouseenter=${this.handleMouseOver}
      @mouseleave=${this.handleMouseOut}
      @click=${this.handleUnitClick}
    >
      ${this.unit}
    </div>`;
  }
  handleFocus() {
    if (!this.isReadonly && !this.isDisabled) {
      this.hasHocus = true;
      this.hasHighlight = true;
    }
  }
  async handleBlur(event) {
    this.hasHocus = false;
    this.hasHighlight = false;
    await this.updateComplete;
    const target = event.target;
    const blurEvent = new CustomEvent("on-blur", {
      detail: {
        value: target.value,
        event
      },
      bubbles: false,
      composed: true
    });
    this.dispatchEvent(blurEvent);
  }
  async handleChange(event) {
    await this.updateComplete;
    const target = event.target;
    const changeEvent = new CustomEvent("on-change", {
      detail: {
        value: target.value,
        event
      },
      bubbles: false,
      composed: true
    });
    this.dispatchEvent(changeEvent);
  }
  async handleInput(event) {
    const target = event.target;
    this.value = target.value;
    await this.updateComplete;
    const changeEvent = new CustomEvent("on-input", {
      detail: {
        value: target.value,
        event
      },
      bubbles: false,
      composed: true
    });
    this.dispatchEvent(changeEvent);
  }
  async handleKeyUp(event) {
    await this.updateComplete;
    const target = event.target;
    const keyEvent = new CustomEvent("on-key-up", {
      detail: {
        value: target.value,
        event
      },
      bubbles: true,
      composed: true
    });
    this.dispatchEvent(keyEvent);
  }
  async handleKeyDown(event) {
    await this.updateComplete;
    const target = event.target;
    const keyEvent = new CustomEvent("on-key-down", {
      detail: {
        value: target.value,
        event
      },
      bubbles: true,
      composed: true
    });
    this.dispatchEvent(keyEvent);
  }
  async handleKeyPress(event) {
    await this.updateComplete;
    const target = event.target;
    const keyEvent = new CustomEvent("on-key-press", {
      detail: {
        value: target.value,
        event
      },
      bubbles: true,
      composed: true
    });
    this.dispatchEvent(keyEvent);
  }
  handleMouseOver() {
    if (!this.isReadonly && !this.isDisabled) {
      this.hasHighlight = true;
    }
  }
  handleMouseOut() {
    if (!this.hasHocus) {
      this.hasHighlight = false;
    }
  }
  handleUnitClick() {
    const input = this.shadowRoot?.querySelector("input");
    const clickEvent = new CustomEvent("on-unit-click", {
      detail: {
        input
      },
      bubbles: true,
      composed: true
    });
    this.dispatchEvent(clickEvent);
    input.focus();
  }
  render() {
    return shared_tailwindElement_index.x`
      <div>
        ${this.label ? this.labelTemplate() : shared_tailwindElement_index.A}
        ${this.description ? this.descriptionTemplate() : shared_tailwindElement_index.A}
        <div class="flex">
          ${this.inputTemplate()} ${this.unit ? this.unitTemplate() : shared_tailwindElement_index.A}
        </div>
        ${this.error ? this.errorTemplate() : shared_tailwindElement_index.A}
      </div>
    `;
  }
};
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoInput.prototype, "value", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoInput.prototype, "name", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoInput.prototype, "type", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoInput.prototype, "placeholder", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoInput.prototype, "label", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoInput.prototype, "autocomplete", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoInput.prototype, "id", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoInput.prototype, "ref", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoInput.prototype, "accept", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoInput.prototype, "description", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoInput.prototype, "error", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoInput.prototype, "unit", 2);
__decorateClass([
  queryAssignedElements.n({ type: String, attribute: "custom-class" })
], exports.LuksoInput.prototype, "customClass", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-full-width" })
], exports.LuksoInput.prototype, "isFullWidth", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-readonly" })
], exports.LuksoInput.prototype, "isReadonly", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-disabled" })
], exports.LuksoInput.prototype, "isDisabled", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean })
], exports.LuksoInput.prototype, "autofocus", 2);
__decorateClass([
  queryAssignedElements.n({ type: Number })
], exports.LuksoInput.prototype, "max", 2);
__decorateClass([
  queryAssignedElements.n({ type: Number })
], exports.LuksoInput.prototype, "min", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean })
], exports.LuksoInput.prototype, "borderless", 2);
__decorateClass([
  state.t()
], exports.LuksoInput.prototype, "hasHocus", 2);
__decorateClass([
  state.t()
], exports.LuksoInput.prototype, "hasHighlight", 2);
exports.LuksoInput = __decorateClass([
  queryAssignedElements.e("lukso-input")
], exports.LuksoInput);
