@esri/calcite-components 1.0.0-beta.89 → 1.0.0-beta.91

package/dist/collection/components/input-text/input-text.js

@@ -0,0 +1,899 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.91
+ */
+import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
+import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";
+import { CSS, SLOTS, TEXT } from "./resources";
+import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
+import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
+import { CSS_UTILITY, TEXT as COMMON_TEXT } from "../../utils/resources";
+import { createObserver } from "../../utils/observers";
+import { updateHostInteraction } from "../../utils/interactive";
+/**
+ * @slot action - A slot for positioning a button next to the component.
+ */
+export class InputText {
+  constructor() {
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** Specifies the text alignment of the component's value. */
+    this.alignment = "start";
+    /**
+     * When true, the component is focused on page load.
+     *
+     * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
+     */
+    this.autofocus = false;
+    /**
+     * When true, a clear button is displayed when the component has a value.
+     */
+    this.clearable = false;
+    /**
+     * When true, interaction is prevented and the component is displayed with lower opacity.
+     *
+     * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
+     */
+    this.disabled = false;
+    /**
+     * When true, the component will not be visible.
+     *
+     * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
+     */
+    this.hidden = false;
+    /**
+     * Accessible name that will appear while loading.
+     *
+     * @default "Loading"
+     */
+    this.intlLoading = COMMON_TEXT.loading;
+    /** When true, the icon is flipped in RTL. */
+    this.iconFlipRtl = false;
+    /** When true, the component is in the loading state and `calcite-progress` is displayed. */
+    this.loading = false;
+    /**
+     * When true, the value cannot be modified.
+     *
+     * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+     */
+    this.readOnly = false;
+    /** When true, the component must have a value in order for the form to submit. */
+    this.required = false;
+    /** Specifies the size of the component. */
+    this.scale = "m";
+    /** Specifies the status of the input field, which determines message and icons. */
+    this.status = "idle";
+    /**
+     * @internal
+     */
+    this.editingEnabled = false;
+    /** The component's value. */
+    this.value = "";
+    this.previousValueOrigin = "initial";
+    this.mutationObserver = createObserver("mutation", () => this.setDisabledAction());
+    this.userChangedValue = false;
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.keyDownHandler = (event) => {
+      if (this.readOnly || this.disabled) {
+        return;
+      }
+      if (this.isClearable && event.key === "Escape") {
+        this.clearInputTextValue(event);
+        event.preventDefault();
+      }
+      if (event.key === "Enter" && !event.defaultPrevented) {
+        submitForm(this);
+      }
+    };
+    this.clearInputTextValue = (nativeEvent) => {
+      this.setValue({
+        committing: true,
+        nativeEvent,
+        origin: "user",
+        value: ""
+      });
+    };
+    this.emitChangeIfUserModified = () => {
+      if (this.previousValueOrigin === "user" && this.value !== this.previousEmittedValue) {
+        this.calciteInputTextChange.emit();
+      }
+      this.previousEmittedValue = this.value;
+    };
+    this.inputTextBlurHandler = () => {
+      this.calciteInternalInputTextBlur.emit({
+        element: this.childEl,
+        value: this.value
+      });
+      this.emitChangeIfUserModified();
+    };
+    this.inputTextFocusHandler = (event) => {
+      const slottedActionEl = getSlotted(this.el, "action");
+      if (event.target !== slottedActionEl) {
+        this.setFocus();
+      }
+      this.calciteInternalInputTextFocus.emit({
+        element: this.childEl,
+        value: this.value
+      });
+    };
+    this.inputTextInputHandler = (nativeEvent) => {
+      if (this.disabled || this.readOnly) {
+        return;
+      }
+      this.setValue({
+        nativeEvent,
+        origin: "user",
+        value: nativeEvent.target.value
+      });
+    };
+    this.inputTextKeyDownHandler = (event) => {
+      if (this.disabled || this.readOnly) {
+        return;
+      }
+      if (event.key === "Enter") {
+        this.emitChangeIfUserModified();
+      }
+    };
+    this.setChildElRef = (el) => {
+      this.childEl = el;
+    };
+    this.setInputValue = (newInputValue) => {
+      if (!this.childEl) {
+        return;
+      }
+      this.childEl.value = newInputValue;
+    };
+    this.setPreviousEmittedValue = (newPreviousEmittedValue) => {
+      this.previousEmittedValue = newPreviousEmittedValue;
+    };
+    this.setPreviousValue = (newPreviousValue) => {
+      this.previousValue = newPreviousValue;
+    };
+    this.setValue = ({ committing = false, nativeEvent, origin, previousValue, value }) => {
+      this.setPreviousValue(previousValue || this.value);
+      this.previousValueOrigin = origin;
+      this.userChangedValue = origin === "user" && value !== this.value;
+      this.value = value;
+      if (origin === "direct") {
+        this.setInputValue(value);
+      }
+      if (nativeEvent) {
+        const calciteInputTextInputEvent = this.calciteInputTextInput.emit({
+          element: this.childEl,
+          nativeEvent,
+          value: this.value
+        });
+        if (calciteInputTextInputEvent.defaultPrevented) {
+          this.value = this.previousValue;
+        }
+        else if (committing) {
+          this.emitChangeIfUserModified();
+        }
+      }
+    };
+  }
+  disabledWatcher() {
+    this.setDisabledAction();
+  }
+  valueWatcher(newValue, previousValue) {
+    if (!this.userChangedValue) {
+      this.setValue({
+        origin: "direct",
+        previousValue,
+        value: !newValue ? "" : newValue
+      });
+    }
+    this.userChangedValue = false;
+  }
+  updateRequestedIcon() {
+    this.requestedIcon = setRequestedIcon({}, this.icon, "text");
+  }
+  get isClearable() {
+    return this.clearable && this.value.length > 0;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    this.scale = getElementProp(this.el, "scale", this.scale);
+    this.status = getElementProp(this.el, "status", this.status);
+    this.inlineEditableEl = this.el.closest("calcite-inline-editable");
+    if (this.inlineEditableEl) {
+      this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
+    }
+    this.setPreviousEmittedValue(this.value);
+    this.setPreviousValue(this.value);
+    connectLabel(this);
+    connectForm(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.setDisabledAction();
+  }
+  disconnectedCallback() {
+    var _a;
+    disconnectLabel(this);
+    disconnectForm(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  componentWillLoad() {
+    this.requestedIcon = setRequestedIcon({}, this.icon, "text");
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    (_a = this.childEl) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  /** Selects all text of the component's `value`. */
+  async selectText() {
+    var _a;
+    (_a = this.childEl) === null || _a === void 0 ? void 0 : _a.select();
+  }
+  onLabelClick() {
+    this.setFocus();
+  }
+  onFormReset() {
+    this.setValue({
+      origin: "reset",
+      value: this.defaultValue
+    });
+  }
+  syncHiddenFormInput(input) {
+    if (this.minLength != null) {
+      input.minLength = this.minLength;
+    }
+    if (this.maxLength != null) {
+      input.maxLength = this.maxLength;
+    }
+  }
+  setDisabledAction() {
+    const slottedActionEl = getSlotted(this.el, "action");
+    if (!slottedActionEl) {
+      return;
+    }
+    this.disabled
+      ? slottedActionEl.setAttribute("disabled", "")
+      : slottedActionEl.removeAttribute("disabled");
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const dir = getElementDir(this.el);
+    const loader = (h("div", { class: CSS.loader },
+      h("calcite-progress", { label: this.intlLoading, type: "indeterminate" })));
+    const inputClearButton = (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: this.disabled ? -1 : 0, type: "button" },
+      h("calcite-icon", { icon: "x", scale: "s" })));
+    const iconEl = (h("calcite-icon", { class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: "s" }));
+    const prefixText = h("div", { class: CSS.prefix }, this.prefixText);
+    const suffixText = h("div", { class: CSS.suffix }, this.suffixText);
+    const childEl = (h("input", { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, class: {
+        [CSS.editingEnabled]: this.editingEnabled,
+        [CSS.inlineChild]: !!this.inlineEditableEl
+      }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, inputMode: this.el.inputMode, maxLength: this.maxLength, minLength: this.minLength, name: this.name, onBlur: this.inputTextBlurHandler, onFocus: this.inputTextFocusHandler, onInput: this.inputTextInputHandler, onKeyDown: this.inputTextKeyDownHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: "text", value: this.value }));
+    return (h(Host, { onClick: this.inputTextFocusHandler, onKeyDown: this.keyDownHandler },
+      h("div", { class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+        this.prefixText ? prefixText : null,
+        h("div", { class: CSS.wrapper },
+          childEl,
+          this.isClearable ? inputClearButton : null,
+          this.requestedIcon ? iconEl : null,
+          this.loading ? loader : null),
+        h("div", { class: CSS.actionWrapper },
+          h("slot", { name: SLOTS.action })),
+        this.suffixText ? suffixText : null,
+        h(HiddenFormInputSlot, { component: this }))));
+  }
+  static get is() { return "calcite-input-text"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["input-text.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["input-text.css"]
+  }; }
+  static get properties() { return {
+    "alignment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Position",
+        "resolved": "\"end\" | \"start\"",
+        "references": {
+          "Position": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the text alignment of the component's value."
+      },
+      "attribute": "alignment",
+      "reflect": true,
+      "defaultValue": "\"start\""
+    },
+    "autofocus": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "mdn",
+            "text": "[autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)"
+          }],
+        "text": "When true, the component is focused on page load."
+      },
+      "attribute": "autofocus",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "clearable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, a clear button is displayed when the component has a value."
+      },
+      "attribute": "clearable",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "mdn",
+            "text": "[disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)"
+          }],
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "hidden": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "mdn",
+            "text": "[hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)"
+          }],
+        "text": "When true, the component will not be visible."
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "icon": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "string | boolean",
+        "resolved": "boolean | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon."
+      },
+      "attribute": "icon",
+      "reflect": true
+    },
+    "intlClear": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "A text label that will appear on the clear button for screen readers."
+      },
+      "attribute": "intl-clear",
+      "reflect": false
+    },
+    "intlLoading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "\"Loading\""
+          }],
+        "text": "Accessible name that will appear while loading."
+      },
+      "attribute": "intl-loading",
+      "reflect": false,
+      "defaultValue": "COMMON_TEXT.loading"
+    },
+    "iconFlipRtl": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, the icon is flipped in RTL."
+      },
+      "attribute": "icon-flip-rtl",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Accessible name for the component's button or hyperlink."
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, the component is in the loading state and `calcite-progress` is displayed."
+      },
+      "attribute": "loading",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "maxLength": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "mdn",
+            "text": "[maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)"
+          }],
+        "text": "Specifies the maximum length of text for the component's value."
+      },
+      "attribute": "max-length",
+      "reflect": true
+    },
+    "minLength": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "mdn",
+            "text": "[minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)"
+          }],
+        "text": "Specifies the minimum length of text for the component's value."
+      },
+      "attribute": "min-length",
+      "reflect": true
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "mdn",
+            "text": "[name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)"
+          }],
+        "text": "Specifies the name of the component."
+      },
+      "attribute": "name",
+      "reflect": true
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "mdn",
+            "text": "[placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)"
+          }],
+        "text": "Specifies placeholder text for the component."
+      },
+      "attribute": "placeholder",
+      "reflect": false
+    },
+    "prefixText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Adds text to the start of the component."
+      },
+      "attribute": "prefix-text",
+      "reflect": false
+    },
+    "readOnly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "mdn",
+            "text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
+          }],
+        "text": "When true, the value cannot be modified."
+      },
+      "attribute": "read-only",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, the component must have a value in order for the form to submit."
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "scale": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "Scale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "Scale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the size of the component."
+      },
+      "attribute": "scale",
+      "reflect": true,
+      "defaultValue": "\"m\""
+    },
+    "status": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "Status",
+        "resolved": "\"idle\" | \"invalid\" | \"valid\"",
+        "references": {
+          "Status": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the status of the input field, which determines message and icons."
+      },
+      "attribute": "status",
+      "reflect": true,
+      "defaultValue": "\"idle\""
+    },
+    "suffixText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Adds text to the end of the component."
+      },
+      "attribute": "suffix-text",
+      "reflect": false
+    },
+    "editingEnabled": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "attribute": "editing-enabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The component's value."
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "calciteInternalInputTextFocus",
+      "name": "calciteInternalInputTextFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{\n    element: HTMLInputElement;\n    value: string;\n  }",
+        "resolved": "{ element: HTMLInputElement; value: string; }",
+        "references": {
+          "HTMLInputElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "calciteInternalInputTextBlur",
+      "name": "calciteInternalInputTextBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ element: HTMLInputElement; value: string }",
+        "resolved": "{ element: HTMLInputElement; value: string; }",
+        "references": {
+          "HTMLInputElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "calciteInputTextInput",
+      "name": "calciteInputTextInput",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires each time a new value is typed."
+      },
+      "complexType": {
+        "original": "{\n    element: HTMLInputElement;\n    nativeEvent: MouseEvent | KeyboardEvent | InputEvent;\n    value: string;\n  }",
+        "resolved": "{ element: HTMLInputElement; nativeEvent: MouseEvent | KeyboardEvent | InputEvent; value: string; }",
+        "references": {
+          "HTMLInputElement": {
+            "location": "global"
+          },
+          "MouseEvent": {
+            "location": "global"
+          },
+          "KeyboardEvent": {
+            "location": "global"
+          },
+          "InputEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "calciteInputTextChange",
+      "name": "calciteInputTextChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fires each time a new value is typed and committed."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets focus on the component.",
+        "tags": []
+      }
+    },
+    "selectText": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Selects all text of the component's `value`.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "disabled",
+      "methodName": "disabledWatcher"
+    }, {
+      "propName": "value",
+      "methodName": "valueWatcher"
+    }, {
+      "propName": "icon",
+      "methodName": "updateRequestedIcon"
+    }]; }
+}