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

Web Components for Esri's Calcite Design System.

import { EventEmitter, VNode } from "../../stencil-public-runtime";
import { FormComponent } from "../../utils/form";
import { LabelableComponent } from "../../utils/label";
import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
import { LoadableComponent } from "../../utils/loadable";
import { T9nComponent } from "../../utils/t9n";
import { TextAreaMessages } from "./assets/text-area/t9n";
import { InteractiveComponent } from "../../utils/interactive";
/**
 * @slot - A slot for adding text.
 * @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 declare class TextArea implements FormComponent, LabelableComponent, LocalizedComponent, LoadableComponent, T9nComponent, InteractiveComponent {
  el: HTMLCalciteTextAreaElement;
  /**
   * 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;
  /**
   * Specifies the component's number of columns.
   *
   * @mdn [cols](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols)
   */
  columns: number;
  /**
   * 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;
  /**
   * 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;
  /**
   * Accessible name for the component.
   */
  label: string;
  /**
   * Specifies the maximum number of characters allowed.
   *
   * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength)
   */
  maxLength: number;
  /**
   * Made into a prop for testing purposes only
   *
   * @internal
   */
  messages: TextAreaMessages;
  /**
   * Specifies the name of the component.
   *
   * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name)
   */
  name: string;
  /**
   * Specifies the Unicode numeral system used by the component for localization.
   */
  numberingSystem: NumberingSystem;
  /**
   * Specifies the placeholder text for the component.
   *
   * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder)
   */
  placeholder: string;
  /**
   * When `true`, the component's `value` can be read, but cannot be modified.
   *
   * @readonly
   * @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.
   *
   * @mdn [required]https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
   */
  required: boolean;
  /** Specifies if the component is resizable. */
  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)
   */
  rows: number;
  /** Specifies the size of the component. */
  scale: "l" | "m" | "s";
  /** The component's value. */
  value: string;
  /**
   * Specifies the wrapping mechanism for the text.
   *
   * @mdn [wrap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-wrap)
   */
  wrap: "soft" | "hard";
  /**
   * Use this property to override individual strings used by the component.
   */
  messageOverrides: Partial<TextAreaMessages>;
  onMessagesChange(): void;
  /**
   * Fires each time a new `value` is typed.
   */
  calciteTextAreaInput: EventEmitter<void>;
  /**
   * Fires each time a new `value` is typed and committed.
   */
  calciteTextAreaChange: EventEmitter<void>;
  connectedCallback(): void;
  componentWillLoad(): Promise<void>;
  componentDidLoad(): void;
  componentDidRender(): void;
  disconnectedCallback(): void;
  render(): VNode;
  /** Sets focus on the component. */
  setFocus(): Promise<void>;
  /** Selects the text of the component's `value`. */
  selectText(): Promise<void>;
  defaultValue: TextArea["value"];
  footerEl: HTMLElement;
  formEl: HTMLFormElement;
  labelEl: HTMLCalciteLabelElement;
  textAreaEl: HTMLTextAreaElement;
  defaultMessages: TextAreaMessages;
  endSlotHasElements: boolean;
  startSlotHasElements: boolean;
  effectiveLocale: string;
  effectiveLocaleChange(): void;
  onFormReset(): void;
  onLabelClick(): void;
  handleInput: (event: InputEvent) => void;
  handleChange: () => void;
  contentSlotChangeHandler: () => void;
  renderCharacterLimit: () => VNode;
  getLocalizedCharacterLength(): string;
  resizeObserver: ResizeObserver;
  syncHiddenFormInput(input: HTMLInputElement): void;
  private setHeightAndWidthToAuto;
  setTextAreaEl: (el: HTMLTextAreaElement) => void;
  setTextAreaHeight(): void;
  getHeightandWidthOfElements(): {
    textAreaHeight: number;
    textAreaWidth: number;
    elHeight: number;
    elWidth: number;
    footerHeight: number;
    footerWidth: number;
  };
}