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

Web Components for Esri's Calcite Design System.

import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
import { Scale, Status, Position } from "../interfaces";
import { FormComponent } from "../../utils/form";
import { InteractiveComponent } from "../../utils/interactive";
import { LabelableComponent } from "../../utils/label";
import { LoadableComponent } from "../../utils/loadable";
import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
import { T9nComponent } from "../../utils/t9n";
import { InputMessages } from "./assets/input/t9n";
import { InputPlacement, NumberNudgeDirection } from "./interfaces";
/**
 * @slot action - A slot for positioning a `calcite-button` next to the component.
 */
export declare class Input implements LabelableComponent, FormComponent, InteractiveComponent, T9nComponent, LocalizedComponent, LoadableComponent {
  el: HTMLCalciteInputElement;
  /** 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. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type.
   */
  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`, number values are displayed with a group separator corresponding to the language and country format.
   */
  groupSeparator: boolean;
  /**
   * When `true`, the component will not be visible.
   *
   * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
   */
  hidden: boolean;
  /**
   * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
   */
  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. */
  label: string;
  /** When `true`, a busy indicator is displayed. */
  loading: boolean;
  /**
   * Specifies the Unicode numeral system used by the component for localization.
   *
   */
  numberingSystem: NumberingSystem;
  /**
   * When `true`, uses locale formatting for numbers.
   *
   * @internal
   */
  localeFormat: boolean;
  /**
   * Specifies the maximum value for type "number".
   *
   * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max)
   */
  max: number;
  /** watcher to update number-to-string for max */
  maxWatcher(): void;
  /**
   * Specifies the minimum value for `type="number"`.
   *
   * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min)
   */
  min: number;
  /** watcher to update number-to-string for min */
  minWatcher(): void;
  /**
   * 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 the placement of the buttons for `type="number"`. */
  numberButtonType: InputPlacement;
  /**
   * 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 granularity the component's `value` must adhere to.
   *
   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)
   */
  step: number | "any";
  /**
   * 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 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;
  /**
   * Specifies a comma separated list of unique file type specifiers for limiting accepted file types.
   * This property only has an effect when `type` is "file".
   * Read the native attribute's documentation on MDN for more info.
   *
   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
   */
  accept: string;
  /**
   * When `true`, the component can accept more than one value.
   * This property only has an effect when `type` is "email" or "file".
   * Read the native attribute's documentation on MDN for more info.
   *
   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple)
   */
  multiple: boolean;
  /**
   * 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;
  /** Adds text to the end of the component. */
  suffixText: string;
  /**
   * @internal
   */
  editingEnabled: boolean;
  /**
   * Specifies the component type.
   *
   * Note that the following `type`s add type-specific icons by default: `"date"`, `"email"`, `"password"`, `"search"`, `"tel"`, `"time"`.
   */
  type: "color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "search" | "tel" | "text" | "textarea" | "time" | "url" | "week";
  /** The component's value. */
  value: string;
  /**
   * When `type` is `"file"`, specifies the component's selected files.
   *
   * @mdn https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files
   */
  files: FileList | undefined;
  /**
   * Made into a prop for testing purposes only
   *
   * @internal
   */
  messages: InputMessages;
  /**
   * Use this property to override individual strings used by the component.
   */
  messageOverrides: Partial<InputMessages>;
  onMessagesChange(): void;
  valueWatcher(newValue: string, previousValue: string): void;
  updateRequestedIcon(): void;
  labelEl: HTMLCalciteLabelElement;
  formEl: HTMLFormElement;
  defaultValue: Input["value"];
  inlineEditableEl: HTMLCalciteInlineEditableElement;
  /** keep track of the rendered child type */
  private childEl?;
  /** keep track of the rendered child type */
  private childElType?;
  /** number text input element for locale */
  private childNumberEl?;
  get isClearable(): boolean;
  get isTextarea(): boolean;
  private minString?;
  private maxString?;
  private previousEmittedValue;
  private previousValue;
  private previousValueOrigin;
  /** the computed icon to render */
  private requestedIcon?;
  private nudgeNumberValueIntervalId;
  mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
  private userChangedValue;
  defaultMessages: InputMessages;
  effectiveLocale: string;
  effectiveLocaleChange(): void;
  localizedValue: string;
  slottedActionElDisabledInternally: boolean;
  connectedCallback(): void;
  disconnectedCallback(): void;
  componentWillLoad(): Promise<void>;
  componentDidLoad(): void;
  componentShouldUpdate(newValue: string, oldValue: string, property: string): boolean;
  componentDidRender(): void;
  /**
   * @internal
   */
  calciteInternalInputFocus: EventEmitter<void>;
  /**
   * @internal
   */
  calciteInternalInputBlur: EventEmitter<void>;
  /**
   * Fires each time a new `value` is typed.
   */
  calciteInputInput: EventEmitter<void>;
  /**
   * Fires each time a new `value` is typed and committed.
   */
  calciteInputChange: EventEmitter<void>;
  /** Sets focus on the component. */
  setFocus(): Promise<void>;
  /** Selects the text of the component's `value`. */
  selectText(): Promise<void>;
  /** @internal */
  internalSyncChildElValue(): Promise<void>;
  keyDownHandler: (event: KeyboardEvent) => void;
  onLabelClick(): void;
  incrementOrDecrementNumberValue(direction: NumberNudgeDirection, inputMax: number | null, inputMin: number | null, nativeEvent: KeyboardEvent | MouseEvent): void;
  private clearInputValue;
  private emitChangeIfUserModified;
  private inputBlurHandler;
  private clickHandler;
  private inputFocusHandler;
  private inputChangeHandler;
  private inputInputHandler;
  private inputKeyDownHandler;
  private inputNumberInputHandler;
  private inputNumberKeyDownHandler;
  private nudgeNumberValue;
  private numberButtonPointerUpAndOutHandler;
  private numberButtonPointerDownHandler;
  onFormReset(): void;
  syncHiddenFormInput(input: HTMLInputElement): void;
  hiddenInputChangeHandler: (event: Event) => void;
  private setChildElRef;
  private setChildNumberElRef;
  private setDisabledAction;
  private setInputValue;
  private setPreviousEmittedValue;
  private normalizeValue;
  private setPreviousValue;
  private setValue;
  private inputKeyUpHandler;
  private warnAboutInvalidNumberValue;
  render(): VNode;
}