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

Web Components for Esri's Calcite Design System.

import { EventEmitter, VNode } from "../../stencil-public-runtime";
import { Appearance, Kind, Scale, SelectionMode } from "../interfaces";
import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
import { LoadableComponent } from "../../utils/loadable";
import { T9nComponent } from "../../utils/t9n";
import { InteractiveComponent } from "../../utils/interactive";
import { LocalizedComponent } from "../../utils/locale";
import { ChipMessages } from "./assets/chip/t9n";
/**
 * @slot - A slot for adding text.
 * @slot image - A slot for adding an image.
 */
export declare class Chip implements ConditionalSlotComponent, InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent {
  el: HTMLCalciteChipElement;
  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
  disabled: boolean;
  /** Specifies the appearance style of the component. */
  appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>;
  /** Specifies the kind of the component (will apply to border and background if applicable). */
  kind: Extract<"brand" | "inverse" | "neutral", Kind>;
  /** When `true`, a close button is added to the component. */
  closable: boolean;
  /** Specifies an icon to display. */
  icon: string;
  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
  iconFlipRtl: boolean;
  /** Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value. */
  scale: Scale;
  /** Accessible name for the component. */
  label: string;
  /** The component's value. */
  value: any;
  /** When `true`, hides the component. */
  closed: boolean;
  /**
   * This internal property, managed by a containing `calcite-chip-group`, is
   * conditionally set based on the `selectionMode` of the parent
   *
   * @internal
   */
  selectionMode: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>;
  /** When `true`, the component is selected.  */
  selected: boolean;
  /**
   * Use this property to override individual strings used by the component.
   */
  messageOverrides: Partial<ChipMessages>;
  /**
   * Made into a prop for testing purposes only
   *
   * @internal
   */
  messages: ChipMessages;
  onMessagesChange(): void;
  /**
   * When true, enables the chip to be focused, and allows the `calciteChipSelect` to emit.
   * This is set to `true` by a parent Chip Group component.
   *
   * @internal
   */
  interactive: boolean;
  defaultMessages: ChipMessages;
  effectiveLocale: string;
  effectiveLocaleChange(): void;
  private hasText;
  private hasImage;
  private containerEl;
  private closeButtonEl;
  private mutationObserver;
  /**
   * Fires when the component's close button is selected.
   */
  calciteChipClose: EventEmitter<void>;
  /**
   * Fires when the selected state of the component changes.
   */
  calciteChipSelect: EventEmitter<void>;
  /**
   * @internal
   */
  calciteInternalChipKeyEvent: EventEmitter<KeyboardEvent>;
  connectedCallback(): void;
  componentDidLoad(): void;
  componentDidRender(): void;
  disconnectedCallback(): void;
  componentWillLoad(): Promise<void>;
  keyDownHandler(event: KeyboardEvent): void;
  clickHandler(): void;
  /** Sets focus on the component. */
  setFocus(): Promise<void>;
  private close;
  private closeButtonKeyDownHandler;
  private updateHasText;
  private setupTextContentObserver;
  private handleSlotImageChange;
  private handleEmittingEvent;
  renderChipImage(): VNode;
  renderSelectionIcon(): VNode;
  renderCloseButton(): VNode;
  renderIcon(): VNode;
  render(): VNode;
}