@synergy-design-system/angular
Version:
Angular wrappers for the Synergy Design System
83 lines (80 loc) • 3.69 kB
TypeScript
import * as i0 from '@angular/core';
import { ElementRef, NgZone, EventEmitter } from '@angular/core';
import { SynAlert, SynShowEvent, SynAfterShowEvent, SynHideEvent, SynAfterHideEvent } from '@synergy-design-system/components';
export { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent } from '@synergy-design-system/components';
/**
* @summary Alerts are used to display important messages inline or as toast notifications.
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
* @status stable
* @since 2.0
*
* @dependency syn-icon-button
*
* @slot - The alert's main content.
* @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.
*
* @event syn-show - Emitted when the alert opens.
* @event syn-after-show - Emitted after the alert opens and all animations are complete.
* @event syn-hide - Emitted when the alert closes.
* @event syn-after-hide - Emitted after the alert closes and all animations are complete.
*
* @csspart base - The component's base wrapper.
* @csspart icon - The container that wraps the optional icon.
* @csspart message - The container that wraps the alert's main content.
* @csspart close-button - The close button, an `<syn-icon-button>`.
* @csspart close-button__base - The close button's exported `base` part.
*
* @animation alert.show - The animation to use when showing the alert.
* @animation alert.hide - The animation to use when hiding the alert.
*/
declare class SynAlertComponent {
nativeElement: SynAlert;
private _ngZone;
constructor(e: ElementRef, ngZone: NgZone);
/**
* Indicates whether or not the alert is open.
* You can toggle this attribute to show and hide the alert, or you can
use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.
*/
set open(v: '' | SynAlert['open']);
get open(): SynAlert['open'];
/**
* Enables a close button that allows the user to dismiss the alert.
*/
set closable(v: '' | SynAlert['closable']);
get closable(): SynAlert['closable'];
/**
* The alert's theme variant.
*/
set variant(v: SynAlert['variant']);
get variant(): SynAlert['variant'];
/**
* The length of time, in milliseconds, the alert will show before closing itself.
* If the user interacts with
the alert before it closes (e.g.
* moves the mouse over it), the timer will restart.
* Defaults to `Infinity`, meaning
the alert will not close on its own.
*/
set duration(v: SynAlert['duration']);
get duration(): SynAlert['duration'];
/**
* Emitted when the alert opens.
*/
synShowEvent: EventEmitter<SynShowEvent>;
/**
* Emitted after the alert opens and all animations are complete.
*/
synAfterShowEvent: EventEmitter<SynAfterShowEvent>;
/**
* Emitted when the alert closes.
*/
synHideEvent: EventEmitter<SynHideEvent>;
/**
* Emitted after the alert closes and all animations are complete.
*/
synAfterHideEvent: EventEmitter<SynAfterHideEvent>;
static ɵfac: i0.ɵɵFactoryDeclaration<SynAlertComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SynAlertComponent, "syn-alert", never, { "open": { "alias": "open"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "duration": { "alias": "duration"; "required": false; }; }, { "synShowEvent": "synShowEvent"; "synAfterShowEvent": "synAfterShowEvent"; "synHideEvent": "synHideEvent"; "synAfterHideEvent": "synAfterHideEvent"; }, never, ["*"], true, never>;
}
export { SynAlertComponent };