@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
76 lines (74 loc) • 3.38 kB
TypeScript
/// <reference types="../../index.d.ts" />
import { PropertyValues } from 'lit';
import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
import { Kind, Scale, Width } from '../interfaces';
import { OpenCloseComponent } from '../../utils/openCloseComponent';
import { IconNameOrString } from '../calcite-icon/interfaces';
/**
* Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
* notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.
* They are optionally closable - useful for keeping track of whether or not a user has closed the notice. You can also choose not
* to display a notice on page load and set the "active" attribute as needed to contextually provide inline messaging to users.
*
* @slot [title] - A slot for adding the title.
* @slot [message] - A slot for adding the message.
* @slot [link] - A slot for adding a `calcite-action` to take, 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 less actions.
*/
export declare class Notice extends LitElement {
/**
* When `true`, a close button is added to the component.
*
* @default false
*/
closable: boolean;
/** 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>;
/** Use this property to override individual strings used by the component. */
messageOverrides?: typeof this.messages._overrides;
/**
* When `true`, the component is visible.
*
* @default false
*/
open: boolean;
/**
* Specifies the size of the component.
*
* @default "m"
*/
scale: Scale;
/**
* Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
*
* @default "auto"
*/
width: Extract<Width, "auto" | "half" | "full">;
/** Sets focus on the component's first focusable element. */
setFocus(): Promise<void>;
/** Fires when the component is requested to be closed and before the closing transition begins. */
readonly calciteNoticeBeforeClose: TargetedEvent<this, void>;
/** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
readonly calciteNoticeBeforeOpen: TargetedEvent<this, void>;
/** Fires when the component is closed and animation is complete. */
readonly calciteNoticeClose: TargetedEvent<this, void>;
/** Fires when the component is open and animation is complete. */
readonly calciteNoticeOpen: TargetedEvent<this, void>;
private messages: Partial<{
close: string;
}> & import('@arcgis/lumina/controllers').T9nMeta<{
close: string;
}>;
}