@esri/calcite-components/dist/components/calcite-autocomplete/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 { FlipPlacement, MenuPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
import type { Alignment, Scale, Status } from "../interfaces.js";
import type { IconName } from "../calcite-icon/interfaces.js";
import type { MutableValidityState } from "../../utils/form.js";

/**
 * @cssproperty [--calcite-autocomplete-background-color] - Specifies the component's background color.
 * @cssproperty [--calcite-autocomplete-corner-radius] - Specifies the component's corner radius.
 * @cssproperty [--calcite-autocomplete-text-color] - Specifies the component's text color.
 * @cssproperty [--calcite-autocomplete-menu-max-size-y] - Specifies the maximum height of the component's menu.
 * @cssproperty [--calcite-autocomplete-input-prefix-size] - Specifies the input's prefix width, when present.
 * @cssproperty [--calcite-autocomplete-input-suffix-size] - Specifies the input's suffix width, when present.
 * @cssproperty [--calcite-autocomplete-input-background-color] - Specifies the background color of the component's input.
 * @cssproperty [--calcite-autocomplete-input-border-color] - Specifies the border color of the component's input.
 * @cssproperty [--calcite-autocomplete-input-corner-radius] - Specifies the corner radius of the component's input.
 * @cssproperty [--calcite-autocomplete-input-shadow] - Specifies the shadow of the component's input.
 * @cssproperty [--calcite-autocomplete-input-icon-color] - Specifies the icon color of the component's input.
 * @cssproperty [--calcite-autocomplete-input-text-color] - Specifies the text color of the component's input.
 * @cssproperty [--calcite-autocomplete-input-placeholder-text-color] - Specifies the placeholder text color of the component's input.
 * @cssproperty [--calcite-autocomplete-input-actions-background-color] - Specifies the background color of the input's `clearable` element.
 * @cssproperty [--calcite-autocomplete-input-actions-background-color-hover] - Specifies the background color of the input's `clearable` element when hovered.
 * @cssproperty [--calcite-autocomplete-input-actions-background-color-press] - Specifies the background color of the input's `clearable` element when pressed.
 * @cssproperty [--calcite-autocomplete-input-actions-icon-color] - Specifies the icon color of the input's `clearable` element.
 * @cssproperty [--calcite-autocomplete-input-actions-icon-color-hover] - Specifies the icon color of the input's `clearable` element when hovered.
 * @cssproperty [--calcite-autocomplete-input-actions-icon-color-press] - Specifies the icon color of the input's `clearable` element when pressed.
 * @cssproperty [--calcite-autocomplete-input-loading-background-color] - Specifies the background color of the Input's `loading` element, when present.
 * @cssproperty [--calcite-autocomplete-input-loading-fill-color] - Specifies the fill color of the Input's `loading` element, when present.
 * @cssproperty [--calcite-autocomplete-input-prefix-text-color] - Specifies the text color of the Input's prefix, when present.
 * @cssproperty [--calcite-autocomplete-input-suffix-text-color] - Specifies the text color of the Input's suffix, when present.
 * @slot  - A slot for adding `calcite-autocomplete-item` elements.
 * @slot [content-bottom] - A slot for adding content below `calcite-autocomplete-item` elements.
 * @slot [content-top] - A slot for adding content above `calcite-autocomplete-item` elements.
 * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
 */
export abstract class Autocomplete extends LitElement {
  /**
   * 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`, interaction is prevented and the component is displayed with lower opacity.
   *
   * @default false
   */
  accessor disabled: boolean;
  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
  accessor flipPlacements: FlipPlacement[];
  /**
   * 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`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */
  accessor icon: IconName | boolean;
  /**
   * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
   *
   * @default false
   */
  accessor iconFlipRtl: boolean;
  /** Specifies the text typed into the component and is used to filter slotted `autocomplete-item`s. */
  accessor inputValue: string;
  /** 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 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 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;
  /**
   * 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 `true`, displays and positions the component.
   *
   * @default false
   */
  accessor open: boolean;
  /**
   * Specifies the type of positioning to use for overlaid content, where:
   *
   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
   *
   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
   *
   * @default "absolute"
   */
  accessor overlayPositioning: OverlayPositioning;
  /**
   * 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 placeholder text for the component.
   *
   * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
   */
  accessor placeholder: string;
  /**
   * Determines where the component will be positioned relative to the container element.
   *
   * @default "bottom-start"
   */
  accessor placement: MenuPlacement;
  /** Specifies the component's prefix text. */
  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 status of the input field, which determines message and icons.
   *
   * @default "idle"
   */
  accessor status: Status;
  /** Specifies the component's suffix text. */
  accessor suffixText: string;
  /**
   * When `true` and the component is `open`, disables top layer placement.
   *
   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
   *
   * @default false
   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
   */
  accessor topLayerDisabled: boolean;
  /** 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;
  /**
   * Specifies the selected `autocomplete-item`. When the component resides in a form, the `value` is submitted with the form.
   *
   * @default ""
   */
  accessor value: string;
  /**
   * Updates the position of the component.
   *
   * @param delayed - `true` if the placement should be updated after the component is finished rendering.
   */
  reposition(delayed?: boolean): Promise<void>;
  /**
   * Scrolls the component's content to a specified set of coordinates.
   *
   * @param options - allows specific coordinates to be defined.
   * @returns promise that resolves once the content is scrolled to.
   * @example
   * myAutocomplete.scrollContentTo({
   *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
   *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
   *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
   * });
   */
  scrollContentTo(options?: ScrollToOptions): Promise<void>;
  /** Selects the text of the component's `value`. */
  selectText(): Promise<void>;
  /**
   * Sets focus on the component's first focusable element.
   *
   * @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 when the component is requested to be closed and before the closing transition begins. */
  readonly calciteAutocompleteBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
  readonly calciteAutocompleteBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires each time a new `value` is typed and committed. */
  readonly calciteAutocompleteChange: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component is closed and animation is complete. */
  readonly calciteAutocompleteClose: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component is open and animation is complete. */
  readonly calciteAutocompleteOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires each time a new `inputValue` is typed and committed. */
  readonly calciteAutocompleteTextChange: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires each time a new `inputValue` is typed. */
  readonly calciteAutocompleteTextInput: import("@arcgis/lumina").TargetedEvent<this, void>;
  readonly "@eventTypes": {
    calciteAutocompleteBeforeClose: Autocomplete["calciteAutocompleteBeforeClose"]["detail"];
    calciteAutocompleteBeforeOpen: Autocomplete["calciteAutocompleteBeforeOpen"]["detail"];
    calciteAutocompleteChange: Autocomplete["calciteAutocompleteChange"]["detail"];
    calciteAutocompleteClose: Autocomplete["calciteAutocompleteClose"]["detail"];
    calciteAutocompleteOpen: Autocomplete["calciteAutocompleteOpen"]["detail"];
    calciteAutocompleteTextChange: Autocomplete["calciteAutocompleteTextChange"]["detail"];
    calciteAutocompleteTextInput: Autocomplete["calciteAutocompleteTextInput"]["detail"];
  };
}