UNPKG

ngx-toast-notifications

Version:
791 lines (776 loc) 28.6 kB
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, Injectable, RendererFactory2, Inject, ComponentFactoryResolver, ApplicationRef, Injector, InjectionToken, Input, Type, Directive, ViewContainerRef, NgModule, Optional, SkipSelf } from '@angular/core'; import { __assign } from 'tslib'; 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 */ var Toast = /** @class */ (function () { function Toast(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(); } Object.defineProperty(Toast.prototype, "onClose", { get: /** * @return {?} */ function () { return this._onClose.asObservable(); }, enumerable: true, configurable: true }); /** * @param {?=} result * @return {?} */ Toast.prototype.close = /** * @param {?=} result * @return {?} */ function (result) { if (!this._onClose.closed) { this._onClose.next(result); this._onClose.complete(); } this._closeFunction(this); this._clearTimeout(); }; /** * @private * @return {?} */ Toast.prototype._setTimeout = /** * @private * @return {?} */ function () { var _this = this; if (this.autoClose && this.duration > 0) { this._timeoutId = setTimeout((/** * @return {?} */ function () { return _this.close(); }), this.duration); } }; /** * @private * @return {?} */ Toast.prototype._clearTimeout = /** * @private * @return {?} */ function () { if (this._timeoutId) { clearTimeout(this._timeoutId); } }; return Toast; }()); 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 {?} */ var nestedTransition = transition('* => *', [ query('@*', animateChild(), { optional: true }) ]); /** @type {?} */ var shrinkInTransition = transition('void => *', [ style({ height: 0, opacity: 0, 'margin-top': 0 }), animate(200, style({ height: '*', opacity: 1, 'margin-top': '1rem' })) ]); /** @type {?} */ var shrinkOutTransition = transition('* => void', [ style({ height: '!', opacity: 1, 'margin-top': '1rem' }), animate(150, style({ height: 0, opacity: 0, 'margin-top': 0 })) ]); /** @type {?} */ var progressTransition = transition('void => *', [ style({ width: 0, opacity: 0 }), animate('{{duration}}', style({ width: '100%', opacity: 1 })) ]); var ToastContainerComponent = /** @class */ (function () { function ToastContainerComponent(_changeDetector) { this._changeDetector = _changeDetector; this.tl = []; this.tc = []; this.tr = []; this.bl = []; this.bc = []; this.br = []; } /** * @param {?} config * @return {?} */ ToastContainerComponent.prototype.add = /** * @param {?} config * @return {?} */ function (config) { var _this = this; /** @type {?} */ var collection = this._getCollection(config.position); if (config.preventDuplicates && this._isDuplicate(collection, config)) { return null; } /** @type {?} */ var toast = new Toast(config, (/** * @param {?} t * @return {?} */ function (t) { return _this._delete(collection, t); })); collection.push(toast); this._changeDetector.detectChanges(); return toast; }; /** * @private * @param {?} collection * @param {?} toast * @return {?} */ ToastContainerComponent.prototype._delete = /** * @private * @param {?} collection * @param {?} toast * @return {?} */ function (collection, toast) { collection.splice(collection.indexOf(toast), 1); this._changeDetector.detectChanges(); }; /** * @private * @param {?} collection * @param {?} config * @return {?} */ ToastContainerComponent.prototype._isDuplicate = /** * @private * @param {?} collection * @param {?} config * @return {?} */ function (collection, config) { return collection.some((/** * @param {?} t * @return {?} */ function (t) { return t.type === config.type && t.component === config.component && t.caption === config.caption && t.text === config.text; })); }; /** * @private * @param {?} position * @return {?} */ ToastContainerComponent.prototype._getCollection = /** * @private * @param {?} position * @return {?} */ function (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 = function () { return [ { type: ChangeDetectorRef } ]; }; return ToastContainerComponent; }()); 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 {?} */ var TOAST_CONTAINER_CLASS_NAME = 'toast-container'; var ToastContainerService = /** @class */ (function () { function ToastContainerService(rendererFactory, _document, _factoryResolver, _appRef, _injector) { this._document = _document; this._factoryResolver = _factoryResolver; this._appRef = _appRef; this._injector = _injector; this._renderer = rendererFactory.createRenderer(null, null); } Object.defineProperty(ToastContainerService.prototype, "ref", { get: /** * @return {?} */ function () { if (!this._componentRef) { this._attach(); } return this._componentRef; }, enumerable: true, configurable: true }); Object.defineProperty(ToastContainerService.prototype, "containerElement", { get: /** * @private * @return {?} */ function () { 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; }, enumerable: true, configurable: true }); /** * @return {?} */ ToastContainerService.prototype.ngOnDestroy = /** * @return {?} */ function () { this._detach(); this._destroyContainer(); }; /** * @private * @return {?} */ ToastContainerService.prototype._attach = /** * @private * @return {?} */ function () { this._detach(); /** @type {?} */ var componentFactory = this._factoryResolver.resolveComponentFactory(ToastContainerComponent); this._componentRef = componentFactory.create(this._injector); /** @type {?} */ var hostView = (/** @type {?} */ (this._componentRef.hostView)); this._appRef.attachView(hostView); /** @type {?} */ var rootNode = (/** @type {?} */ (hostView.rootNodes[0])); this._renderer.appendChild(this.containerElement, rootNode); }; /** * @private * @return {?} */ ToastContainerService.prototype._detach = /** * @private * @return {?} */ function () { if (this._componentRef) { this._appRef.detachView(this._componentRef.hostView); this._componentRef.destroy(); this._componentRef = null; } }; /** * @private * @return {?} */ ToastContainerService.prototype._destroyContainer = /** * @private * @return {?} */ function () { if (this._containerElement && this._containerElement.parentNode) { this._renderer.removeChild(this._containerElement.parentNode, this._containerElement); this._containerElement = null; } }; ToastContainerService.decorators = [ { type: Injectable } ]; /** @nocollapse */ ToastContainerService.ctorParameters = function () { return [ { type: RendererFactory2 }, { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }, { type: ComponentFactoryResolver }, { type: ApplicationRef }, { type: Injector } ]; }; return ToastContainerService; }()); 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 {?} */ var 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 */ var BasicToastContentComponent = /** @class */ (function () { function BasicToastContentComponent() { } BasicToastContentComponent.decorators = [ { type: Component, args: [{ template: "<div class=\"close-button\" (click)=\"toast.close()\">&times;</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 }] }; return BasicToastContentComponent; }()); 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 {?} */ var DEFAULT_CONFIG = { autoClose: true, duration: 8000, type: 'light', position: 'bottom-right', component: BasicToastContentComponent, }; var Toaster = /** @class */ (function () { function Toaster(_config, _containerService) { this._config = _config; this._containerService = _containerService; } /** * @param {?} config * @param {?=} componentConfig * @return {?} */ Toaster.prototype.open = /** * @param {?} config * @param {?=} componentConfig * @return {?} */ function (config, componentConfig) { if (typeof config === 'string') { config = __assign({ text: (/** @type {?} */ (config)) }, componentConfig); } if (config instanceof Type) { config = __assign({}, componentConfig, { component: (/** @type {?} */ (config)) }); } config = __assign({}, DEFAULT_CONFIG, this._config, config); return this._containerService.ref.instance.add(config); }; Toaster.decorators = [ { type: Injectable } ]; /** @nocollapse */ Toaster.ctorParameters = function () { return [ { type: undefined, decorators: [{ type: Inject, args: [TOAST_NOTIFICATIONS_CONFIG,] }] }, { type: ToastContainerService } ]; }; return Toaster; }()); 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 */ var ToastNotifications = /** @class */ (function () { function ToastNotifications(_toaster) { this._toaster = _toaster; } /** * @deprecated since version 1.0.0 */ /** * @deprecated since version 1.0.0 * @param {?} toast * @return {?} */ ToastNotifications.prototype.next = /** * @deprecated since version 1.0.0 * @param {?} toast * @return {?} */ function (toast) { /** @type {?} */ var 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 = function () { return [ { type: Toaster } ]; }; return ToastNotifications; }()); 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 */ var ToastContentDirective = /** @class */ (function () { function ToastContentDirective(_viewContainerRef, _componentFactoryResolver) { this._viewContainerRef = _viewContainerRef; this._componentFactoryResolver = _componentFactoryResolver; } /** * @return {?} */ ToastContentDirective.prototype.ngOnInit = /** * @return {?} */ function () { /** @type {?} */ var componentFactory = this._componentFactoryResolver.resolveComponentFactory(this.toast.component); this._componentRef = this._viewContainerRef.createComponent(componentFactory); this._componentRef.instance.toast = this.toast; }; /** * @return {?} */ ToastContentDirective.prototype.ngOnDestroy = /** * @return {?} */ function () { if (this._componentRef) { this._componentRef.destroy(); this._componentRef = null; } }; ToastContentDirective.decorators = [ { type: Directive, args: [{ selector: '[toastContent]', },] } ]; /** @nocollapse */ ToastContentDirective.ctorParameters = function () { return [ { type: ViewContainerRef }, { type: ComponentFactoryResolver } ]; }; ToastContentDirective.propDecorators = { toast: [{ type: Input }] }; return ToastContentDirective; }()); 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 */ var ɵ0 = {}; var ToastNotificationsModule = /** @class */ (function () { function ToastNotificationsModule(parentModule) { if (parentModule) { throw new Error('ToastNotificationsModule is already loaded. Import it in the root module only'); } } /** * @param {?=} config * @return {?} */ ToastNotificationsModule.forRoot = /** * @param {?=} config * @return {?} */ function (config) { if (config === void 0) { 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 = function () { return [ { type: ToastNotificationsModule, decorators: [{ type: Optional }, { type: SkipSelf }] } ]; }; return ToastNotificationsModule; }()); /** * @fileoverview added by tsickle * Generated from: core/toast-notification-core.module.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @type {?} */ var defaultConfig = { lifetime: 8000 }; var ToastNotificationCoreModule = /** @class */ (function () { function ToastNotificationCoreModule(parentModule) { if (parentModule) { throw new Error('ToastNotificationCoreModule is already loaded. Import it in the root module only'); } } /** * @param {?=} config * @return {?} */ ToastNotificationCoreModule.forRoot = /** * @param {?=} config * @return {?} */ function (config) { if (config === void 0) { 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 = function () { return [ { type: ToastNotificationCoreModule, decorators: [{ type: Optional }, { type: SkipSelf }] } ]; }; return ToastNotificationCoreModule; }()); /** * @fileoverview added by tsickle * Generated from: client/toast-notification-client.module.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var ToastNotificationClientModule = /** @class */ (function () { function ToastNotificationClientModule() { } ToastNotificationClientModule.decorators = [ { type: NgModule } ]; return ToastNotificationClientModule; }()); /** * @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