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

Web Components for Esri's Calcite Design System.

/// <reference path="../../index.d.ts" />
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { Alignment, Scale, Status } from "../interfaces.js";
import type { MutableValidityState } from "../../utils/form.js";
import type { NumberingSystem } from "../../utils/locale.js";
import type { IconName } from "../calcite-icon/interfaces.js";
import type { InputPlacement } from "./interfaces.js";

/**
 * @cssproperty [--calcite-input-prefix-size] - When `prefixText` is provided, specifies the width of the component's prefix element.
 * @cssproperty [--calcite-input-suffix-size] - When `suffixText` is provided, specifies the width of the component's suffix element.
 * @cssproperty [--calcite-input-prefix-text-color] - When `prefixText` is provided, specifies the text color of the component's prefix element.
 * @cssproperty [--calcite-input-suffix-text-color] - When `suffixText` is provided, specifies the text color of the component's suffix element.
 * @cssproperty [--calcite-input-background-color] - Specifies the component's background color.
 * @cssproperty [--calcite-input-border-color] - Specifies the component's border color.
 * @cssproperty [--calcite-input-corner-radius] - Specifies the component's corner radius.
 * @cssproperty [--calcite-input-shadow] - Specifies the component's shadow.
 * @cssproperty [--calcite-input-icon-color] - Specifies the component's `icon` color.
 * @cssproperty [--calcite-input-text-color] - Specifies the component's text color.
 * @cssproperty [--calcite-input-placeholder-text-color] - Specifies the component's placeholder text color.
 * @cssproperty [--calcite-input-actions-background-color] - Specifies the background color of the component's `clearable` and `number-button-type` elements.
 * @cssproperty [--calcite-input-actions-background-color-hover] - Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered.
 * @cssproperty [--calcite-input-actions-background-color-press] - Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed.
 * @cssproperty [--calcite-input-actions-icon-color] - Specifies the icon color of the component's `clearable` and `number-button-type` elements.
 * @cssproperty [--calcite-input-actions-icon-color-hover] - Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered.
 * @cssproperty [--calcite-input-actions-icon-color-press] - Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed.
 * @cssproperty [--calcite-input-loading-background-color] - When `loading`, specifies the background color of the component's `loading` element.
 * @cssproperty [--calcite-input-loading-fill-color] - When `loading`, specifies the fill color of the component's `loading` element.
 * @slot [action] - A slot for positioning a `calcite-action` or other interactive content adjacent to the component.
 * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
 */
export abstract class Input extends LitElement {
  /**
   * When `type` is `"file"`, specifies a comma separated list of unique file type specifiers for limiting accepted file types.
   * Read the native attribute's documentation on MDN for more info.
   *
   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
   */
  accessor accept: string;
  /**
   * Specifies the text alignment of the component's `value`.
   *
   * @default "start"
   */
  accessor alignment: Extract<"start" | "end", Alignment>;
  /**
   * Specifies the type of content to autocomplete, for use in forms.
   * Read the native attribute's documentation on MDN for more info.
   *
   * @mdn [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
   */
  accessor autocomplete: AutoFill;
  /**
   * When `true` and the component has a `value`, a clear button is displayed. The clear button shows by default for `"search"`, `"time"`, and `"date"` types.
   *
   * @default false
   */
  accessor clearable: boolean;
  /**
   * When `true`, prevents interaction and decreases the component's opacity.
   *
   * @default false
   * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
   */
  accessor disabled: boolean;
  /**
   * When `type` is `"file"`, specifies the component's selected files.
   *
   * @mdn https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files
   */
  accessor files: FileList | undefined;
  /**
   * Specifies the `id` of the component's associated form.
   *
   * When not set, the component is associated with its ancestor form element, if one exists.
   */
  accessor form: string;
  /**
   * When `true`, number values are displayed with a group separator corresponding to the language and country format.
   *
   * @default false
   */
  accessor groupSeparator: boolean;
  /** When `true`, displays a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */
  accessor icon: IconName | boolean;
  /**
   * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
   *
   * @default false
   */
  accessor iconFlipRtl: boolean;
  /** Specifies an accessible label for the component. */
  accessor label: string;
  /** Specifies the component's label text. */
  accessor labelText: string;
  /**
   * When `true`, a busy indicator is displayed.
   *
   * @default false
   */
  accessor loading: boolean;
  /**
   * When the component resides in a form,
   * specifies the maximum value for `type="number"`.
   *
   * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max)
   */
  accessor max: number;
  /**
   * When the component resides in a form,
   * 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)
   */
  accessor maxLength: number;
  /** Overrides individual strings used by the component. */
  accessor messageOverrides: {
      clear?: string;
      loading?: string;
      required?: string;
  };
  /**
   * When the component resides in a form,
   * specifies the minimum value for `type="number"`.
   *
   * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min)
   */
  accessor min: number;
  /**
   * When the component resides in a form,
   * 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)
   */
  accessor minLength: number;
  /**
   * When `true` and `type` is `"email"` or `"file"`, the component can accept more than one value.
   * Read the native attribute's documentation on MDN for more info.
   *
   * @default false
   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple)
   */
  accessor multiple: boolean;
  /**
   * 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)
   */
  accessor name: string;
  /**
   * When `type="number"`, specifies the placement of the buttons.
   *
   * @default "vertical"
   */
  accessor numberButtonType: InputPlacement;
  /** Specifies the Unicode numeral system used by the component for localization. */
  accessor numberingSystem: NumberingSystem;
  /**
   * When the component resides in a form,
   * specifies a regular expression (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)
   */
  accessor pattern: string;
  /**
   * Specifies the component's placeholder text.
   *
   * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
   */
  accessor placeholder: string;
  /** Specifies text to display at the start of the component. */
  accessor prefixText: string;
  /**
   * When `true`, the component's `value` can be read, but cannot be modified.
   *
   * @default false
   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
   */
  accessor readOnly: boolean;
  /**
   * When `true` and the component resides in a form,
   * the component must have a `value` in order for the form to submit.
   *
   * @default false
   */
  accessor required: boolean;
  /**
   * Specifies the size of the component.
   *
   * @default "m"
   */
  accessor scale: Scale;
  /**
   * Specifies the input field's status, which determines message and icons.
   *
   * @default "idle"
   */
  accessor 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)
   */
  accessor step: number | "any";
  /** Specifies text to display at the end of the component. */
  accessor suffixText: string;
  /**
   * Specifies the component type.
   *
   * Note that the following `type`s add type-specific icons by default: `"date"`, `"email"`, `"password"`, `"search"`, `"tel"`, `"time"`.
   *
   * @default "text"
   */
  accessor type: "color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week";
  /** Specifies the validation icon to display under the component. */
  accessor validationIcon: IconName | boolean;
  /** Specifies the validation message to display under the component. */
  accessor validationMessage: string;
  /**
   * The component's current validation state.
   *
   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
   */
  get validity(): MutableValidityState;
  /** The component's value. */
  accessor value: string;
  /** Selects the text of the component's `value`. */
  selectText(): Promise<void>;
  /**
   * Sets focus on the component.
   *
   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
   */
  setFocus(options?: FocusOptions): Promise<void>;
  /** Fires each time a new `value` is typed and committed. */
  readonly calciteInputChange: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires each time a new `value` is typed. */
  readonly calciteInputInput: import("@arcgis/lumina").TargetedEvent<this, void>;
  readonly "@eventTypes": {
    calciteInputChange: Input["calciteInputChange"]["detail"];
    calciteInputInput: Input["calciteInputInput"]["detail"];
  };
}