@esri/calcite-components/dist/components/calcite-text-area/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 { NumberingSystem } from "../../utils/locale.js";
import type { Status } from "../interfaces.js";
import type { IconName } from "../calcite-icon/interfaces.js";
import type { MutableValidityState } from "../../controllers/useForm.js";

/**
 * @cssproperty [--calcite-text-area-background-color] - Specifies the component's background color.
 * @cssproperty [--calcite-text-area-border-color] - Specifies the component's text area border color.
 * @cssproperty [--calcite-text-area-character-limit-text-color] - Specifies the color of the character limit text displayed in the footer of the component.
 * @cssproperty [--calcite-text-area-divider-color] - Specifies the color of the divider between the text area and footer.
 * @cssproperty [--calcite-text-area-font-size] - Specifies the font size of the text area and footer.
 * @cssproperty [--calcite-text-area-max-height] - Specifies the component's text area maximum height.
 * @cssproperty [--calcite-text-area-min-height] - Specifies the component's text area minimum height.
 * @cssproperty [--calcite-text-area-max-width] - Specifies the component's text area maximum width.
 * @cssproperty [--calcite-text-area-min-width] - Specifies the component's text area minimum width.
 * @cssproperty [--calcite-text-area-text-color] - Specifies the component's text color.
 * @cssproperty [--calcite-text-area-footer-border-color] - Specifies the footer's border color.
 * @cssproperty [--calcite-text-area-corner-radius] - Specifies component's corner radius.
 * @cssproperty [--calcite-text-area-shadow] - Specifies the component's shadow.
 * @cssproperty [--calcite-text-area-footer-background-color] - Specifies the footer's background color.
 * @slot  - A slot for adding text.
 * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
 * @slot [footer-start] - A slot for adding content to the start of the component's footer.
 * @slot [footer-end] - A slot for adding content to the end of the component's footer.
 */
export abstract class TextArea extends LitElement {
  /**
   * Specifies the component's number of columns.
   *
   * @mdn [cols](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols)
   */
  accessor columns: number;
  /**
   * When `true`, interaction is prevented and the component is displayed with lower opacity.
   *
   * @default false
   * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
   */
  accessor disabled: boolean;
  /**
   * 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;
  /** Specifies an accessible label for the component. */
  accessor label: string;
  /** Specifies the component's label text. */
  accessor labelText: string;
  /**
   * When `true`, prevents input beyond the `maxLength` value, mimicking native text area behavior.
   *
   * @default false
   */
  accessor limitText: boolean;
  /**
   * When `true`, a busy indicator is displayed.
   *
   * @default false
   */
  accessor loading: boolean;
  /**
   * When the component resides in a form,
   * specifies the maximum number of characters allowed.
   *
   * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength)
   */
  accessor maxLength: number;
  /** Overrides individual strings used by the component. */
  accessor messageOverrides: {
      invalid?: string;
      loading?: string;
      required?: string;
      tooLong?: string;
      tooShort?: string;
  };
  /**
   * When the component resides in a form,
   * specifies the minimum number of characters allowed.
   *
   * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength)
   */
  accessor 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/textarea#attr-name)
   */
  accessor name: string;
  /** Specifies the Unicode numeral system used by the component for localization. */
  accessor numberingSystem: NumberingSystem;
  /**
   * Specifies the placeholder text for the component.
   *
   * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder)
   */
  accessor placeholder: 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
   * @mdn [required]https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
   */
  accessor required: boolean;
  /**
   * Specifies if the component is resizable.
   *
   * @default "both"
   */
  accessor resize: "both" | "horizontal" | "vertical" | "none";
  /**
   * Specifies the component's number of rows.
   *
   * @mdn [rows](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows)
   */
  accessor rows: number;
  /**
   * Specifies the size of the component.
   *
   * @default "m"
   */
  accessor scale: "l" | "m" | "s";
  /**
   * Specifies the status of the input field, which determines message and icons.
   *
   * @default "idle"
   */
  accessor status: Status;
  /** 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.
   *
   * @default ""
   */
  accessor value: string;
  /**
   * Specifies the wrapping mechanism for the text.
   *
   * @default "soft"
   * @mdn [wrap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap)
   */
  accessor wrap: "soft" | "hard";
  /** 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 calciteTextAreaChange: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires each time a new `value` is typed. */
  readonly calciteTextAreaInput: import("@arcgis/lumina").TargetedEvent<this, void>;
  readonly "@eventTypes": {
    calciteTextAreaChange: TextArea["calciteTextAreaChange"]["detail"];
    calciteTextAreaInput: TextArea["calciteTextAreaInput"]["detail"];
  };
}