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

Web Components for Esri's Calcite Design System.

import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
import { EffectivePlacement, FloatingUIComponent, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
import { FormComponent } from "../../utils/form";
import { InteractiveComponent } from "../../utils/interactive";
import { LabelableComponent } from "../../utils/label";
import { LoadableComponent } from "../../utils/loadable";
import { OpenCloseComponent } from "../../utils/openCloseComponent";
import { T9nComponent } from "../../utils/t9n";
import { Scale, SelectionMode } from "../interfaces";
import { ComboboxMessages } from "./assets/combobox/t9n";
import { ComboboxChildElement } from "./interfaces";
interface ItemData {
  label: string;
  value: string;
}
/**
 * @slot - A slot for adding `calcite-combobox-item`s.
 */
export declare class Combobox implements LabelableComponent, FormComponent, InteractiveComponent, OpenCloseComponent, FloatingUIComponent, T9nComponent, LoadableComponent {
  el: HTMLCalciteComboboxElement;
  /**
   * When `true`, the value-clearing will be disabled.
   */
  clearDisabled: boolean;
  /**When `true`, displays and positions the component. */
  open: boolean;
  openHandler(): void;
  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
  disabled: boolean;
  handleDisabledChange(value: boolean): 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;
  /** Accessible name for the component. */
  label: string;
  /** Specifies the placeholder text for the input. */
  placeholder: string;
  /** Specifies the placeholder icon for the input. */
  placeholderIcon: string;
  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
  placeholderIconFlipRtl: boolean;
  /** Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar. */
  maxItems: number;
  maxItemsHandler(): void;
  /**
   * Specifies the name of the component.
   *
   * Required to pass the component's `value` on form submission.
   */
  name: string;
  /** When `true`, allows entry of custom values, which are not in the original set of items. */
  allowCustomValues: boolean;
  /**
   * Determines the type of positioning to use for the overlaid content.
   *
   * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
   *
   * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
   *
   */
  overlayPositioning: OverlayPositioning;
  overlayPositioningHandler(): void;
  /**
   * When `true`, the component must have a value in order for the form to submit.
   *
   * @internal
   */
  required: boolean;
  /**
   * specify the selection mode
   * - multiple: allow any number of selected items (default)
   * - single: only one selection)
   * - ancestors: like multiple, but show ancestors of selected items as selected, only deepest children shown in chips
   */
  selectionMode: Extract<"single" | "ancestors" | "multiple", SelectionMode>;
  /** Specifies the size of the component. */
  scale: Scale;
  /** The component's value(s) from the selected `calcite-combobox-item`(s). */
  value: string | string[];
  valueHandler(value: string | string[]): void;
  /**
   * Defines the available placements that can be used when a flip occurs.
   */
  flipPlacements: EffectivePlacement[];
  /**
   * Made into a prop for testing purposes only
   *
   * @internal
   */
  messages: ComboboxMessages;
  /**
   * Use this property to override individual strings used by the component.
   */
  messageOverrides: Partial<ComboboxMessages>;
  onMessagesChange(): void;
  flipPlacementsHandler(): void;
  /**
   * Specifies the component's selected items.
   *
   * @readonly
   */
  selectedItems: HTMLCalciteComboboxItemElement[];
  selectedItemsHandler(): void;
  /**
   * Specifies the component's filtered items.
   *
   * @readonly
   */
  filteredItems: HTMLCalciteComboboxItemElement[];
  documentClickHandler(event: PointerEvent): void;
  calciteComboboxItemChangeHandler(event: CustomEvent<HTMLCalciteComboboxItemElement>): void;
  /**
   * Updates the position of the component.
   *
   * @param delayed
   */
  reposition(delayed?: boolean): Promise<void>;
  /** Sets focus on the component. */
  setFocus(): Promise<void>;
  /**
   * Fires when the selected item(s) changes.
   */
  calciteComboboxChange: EventEmitter<void>;
  /** Fires when text is added to filter the options list. */
  calciteComboboxFilterChange: EventEmitter<void>;
  /**
   * Fires when a selected item in the component is closed via its `calcite-chip`.
   */
  calciteComboboxChipClose: EventEmitter<void>;
  /** Fires when the component is requested to be closed, and before the closing transition begins. */
  calciteComboboxBeforeClose: EventEmitter<void>;
  /** Fires when the component is closed and animation is complete. */
  calciteComboboxClose: EventEmitter<void>;
  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
  calciteComboboxBeforeOpen: EventEmitter<void>;
  /** Fires when the component is open and animation is complete. */
  calciteComboboxOpen: EventEmitter<void>;
  connectedCallback(): void;
  componentWillLoad(): Promise<void>;
  componentDidLoad(): void;
  componentDidRender(): void;
  disconnectedCallback(): void;
  placement: LogicalPlacement;
  filteredFlipPlacements: EffectivePlacement[];
  internalValueChangeFlag: boolean;
  labelEl: HTMLCalciteLabelElement;
  formEl: HTMLFormElement;
  defaultValue: Combobox["value"];
  items: HTMLCalciteComboboxItemElement[];
  groupItems: HTMLCalciteComboboxItemGroupElement[];
  needsIcon: boolean;
  activeItemIndex: number;
  activeChipIndex: number;
  activeDescendant: string;
  text: string;
  /** when search text is cleared, reset active to  */
  textHandler(): void;
  effectiveLocale: string;
  effectiveLocaleChange(): void;
  defaultMessages: ComboboxMessages;
  textInput: HTMLInputElement;
  data: ItemData[];
  mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
  resizeObserver: ResizeObserver;
  private guid;
  private inputHeight;
  private floatingEl;
  private referenceEl;
  private listContainerEl;
  private ignoreSelectedEventsFlag;
  openTransitionProp: string;
  transitionEl: HTMLDivElement;
  private clearValue;
  setFilteredPlacements: () => void;
  getValue: () => string | string[];
  onLabelClick: () => void;
  private comboboxInViewport;
  private keyDownHandler;
  private toggleCloseEnd;
  private toggleOpenEnd;
  onBeforeOpen(): void;
  onOpen(): void;
  onBeforeClose(): void;
  onClose(): void;
  setMaxScrollerHeight: () => Promise<void>;
  calciteChipCloseHandler: (comboboxItem: HTMLCalciteComboboxItemElement) => void;
  clickHandler: (event: MouseEvent) => void;
  private ensureRecentSelectedItemIsActive;
  setInactiveIfNotContained: (event: Event) => void;
  setFloatingEl: (el: HTMLDivElement) => void;
  setContainerEl: (el: HTMLDivElement) => void;
  setReferenceEl: (el: HTMLDivElement) => void;
  private getMaxScrollerHeight;
  private calculateSingleItemHeight;
  inputHandler: (event: Event) => void;
  getCombinedItems(): ComboboxChildElement[];
  private filterItems;
  internalComboboxChangeEvent: () => void;
  private emitComboboxChange;
  toggleSelection(item: HTMLCalciteComboboxItemElement, value?: boolean): void;
  updateAncestors(item: HTMLCalciteComboboxItemElement): void;
  getfilteredItems(): HTMLCalciteComboboxItemElement[];
  getSelectedItems(): HTMLCalciteComboboxItemElement[];
  updateItems: () => void;
  getData(): ItemData[];
  getNeedsIcon(): boolean;
  resetText(): void;
  getItems(): HTMLCalciteComboboxItemElement[];
  getGroupItems(): HTMLCalciteComboboxItemGroupElement[];
  addCustomChip(value: string, focus?: boolean): void;
  removeActiveChip(): void;
  removeLastChip(): void;
  previousChip(): void;
  nextChip(): void;
  focusChip(): void;
  private scrollToActiveItem;
  shiftActiveItemIndex(delta: number): void;
  updateActiveItemIndex(index: number): void;
  isMulti(): boolean;
  comboboxFocusHandler: () => void;
  comboboxBlurHandler: (event: FocusEvent) => void;
  renderChips(): VNode[];
  renderInput(): VNode;
  renderListBoxOptions(): VNode[];
  renderFloatingUIContainer(): VNode;
  renderIconStart(): VNode;
  renderIconEnd(): VNode;
  render(): VNode;
}
export {};