ngx-snackbar
Version:
Snackbar implementation in Angular 7.
319 lines (318 loc) • 10.2 kB
JavaScript
import { Component, EventEmitter, Injectable, Input, NgModule, Output, Pipe } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Subject } from 'rxjs';
import { DomSanitizer } from '@angular/platform-browser';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var SnackbarService = /** @class */ (function () {
function SnackbarService() {
this.snackService = new Subject();
}
/**
* @return {?}
*/
SnackbarService.prototype.get = function () {
return this.snackService.asObservable();
};
/**
* @param {?} data
* @return {?}
*/
SnackbarService.prototype.add = function (data) {
this.snackService.next({
action: 'add',
data: data
});
};
/**
* @param {?} id
* @return {?}
*/
SnackbarService.prototype.remove = function (id) {
this.snackService.next({ action: 'remove', id: id });
};
/**
* @return {?}
*/
SnackbarService.prototype.clear = function () {
this.snackService.next({ action: 'clear' });
};
return SnackbarService;
}());
SnackbarService.decorators = [
{ type: Injectable },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var SnackComponent = /** @class */ (function () {
function SnackComponent() {
}
return SnackComponent;
}());
SnackComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-snack',
template: "\n <div class=\"snack\" [ngStyle]=\"{background: background, color: color}\" [ngClass]=\"customClass\">\n <ng-content></ng-content>\n </div>\n "
},] },
];
SnackComponent.propDecorators = {
background: [{ type: Input }],
color: [{ type: Input }],
customClass: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var SnackbarComponent = /** @class */ (function () {
/**
* @param {?} snackbarService
*/
function SnackbarComponent(snackbarService) {
var _this = this;
this.snackbarService = snackbarService;
this.onAdd = new EventEmitter();
this.onRemove = new EventEmitter();
this.onClear = new EventEmitter();
this.snacks = [];
this.snackbarService.get()
.subscribe(function (snack) {
if (snack.action === 'add') {
_this.add(snack.data);
}
else if (snack.action === 'remove') {
_this.remove(snack.id);
}
else if (snack.action === 'clear') {
_this.clear();
}
});
}
/**
* @param {?} snack
* @return {?}
*/
SnackbarComponent.prototype.add = function (snack) {
var _this = this;
/** @type {?} */
var timeout;
/** @type {?} */
var id = this.uuid();
if (this.max && this.max > 0 && this.snacks.length === this.max) {
this.remove(this.snacks[0].id);
}
if (snack.timeout || this.timeout) {
timeout = setTimeout(function () {
_this.remove(id);
}, snack.timeout || this.timeout);
}
/** @type {?} */
var data = Object.assign({ id: id, timeoutObj: timeout }, snack);
if (snack.action) {
/** @type {?} */
var that_1 = this;
/** @type {?} */
var fcn_1 = snack.action.onClick || new Function();
snack.action.onClick = function () {
fcn_1(data);
that_1.remove(id);
};
}
if (snack.onAdd) {
snack.onAdd(data);
}
if (this.onAdd) {
this.onAdd.emit(data);
}
this.snacks.push(data);
};
/**
* @param {?} id
* @return {?}
*/
SnackbarComponent.prototype.remove = function (id) {
/** @type {?} */
var snack = this.snacks.find(function (obj) { return obj.id === id; });
if (snack) {
if (snack.onRemove) {
snack.onRemove(snack);
}
if (this.onRemove) {
this.onRemove.emit(snack);
}
if (snack.timeoutObj) {
clearTimeout(snack.timeoutObj);
}
}
this.snacks = this.snacks.filter(function (obj) { return obj.id !== id; });
};
/**
* @return {?}
*/
SnackbarComponent.prototype.clear = function () {
// this.snacks.forEach(snack => {
// this.remove(snack.id);
// });
this.snacks = [];
if (this.onClear) {
this.onClear.emit(true);
}
};
/**
* @return {?}
*/
SnackbarComponent.prototype.uuid = function () {
// tslint:disable:no-bitwise
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
/** @type {?} */
var r = Math.random() * 16 | 0;
/** @type {?} */
var v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
// tslint:enable:no-bitwise
};
/**
* @param {?} background
* @return {?}
*/
SnackbarComponent.prototype.calcTextColor = function (background) {
if (!background) {
return null;
}
/**
* @param {?} hex
* @return {?}
*/
function hexToRgb(hex) {
/** @type {?} */
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function (m, r, g, b) {
return r + r + g + g + b + b;
});
/** @type {?} */
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
/** @type {?} */
var rgb = hexToRgb(background);
if (!rgb) {
return null;
}
/** @type {?} */
var color = [rgb.r / 255, rgb.g / 255, rgb.b / 255];
for (var i = 0; i < color.length; ++i) {
if (color[i] <= 0.03928) {
color[i] = color[i] / 12.92;
}
else {
color[i] = Math.pow((color[i] + 0.055) / 1.055, 2.4);
}
}
/** @type {?} */
var l = 0.2126 * color[0] + 0.7152 * color[1] + 0.0722 * color[2];
if (l > 0.179) {
return '#000';
}
else {
return '#fff';
}
};
return SnackbarComponent;
}());
SnackbarComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-snackbar',
template: "\n <div class=\"snackbars\" [ngClass]=\"position || 'bottom-right'\">\n <ngx-snack *ngFor=\"let snackbar of snacks\" [background]=\"snackbar.background || background\"\n [customClass]=\"snackbar.customClass || customClass\"\n [color]=\"snackbar.color || color || calcTextColor(snackbar.background || background)\">\n <div class=\"snack-text\" [innerHtml]=\"snackbar.msg | safeHtml\">\n\n </div>\n <div *ngIf=\"snackbar.action.text\" class=\"snack-action\" (click)=\"snackbar.action.onClick()\"\n [ngStyle]=\"{color: snackbar.action.color || accent}\">\n {{snackbar.action.text}}\n </div>\n </ngx-snack>\n </div>\n "
},] },
];
/** @nocollapse */
SnackbarComponent.ctorParameters = function () { return [
{ type: SnackbarService }
]; };
SnackbarComponent.propDecorators = {
position: [{ type: Input }],
max: [{ type: Input }],
background: [{ type: Input }],
accent: [{ type: Input }],
color: [{ type: Input }],
customClass: [{ type: Input }],
timeout: [{ type: Input }],
onAdd: [{ type: Output }],
onRemove: [{ type: Output }],
onClear: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var SafeHtmlPipe = /** @class */ (function () {
/**
* @param {?} sanitized
*/
function SafeHtmlPipe(sanitized) {
this.sanitized = sanitized;
}
/**
* @param {?} value
* @return {?}
*/
SafeHtmlPipe.prototype.transform = function (value) {
return this.sanitized.bypassSecurityTrustHtml(value);
};
return SafeHtmlPipe;
}());
SafeHtmlPipe.decorators = [
{ type: Pipe, args: [{ name: 'safeHtml' },] },
];
/** @nocollapse */
SafeHtmlPipe.ctorParameters = function () { return [
{ type: DomSanitizer }
]; };
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
var SnackbarModule = /** @class */ (function () {
function SnackbarModule() {
}
/**
* @return {?}
*/
SnackbarModule.forRoot = function () {
return {
ngModule: SnackbarModule,
providers: [SnackbarService]
};
};
return SnackbarModule;
}());
SnackbarModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [SnackbarComponent, SnackComponent, SafeHtmlPipe],
exports: [SnackbarComponent, SnackComponent],
providers: [SnackbarService]
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/**
* Generated bundle index. Do not edit.
*/
export { SnackbarModule, SnackbarService, SafeHtmlPipe as ɵc, SnackComponent as ɵb, SnackbarComponent as ɵa };
//# sourceMappingURL=ngx-snackbar.es5.js.map