@esri/calcite-components/dist/types/components/input-text/input-text.d.ts

Web Components for Esri's Calcite Design System.

import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
import { FormComponent } from "../../utils/form";
import { InteractiveComponent } from "../../utils/interactive";
import { LabelableComponent } from "../../utils/label";
import { LoadableComponent } from "../../utils/loadable";
import { LocalizedComponent } from "../../utils/locale";
import { T9nComponent } from "../../utils/t9n";
import { Position, Scale, Status } from "../interfaces";
import { InputTextMessages } from "./assets/input-text/t9n";
/**
 * @slot action - A slot for positioning a button next to the component.
 */
export declare class InputText implements LabelableComponent, FormComponent, InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent {
  el: HTMLCalciteInputTextElement;
  /** Specifies the text alignment of the component's value. */
  alignment: Position;
  /**
   * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus.
   *
   * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
   */
  autofocus: boolean;
  /**
   * When `true`, a clear button is displayed when the component has a value.
   */
  clearable: boolean;
  /**
   * 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)
   */
  disabled: boolean;
  disabledWatcher(): void;
  /**
   * The ID of the form that will be associated with the component.
   *
   * When not set, the component will be associated with its ancestor form element, if any.
   */
  form: string;
  /**
   * When `true`, the component will not be visible.
   *
   * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
   */
  hidden: boolean;
  /**
   * Specifies an icon to display.
   *
   * @futureBreaking Remove boolean type as it is not supported.
   */
  icon: string | boolean;
  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
  iconFlipRtl: boolean;
  /** Accessible name for the component's button or hyperlink. */
  label: string;
  /** When `true`, the component is in the loading state and `calcite-progress` is displayed. */
  loading: boolean;
  /**
   * Specifies the maximum length of text for the component's value.
   *
   * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
   */
  maxLength: number;
  /**
   * Specifies the minimum length of text for the component's value.
   *
   * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
   */
  minLength: number;
  /**
   * Specifies the name of the component.
   *
   * Required to pass the component's `value` on form submission.
   *
   * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
   */
  name: string;
  /**
   * Specifies placeholder text for the component.
   *
   * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
   */
  placeholder: string;
  /** Adds text to the start of the component. */
  prefixText: string;
  /**
   * When `true`, the component's value can be read, but cannot be modified.
   *
   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
   */
  readOnly: boolean;
  /** When `true`, the component must have a value in order for the form to submit. */
  required: boolean;
  /** Specifies the size of the component. */
  scale: Scale;
  /** Specifies the status of the input field, which determines message and icons. */
  status: Status;
  /**
   * Specifies the type of content to autocomplete, for use in forms.
   * Read the native attribute's documentation on MDN for more info.
   *
   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
   */
  autocomplete: string;
  /**
   * Specifies the type of content to help devices display an appropriate virtual keyboard.
   * Read the native attribute's documentation on MDN for more info.
   *
   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
   */
  inputMode: string;
  /**
   * Specifies the action label or icon for the Enter key on virtual keyboards.
   * Read the native attribute's documentation on MDN for more info.
   *
   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)
   */
  enterKeyHint: string;
  /**
   * Specifies a regex pattern the component's `value` must match for validation.
   * Read the native attribute's documentation on MDN for more info.
   *
   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
   */
  pattern: string;
  /** Adds text to the end of the component.  */
  suffixText: string;
  /**
   * @internal
   */
  editingEnabled: boolean;
  /** The component's value. */
  value: string;
  /**
   * Made into a prop for testing purposes only
   *
   * @internal
   */
  messages: InputTextMessages;
  /**
   * Use this property to override individual strings used by the component.
   */
  messageOverrides: Partial<InputTextMessages>;
  onMessagesChange(): void;
  valueWatcher(newValue: string, previousValue: string): void;
  updateRequestedIcon(): void;
  labelEl: HTMLCalciteLabelElement;
  formEl: HTMLFormElement;
  defaultValue: InputText["value"];
  inlineEditableEl: HTMLCalciteInlineEditableElement;
  /** keep track of the rendered child */
  private childEl?;
  get isClearable(): boolean;
  private previousEmittedValue;
  private previousValue;
  private previousValueOrigin;
  /** the computed icon to render */
  private requestedIcon?;
  mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
  private userChangedValue;
  effectiveLocale: string;
  effectiveLocaleChange(): void;
  defaultMessages: InputTextMessages;
  slottedActionElDisabledInternally: boolean;
  connectedCallback(): void;
  disconnectedCallback(): void;
  componentWillLoad(): Promise<void>;
  componentDidLoad(): void;
  componentDidRender(): void;
  /**
   * @internal
   */
  calciteInternalInputTextFocus: EventEmitter<{
    element: HTMLInputElement;
    value: string;
  }>;
  /**
   * @internal
   */
  calciteInternalInputTextBlur: EventEmitter<{
    element: HTMLInputElement;
    value: string;
  }>;
  /**
   * Fires each time a new value is typed.
   */
  calciteInputTextInput: EventEmitter<void>;
  /**
   * Fires each time a new value is typed and committed.
   */
  calciteInputTextChange: EventEmitter<void>;
  /** Sets focus on the component. */
  setFocus(): Promise<void>;
  /** Selects the text of the component's `value`. */
  selectText(): Promise<void>;
  keyDownHandler: (event: KeyboardEvent) => void;
  onLabelClick(): void;
  private clearInputTextValue;
  private emitChangeIfUserModified;
  private inputTextBlurHandler;
  private clickHandler;
  private inputTextFocusHandler;
  private inputTextInputHandler;
  private inputTextKeyDownHandler;
  onFormReset(): void;
  syncHiddenFormInput(input: HTMLInputElement): void;
  hiddenInputChangeHandler: (event: Event) => void;
  private setChildElRef;
  private setDisabledAction;
  private setInputValue;
  private setPreviousEmittedValue;
  private setPreviousValue;
  private setValue;
  render(): VNode;
}