ngx-toast-notifications
Version:
Toast notifications for Angular applications
725 lines (710 loc) • 25.4 kB
JavaScript
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, Injectable, RendererFactory2, Inject, ComponentFactoryResolver, ApplicationRef, Injector, InjectionToken, Input, Type, Directive, ViewContainerRef, NgModule, Optional, SkipSelf } from '@angular/core';
import { DOCUMENT, CommonModule } from '@angular/common';
import { transition, query, animateChild, style, animate, trigger } from '@angular/animations';
import { Subject } from 'rxjs';
/**
* @fileoverview added by tsickle
* Generated from: toast.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class Toast {
/**
* @param {?} config
* @param {?} closeFunction
*/
constructor(config, closeFunction) {
this._onClose = new Subject();
this.autoClose = config.autoClose;
this.duration = config.duration > 0 ? config.duration : 0;
this.text = config.text;
this.caption = config.caption;
this.type = config.type;
this.component = config.component;
this._closeFunction = closeFunction;
this._setTimeout();
}
/**
* @return {?}
*/
get onClose() {
return this._onClose.asObservable();
}
/**
* @param {?=} result
* @return {?}
*/
close(result) {
if (!this._onClose.closed) {
this._onClose.next(result);
this._onClose.complete();
}
this._closeFunction(this);
this._clearTimeout();
}
/**
* @private
* @return {?}
*/
_setTimeout() {
if (this.autoClose && this.duration > 0) {
this._timeoutId = setTimeout((/**
* @return {?}
*/
() => this.close()), this.duration);
}
}
/**
* @private
* @return {?}
*/
_clearTimeout() {
if (this._timeoutId) {
clearTimeout(this._timeoutId);
}
}
}
if (false) {
/** @type {?} */
Toast.prototype.autoClose;
/** @type {?} */
Toast.prototype.duration;
/** @type {?} */
Toast.prototype.text;
/** @type {?} */
Toast.prototype.caption;
/** @type {?} */
Toast.prototype.type;
/** @type {?} */
Toast.prototype.component;
/**
* @type {?}
* @private
*/
Toast.prototype._closeFunction;
/**
* @type {?}
* @private
*/
Toast.prototype._onClose;
/**
* @type {?}
* @private
*/
Toast.prototype._timeoutId;
}
/**
* @fileoverview added by tsickle
* Generated from: toast-container/toast-container.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const nestedTransition = transition('* => *', [
query('@*', animateChild(), { optional: true })
]);
/** @type {?} */
const shrinkInTransition = transition('void => *', [
style({ height: 0, opacity: 0, 'margin-top': 0 }),
animate(200, style({ height: '*', opacity: 1, 'margin-top': '1rem' }))
]);
/** @type {?} */
const shrinkOutTransition = transition('* => void', [
style({ height: '!', opacity: 1, 'margin-top': '1rem' }),
animate(150, style({ height: 0, opacity: 0, 'margin-top': 0 }))
]);
/** @type {?} */
const progressTransition = transition('void => *', [
style({ width: 0, opacity: 0 }),
animate('{{duration}}', style({ width: '100%', opacity: 1 }))
]);
class ToastContainerComponent {
/**
* @param {?} _changeDetector
*/
constructor(_changeDetector) {
this._changeDetector = _changeDetector;
this.tl = [];
this.tc = [];
this.tr = [];
this.bl = [];
this.bc = [];
this.br = [];
}
/**
* @param {?} config
* @return {?}
*/
add(config) {
/** @type {?} */
const collection = this._getCollection(config.position);
if (config.preventDuplicates && this._isDuplicate(collection, config)) {
return null;
}
/** @type {?} */
const toast = new Toast(config, (/**
* @param {?} t
* @return {?}
*/
(t) => this._delete(collection, t)));
collection.push(toast);
this._changeDetector.detectChanges();
return toast;
}
/**
* @private
* @param {?} collection
* @param {?} toast
* @return {?}
*/
_delete(collection, toast) {
collection.splice(collection.indexOf(toast), 1);
this._changeDetector.detectChanges();
}
/**
* @private
* @param {?} collection
* @param {?} config
* @return {?}
*/
_isDuplicate(collection, config) {
return collection.some((/**
* @param {?} t
* @return {?}
*/
t => {
return t.type === config.type
&& t.component === config.component
&& t.caption === config.caption
&& t.text === config.text;
}));
}
/**
* @private
* @param {?} position
* @return {?}
*/
_getCollection(position) {
switch (position) {
case 'top-left':
return this.tl;
case 'top-center':
return this.tc;
case 'top-right':
return this.tr;
case 'bottom-left':
return this.bl;
case 'bottom-center':
return this.bc;
default:
return this.br;
}
}
}
ToastContainerComponent.decorators = [
{ type: Component, args: [{
template: "<ng-template #toastPanel let-toasts>\r\n <div *ngFor=\"let toast of toasts\" [@nested]>\r\n <div class=\"toast-card\" [ngClass]=\"toast.type || 'light'\" [@shrink]>\r\n <ng-template toastContent [toast]=\"toast\"></ng-template>\r\n <div *ngIf=\"toast.autoClose\"\r\n class=\"lifetime-progress\"\r\n role=\"progressbar\"\r\n [@progress]=\"{value: '*', params: {duration: toast.duration + 'ms'}}\"></div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"toast-overlay\">\r\n <div class=\"toast-panel top-center\">\r\n <ng-container *ngTemplateOutlet=\"toastPanel; context: {$implicit: tc}\"></ng-container>\r\n </div>\r\n <div class=\"toast-panel top-left\">\r\n <ng-container *ngTemplateOutlet=\"toastPanel; context: {$implicit: tl}\"></ng-container>\r\n </div>\r\n <div class=\"toast-panel top-right\">\r\n <ng-container *ngTemplateOutlet=\"toastPanel; context: {$implicit: tr}\"></ng-container>\r\n </div>\r\n <div class=\"toast-panel bottom-center\">\r\n <ng-container *ngTemplateOutlet=\"toastPanel; context: {$implicit: bc}\"></ng-container>\r\n </div>\r\n <div class=\"toast-panel bottom-left\">\r\n <ng-container *ngTemplateOutlet=\"toastPanel; context: {$implicit: bl}\"></ng-container>\r\n </div>\r\n <div class=\"toast-panel bottom-right\">\r\n <ng-container *ngTemplateOutlet=\"toastPanel; context: {$implicit: br}\"></ng-container>\r\n </div>\r\n</div>\r\n",
animations: [
trigger('nested', [nestedTransition]),
trigger('shrink', [shrinkInTransition, shrinkOutTransition]),
trigger('progress', [progressTransition]),
],
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".toast-overlay{pointer-events:none;position:fixed;z-index:9000;left:0;top:0;width:100%;height:100%}@media (max-width:575px){.toast-overlay{display:flex;justify-content:flex-end;flex-direction:column}}.toast-panel{width:100%;font-size:1rem;line-height:1.5;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif}.toast-card{pointer-events:auto;overflow:hidden;background-clip:border-box;min-width:0;background-color:#f8f9fa;color:#212529;margin-top:1rem;box-shadow:rgba(0,0,0,.15) 0 .2rem 1.5rem .3rem}@media (min-width:576px){.toast-panel{position:absolute;max-width:20rem}.toast-panel.top-left{top:0;left:1rem}.toast-panel.top-center{top:0;left:50%;margin-left:-10rem}.toast-panel.top-right{top:0;right:1rem}.toast-panel.bottom-left{bottom:1rem;left:1rem}.toast-panel.bottom-center{bottom:1rem;left:50%;margin-left:-10rem}.toast-panel.bottom-right{bottom:1rem;right:1rem}.toast-card{border-radius:.15rem;box-shadow:rgba(0,0,0,.2) 0 .3rem .4rem -.2rem,rgba(0,0,0,.15) 0 .2rem 1.5rem .3rem}}.toast-card.danger,.toast-card.dark,.toast-card.info,.toast-card.primary,.toast-card.secondary,.toast-card.success{color:#f8f9fa}.toast-card.danger .lifetime-progress,.toast-card.dark .lifetime-progress,.toast-card.info .lifetime-progress,.toast-card.primary .lifetime-progress,.toast-card.secondary .lifetime-progress,.toast-card.success .lifetime-progress{background-color:#f8f9fa}.toast-card.light .lifetime-progress,.toast-card.primary,.toast-card.warning .lifetime-progress{background-color:#007bff}.toast-card.secondary{background-color:#868e96}.toast-card.success{background-color:#28a745}.toast-card.danger{background-color:#dc3545}.toast-card.warning{background-color:#ffc107}.toast-card.info{background-color:#17a2b8}.toast-card.light{background-color:#f8f9fa}.toast-card.dark{background-color:#343a40}.toast-card .lifetime-progress{display:flex;height:2px;width:0;border-radius:1px}"]
}] }
];
/** @nocollapse */
ToastContainerComponent.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
if (false) {
/** @type {?} */
ToastContainerComponent.prototype.tl;
/** @type {?} */
ToastContainerComponent.prototype.tc;
/** @type {?} */
ToastContainerComponent.prototype.tr;
/** @type {?} */
ToastContainerComponent.prototype.bl;
/** @type {?} */
ToastContainerComponent.prototype.bc;
/** @type {?} */
ToastContainerComponent.prototype.br;
/**
* @type {?}
* @private
*/
ToastContainerComponent.prototype._changeDetector;
}
/**
* @fileoverview added by tsickle
* Generated from: toast-container.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const TOAST_CONTAINER_CLASS_NAME = 'toast-container';
class ToastContainerService {
/**
* @param {?} rendererFactory
* @param {?} _document
* @param {?} _factoryResolver
* @param {?} _appRef
* @param {?} _injector
*/
constructor(rendererFactory, _document, _factoryResolver, _appRef, _injector) {
this._document = _document;
this._factoryResolver = _factoryResolver;
this._appRef = _appRef;
this._injector = _injector;
this._renderer = rendererFactory.createRenderer(null, null);
}
/**
* @return {?}
*/
get ref() {
if (!this._componentRef) {
this._attach();
}
return this._componentRef;
}
/**
* @private
* @return {?}
*/
get containerElement() {
if (!this._containerElement) {
this._containerElement = this._renderer.createElement('div');
this._renderer.addClass(this._containerElement, TOAST_CONTAINER_CLASS_NAME);
this._renderer.appendChild(this._document.body, this._containerElement);
}
return this._containerElement;
}
/**
* @return {?}
*/
ngOnDestroy() {
this._detach();
this._destroyContainer();
}
/**
* @private
* @return {?}
*/
_attach() {
this._detach();
/** @type {?} */
const componentFactory = this._factoryResolver.resolveComponentFactory(ToastContainerComponent);
this._componentRef = componentFactory.create(this._injector);
/** @type {?} */
const hostView = (/** @type {?} */ (this._componentRef.hostView));
this._appRef.attachView(hostView);
/** @type {?} */
const rootNode = (/** @type {?} */ (hostView.rootNodes[0]));
this._renderer.appendChild(this.containerElement, rootNode);
}
/**
* @private
* @return {?}
*/
_detach() {
if (this._componentRef) {
this._appRef.detachView(this._componentRef.hostView);
this._componentRef.destroy();
this._componentRef = null;
}
}
/**
* @private
* @return {?}
*/
_destroyContainer() {
if (this._containerElement && this._containerElement.parentNode) {
this._renderer.removeChild(this._containerElement.parentNode, this._containerElement);
this._containerElement = null;
}
}
}
ToastContainerService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
ToastContainerService.ctorParameters = () => [
{ type: RendererFactory2 },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
{ type: ComponentFactoryResolver },
{ type: ApplicationRef },
{ type: Injector }
];
if (false) {
/**
* @type {?}
* @private
*/
ToastContainerService.prototype._renderer;
/**
* @type {?}
* @private
*/
ToastContainerService.prototype._containerElement;
/**
* @type {?}
* @private
*/
ToastContainerService.prototype._componentRef;
/**
* @type {?}
* @private
*/
ToastContainerService.prototype._document;
/**
* @type {?}
* @private
*/
ToastContainerService.prototype._factoryResolver;
/**
* @type {?}
* @private
*/
ToastContainerService.prototype._appRef;
/**
* @type {?}
* @private
*/
ToastContainerService.prototype._injector;
}
/**
* @fileoverview added by tsickle
* Generated from: toast-notifications.config.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const TOAST_NOTIFICATIONS_CONFIG = new InjectionToken('ToastNotificationsConfig');
/**
* @record
*/
function ToastNotificationsConfig() { }
if (false) {
/** @type {?|undefined} */
ToastNotificationsConfig.prototype.position;
/** @type {?|undefined} */
ToastNotificationsConfig.prototype.autoClose;
/** @type {?|undefined} */
ToastNotificationsConfig.prototype.duration;
/** @type {?|undefined} */
ToastNotificationsConfig.prototype.type;
/** @type {?|undefined} */
ToastNotificationsConfig.prototype.component;
/** @type {?|undefined} */
ToastNotificationsConfig.prototype.preventDuplicates;
}
/**
* @fileoverview added by tsickle
* Generated from: toast-content/basic-toast-content.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class BasicToastContentComponent {
}
BasicToastContentComponent.decorators = [
{ type: Component, args: [{
template: "<div class=\"close-button\" (click)=\"toast.close()\">×</div>\r\n<div class=\"content-body\">\r\n <div *ngIf=\"toast.caption\" class=\"title\">{{toast.caption}}</div>\r\n <div>{{toast.text}}</div>\r\n</div>\r\n",
styles: [":host{display:block;position:relative}.close-button{border:0;background:0 0;position:absolute;font-size:1.6rem;top:.5rem;right:.8rem;line-height:.6;font-weight:700;opacity:.3;color:inherit;cursor:pointer}@media (min-width:576px){.close-button{font-size:1rem;top:.3rem;right:.4rem}}.close-button:hover{opacity:1}.content-body{padding:.5rem 2.2rem .5rem .5rem;font-size:.85rem;min-height:1rem}@media (min-width:576px){.content-body{padding-right:1rem}}.content-body .title{font-weight:700}"]
}] }
];
BasicToastContentComponent.propDecorators = {
toast: [{ type: Input }]
};
if (false) {
/** @type {?} */
BasicToastContentComponent.prototype.toast;
}
/**
* @fileoverview added by tsickle
* Generated from: toaster.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const DEFAULT_CONFIG = {
autoClose: true,
duration: 8000,
type: 'light',
position: 'bottom-right',
component: BasicToastContentComponent,
};
class Toaster {
/**
* @param {?} _config
* @param {?} _containerService
*/
constructor(_config, _containerService) {
this._config = _config;
this._containerService = _containerService;
}
/**
* @param {?} config
* @param {?=} componentConfig
* @return {?}
*/
open(config, componentConfig) {
if (typeof config === 'string') {
config = Object.assign({ text: (/** @type {?} */ (config)) }, componentConfig);
}
if (config instanceof Type) {
config = Object.assign({}, componentConfig, { component: (/** @type {?} */ (config)) });
}
config = Object.assign({}, DEFAULT_CONFIG, this._config, config);
return this._containerService.ref.instance.add(config);
}
}
Toaster.decorators = [
{ type: Injectable }
];
/** @nocollapse */
Toaster.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Inject, args: [TOAST_NOTIFICATIONS_CONFIG,] }] },
{ type: ToastContainerService }
];
if (false) {
/**
* @type {?}
* @private
*/
Toaster.prototype._config;
/**
* @type {?}
* @private
*/
Toaster.prototype._containerService;
}
/**
* @fileoverview added by tsickle
* Generated from: core/toast-natifications.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @deprecated since version 1.0.0 use Toaster
*/
class ToastNotifications {
/**
* @param {?} _toaster
*/
constructor(_toaster) {
this._toaster = _toaster;
}
/**
* @deprecated since version 1.0.0
* @param {?} toast
* @return {?}
*/
next(toast) {
/** @type {?} */
const config = {
text: toast.text,
caption: toast.caption,
type: toast.type,
duration: toast.duration || toast.lifetime,
component: null,
};
this._toaster.open(config);
}
}
ToastNotifications.decorators = [
{ type: Injectable }
];
/** @nocollapse */
ToastNotifications.ctorParameters = () => [
{ type: Toaster }
];
if (false) {
/**
* @type {?}
* @private
*/
ToastNotifications.prototype._toaster;
}
/**
* @fileoverview added by tsickle
* Generated from: toast-content/toast-content.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ToastContentDirective {
/**
* @param {?} _viewContainerRef
* @param {?} _componentFactoryResolver
*/
constructor(_viewContainerRef, _componentFactoryResolver) {
this._viewContainerRef = _viewContainerRef;
this._componentFactoryResolver = _componentFactoryResolver;
}
/**
* @return {?}
*/
ngOnInit() {
/** @type {?} */
const componentFactory = this._componentFactoryResolver.resolveComponentFactory(this.toast.component);
this._componentRef = this._viewContainerRef.createComponent(componentFactory);
this._componentRef.instance.toast = this.toast;
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this._componentRef) {
this._componentRef.destroy();
this._componentRef = null;
}
}
}
ToastContentDirective.decorators = [
{ type: Directive, args: [{
selector: '[toastContent]',
},] }
];
/** @nocollapse */
ToastContentDirective.ctorParameters = () => [
{ type: ViewContainerRef },
{ type: ComponentFactoryResolver }
];
ToastContentDirective.propDecorators = {
toast: [{ type: Input }]
};
if (false) {
/** @type {?} */
ToastContentDirective.prototype.toast;
/**
* @type {?}
* @private
*/
ToastContentDirective.prototype._componentRef;
/**
* @type {?}
* @private
*/
ToastContentDirective.prototype._viewContainerRef;
/**
* @type {?}
* @private
*/
ToastContentDirective.prototype._componentFactoryResolver;
}
/**
* @fileoverview added by tsickle
* Generated from: toast-notifications.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
const ɵ0 = {};
class ToastNotificationsModule {
/**
* @param {?} parentModule
*/
constructor(parentModule) {
if (parentModule) {
throw new Error('ToastNotificationsModule is already loaded. Import it in the root module only');
}
}
/**
* @param {?=} config
* @return {?}
*/
static forRoot(config = {}) {
return {
ngModule: ToastNotificationsModule,
providers: [
{ provide: TOAST_NOTIFICATIONS_CONFIG, useValue: config },
]
};
}
}
ToastNotificationsModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
],
declarations: [
ToastContainerComponent,
BasicToastContentComponent,
ToastContentDirective,
],
entryComponents: [
ToastContainerComponent,
BasicToastContentComponent,
],
providers: [
Toaster,
ToastContainerService,
{ provide: TOAST_NOTIFICATIONS_CONFIG, useValue: ɵ0 },
],
},] }
];
/** @nocollapse */
ToastNotificationsModule.ctorParameters = () => [
{ type: ToastNotificationsModule, decorators: [{ type: Optional }, { type: SkipSelf }] }
];
/**
* @fileoverview added by tsickle
* Generated from: core/toast-notification-core.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const defaultConfig = { lifetime: 8000 };
/**
* @deprecated since version 1.0.0 use ToastNotificationsModule
*/
class ToastNotificationCoreModule {
/**
* @param {?} parentModule
*/
constructor(parentModule) {
if (parentModule) {
throw new Error('ToastNotificationCoreModule is already loaded. Import it in the root module only');
}
}
/**
* @param {?=} config
* @return {?}
*/
static forRoot(config = defaultConfig) {
return {
ngModule: ToastNotificationCoreModule,
providers: [
{ provide: TOAST_NOTIFICATIONS_CONFIG, useValue: { duration: config.duration || config.lifetime } }
]
};
}
}
ToastNotificationCoreModule.decorators = [
{ type: NgModule, args: [{
imports: [
ToastNotificationsModule,
],
providers: [
ToastNotifications,
],
},] }
];
/** @nocollapse */
ToastNotificationCoreModule.ctorParameters = () => [
{ type: ToastNotificationCoreModule, decorators: [{ type: Optional }, { type: SkipSelf }] }
];
/**
* @fileoverview added by tsickle
* Generated from: client/toast-notification-client.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @deprecated since version 1.0.0
*/
class ToastNotificationClientModule {
}
ToastNotificationClientModule.decorators = [
{ type: NgModule }
];
/**
* @fileoverview added by tsickle
* Generated from: index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ngx-toast-notifications.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { TOAST_NOTIFICATIONS_CONFIG, Toast, ToastNotificationClientModule, ToastNotificationCoreModule, ToastNotifications, ToastNotificationsModule, Toaster, ToastContainerComponent as ɵa, BasicToastContentComponent as ɵb, ToastContentDirective as ɵc, ToastContainerService as ɵd };
//# sourceMappingURL=ngx-toast-notifications.js.map