@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
452 lines (445 loc) • 20.9 kB
JavaScript
import { Injectable, EventEmitter, Component, ElementRef, Input, Output, ViewChild, NgModule } from '@angular/core';
import { Subject } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { SafePipeModule } from '@duoduo-oba/ng-devui/utils';
/**
* @fileoverview added by tsickle
* Generated from: toast.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ToastService = /** @class */ (function () {
function ToastService() {
}
/**
* @param {?} element
* @param {?} duration
* @return {?}
*/
ToastService.prototype.fadeIn = /**
* @param {?} element
* @param {?} duration
* @return {?}
*/
function (element, duration) {
element.style.opacity = 0;
/** @type {?} */
var last = +new Date();
/** @type {?} */
var opacity = 0;
/** @type {?} */
var tick = (/**
* @return {?}
*/
function () {
opacity = +element.style.opacity + (new Date().getTime() - last) / duration;
element.style.opacity = opacity;
last = +new Date();
if (+opacity < 1) {
if (window.requestAnimationFrame) {
requestAnimationFrame(tick);
}
else {
setTimeout(tick, 16);
}
}
});
tick();
};
/**
* @param {?} element
* @param {?} ms
* @param {?=} fn
* @return {?}
*/
ToastService.prototype.fadeOut = /**
* @param {?} element
* @param {?} ms
* @param {?=} fn
* @return {?}
*/
function (element, ms, fn) {
/** @type {?} */
var opacity = 1;
/** @type {?} */
var interval = 50;
/** @type {?} */
var duration = ms;
/** @type {?} */
var gap = interval / duration;
/** @type {?} */
var fading = setInterval((/**
* @return {?}
*/
function () {
opacity = opacity - gap;
if (opacity <= 0) {
opacity = 0;
clearInterval(fading);
if (fn) {
fn();
}
}
element.style.opacity = opacity;
}), interval);
};
ToastService.zIndex = 1060;
ToastService.decorators = [
{ type: Injectable }
];
return ToastService;
}());
if (false) {
/** @type {?} */
ToastService.zIndex;
}
/**
* @fileoverview added by tsickle
* Generated from: toast.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function Message() { }
if (false) {
/** @type {?|undefined} */
Message.prototype.severity;
/** @type {?|undefined} */
Message.prototype.summary;
/** @type {?|undefined} */
Message.prototype.detail;
/** @type {?|undefined} */
Message.prototype.id;
}
var ToastComponent = /** @class */ (function () {
function ToastComponent(el, toastService) {
var _this = this;
this.el = el;
this.toastService = toastService;
this.closeEvent = new EventEmitter();
this.valueChange = new EventEmitter();
this.zIndex = ToastService.zIndex;
this.clickSub = new Subject();
this.subItem = this.clickSub.pipe(throttleTime(250, undefined, { leading: true, trailing: false }))
.subscribe((/**
* @param {?} obj
* @return {?}
*/
function (obj) { return _this.remove(obj.index, obj.dom); }));
}
Object.defineProperty(ToastComponent.prototype, "_life", {
get: /**
* @return {?}
*/
function () {
if (this.life) {
return this.life;
}
else {
if (this.value && this.value.length > 0) {
switch (this.value[0].severity) {
case 'success':
return 5000;
break;
case 'info':
return 5000;
break;
case 'warn':
return 10000;
break;
case 'error':
return 10000;
break;
default:
return 5000;
}
}
else {
return 5000;
}
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
ToastComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.container = (/** @type {?} */ (this.containerViewChild.nativeElement));
};
Object.defineProperty(ToastComponent.prototype, "value", {
get: /**
* @return {?}
*/
function () {
return this._value;
},
set: /**
* @param {?} val
* @return {?}
*/
function (val) {
this._value = val;
if (this.container) {
this.handleValueChange();
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
ToastComponent.prototype.handleValueChange = /**
* @return {?}
*/
function () {
var _this = this;
this.zIndex = ++ToastService.zIndex;
this.toastService.fadeIn(this.container, 250);
if (!this.sticky) {
if (this.timeout) {
clearTimeout(this.timeout);
}
this.timestamp = new Date().getTime();
this.timeout = setTimeout((/**
* @return {?}
*/
function () {
_this.removeAll();
}), this._life);
}
};
/**
* @param {?} index
* @return {?}
*/
ToastComponent.prototype.interrupt = /**
* @param {?} index
* @return {?}
*/
function (index) {
var _this = this;
this.resetDelay((/**
* @return {?}
*/
function () {
/** @type {?} */
var otherToasts = _this._value.slice(0);
otherToasts.splice(index, 1, undefined);
/** @type {?} */
var doms = _this.container.children;
otherToasts.forEach((/**
* @param {?} v
* @param {?} i
* @return {?}
*/
function (v, i) { return v && _this.toastService.fadeOut(doms[i], 250); }));
}));
};
/**
* @param {?} fn
* @return {?}
*/
ToastComponent.prototype.resetDelay = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
if (!this.sticky && this.timeout) {
clearTimeout(this.timeout);
/** @type {?} */
var remainTime = this._life - (new Date().getTime() - this.timestamp);
this.timeout = setTimeout((/**
* @return {?}
*/
function () { fn(); }), remainTime);
}
};
/**
* @param {?} index
* @param {?} msgel
* @return {?}
*/
ToastComponent.prototype.remove = /**
* @param {?} index
* @param {?} msgel
* @return {?}
*/
function (index, msgel) {
var _this = this;
this.toastService.fadeOut(msgel, 250, (/**
* @return {?}
*/
function () {
_this.closeEvent.emit({ message: _this.value[index] });
_this._value = _this.value.filter((/**
* @param {?} val
* @param {?} i
* @return {?}
*/
function (val, i) { return i !== index; }));
_this.valueChange.emit(_this._value);
_this.removeReset();
}));
};
/**
* @return {?}
*/
ToastComponent.prototype.removeAll = /**
* @return {?}
*/
function () {
var _this = this;
if (this.value && this.value.length) {
this.toastService.fadeOut(this.container, 250, (/**
* @return {?}
*/
function () {
_this.value.forEach((/**
* @param {?} msg
* @param {?} index
* @return {?}
*/
function (msg, index) { return _this.closeEvent.emit({ message: _this.value[index] }); }));
_this.value = [];
_this.valueChange.emit(_this.value);
}));
}
};
/**
* @param {?} index
* @param {?} msgel
* @return {?}
*/
ToastComponent.prototype.removeThrottle = /**
* @param {?} index
* @param {?} msgel
* @return {?}
*/
function (index, msgel) {
this.clickSub.next({ index: index, dom: msgel });
};
/**
* @return {?}
*/
ToastComponent.prototype.removeReset = /**
* @return {?}
*/
function () {
var _this = this;
this.resetDelay((/**
* @return {?}
*/
function () { _this.removeAll(); }));
};
/**
* @return {?}
*/
ToastComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (!this.sticky) {
clearTimeout(this.timeout);
}
if (this.subItem) {
this.subItem.unsubscribe();
}
};
ToastComponent.decorators = [
{ type: Component, args: [{
selector: 'd-toast',
template: "<div #container [ngClass]=\"'devui-toast'\" [style.zIndex]=\"zIndex\" [ngStyle]=\"style\" [class]=\"styleClass\">\r\n <div\r\n #msgel\r\n *ngFor=\"let msg of value; let i = index\"\r\n class=\"devui-toast-item-container\"\r\n aria-live=\"polite\"\r\n [ngClass]=\"{\r\n 'devui-toast-message-info': msg.severity == 'info',\r\n 'devui-toast-message-warn': msg.severity == 'warn',\r\n 'devui-toast-message-error': msg.severity == 'error',\r\n 'devui-toast-message-success': msg.severity == 'success'\r\n }\"\r\n >\r\n <div class=\"devui-toast-item\" [ngSwitch]=\"msg.severity\" (mouseenter)=\"interrupt(i)\" (mouseleave)=\"removeReset()\">\r\n <div class=\"devui-toast-icon-close\" (click)=\"removeThrottle(i, msgel)\">\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 14 14\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <defs>\r\n <polygon\r\n id=\"path-1\"\r\n points=\"8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085 10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425 8.07106781 3.82842712 5.24264069 5.24264069 3.82842712\"\r\n ></polygon>\r\n </defs>\r\n <g id=\"error\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <mask id=\"mask-2\" fill=\"white\">\r\n <use xlink:href=\"#path-1\"></use>\r\n </mask>\r\n <use id=\"Mask\" class=\"devui-toast-close-icon\" xlink:href=\"#path-1\"></use>\r\n </g>\r\n </svg>\r\n </div>\r\n <span\r\n class=\"devui-toast-image\"\r\n [ngClass]=\"{\r\n 'devui-toast-image-info': msg.severity === 'info',\r\n 'devui-toast-image-warning': msg.severity === 'warn',\r\n 'devui-toast-image-error': msg.severity === 'error',\r\n 'devui-toast-image-success': msg.severity === 'success'\r\n }\"\r\n >\r\n <ng-container *ngSwitchCase=\"'info'\">\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g id=\"info\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path class=\"devui-toast-image-info-path\" d=\"M7,13 L7,6 L9,6 L9,13 L7,13 Z M7,5 L7,3 L9,3 L9,5 L7,5 Z\" id=\"info\"></path>\r\n </g>\r\n </svg>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'warn'\">\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g id=\"warning\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n class=\"devui-toast-image-warning-path\"\r\n d=\"M7,3 L9,3 L9,10 L7,10 L7,3 Z M7,11 L9,11 L9,13 L7,13 L7,11 Z\"\r\n id=\"warn\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'error'\">\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <defs>\r\n <polygon\r\n id=\"path-e\"\r\n points=\"8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085 10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425 8.07106781 3.82842712 5.24264069 5.24264069 3.82842712\"\r\n ></polygon>\r\n </defs>\r\n <g id=\"error\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <mask id=\"mask-2\" fill=\"white\">\r\n <use xlink:href=\"#path-e\"></use>\r\n </mask>\r\n <use id=\"Mask\" class=\"devui-toast-image-error-path\" xlink:href=\"#path-e\"></use>\r\n </g>\r\n </svg>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'success'\">\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <defs>\r\n <polygon\r\n id=\"path-s\"\r\n points=\"6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391 6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459\"\r\n ></polygon>\r\n </defs>\r\n <g id=\"correct\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <mask id=\"mask-2\" fill=\"white\">\r\n <use xlink:href=\"#path-s\"></use>\r\n </mask>\r\n <use id=\"Mask\" class=\"devui-toast-image-success-path\" xlink:href=\"#path-s\"></use>\r\n </g>\r\n </svg>\r\n </ng-container>\r\n </span>\r\n <div class=\"devui-toast-message\">\r\n <span class=\"devui-toast-title\">{{ msg.summary }}</span>\r\n <p *ngIf=\"msg.detail\" [innerHTML]=\"msg.detail | safe: 'html'\"></p>\r\n </div>\r\n <div style=\"clear: both;\"></div>\r\n </div>\r\n </div>\r\n</div>\r\n",
styles: [":host::ng-deep a:link,:host::ng-deep a:visited{color:#5e7ce0}:host::ng-deep a:active,:host::ng-deep a:hover{color:#344899}.devui-toast{position:fixed;top:50px;right:20px;width:20em;word-break:normal;word-wrap:break-word}.devui-toast-item-container{position:relative;margin:0 0 10px;opacity:.95;box-shadow:0 12px 24px rgba(41,48,64,.2);border-radius:.25em;color:#dfe1e6}.devui-toast-item{position:relative;display:block;padding:8px 1em}.devui-toast-item p{padding:0;margin:0}.devui-toast-icon-close{position:absolute;top:7px;right:10px;cursor:pointer}.devui-toast-icon-close .devui-toast-close-icon{fill:#fff}.devui-toast-title{font-size:14px;padding:0 0 .5em;display:block;font-weight:700}.devui-toast-image{position:absolute;display:inline-block;width:16px;height:16px;border-radius:50%;left:10px;top:10px;padding:0}.devui-toast-image.devui-toast-image-warning{background-color:#fac20a}.devui-toast-image.devui-toast-image-info{background-color:#5e7ce0}.devui-toast-image.devui-toast-image-error{background-color:#f66f6a}.devui-toast-image.devui-toast-image-success{background-color:#50d4ab}.devui-toast-image .devui-toast-image-error-path,.devui-toast-image .devui-toast-image-info-path,.devui-toast-image .devui-toast-image-success-path,.devui-toast-image .devui-toast-image-warning-path{fill:#fff}.devui-toast-message{padding:0 0 .25em;margin-left:20px}.devui-toast-message p{font-size:12px}.devui-toast .devui-toast-message-error,.devui-toast .devui-toast-message-info,.devui-toast .devui-toast-message-success,.devui-toast .devui-toast-message-warn{background-color:#464d6e}"]
}] }
];
/** @nocollapse */
ToastComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: ToastService }
]; };
ToastComponent.propDecorators = {
sticky: [{ type: Input }],
life: [{ type: Input }],
style: [{ type: Input }],
styleClass: [{ type: Input }],
closeEvent: [{ type: Output }],
valueChange: [{ type: Output }],
containerViewChild: [{ type: ViewChild, args: ['container', { static: true },] }],
value: [{ type: Input }]
};
return ToastComponent;
}());
if (false) {
/** @type {?} */
ToastComponent.prototype.sticky;
/** @type {?} */
ToastComponent.prototype.life;
/** @type {?} */
ToastComponent.prototype.style;
/** @type {?} */
ToastComponent.prototype.styleClass;
/** @type {?} */
ToastComponent.prototype.closeEvent;
/** @type {?} */
ToastComponent.prototype.valueChange;
/** @type {?} */
ToastComponent.prototype.containerViewChild;
/** @type {?} */
ToastComponent.prototype._value;
/** @type {?} */
ToastComponent.prototype.zIndex;
/** @type {?} */
ToastComponent.prototype.container;
/** @type {?} */
ToastComponent.prototype.timeout;
/** @type {?} */
ToastComponent.prototype.timestamp;
/** @type {?} */
ToastComponent.prototype.clickSub;
/** @type {?} */
ToastComponent.prototype.subItem;
/** @type {?} */
ToastComponent.prototype.el;
/** @type {?} */
ToastComponent.prototype.toastService;
}
/**
* @fileoverview added by tsickle
* Generated from: toast.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ToastModule = /** @class */ (function () {
function ToastModule() {
}
ToastModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
SafePipeModule
],
exports: [ToastComponent],
declarations: [ToastComponent],
providers: [ToastService]
},] }
];
return ToastModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-devui-toast.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { ToastComponent, ToastModule, ToastService };
//# sourceMappingURL=ng-devui-toast.js.map