import { h } from "@stencil/core";
/**
 * Branded text field component
 */
export class KlevuTextfield {
  constructor() {
    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("span", { class: "icon", part: "material-icon" }, this.icon)), this.clearButton && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("span", { class: "clear", part: "material-icon", onClick: () => {
        this.value = "";
        this.klevuTextChanged.emit("");
      } }, "clear"))));
  }
  static get is() { return "klevu-textfield"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-textfield.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-textfield.css"]
    };
  }
  static get properties() {
    return {
      "value": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Current value of the field"
        },
        "attribute": "value",
        "reflect": false
      },
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Is field disabled"
        },
        "attribute": "disabled",
        "reflect": true,
        "defaultValue": "false"
      },
      "placeholder": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Placeholder value of the field"
        },
        "attribute": "placeholder",
        "reflect": true
      },
      "error": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Is field in error state"
        },
        "attribute": "error",
        "reflect": false
      },
      "variant": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "KlevuTextfieldVariant",
          "resolved": "\"default\" | \"pill\"",
          "references": {
            "KlevuTextfieldVariant": {
              "location": "local",
              "path": "/home/runner/work/frontend-sdk/frontend-sdk/packages/klevu-ui/src/components/klevu-textfield/klevu-textfield.tsx"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Variant of textfield"
        },
        "attribute": "variant",
        "reflect": false,
        "defaultValue": "\"default\""
      },
      "icon": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Icon to display in textfield start of the field. Please use tokens of material icons"
        },
        "attribute": "icon",
        "reflect": false
      },
      "clearButton": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Display a button to clear field value on the right side of the field"
        },
        "attribute": "clear-button",
        "reflect": false
      }
    };
  }
  static get events() {
    return [{
        "method": "klevuTextChanged",
        "name": "klevuTextChanged",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "When text changes in field"
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }, {
        "method": "klevuTextFocused",
        "name": "klevuTextFocused",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "When textfield is focused"
        },
        "complexType": {
          "original": "void",
          "resolved": "void",
          "references": {}
        }
      }, {
        "method": "klevuTextEnterPressed",
        "name": "klevuTextEnterPressed",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "When enter is pressed in textfield"
        },
        "complexType": {
          "original": "void",
          "resolved": "void",
          "references": {}
        }
      }];
  }
}
//# sourceMappingURL=klevu-textfield.js.map
