angular2-advanced-notifications
Version:
UI and native notifications library for Angular
327 lines • 13.1 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
import { Component, Input, Output, EventEmitter, ViewChild, ViewContainerRef, ReflectiveInjector, ChangeDetectionStrategy, Inject, NgModule } from '@angular/core';
import * as _ from 'lodash';
import { AN_DYNAMIC_COMPONENT_MODULE } from './dynamicComponentModule.provider';
import { AnAlertTypes } from './alertTypes.enum';
var anAlertItem = (function () {
/**
* @param {?} _dynamicModuleMeta
* @param {?} _viewContainer
* @param {?} compiler
* @param {?} anBusService
* @param {?} changeDetectorRef
*/
function anAlertItem(_dynamicModuleMeta, _viewContainer, compiler, anBusService, changeDetectorRef) {
this._dynamicModuleMeta = _dynamicModuleMeta;
this._viewContainer = _viewContainer;
this.compiler = compiler;
this.anBusService = anBusService;
this.changeDetectorRef = changeDetectorRef;
this.hasDynamicTemplate = false;
this.customContainerClasses = undefined;
this.onClose = new EventEmitter();
this.onAlertItemUpdates = new EventEmitter();
this.customContainerClasses = anBusService.getGlobalConfigForAlerts().customContainerClasses;
}
Object.defineProperty(anAlertItem.prototype, "options", {
/**
* @return {?}
*/
get: function () {
return this._options;
},
/**
* @param {?} value
* @return {?}
*/
set: function (value) {
this._options = value;
console.warn(this._options);
this._subscribeToUpdateListener();
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
anAlertItem.prototype.ngAfterViewInit = function () {
this._setDelay(this._options.delay);
};
/**
* @return {?}
*/
anAlertItem.prototype.clickToClose = function () {
if (this._options.clickToClose) {
this.close();
}
};
/**
* @return {?}
*/
anAlertItem.prototype.close = function () {
this.onClose.emit(this._options.id);
};
/**
* @return {?}
*/
anAlertItem.prototype._subscribeToUpdateListener = function () {
var _this = this;
this._options.$$updateListener.subscribe(function () {
_this._setStyles();
});
};
/**
* @param {?} delay
* @return {?}
*/
anAlertItem.prototype._setDelay = function (delay) {
var _this = this;
if (delay === 0) {
this._show();
return;
}
this._showDelayTimer = setTimeout(function () {
_this._show();
}, delay);
};
/**
* @param {?} time
* @return {?}
*/
anAlertItem.prototype._setHideTimeout = function (time) {
var _this = this;
if (time === 0) {
return;
}
this._closeTimeoutTimer = setTimeout(function () {
_this._hide();
}, time);
};
/**
* @return {?}
*/
anAlertItem.prototype._show = function () {
this._setType();
this._setStyles();
this._setHideTimeout(this._options.timeout);
this._showNativeNotification();
};
/**
* @return {?}
*/
anAlertItem.prototype._showNativeNotification = function () {
if (!this._options.showNotification) {
return;
}
this.anBusService.showNotification(this._options, this._options.showNotificationIfDocumentVisible);
};
/**
* @return {?}
*/
anAlertItem.prototype._hide = function () {
this.close();
};
/**
* @return {?}
*/
anAlertItem.prototype._setType = function () {
// todo: move map to file
// and use as object not as a Map
var /** @type {?} */ cssClassMapping = new Map();
cssClassMapping.set(AnAlertTypes.INFO, 'type-info');
cssClassMapping.set(AnAlertTypes.WARNING, 'type-warning');
cssClassMapping.set(AnAlertTypes.SUCCESS, 'type-success');
cssClassMapping.set(AnAlertTypes.ERROR, 'type-error');
cssClassMapping.set(AnAlertTypes.BLANK, 'type-blank');
this._containerElement.nativeElement.classList.add('anAlertItem__item--' + cssClassMapping.get(this._options.type));
};
/**
* @return {?}
*/
anAlertItem.prototype._setStyles = function () {
switch (this._options.position) {
case 'topLeft':
// this._containerElement.nativeElement.classList.add('anAlertItem__item--fadeInLeftAnimation');
break;
case 'topCenter':
// this._containerElement.nativeElement.classList.add('anAlertItem__item--fadeInDownAnimation', 'anTranslateXCenter');
this._containerElement.nativeElement.classList.add('anTranslateXCenter');
break;
case 'topRight':
// this._containerElement.nativeElement.classList.add('anAlertItem__item--fadeInRightAnimation');
break;
case 'bottomLeft':
// this._containerElement.nativeElement.classList.add('anAlertItem__item--fadeInLeftAnimation');
break;
case 'bottomCenter':
// this._containerElement.nativeElement.classList.add('anAlertItem__item--fadeInUpAnimation', 'anTranslateXCenter');
this._containerElement.nativeElement.classList.add('anTranslateXCenter');
break;
case 'bottomRight':
// this._containerElement.nativeElement.classList.add('anAlertItem__item--fadeInRightAnimation');
break;
}
this._containerElement.nativeElement.classList.remove('anHidden');
};
/**
* @return {?}
*/
anAlertItem.prototype._createDynamicComponent = function () {
var /** @type {?} */ componentMetadataParams = {
selector: 'an-alert-item-custom-template'
};
if (typeof this._options.templateUrl === 'string') {
componentMetadataParams.templateUrl = this._options.templateUrl;
}
if (typeof this._options.template === 'string') {
componentMetadataParams.template = this._options.template;
}
var /** @type {?} */ componentMetadata = new Component(componentMetadataParams);
var /** @type {?} */ cmpClass = (function () {
function _() {
}
return _;
}());
return Component(componentMetadata)(cmpClass);
};
/**
* @param {?} componentType
* @return {?}
*/
anAlertItem.prototype._createDynamicModule = function (componentType) {
var /** @type {?} */ declarations = this._dynamicModuleMeta.declarations || [];
declarations.push(componentType);
var /** @type {?} */ moduleMeta = {
imports: this._dynamicModuleMeta.imports,
providers: this._dynamicModuleMeta.providers,
schemas: this._dynamicModuleMeta.schemas,
declarations: declarations
};
return NgModule(moduleMeta)((function () {
function _() {
}
return _;
}()));
};
/**
* @return {?}
*/
anAlertItem.prototype._insertDynamicComponent = function () {
var _this = this;
this._dynamicComponentType = this._createDynamicComponent();
this._dynamicModuleType = this._createDynamicModule(this._dynamicComponentType);
var /** @type {?} */ injector = ReflectiveInjector.fromResolvedProviders([], this._viewContainer.parentInjector);
this.compiler.compileModuleAndAllComponentsAsync(this._dynamicModuleType)
.then(function (factory) {
var /** @type {?} */ dynamicComponentFactory;
var /** @type {?} */ i;
for (i = factory.componentFactories.length - 1; i >= 0; i--) {
if (factory.componentFactories[i].componentType === _this._dynamicComponentType) {
dynamicComponentFactory = factory.componentFactories[i];
break;
}
}
return dynamicComponentFactory;
})
.then(function (dynamicComponentFactory) {
if (dynamicComponentFactory) {
_this._templateContainerRef.clear();
_this._dynamicComponent = _this._templateContainerRef.createComponent(dynamicComponentFactory, 0, injector);
_.merge(_this._dynamicComponent.instance, _this);
_this._dynamicComponent.changeDetectorRef.detectChanges();
}
});
};
/**
* @return {?}
*/
anAlertItem.prototype.ngOnChanges = function () {
if (typeof this._options.template === 'string' ||
typeof this._options.templateUrl === 'string') {
this.hasDynamicTemplate = true;
this._insertDynamicComponent();
}
};
/**
* @return {?}
*/
anAlertItem.prototype.ngOnDestroy = function () {
// todo: unsub here
// this._options.$$updateListener.unsubscribe();
if (this._closeTimeoutTimer) {
clearTimeout(this._closeTimeoutTimer);
}
if (this._dynamicComponent) {
this._dynamicComponent.destroy();
}
if (this.compiler) {
if (this._dynamicComponentType) {
this.compiler.clearCacheFor(this._dynamicComponentType);
}
if (this._dynamicModuleType) {
this.compiler.clearCacheFor(this._dynamicModuleType);
}
}
};
return anAlertItem;
}());
__decorate([
Input()
], anAlertItem.prototype, "options", null);
__decorate([
Output()
], anAlertItem.prototype, "onClose", void 0);
__decorate([
Output()
], anAlertItem.prototype, "onAlertItemUpdates", void 0);
__decorate([
ViewChild('container')
], anAlertItem.prototype, "_containerElement", void 0);
__decorate([
ViewChild('templateContainer', { read: ViewContainerRef })
], anAlertItem.prototype, "_templateContainerRef", void 0);
anAlertItem = __decorate([
Component({
selector: 'an-alert-item',
template: "\n <div #container class=\"anAlertItem__item anHidden\" (click)=\"clickToClose()\">\n\n <div *ngIf=\"!hasDynamicTemplate\" [ngClass]=\"customContainerClasses\">\n <div class=\"anAlertItem__contentContainer\">\n <div class=\"anAlertItem__content\">\n <div class=\"anAlertItemContent__title\">\n {{_options.title}}\n </div>\n <div class=\"anAlertItemContent__message\">\n {{_options.message}}\n </div>\n </div>\n <div class=\"anAlertItem__closeAction\">\n <span class=\"anAlertItem__closeActionIcon\" (click)=\"close()\"></span>\n </div>\n\n </div>\n </div>\n\n <template *ngIf=\"hasDynamicTemplate\" #templateContainer></template>\n\n </div>\n ",
changeDetection: ChangeDetectionStrategy.OnPush
}),
__param(0, Inject(AN_DYNAMIC_COMPONENT_MODULE))
], anAlertItem);
export { anAlertItem };
function anAlertItem_tsickle_Closure_declarations() {
/** @type {?} */
anAlertItem.prototype._options;
/** @type {?} */
anAlertItem.prototype._showDelayTimer;
/** @type {?} */
anAlertItem.prototype._closeTimeoutTimer;
/** @type {?} */
anAlertItem.prototype._dynamicModuleType;
/** @type {?} */
anAlertItem.prototype._dynamicComponentType;
/** @type {?} */
anAlertItem.prototype._dynamicComponent;
/** @type {?} */
anAlertItem.prototype.hasDynamicTemplate;
/** @type {?} */
anAlertItem.prototype.customContainerClasses;
/** @type {?} */
anAlertItem.prototype.onClose;
/** @type {?} */
anAlertItem.prototype.onAlertItemUpdates;
/** @type {?} */
anAlertItem.prototype._containerElement;
/** @type {?} */
anAlertItem.prototype._templateContainerRef;
}
//# sourceMappingURL=alertItem.component.js.map