'use strict';

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

const shared_tailwindElement_index = require('../../index-68c61387.cjs');
const property = require('../../property-bf2eee83.cjs');
const state = require('../../state-375dfffc.cjs');
const index = require('../../index-2b104ecb.cjs');
require('../../tailwind-config.cjs');
const cn = require('../../cn-b6daa995.cjs');
require('../lukso-icon/index.cjs');
require('../../style-map-8e54f508.cjs');
require('../../directive-8278ab14.cjs');

const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";

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 FOCUS_DELAY_MS = 10;
exports.LuksoInput = class LuksoInput extends shared_tailwindElement_index.TailwindStyledElement(style) {
  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.size = "medium";
    this.rightIcon = "";
    this.isRightIconClickable = false;
    this.keepFocusOnEscape = false;
    this.hasFocus = false;
    this.hasHighlight = false;
    this.inputStyles = index.ce({
      slots: {
        wrapper: "group flex",
        input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
        outline-none transition transition-all duration-150 appearance-none`,
        unit: `text-neutral-60 flex items-center relative border-solid transition
        transition-all duration-150 before:bg-neutral-90 before:absolute
        before:left-0 before:w-[1px] whitespace-nowrap cursor-pointer`,
        rightIcon: "absolute top-1/2 transform -translate-y-1/2"
      },
      variants: {
        hasError: {
          true: {
            input: "border-red-85",
            unit: "border-red-85"
          },
          false: {
            input: "border-neutral-90",
            unit: "border-neutral-90"
          }
        },
        hasHighlight: {
          true: {
            input: "border-neutral-35",
            unit: "border-neutral-35"
          }
        },
        hasUnit: {
          true: { input: "!border-r-0 !rounded-r-0" }
        },
        hasRightIcon: {
          true: {}
        },
        borderless: {
          true: { input: "border-0", unit: "border-0" },
          false: { input: "border", unit: "border border-l-0" }
        },
        isReadonly: {
          true: { input: "cursor-not-allowed", rightIcon: "cursor-not-allowed" }
        },
        isDisabled: {
          true: {
            input: "text-neutral-60 cursor-not-allowed",
            rightIcon: "cursor-not-allowed opacity-50"
          },
          false: { input: "text-neutral-20" }
        },
        isFullWidth: {
          true: { wrapper: "w-full" },
          false: { wrapper: "w-[350px]" }
        },
        size: {
          small: {
            input: "h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8",
            unit: "h-[28px] paragraph-inter-10-regular px-2 rounded-r-8 before:top-[calc(50%-6px)] before:h-[12px]",
            rightIcon: "right-2"
          },
          medium: {
            input: "h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12",
            unit: "h-[48px] paragraph-inter-12-regular px-3.5 rounded-r-12 before:top-[calc(50%-12px)] before:h-[24px]",
            rightIcon: "right-3"
          }
        },
        isRightIconClickable: {
          true: { rightIcon: "cursor-pointer" }
        }
      },
      compoundVariants: [
        {
          isFullWidth: false,
          hasUnit: true,
          class: { wrapper: "w-[300px]" }
        },
        {
          isFullWidth: false,
          hasUnit: false,
          size: "small",
          class: { wrapper: "w-[190px]" }
        },
        {
          isFullWidth: false,
          hasUnit: true,
          size: "small",
          class: { wrapper: "w-[210px]" }
        },
        {
          hasHighlight: true,
          hasError: true,
          class: {
            input: "border-red-65",
            unit: "border-red-65"
          }
        },
        {
          hasRightIcon: true,
          size: "medium",
          class: { input: "pr-10" }
        },
        {
          hasRightIcon: true,
          size: "small",
          class: { input: "pr-7" }
        }
      ]
    });
  }
  connectedCallback() {
    super.connectedCallback();
    if (this.autofocus) {
      setTimeout(() => {
        const input = this.shadowRoot?.querySelector("input");
        input?.focus();
      }, FOCUS_DELAY_MS);
    }
  }
  // @input works better in vue
  inputTemplate(styles) {
    return shared_tailwindElement_index.x`
      <input
        name=${this.name ? this.name : shared_tailwindElement_index.E}
        type=${this.type}
        .value=${this.value}
        placeholder=${this.placeholder ? this.placeholder : shared_tailwindElement_index.E}
        ?autofocus=${this.autofocus}
        min=${this.min ? this.min : shared_tailwindElement_index.E}
        max=${this.max ? this.max : shared_tailwindElement_index.E}
        autocomplete=${this.autocomplete}
        ref=${this.ref ? this.ref : shared_tailwindElement_index.E}
        id=${this.id ? this.id : shared_tailwindElement_index.E}
        data-testid=${this.name ? `input-${this.name}` : "input"}
        accept=${this.accept ? this.accept : shared_tailwindElement_index.E}
        ?readonly=${this.isReadonly ? true : void 0}
        ?disabled=${this.isDisabled ? true : void 0}
        class=${cn.cn(styles, this.customClass)}
        @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}
        @click=${this.handleInputClick}
      />
    `;
  }
  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.E}
      </div>
    `;
  }
  errorTemplate() {
    return shared_tailwindElement_index.x`<div class="paragraph-inter-12-regular text-red-65 pt-2">
      ${this.error}
    </div>`;
  }
  unitTemplate(styles) {
    return shared_tailwindElement_index.x`<div
      class=${styles}
      @mouseenter=${this.handleMouseOver}
      @mouseleave=${this.handleMouseOut}
      @click=${this.handleUnitClick}
    >
      ${this.unit}
    </div>`;
  }
  rightIconTemplate(styles) {
    return shared_tailwindElement_index.x`<lukso-icon
      name=${this.rightIcon}
      size=${this.size}
      class=${styles}
      @click=${this.handleRightIconClick}
    ></lukso-icon>`;
  }
  handleFocus() {
    if (!this.isReadonly && !this.isDisabled) {
      this.hasFocus = true;
      this.hasHighlight = true;
    }
  }
  async handleBlur(event) {
    this.hasFocus = 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);
    if (event.key === "Escape" && !this.keepFocusOnEscape) {
      this.blur();
    }
  }
  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.hasFocus) {
      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();
  }
  async handleInputClick(event) {
    await this.updateComplete;
    const target = event.target;
    const clickEvent = new CustomEvent("on-input-click", {
      detail: {
        value: target.value,
        event
      },
      bubbles: false,
      composed: true
    });
    this.dispatchEvent(clickEvent);
  }
  handleRightIconClick() {
    const input = this.shadowRoot?.querySelector("input");
    const clickEvent = new CustomEvent("on-right-icon-click", {
      detail: {
        input
      },
      bubbles: true,
      composed: true
    });
    this.dispatchEvent(clickEvent);
  }
  render() {
    const { wrapper, input, unit, rightIcon } = this.inputStyles({
      hasError: this.error !== "",
      hasHighlight: this.hasHighlight,
      borderless: this.borderless,
      isReadonly: this.isReadonly,
      isDisabled: this.isDisabled,
      isFullWidth: this.isFullWidth,
      hasUnit: this.unit !== "",
      size: this.size,
      hasRightIcon: this.rightIcon !== "",
      isRightIconClickable: this.isRightIconClickable
    });
    return shared_tailwindElement_index.x`
      <div class="w-[inherit]">
        ${this.label ? this.labelTemplate() : shared_tailwindElement_index.E}
        ${this.description ? this.descriptionTemplate() : shared_tailwindElement_index.E}
        <div class=${wrapper()}>
          <div class="relative w-[inherit]">
            ${this.inputTemplate(input())}
            ${this.rightIcon ? this.rightIconTemplate(rightIcon()) : shared_tailwindElement_index.E}
          </div>
          ${this.unit ? this.unitTemplate(unit()) : shared_tailwindElement_index.E}
        </div>
        ${this.error ? this.errorTemplate() : shared_tailwindElement_index.E}
      </div>
    `;
  }
};
__decorateClass([
  property.n({ type: String })
], exports.LuksoInput.prototype, "value", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoInput.prototype, "name", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoInput.prototype, "type", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoInput.prototype, "placeholder", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoInput.prototype, "label", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoInput.prototype, "autocomplete", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoInput.prototype, "id", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoInput.prototype, "ref", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoInput.prototype, "accept", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoInput.prototype, "description", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoInput.prototype, "error", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoInput.prototype, "unit", 2);
__decorateClass([
  property.n({ type: String, attribute: "custom-class" })
], exports.LuksoInput.prototype, "customClass", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "is-full-width" })
], exports.LuksoInput.prototype, "isFullWidth", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "is-readonly" })
], exports.LuksoInput.prototype, "isReadonly", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "is-disabled" })
], exports.LuksoInput.prototype, "isDisabled", 2);
__decorateClass([
  property.n({ type: Boolean })
], exports.LuksoInput.prototype, "autofocus", 2);
__decorateClass([
  property.n({ type: Number })
], exports.LuksoInput.prototype, "max", 2);
__decorateClass([
  property.n({ type: Number })
], exports.LuksoInput.prototype, "min", 2);
__decorateClass([
  property.n({ type: Boolean })
], exports.LuksoInput.prototype, "borderless", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoInput.prototype, "size", 2);
__decorateClass([
  property.n({ type: String, attribute: "right-icon" })
], exports.LuksoInput.prototype, "rightIcon", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "is-right-icon-clickable" })
], exports.LuksoInput.prototype, "isRightIconClickable", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "keep-focus-on-escape" })
], exports.LuksoInput.prototype, "keepFocusOnEscape", 2);
__decorateClass([
  state.r()
], exports.LuksoInput.prototype, "hasFocus", 2);
__decorateClass([
  state.r()
], exports.LuksoInput.prototype, "hasHighlight", 2);
exports.LuksoInput = __decorateClass([
  property.t("lukso-input")
], exports.LuksoInput);
