igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
210 lines (205 loc) • 8.07 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ElementRef, EventEmitter, Input, Output, HostBinding, Component, NgModule } from '@angular/core';
import { takeUntil } from 'rxjs/operators';
import { VerticalAlignment, HorizontalAlignment, GlobalPositionStrategy } from 'igniteui-angular/core';
import { IgxNotificationsDirective } from 'igniteui-angular/directives';
import { useAnimation } from '@angular/animations';
import { fadeOut, fadeIn } from 'igniteui-angular/animations';
let NEXT_ID = 0;
/**
* **Ignite UI for Angular Toast** -
* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast)
*
* The Ignite UI Toast provides information and warning messages that are non-interactive and cannot
* be dismissed by the user. Toasts can be displayed at the bottom, middle, or top of the page.
*
* Example:
* ```html
* <button type="button" igxButton (click)="toast.open()">Show notification</button>
* <igx-toast #toast displayTime="1000">
* Notification displayed
* </igx-toast>
* ```
*/
class IgxToastComponent extends IgxNotificationsDirective {
constructor() {
super(...arguments);
this._element = inject(ElementRef);
/**
* @hidden
*/
this.cssClass = 'igx-toast';
/**
* Sets/gets the `id` of the toast.
* If not set, the `id` will have value `"igx-toast-0"`.
* ```html
* <igx-toast id = "my-first-toast"></igx-toast>
* ```
* ```typescript
* let toastId = this.toast.id;
* ```
*/
this.id = `igx-toast-${NEXT_ID++}`;
/**
* Sets/gets the `role` attribute.
* If not set, `role` will have value `"alert"`.
* ```html
* <igx-toast [role] = "'notify'"></igx-toast>
* ```
* ```typescript
* let toastRole = this.toast.role;
* ```
*
* @memberof IgxToastComponent
*/
this.role = 'alert';
/**
* @hidden
*/
this.isVisibleChange = new EventEmitter();
this._positionSettings = {
horizontalDirection: HorizontalAlignment.Center,
verticalDirection: VerticalAlignment.Bottom,
openAnimation: useAnimation(fadeIn),
closeAnimation: useAnimation(fadeOut),
};
}
/**
* Get the position and animation settings used by the toast.
* ```typescript
* @ViewChild('toast', { static: true }) public toast: IgxToastComponent;
* let currentPosition: PositionSettings = this.toast.positionSettings
* ```
*/
get positionSettings() {
return this._positionSettings;
}
/**
* Set the position and animation settings used by the toast.
* ```html
* <igx-toast [positionSettings]="newPositionSettings"></igx-toast>
* ```
* ```typescript
* import { slideInTop, slideOutBottom } from 'igniteui-angular';
* ...
* @ViewChild('toast', { static: true }) public toast: IgxToastComponent;
* public newPositionSettings: PositionSettings = {
* openAnimation: useAnimation(slideInTop, { params: { duration: '1000ms', fromPosition: 'translateY(100%)'}}),
* closeAnimation: useAnimation(slideOutBottom, { params: { duration: '1000ms', fromPosition: 'translateY(0)'}}),
* horizontalDirection: HorizontalAlignment.Left,
* verticalDirection: VerticalAlignment.Middle,
* horizontalStartPoint: HorizontalAlignment.Left,
* verticalStartPoint: VerticalAlignment.Middle
* };
* this.toast.positionSettings = this.newPositionSettings;
* ```
*/
set positionSettings(settings) {
this._positionSettings = settings;
}
/**
* Gets the nativeElement of the toast.
* ```typescript
* let nativeElement = this.toast.element;
* ```
*
* @memberof IgxToastComponent
*/
get element() {
return this._element.nativeElement;
}
/**
* Shows the toast.
* If `autoHide` is enabled, the toast will hide after `displayTime` is over.
*
* ```typescript
* this.toast.open();
* ```
*/
open(message, settings) {
if (message !== undefined) {
this.textMessage = message;
}
if (settings !== undefined) {
this.positionSettings = settings;
}
this.strategy = new GlobalPositionStrategy(this.positionSettings);
super.open();
}
/**
* Opens or closes the toast, depending on its current state.
*
* ```typescript
* this.toast.toggle();
* ```
*/
toggle() {
if (this.collapsed || this.isClosing) {
this.open();
}
else {
this.close();
}
}
/**
* @hidden
*/
ngOnInit() {
this.opened.pipe(takeUntil(this.destroy$)).subscribe(() => {
const openedEventArgs = { owner: this, id: this._overlayId };
this.isVisibleChange.emit(openedEventArgs);
});
this.closed.pipe(takeUntil(this.destroy$)).subscribe(() => {
const closedEventArgs = { owner: this, id: this._overlayId };
this.isVisibleChange.emit(closedEventArgs);
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxToastComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: IgxToastComponent, isStandalone: true, selector: "igx-toast", inputs: { id: "id", role: "role", positionSettings: "positionSettings" }, outputs: { isVisibleChange: "isVisibleChange" }, host: { properties: { "class.igx-toast": "this.cssClass", "attr.id": "this.id", "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<span>{{ textMessage }}</span>\n\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxToastComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-toast', standalone: true, template: "<ng-content></ng-content>\n<span>{{ textMessage }}</span>\n\n" }]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.igx-toast']
}], id: [{
type: HostBinding,
args: ['attr.id']
}, {
type: Input
}], role: [{
type: HostBinding,
args: ['attr.role']
}, {
type: Input
}], isVisibleChange: [{
type: Output
}], positionSettings: [{
type: Input
}] } });
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
class IgxToastModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxToastModule, imports: [IgxToastComponent], exports: [IgxToastComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxToastModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxToastModule, decorators: [{
type: NgModule,
args: [{
imports: [
IgxToastComponent
],
exports: [
IgxToastComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IgxToastComponent, IgxToastModule };
//# sourceMappingURL=igniteui-angular-toast.mjs.map