import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './klevu-icon2.js';

const klevuTextfieldCss = ":host{display:block}div{position:relative}input{--padding:calc((var(--klevu-size-m) * 2 - var(--klevu-body-s-size)) / 2);display:block;width:100%;box-sizing:border-box;appearance:none;border:0;height:calc(var(--klevu-size-m) * 2);font-size:var(--klevu-body-m-size);padding:var(--padding);font-family:inherit}input:focus{outline:0}input:disabled{opacity:var(--klevu-opacity-disabled);cursor:not-allowed}input.default{border:1px solid var(--klevu-color-neutral-5);margin:0 1px;border-radius:var(--klevu-border-radius-s)}input.default:focus{border-color:var(--klevu-color-primary);margin:0;border-width:2px}input.default.error{border-color:var(--klevu-color-primary);margin:0;border-width:2px}input.pill{border:1px solid var(--klevu-color-neutral-2);margin:1px;background-color:var(--klevu-color-neutral-2);border-radius:1000px}input.hasicon{padding-left:var(--klevu-spacing-07)}klevu-icon.icon{position:absolute;top:50%;left:var(--klevu-spacing-04);transform:translateY(-50%)}input.hasclear{padding-right:var(--klevu-spacing-07)}klevu-icon.clear{position:absolute;top:50%;right:var(--klevu-spacing-04);transform:translateY(-50%);cursor:pointer}slot[name=\"end\"]{position:absolute;display:block;top:50%;right:var(--klevu-spacing-04);transform:translateY(-50%)}";

const KlevuTextfield = /*@__PURE__*/ proxyCustomElement(class KlevuTextfield extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.klevuTextChanged = createEvent(this, "klevuTextChanged", 7);
    this.klevuTextFocused = createEvent(this, "klevuTextFocused", 7);
    this.klevuTextEnterPressed = createEvent(this, "klevuTextEnterPressed", 7);
    this.value = undefined;
    this.disabled = false;
    this.placeholder = undefined;
    this.error = undefined;
    this.variant = "default";
    this.icon = undefined;
    this.clearButton = undefined;
  }
  render() {
    var _a;
    return (h("div", null, h("input", { type: "text", ref: (el) => (this.textInput = el), value: this.value, disabled: this.disabled, placeholder: this.placeholder, class: {
        error: Boolean(this.error),
        pill: this.variant === "pill",
        default: this.variant === "default",
        hasicon: Boolean(this.icon),
        hasclear: Boolean(this.clearButton),
      }, onFocus: () => this.klevuTextFocused.emit(), onKeyPress: (e) => {
        if (e.key === "Enter") {
          this.klevuTextEnterPressed.emit();
        }
      }, onInput: (e) => {
        const el = e.target;
        this.value = el.value;
        this.klevuTextChanged.emit(el.value);
      } }), this.icon && h("klevu-icon", { class: "icon", name: this.icon }), h("slot", { name: "end" }), this.clearButton && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("klevu-icon", { name: "clear", class: "clear", onClick: () => {
        this.value = "";
        this.klevuTextChanged.emit("");
      } }))));
  }
  static get style() { return klevuTextfieldCss; }
}, [1, "klevu-textfield", {
    "value": [1025],
    "disabled": [516],
    "placeholder": [513],
    "error": [4],
    "variant": [1],
    "icon": [1],
    "clearButton": [4, "clear-button"]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-textfield", "klevu-icon"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-textfield":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuTextfield);
      }
      break;
    case "klevu-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { KlevuTextfield as K, defineCustomElement as d };

//# sourceMappingURL=klevu-textfield2.js.map