@esri/calcite-components/dist/components/calcite-alert/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 { MenuPlacement } from "../../utils/floating-ui.js";
import type { NumberingSystem } from "../../utils/locale.js";
import type { Kind, Scale } from "../interfaces.js";
import type { IconName } from "../calcite-icon/interfaces.js";
import type { AlertDuration, AlertQueue } from "./interfaces.js";

/**
 * 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.
 *
 * @cssproperty [--calcite-alert-width] - Specifies the component's width.
 * @cssproperty [--calcite-alert-background-color] - Specifies the component's background color.
 * @cssproperty [--calcite-alert-corner-radius] - Specifies the component's corner radius.
 * @cssproperty [--calcite-alert-shadow] - Specifies the component's shadow.
 * @cssproperty [--calcite-alert-offset-size] - Specifies the component's `placement` offset.
 * @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 abstract class Alert extends LitElement {
  /**
   * When `true`, the component closes automatically. Recommended for passive, non-blocking alerts.
   *
   * @default false
   */
  accessor autoClose: boolean;
  /**
   * Specifies the duration before the component automatically closes - only use with `autoClose`.
   *
   * @default "medium"
   */
  accessor autoCloseDuration: AlertDuration;
  /**
   * 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 kind of the component, which will apply to top border and icon.
   *
   * @default "brand"
   */
  accessor kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>;
  /**
   * Specifies an accessible label for the component.
   *
   * @required
   */
  accessor label: string;
  /** Overrides individual strings used by the component. */
  accessor messageOverrides: { close?: string; };
  /** Specifies the Unicode numeral system used by the component for localization. */
  accessor numberingSystem: NumberingSystem;
  /**
   * When `true`, displays and positions the component.
   *
   * @default false
   */
  accessor open: boolean;
  /**
   * Specifies the placement of the component.
   *
   * @default "bottom"
   */
  accessor placement: MenuPlacement;
  /**
   * Specifies the ordering priority of the component when opened.
   *
   * @default "last"
   */
  accessor queue: AlertQueue;
  /**
   * Specifies the size of the component.
   *
   * @default "m"
   */
  accessor scale: Scale;
  /**
   * 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;
  /**
   * Sets focus on the component's "close" button, the first focusable item.
   *
   * @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 calciteAlertBeforeClose: 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 calciteAlertBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component is closed and animation is complete. */
  readonly calciteAlertClose: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component is open and animation is complete. */
  readonly calciteAlertOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
  readonly "@eventTypes": {
    calciteAlertBeforeClose: Alert["calciteAlertBeforeClose"]["detail"];
    calciteAlertBeforeOpen: Alert["calciteAlertBeforeOpen"]["detail"];
    calciteAlertClose: Alert["calciteAlertClose"]["detail"];
    calciteAlertOpen: Alert["calciteAlertOpen"]["detail"];
  };
}