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

Web Components for Esri's Calcite Design System.

import { EventEmitter, VNode } from "../../stencil-public-runtime";
import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
import { LoadableComponent } from "../../utils/loadable";
import { LocalizedComponent } from "../../utils/locale";
import { T9nComponent } from "../../utils/t9n";
import { Kind, Scale, Width } from "../interfaces";
import { NoticeMessages } from "./assets/notice/t9n";
/**
 * 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 implements ConditionalSlotComponent, LoadableComponent, T9nComponent, LocalizedComponent {
  el: HTMLCalciteNoticeElement;
  /** When `true`, the component is visible. */
  open: boolean;
  /** Specifies the kind of the component (will apply to top border and icon). */
  kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>;
  /** When `true`, a close button is added to the component. */
  closable: boolean;
  /**
   * 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 the size of the component. */
  scale: Scale;
  /** Specifies the width of the component. */
  width: Width;
  /**
   * Made into a prop for testing purposes only
   *
   * @internal
   */
  messages: NoticeMessages;
  /**
   * Use this property to override individual strings used by the component.
   */
  messageOverrides: Partial<NoticeMessages>;
  onMessagesChange(): void;
  updateRequestedIcon(): void;
  connectedCallback(): void;
  disconnectedCallback(): void;
  componentWillLoad(): Promise<void>;
  componentDidLoad(): void;
  render(): VNode;
  /** Fired when the component is closed. */
  calciteNoticeClose: EventEmitter<void>;
  /** Fired when the component is opened. */
  calciteNoticeOpen: EventEmitter<void>;
  /** Sets focus on the component's first focusable element. */
  setFocus(): Promise<void>;
  private close;
  /** The close button element. */
  private closeButton?;
  /** The computed icon to render. */
  private requestedIcon?;
  effectiveLocale: string;
  effectiveLocaleChange(): void;
  defaultMessages: NoticeMessages;
}