@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
104 lines (102 loc) • 4.03 kB
TypeScript
/// <reference types="../../index.d.ts" />
import { PropertyValues } from 'lit';
import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
import { MenuPlacement } from '../../utils/floating-ui';
import { NumberingSystem, NumberStringFormat } from '../../utils/locale';
import { OpenCloseComponent } from '../../utils/openCloseComponent';
import { Kind, Scale } from '../interfaces';
import { IconNameOrString } from '../calcite-icon/interfaces';
import { AlertDuration, AlertQueue } 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 extends LitElement {
/**
* When `true`, the component closes automatically. Recommended for passive, non-blocking alerts.
*
* @default false
*/
autoClose: boolean;
/**
* Specifies the duration before the component automatically closes - only use with `autoClose`.
*
* @default "medium"
*/
autoCloseDuration: AlertDuration;
/**
* When `true`, shows a default recommended icon. Alternatively,
* pass a Calcite UI Icon name to display a specific icon.
*/
icon: IconNameOrString | boolean;
/**
* When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
*
* @default false
*/
iconFlipRtl: boolean;
/**
* Specifies the kind of the component, which will apply to top border and icon.
*
* @default "brand"
*/
kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>;
/**
* Specifies an accessible name for the component.
*
* @required
*/
label: string;
/** Use this property to override individual strings used by the component. */
messageOverrides?: typeof this.messages._overrides;
/** Specifies the Unicode numeral system used by the component for localization. */
numberingSystem: NumberingSystem;
/**
* When `true`, displays and positions the component.
*
* @default false
*/
open: boolean;
/**
* Specifies the placement of the component.
*
* @default "bottom"
*/
placement: MenuPlacement;
/**
* Specifies the ordering priority of the component when opened.
*
* @default "last"
*/
queue: AlertQueue;
/**
* Specifies the size of the component.
*
* @default "m"
*/
scale: Scale;
/**
* Sets focus on the component's "close" button, the first focusable item.
*
* `@returns` {Promise<void>}
*/
setFocus(): Promise<void>;
/** Fires when the component is requested to be closed and before the closing transition begins. */
readonly calciteAlertBeforeClose: TargetedEvent<this, void>;
/** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
readonly calciteAlertBeforeOpen: TargetedEvent<this, void>;
/** Fires when the component is closed and animation is complete. */
readonly calciteAlertClose: TargetedEvent<this, void>;
/** Fires when the component is open and animation is complete. */
readonly calciteAlertOpen: TargetedEvent<this, void>;
private messages: Partial<{
close: string;
}> & import('@arcgis/lumina/controllers').T9nMeta<{
close: string;
}>;
}