igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
90 lines (89 loc) • 3.7 kB
TypeScript
import { LitElement } from 'lit';
import type { Constructor } from '../common/mixins/constructor.js';
export interface IgcBannerComponentEventMap {
igcClosing: CustomEvent<void>;
igcClosed: CustomEvent<void>;
}
declare const IgcBannerComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcBannerComponentEventMap>> & Constructor<LitElement>;
/**
* A non-modal notification banner that displays important, concise messages
* requiring user acknowledgement.
*
* The banner slides into view with an animated grow transition and renders
* inline, pushing the surrounding page content rather than overlaying it.
*
* The component integrates with the
* [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API):
* an Ignite button or a native `<button>` with `command="--show"` / `"--hide"` /
* `"--toggle"` and `commandfor` pointing to this element will call the
* corresponding method declaratively without any JavaScript.
*
* @element igc-banner
*
* @fires igcClosing - Emitted just before the banner closes in response to the
* default action button being clicked. Cancelable — call
* `event.preventDefault()` to abort the closing sequence.
* @fires igcClosed - Emitted after the banner has fully closed and its exit
* animation has completed.
*
* @slot - The banner message text content.
* @slot prefix - An icon or illustration rendered to the left of the message.
* Useful for reinforcing the message type (info, warning, success, etc.).
* @slot actions - Custom action elements rendered in the banner's action area.
* When provided, replaces the default "OK" dismiss button.
*
* @csspart base - The root wrapper element of the banner.
* @csspart spacer - The inner wrapper that controls the spacing around the banner content.
* @csspart message - The container that holds the illustration and text content.
* @csspart illustration - The container for the prefix slot (icon/illustration).
* @csspart content - The container for the default message slot.
* @csspart actions - The container for the action buttons slot.
*/
export default class IgcBannerComponent extends IgcBannerComponent_base {
static readonly tagName = "igc-banner";
static styles: import("lit").CSSResult[];
static register(): void;
private readonly _bannerRef;
private readonly _player;
/**
* Whether the banner is open.
*
* Setting this property programmatically will immediately show or hide the
* banner without animation and without emitting close events.
* Prefer the `show()`, `hide()`, and `toggle()` methods for animated
* transitions.
* @attr open
* @default false
*/
open: boolean;
constructor();
private _handleClick;
/**
* Opens the banner with an animated grow-in transition.
*
* Returns `true` when the banner was successfully opened, or `false` if
* it was already open.
*/
show(): Promise<boolean>;
/**
* Closes the banner with an animated grow-out transition.
*
* Returns `true` when the banner was successfully closed, or `false` if
* it was already closed.
*/
hide(): Promise<boolean>;
/**
* Toggles the banner open or closed depending on its current state.
*
* Equivalent to calling `show()` when closed and `hide()` when open.
* Returns `true` when the transition completed successfully.
*/
toggle(): Promise<boolean>;
protected render(): import("lit-html").TemplateResult<1>;
}
declare global {
interface HTMLElementTagNameMap {
'igc-banner': IgcBannerComponent;
}
}
export {};