igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
219 lines (214 loc) • 9.93 kB
JavaScript
import { useAnimation } from '@angular/animations';
import * as i0 from '@angular/core';
import { EventEmitter, Input, Output, HostBinding, Component, NgModule } from '@angular/core';
import { takeUntil } from 'rxjs/operators';
import { VerticalAlignment, HorizontalAlignment, ContainerPositionStrategy, GlobalPositionStrategy } from 'igniteui-angular/core';
import { IgxNotificationsDirective, IgxButtonDirective } from 'igniteui-angular/directives';
import { fadeOut, fadeIn } from 'igniteui-angular/animations';
let NEXT_ID = 0;
/**
* **Ignite UI for Angular Snackbar** -
* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/snackbar.html)
*
* The Ignite UI Snack Bar provides feedback about an operation with a single-line message, which can
* include a link to an action such as Undo.
*
* Example:
* ```html
* <button type="button" igxButton (click)="snackbar.show()">Send message</button>
* <div>
* <igx-snackbar #snackbar>
* Message sent
* </igx-snackbar>
* </div>
* ```
*/
class IgxSnackbarComponent extends IgxNotificationsDirective {
constructor() {
super(...arguments);
/**
* Sets/gets the `id` of the snackbar.
* If not set, the `id` of the first snackbar component will be `"igx-snackbar-0"`;
* ```html
* <igx-snackbar id = "Snackbar1"></igx-snackbar>
* ```
* ```typescript
* let snackbarId = this.snackbar.id;
* ```
*
* @memberof IgxSnackbarComponent
*/
this.id = `igx-snackbar-${NEXT_ID++}`;
/**
* The default css class applied to the component.
*
* @hidden
* @internal
*/
this.cssClass = 'igx-snackbar';
/**
* An event that will be emitted when the action button is clicked.
* Provides reference to the `IgxSnackbarComponent` as an argument.
* ```html
* <igx-snackbar (clicked)="clickedHandler($event)"></igx-snackbar>
* ```
*/
this.clicked = new EventEmitter();
/**
* An event that will be emitted when the snackbar animation starts.
* Provides reference to the `ToggleViewEventArgs` interface as an argument.
* ```html
* <igx-snackbar (animationStarted) = "animationStarted($event)"></igx-snackbar>
* ```
*/
this.animationStarted = new EventEmitter();
/**
* An event that will be emitted when the snackbar animation ends.
* Provides reference to the `ToggleViewEventArgs` interface as an argument.
* ```html
* <igx-snackbar (animationDone) = "animationDone($event)"></igx-snackbar>
* ```
*/
this.animationDone = new EventEmitter();
this._positionSettings = {
horizontalDirection: HorizontalAlignment.Center,
verticalDirection: VerticalAlignment.Bottom,
openAnimation: useAnimation(fadeIn, { params: { duration: '.35s', easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
fromPosition: 'translateY(100%)', toPosition: 'translateY(0)' } }),
closeAnimation: useAnimation(fadeOut, { params: { duration: '.2s', easing: 'cubic-bezier(0.4, 0.0, 1, 1)',
fromPosition: 'translateY(0)', toPosition: 'translateY(100%)' } }),
};
}
/**
* Get the position and animation settings used by the snackbar.
* ```typescript
* @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent;
* let currentPosition: PositionSettings = this.snackbar.positionSettings
* ```
*/
get positionSettings() {
return this._positionSettings;
}
/**
* Set the position and animation settings used by the snackbar.
* ```html
* <igx-snackbar [positionSettings]="newPositionSettings"></igx-snackbar>
* ```
* ```typescript
* import { slideInTop, slideOutBottom } from 'igniteui-angular';
* ...
* @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent;
* 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,
* minSize: { height: 100, width: 100 }
* };
* this.snackbar.positionSettings = this.newPositionSettings;
* ```
*/
set positionSettings(settings) {
this._positionSettings = settings;
}
/**
* Shows the snackbar and hides it after the `displayTime` is over if `autoHide` is set to `true`.
* ```typescript
* this.snackbar.open();
* ```
*/
open(message) {
if (message !== undefined) {
this.textMessage = message;
}
this.strategy = this.outlet ? new ContainerPositionStrategy(this.positionSettings)
: new GlobalPositionStrategy(this.positionSettings);
super.open();
}
/**
* Opens or closes the snackbar, depending on its current state.
*
* ```typescript
* this.snackbar.toggle();
* ```
*/
toggle() {
if (this.collapsed || this.isClosing) {
this.open();
}
else {
this.close();
}
}
/**
* @hidden
*/
triggerAction() {
this.clicked.emit(this);
}
/**
* @hidden
*/
ngOnInit() {
this.opened.pipe(takeUntil(this.destroy$)).subscribe(() => {
const openedEventArgs = { owner: this, id: this._overlayId };
this.animationStarted.emit(openedEventArgs);
});
this.closed.pipe(takeUntil(this.destroy$)).subscribe(() => {
const closedEventArgs = { owner: this, id: this._overlayId };
this.animationDone.emit(closedEventArgs);
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSnackbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxSnackbarComponent, isStandalone: true, selector: "igx-snackbar", inputs: { id: "id", actionText: "actionText", positionSettings: "positionSettings" }, outputs: { clicked: "clicked", animationStarted: "animationStarted", animationDone: "animationDone" }, host: { properties: { "attr.id": "this.id", "class.igx-snackbar": "this.cssClass" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"igx-snackbar__message\">\n {{ textMessage }}\n <ng-content></ng-content>\n</div>\n<div #customButton class=\"igx-snackbar__button\">\n <ng-content select=\"[igxButton]\"></ng-content>\n</div>\n@if (!customButton.children.length && actionText) {\n <button igxButton (click)=\"triggerAction()\">\n {{ actionText }}\n </button>\n}\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSnackbarComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-snackbar', imports: [IgxButtonDirective], template: "<div class=\"igx-snackbar__message\">\n {{ textMessage }}\n <ng-content></ng-content>\n</div>\n<div #customButton class=\"igx-snackbar__button\">\n <ng-content select=\"[igxButton]\"></ng-content>\n</div>\n@if (!customButton.children.length && actionText) {\n <button igxButton (click)=\"triggerAction()\">\n {{ actionText }}\n </button>\n}\n" }]
}], propDecorators: { id: [{
type: HostBinding,
args: ['attr.id']
}, {
type: Input
}], cssClass: [{
type: HostBinding,
args: ['class.igx-snackbar']
}], actionText: [{
type: Input
}], clicked: [{
type: Output
}], animationStarted: [{
type: Output
}], animationDone: [{
type: Output
}], positionSettings: [{
type: Input
}] } });
/**
* @hidden
* @deprecated
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
class IgxSnackbarModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSnackbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxSnackbarModule, imports: [IgxSnackbarComponent], exports: [IgxSnackbarComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSnackbarModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSnackbarModule, decorators: [{
type: NgModule,
args: [{
imports: [
IgxSnackbarComponent
],
exports: [
IgxSnackbarComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IgxSnackbarComponent, IgxSnackbarModule };
//# sourceMappingURL=igniteui-angular-snackbar.mjs.map