ngx-snackbar
Version:
Snackbar implementation in Angular 7.
334 lines (324 loc) • 9.22 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
*/
class SnackbarService {
constructor() {
this.snackService = new Subject();
}
/**
* @return {?}
*/
get() {
return this.snackService.asObservable();
}
/**
* @param {?} data
* @return {?}
*/
add(data) {
this.snackService.next({
action: 'add',
data: data
});
}
/**
* @param {?} id
* @return {?}
*/
remove(id) {
this.snackService.next({ action: 'remove', id: id });
}
/**
* @return {?}
*/
clear() {
this.snackService.next({ action: 'clear' });
}
}
SnackbarService.decorators = [
{ type: Injectable },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class SnackComponent {
}
SnackComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-snack',
template: `
<div class="snack" [ngStyle]="{background: background, color: color}" [ngClass]="customClass">
<ng-content></ng-content>
</div>
`
},] },
];
SnackComponent.propDecorators = {
background: [{ type: Input }],
color: [{ type: Input }],
customClass: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class SnackbarComponent {
/**
* @param {?} snackbarService
*/
constructor(snackbarService) {
this.snackbarService = snackbarService;
this.onAdd = new EventEmitter();
this.onRemove = new EventEmitter();
this.onClear = new EventEmitter();
this.snacks = [];
this.snackbarService.get()
.subscribe(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 {?}
*/
add(snack) {
/** @type {?} */
let timeout;
/** @type {?} */
const 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(() => {
this.remove(id);
}, snack.timeout || this.timeout);
}
/** @type {?} */
const data = Object.assign({ id: id, timeoutObj: timeout }, snack);
if (snack.action) {
/** @type {?} */
const that = this;
/** @type {?} */
const fcn = snack.action.onClick || new Function();
snack.action.onClick = () => {
fcn(data);
that.remove(id);
};
}
if (snack.onAdd) {
snack.onAdd(data);
}
if (this.onAdd) {
this.onAdd.emit(data);
}
this.snacks.push(data);
}
/**
* @param {?} id
* @return {?}
*/
remove(id) {
/** @type {?} */
const snack = this.snacks.find(obj => 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(obj => obj.id !== id);
}
/**
* @return {?}
*/
clear() {
// this.snacks.forEach(snack => {
// this.remove(snack.id);
// });
this.snacks = [];
if (this.onClear) {
this.onClear.emit(true);
}
}
/**
* @return {?}
*/
uuid() {
// tslint:disable:no-bitwise
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
/** @type {?} */
const r = Math.random() * 16 | 0;
/** @type {?} */
const v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
// tslint:enable:no-bitwise
}
/**
* @param {?} background
* @return {?}
*/
calcTextColor(background) {
if (!background) {
return null;
}
/**
* @param {?} hex
* @return {?}
*/
function hexToRgb(hex) {
/** @type {?} */
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, (m, r, g, b) => {
return r + r + g + g + b + b;
});
/** @type {?} */
const 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 {?} */
const rgb = hexToRgb(background);
if (!rgb) {
return null;
}
/** @type {?} */
const color = [rgb.r / 255, rgb.g / 255, rgb.b / 255];
for (let 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 {?} */
const l = 0.2126 * color[0] + 0.7152 * color[1] + 0.0722 * color[2];
if (l > 0.179) {
return '#000';
}
else {
return '#fff';
}
}
}
SnackbarComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-snackbar',
template: `
<div class="snackbars" [ngClass]="position || 'bottom-right'">
<ngx-snack *ngFor="let snackbar of snacks" [background]="snackbar.background || background"
[customClass]="snackbar.customClass || customClass"
[color]="snackbar.color || color || calcTextColor(snackbar.background || background)">
<div class="snack-text" [innerHtml]="snackbar.msg | safeHtml">
</div>
<div *ngIf="snackbar.action.text" class="snack-action" (click)="snackbar.action.onClick()"
[ngStyle]="{color: snackbar.action.color || accent}">
{{snackbar.action.text}}
</div>
</ngx-snack>
</div>
`
},] },
];
/** @nocollapse */
SnackbarComponent.ctorParameters = () => [
{ 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
*/
class SafeHtmlPipe {
/**
* @param {?} sanitized
*/
constructor(sanitized) {
this.sanitized = sanitized;
}
/**
* @param {?} value
* @return {?}
*/
transform(value) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
SafeHtmlPipe.decorators = [
{ type: Pipe, args: [{ name: 'safeHtml' },] },
];
/** @nocollapse */
SafeHtmlPipe.ctorParameters = () => [
{ type: DomSanitizer }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class SnackbarModule {
/**
* @return {?}
*/
static forRoot() {
return {
ngModule: SnackbarModule,
providers: [SnackbarService]
};
}
}
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.js.map