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

Web Components for Esri's Calcite Design System.

import { EventEmitter, VNode } from "../../stencil-public-runtime";
import { MenuPlacement } from "../../utils/floating-ui";
import { LoadableComponent } from "../../utils/loadable";
import { NumberingSystem } from "../../utils/locale";
import { OpenCloseComponent } from "../../utils/openCloseComponent";
import { T9nComponent } from "../../utils/t9n";
import { Kind, Scale } from "../interfaces";
import { AlertMessages } from "./assets/alert/t9n";
import { AlertDuration, Sync, Unregister } from "./interfaces";
/**
 * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
 * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.
 */
/**
 * @slot title - A slot for adding a title to the component.
 * @slot message - A slot for adding main text to the component.
 * @slot link - A slot for adding a `calcite-action` to take from the component such as: "undo", "try again", "link to page", etc.
 * @slot actions-end - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or fewer actions.
 */
export declare class Alert implements OpenCloseComponent, LoadableComponent, T9nComponent {
  el: HTMLCalciteAlertElement;
  /** When `true`, displays and positions the component. */
  open: boolean;
  openHandler(): void;
  /** When `true`, the component closes automatically (recommended for passive, non-blocking alerts). */
  autoClose: boolean;
  /** Specifies the duration before the component automatically closes (only use with `autoClose`). */
  autoCloseDuration: AlertDuration;
  /** Specifies the kind of the component (will apply to top border and icon). */
  kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>;
  /**
   * When `true`, shows a default recommended icon. Alternatively,
   * pass a Calcite UI Icon name to display a specific icon.
   */
  icon: string | boolean;
  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
  iconFlipRtl: boolean;
  /** Specifies an accessible name for the component. */
  label: string;
  /**
   * Specifies the Unicode numeral system used by the component for localization.
   */
  numberingSystem: NumberingSystem;
  /** Specifies the placement of the component */
  placement: MenuPlacement;
  /** Specifies the size of the component. */
  scale: Scale;
  /**
   * Made into a prop for testing purposes only
   *
   * @internal
   */
  messages: AlertMessages;
  /**
   * Use this property to override individual strings used by the component.
   */
  messageOverrides: Partial<AlertMessages>;
  onMessagesChange(): void;
  /**
   * This internal property, managed by a containing calcite-shell, is used
   * to inform the component if special configuration or styles are needed
   *
   * @internal
   */
  slottedInShell: boolean;
  updateRequestedIcon(): void;
  updateDuration(): void;
  connectedCallback(): void;
  componentWillLoad(): Promise<void>;
  componentDidLoad(): void;
  disconnectedCallback(): void;
  render(): VNode;
  /** Fires when the component is requested to be closed and before the closing transition begins. */
  calciteAlertBeforeClose: EventEmitter<void>;
  /** Fires when the component is closed and animation is complete. */
  calciteAlertClose: EventEmitter<void>;
  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
  calciteAlertBeforeOpen: EventEmitter<void>;
  /** Fires when the component is open and animation is complete. */
  calciteAlertOpen: EventEmitter<void>;
  /**
   * Fires to sync queue when opened or closed.
   *
   * @internal
   */
  calciteInternalAlertSync: EventEmitter<Sync>;
  /**
   * Fires when the component is added to DOM - used to receive initial queue.
   *
   * @internal
   */
  calciteInternalAlertRegister: EventEmitter<void>;
  alertSync(event: CustomEvent): void;
  alertRegister(): void;
  alertUnregister(event: CustomEvent<Unregister>): void;
  /** Sets focus on the component's "close" button (the first focusable item). */
  setFocus(): Promise<void>;
  effectiveLocale: string;
  effectiveLocaleChange(): void;
  defaultMessages: AlertMessages;
  hasEndActions: boolean;
  /** the list of queued alerts */
  queue: HTMLCalciteAlertElement[];
  /** the count of queued alerts */
  queueLength: number;
  /** is the alert queued */
  queued: boolean;
  /** the close button element */
  private closeButton;
  private autoCloseTimeoutId;
  private queueTimeout;
  private initialOpenTime;
  private lastMouseOverBegin;
  private totalOpenTime;
  private totalHoverTime;
  /** the computed icon to render */
  requestedIcon?: string;
  openTransitionProp: string;
  transitionEl: HTMLDivElement;
  private setTransitionEl;
  /** determine which alert is active */
  private determineActiveAlert;
  /** close and emit calciteInternalAlertSync event with the updated queue payload */
  private closeAlert;
  onBeforeOpen(): void;
  onOpen(): void;
  onBeforeClose(): void;
  onClose(): void;
  /** remove queued class after animation completes */
  private openAlert;
  private actionsEndSlotChangeHandler;
  private handleMouseOver;
  private handleMouseLeave;
}