ng-devui
Version:
DevUI components based on Angular
340 lines (334 loc) • 35.4 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewChild, Input, Output, Injectable, NgModule } from '@angular/core';
import { isEqual, assign } from 'lodash-es';
import { Subject } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'ng-devui/utils';
import { IsTemplateModule, SafePipeModule } from 'ng-devui/utils';
import * as i1$1 from 'ng-devui/overlay-container';
import { OverlayContainerModule } from 'ng-devui/overlay-container';
class ToastComponent {
constructor() {
this.appendUpperLimit = 0;
this.lifeMode = 'global';
this.closeEvent = new EventEmitter();
this.valueChange = new EventEmitter();
this.zIndex = 1060;
this.timeoutArr = [];
this.clickSub = new Subject();
}
set value(val) {
if (val?.length) {
this._value = this.appendUpperLimit > 0 ? [...val, ...this._value].slice(0, this.appendUpperLimit) : val;
this.rest = this._value;
if (this.container) {
this.handleValueChange();
}
}
else {
this._value = [];
this.rest = [];
this.onHidden();
}
}
get value() {
return this._value;
}
get _life() {
if (this.life) {
return this.life;
}
else {
if (this.value && this.value.length > 0) {
return this.severityDelay(this.value[0]);
}
else {
return 5000;
}
}
}
ngOnInit() {
this.subItem = this.clickSub
.pipe(throttleTime(250, undefined, { leading: true, trailing: false }))
.subscribe((obj) => this.remove(obj.index, obj.dom));
}
ngAfterViewInit() {
this.container = this.containerViewChild.nativeElement;
}
ngOnDestroy() {
if (!this.sticky) {
if (this.lifeMode === 'single') {
this.timeoutArr.forEach((item) => item && clearTimeout(item));
}
else {
clearTimeout(this.timeout);
}
}
if (this.subItem) {
this.subItem.unsubscribe();
}
}
severityDelay(item) {
switch (item.severity) {
case 'warn':
case 'error':
return 10000;
default:
// common | success | info | default
return 5000;
}
}
show() {
if (!this.container) {
this.container = this.containerViewChild.nativeElement;
}
this.handleValueChange();
}
// Will overwrite this method in toast service
close() { }
// Will overwrite this method in toast service
onHidden() { }
handleValueChange() {
this.zIndex++;
const doms = this.container.children;
setTimeout(() => this._value.forEach((v, i) => v && doms[i]?.classList.add('slide-in')));
if (!this.sticky) {
if (this.timeout) {
clearTimeout(this.timeout);
}
if (this.timeoutArr.length > 0) {
this.timeoutArr.forEach((item) => item && clearTimeout(item));
this.timeoutArr = [];
}
this.timestamp = new Date().getTime();
if (this.lifeMode === 'single') {
setTimeout(() => {
this._value.forEach((v, i) => {
this.timeoutArr[i] = setTimeout(() => this.singleModeRemove(v, doms[i]), v.life || this.severityDelay(v));
});
});
}
else {
this.timeout = setTimeout(() => {
this.removeAll();
}, this._life);
}
}
}
singleModeRemove(msg, msgItem) {
let dom = msgItem;
// 当点击关闭某个后，重新渲染导致原来赋予的dom失效，需要重新获取
if (!msgItem) {
const index = this._value.findIndex((item) => item === msg);
const doms = this.container.children;
dom = doms[index];
}
if (dom) {
dom.classList.remove('slide-in');
}
setTimeout(() => {
dom.style.display = 'none';
this.closeEvent.emit({ message: msg });
if (this.container.querySelectorAll('.slide-in').length === 0) {
this.value = [];
this.valueChange.emit(this.value);
this.onHidden();
}
else {
this.rest = this.rest.filter((item) => item !== msg);
this.valueChange.emit(this.rest);
}
}, 300);
}
interrupt(index, msgItem) {
// 避免正在动画中的toast触发方法
if (msgItem.className.indexOf('slide-in') === -1) {
return;
}
if (this.lifeMode === 'single') {
if (this.timeoutArr[index]) {
clearTimeout(this.timeoutArr[index]);
}
}
else {
this.resetDelay(() => {
const otherToasts = this._value.slice(0);
otherToasts.splice(index, 1, undefined);
const doms = this.container.children;
otherToasts.forEach((v, i) => v && doms[i]?.classList.remove('slide-in'));
});
}
}
resetDelay(fn) {
if (!this.sticky && this.timeout) {
clearTimeout(this.timeout);
const remainTime = this._life - (new Date().getTime() - this.timestamp);
this.timeout = setTimeout(() => fn(), remainTime);
}
}
remove(index, msgItem) {
if (this.lifeMode === 'single' && this.timeoutArr[index]) {
clearTimeout(this.timeoutArr[index]);
this.timeoutArr.splice(index, 1);
}
msgItem.classList.remove('slide-in');
setTimeout(() => {
this.closeEvent.emit({ message: this.value[index] });
this._value = this.value.filter((val, i) => i !== index);
this.valueChange.emit(this._value);
if (this.container.querySelectorAll('.slide-in').length === 0) {
this.onHidden();
}
if (this.lifeMode === 'global') {
this.removeReset();
}
}, 300);
}
removeAll() {
if (this.value && this.value.length) {
const doms = this.container.children;
this._value.forEach((v, i) => v && doms[i]?.classList.remove('slide-in'));
setTimeout(() => {
this.value.forEach((msg, index) => this.closeEvent.emit({ message: this.value[index] }));
this.value = [];
this.valueChange.emit(this.value);
}, 300);
}
}
removeThrottle(index, msgItem) {
this.clickSub.next({ index: index, dom: msgItem });
}
removeIndexThrottle(index) {
const doms = this.container.children;
if (index < doms.length) {
this.clickSub.next({ index: index, dom: doms[index] });
}
}
removeMsgThrottle(msg) {
const doms = this.container.children;
const index = this._value.findIndex((item) => {
return isEqual(item, msg);
});
if (index < doms.length && index > -1) {
this.clickSub.next({ index: index, dom: doms[index] });
}
}
removeReset(index, msgItem, msg) {
// 避免点击关闭但正在动画中或自动消失正在动画中的toast触发重置方法
const removed = this._value.findIndex((item) => item === msg) === -1;
if (removed || msgItem.className.indexOf('slide-in') === -1) {
return;
}
if (this.lifeMode === 'single') {
const msgLife = msg.life || this.severityDelay(msg);
const remainTime = msgLife - (new Date().getTime() - this.timestamp);
this.timeoutArr[index] = setTimeout(() => this.singleModeRemove(msg, msgItem), remainTime);
}
else {
this.resetDelay(() => this.removeAll());
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ToastComponent, selector: "d-toast", inputs: { value: "value", sticky: "sticky", life: "life", style: "style", styleClass: "styleClass", appendUpperLimit: "appendUpperLimit", lifeMode: "lifeMode" }, outputs: { closeEvent: "closeEvent", valueChange: "valueChange" }, viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div #container [ngClass]=\"'devui-toast'\" [style.zIndex]=\"zIndex\" [ngStyle]=\"style\" [class]=\"styleClass\">\n <div\n #msgItem\n *ngFor=\"let msg of value; let i = index\"\n class=\"devui-toast-item-container\"\n aria-live=\"polite\"\n [ngClass]=\"{\n 'devui-toast-message-info': msg.severity == 'info',\n 'devui-toast-message-warn': msg.severity == 'warn',\n 'devui-toast-message-error': msg.severity == 'error',\n 'devui-toast-message-success': msg.severity == 'success',\n 'devui-toast-message-common': msg.severity == 'common'\n }\"\n (mouseenter)=\"interrupt(i, msgItem)\"\n (mouseleave)=\"removeReset(i, msgItem, msg)\"\n >\n <div class=\"devui-toast-item\" [ngSwitch]=\"msg.severity\">\n <div *ngIf=\"!(!msg.summary && life)\" class=\"devui-toast-icon-close\" (click)=\"removeThrottle(i, msgItem)\">\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 14 14\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <polygon\n class=\"devui-toast-close-icon\"\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\"\n ></polygon>\n </svg>\n </div>\n <span\n class=\"devui-toast-image\"\n [ngClass]=\"{\n 'devui-toast-image-info': msg.severity === 'info',\n 'devui-toast-image-warning': msg.severity === 'warn',\n 'devui-toast-image-error': msg.severity === 'error',\n 'devui-toast-image-success': msg.severity === 'success'\n }\"\n *ngIf=\"msg.severity !== 'common'\"\n >\n <ng-container *ngSwitchCase=\"'info'\">\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g id=\"info\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\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>\n </g>\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'warn'\">\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n class=\"devui-icon-warning-outer\"\n d=\"M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z\"\n ></path>\n <path\n class=\"devui-icon-warning-inner\"\n stroke-width=\"0.3\"\n fill-rule=\"nonzero\"\n d=\"M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z\"\n ></path>\n </g>\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'error'\">\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle cx=\"8\" cy=\"8\" r=\"8\"></circle>\n <path\n class=\"devui-toast-image-error-path\"\n d=\"M11.5355339,4.46446609 C11.9260582,4.85499039 11.9260582,5.48815536 11.5355339,5.87867966 L9.41421356,8 L11.5355339,10.1213203 C11.9260582,10.5118446 11.9260582,11.1450096 11.5355339,11.5355339 C11.1450096,11.9260582 10.5118446,11.9260582 10.1213203,11.5355339 L8,9.41421356 L5.87867966,11.5355339 C5.48815536,11.9260582 4.85499039,11.9260582 4.46446609,11.5355339 C4.0739418,11.1450096 4.0739418,10.5118446 4.46446609,10.1213203 L6.58578644,8 L4.46446609,5.87867966 C4.0739418,5.48815536 4.0739418,4.85499039 4.46446609,4.46446609 C4.85499039,4.0739418 5.48815536,4.0739418 5.87867966,4.46446609 L8,6.58578644 L10.1213203,4.46446609 C10.5118446,4.0739418 11.1450096,4.0739418 11.5355339,4.46446609 Z\"\n ></path>\n </g>\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'success'\">\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <defs>\n <polygon\n id=\"path-s\"\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\"\n ></polygon>\n </defs>\n <g id=\"correct\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <mask id=\"mask-2\" fill=\"white\">\n <use xlink:href=\"#path-s\"></use>\n </mask>\n <use id=\"Mask\" class=\"devui-toast-image-success-path\" xlink:href=\"#path-s\"></use>\n </g>\n </svg>\n </ng-container>\n </span>\n <div class=\"devui-toast-message\">\n <span *ngIf=\"!!msg.summary\" class=\"devui-toast-title\">{{ msg.summary }}</span>\n <ng-template\n *ngIf=\"msg.content; else detailTemplate\"\n [ngTemplateOutlet]=\"msg.content | dIsTemplatePipe : plainText\"\n [ngTemplateOutletContext]=\"{ msg: msg }\"\n ></ng-template>\n <ng-template #plainText>\n <p [style.marginTop]=\"msg.summary ? '4px' : '0'\">{{ msg.content }}</p>\n </ng-template>\n <ng-template #detailTemplate>\n <p *ngIf=\"msg.detail\" [style.marginTop]=\"msg.summary ? '4px' : '0'\" [innerHTML]=\"msg.detail | safe : 'html'\"></p>\n </ng-template>\n </div>\n </div>\n </div>\n</div>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host::ng-deep a:link,:host::ng-deep a:visited{color:var(--devui-link-light, #6b9bfa)}:host::ng-deep a:hover,:host::ng-deep a:active{color:var(--devui-link-light-active, #9dbdfc)}.devui-toast{position:fixed;top:50px;right:20px;width:20em;word-break:normal;word-wrap:break-word}.devui-toast-item-container{position:relative;left:150%;margin:0 0 8px;opacity:.95;filter:alpha(opacity=95);box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 24px 0) var(--devui-shadow, rgba(0, 0, 0, .16));border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #f0f0f0);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));background-color:var(--devui-feedback-overlay-bg, #333333)}.devui-toast-item-container.slide-in{left:0}.devui-toast-item{position:relative;display:block;padding:12px 16px}.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:var(--devui-light-text, #ffffff)}.devui-toast-title{font-size:var(--devui-font-size-lg, 14px);padding:0 0 4px;display:block;font-weight:700}.devui-toast-image{position:absolute;display:inline-block;width:16px;height:16px;border-radius:50%;left:16px;top:14px;padding:0}.devui-toast-image.devui-toast-image-warning path.devui-icon-warning-outer{fill:var(--devui-warning-line, #f4840c)}.devui-toast-image.devui-toast-image-warning path.devui-icon-warning-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-toast-image.devui-toast-image-info{background-color:var(--devui-info, #0a59f7)}.devui-toast-image.devui-toast-image-error{background-color:var(--devui-danger, #e02128)}.devui-toast-image.devui-toast-image-success{background-color:var(--devui-success, #058358)}.devui-toast-image .devui-toast-image-info-path,.devui-toast-image .devui-toast-image-error-path,.devui-toast-image .devui-toast-image-success-path{fill:var(--devui-light-text, #ffffff)}.devui-toast-message{margin-left:20px;word-break:break-all;word-wrap:break-word}.devui-toast-message p{padding:0 8px 0 4px}.devui-toast-message span.devui-toast-title+p{padding:0}.devui-toast-message-common .devui-toast-message{margin-left:0}.devui-toast-message p{font-size:var(--devui-font-size, 12px);margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.IsTemplatePipe, name: "dIsTemplatePipe" }, { kind: "pipe", type: i2.SafePipe, name: "safe" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToastComponent, decorators: [{
type: Component,
args: [{ selector: 'd-toast', preserveWhitespaces: false, template: "<div #container [ngClass]=\"'devui-toast'\" [style.zIndex]=\"zIndex\" [ngStyle]=\"style\" [class]=\"styleClass\">\n <div\n #msgItem\n *ngFor=\"let msg of value; let i = index\"\n class=\"devui-toast-item-container\"\n aria-live=\"polite\"\n [ngClass]=\"{\n 'devui-toast-message-info': msg.severity == 'info',\n 'devui-toast-message-warn': msg.severity == 'warn',\n 'devui-toast-message-error': msg.severity == 'error',\n 'devui-toast-message-success': msg.severity == 'success',\n 'devui-toast-message-common': msg.severity == 'common'\n }\"\n (mouseenter)=\"interrupt(i, msgItem)\"\n (mouseleave)=\"removeReset(i, msgItem, msg)\"\n >\n <div class=\"devui-toast-item\" [ngSwitch]=\"msg.severity\">\n <div *ngIf=\"!(!msg.summary && life)\" class=\"devui-toast-icon-close\" (click)=\"removeThrottle(i, msgItem)\">\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 14 14\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <polygon\n class=\"devui-toast-close-icon\"\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\"\n ></polygon>\n </svg>\n </div>\n <span\n class=\"devui-toast-image\"\n [ngClass]=\"{\n 'devui-toast-image-info': msg.severity === 'info',\n 'devui-toast-image-warning': msg.severity === 'warn',\n 'devui-toast-image-error': msg.severity === 'error',\n 'devui-toast-image-success': msg.severity === 'success'\n }\"\n *ngIf=\"msg.severity !== 'common'\"\n >\n <ng-container *ngSwitchCase=\"'info'\">\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g id=\"info\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\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>\n </g>\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'warn'\">\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n class=\"devui-icon-warning-outer\"\n d=\"M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z\"\n ></path>\n <path\n class=\"devui-icon-warning-inner\"\n stroke-width=\"0.3\"\n fill-rule=\"nonzero\"\n d=\"M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z\"\n ></path>\n </g>\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'error'\">\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle cx=\"8\" cy=\"8\" r=\"8\"></circle>\n <path\n class=\"devui-toast-image-error-path\"\n d=\"M11.5355339,4.46446609 C11.9260582,4.85499039 11.9260582,5.48815536 11.5355339,5.87867966 L9.41421356,8 L11.5355339,10.1213203 C11.9260582,10.5118446 11.9260582,11.1450096 11.5355339,11.5355339 C11.1450096,11.9260582 10.5118446,11.9260582 10.1213203,11.5355339 L8,9.41421356 L5.87867966,11.5355339 C5.48815536,11.9260582 4.85499039,11.9260582 4.46446609,11.5355339 C4.0739418,11.1450096 4.0739418,10.5118446 4.46446609,10.1213203 L6.58578644,8 L4.46446609,5.87867966 C4.0739418,5.48815536 4.0739418,4.85499039 4.46446609,4.46446609 C4.85499039,4.0739418 5.48815536,4.0739418 5.87867966,4.46446609 L8,6.58578644 L10.1213203,4.46446609 C10.5118446,4.0739418 11.1450096,4.0739418 11.5355339,4.46446609 Z\"\n ></path>\n </g>\n </svg>\n </ng-container>\n <ng-container *ngSwitchCase=\"'success'\">\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <defs>\n <polygon\n id=\"path-s\"\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\"\n ></polygon>\n </defs>\n <g id=\"correct\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <mask id=\"mask-2\" fill=\"white\">\n <use xlink:href=\"#path-s\"></use>\n </mask>\n <use id=\"Mask\" class=\"devui-toast-image-success-path\" xlink:href=\"#path-s\"></use>\n </g>\n </svg>\n </ng-container>\n </span>\n <div class=\"devui-toast-message\">\n <span *ngIf=\"!!msg.summary\" class=\"devui-toast-title\">{{ msg.summary }}</span>\n <ng-template\n *ngIf=\"msg.content; else detailTemplate\"\n [ngTemplateOutlet]=\"msg.content | dIsTemplatePipe : plainText\"\n [ngTemplateOutletContext]=\"{ msg: msg }\"\n ></ng-template>\n <ng-template #plainText>\n <p [style.marginTop]=\"msg.summary ? '4px' : '0'\">{{ msg.content }}</p>\n </ng-template>\n <ng-template #detailTemplate>\n <p *ngIf=\"msg.detail\" [style.marginTop]=\"msg.summary ? '4px' : '0'\" [innerHTML]=\"msg.detail | safe : 'html'\"></p>\n </ng-template>\n </div>\n </div>\n </div>\n</div>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host::ng-deep a:link,:host::ng-deep a:visited{color:var(--devui-link-light, #6b9bfa)}:host::ng-deep a:hover,:host::ng-deep a:active{color:var(--devui-link-light-active, #9dbdfc)}.devui-toast{position:fixed;top:50px;right:20px;width:20em;word-break:normal;word-wrap:break-word}.devui-toast-item-container{position:relative;left:150%;margin:0 0 8px;opacity:.95;filter:alpha(opacity=95);box-shadow:var(--devui-shadow-length-feedback-overlay, 0 8px 24px 0) var(--devui-shadow, rgba(0, 0, 0, .16));border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #f0f0f0);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));background-color:var(--devui-feedback-overlay-bg, #333333)}.devui-toast-item-container.slide-in{left:0}.devui-toast-item{position:relative;display:block;padding:12px 16px}.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:var(--devui-light-text, #ffffff)}.devui-toast-title{font-size:var(--devui-font-size-lg, 14px);padding:0 0 4px;display:block;font-weight:700}.devui-toast-image{position:absolute;display:inline-block;width:16px;height:16px;border-radius:50%;left:16px;top:14px;padding:0}.devui-toast-image.devui-toast-image-warning path.devui-icon-warning-outer{fill:var(--devui-warning-line, #f4840c)}.devui-toast-image.devui-toast-image-warning path.devui-icon-warning-inner{fill:var(--devui-light-text, #ffffff);stroke:var(--devui-light-text, #ffffff)}.devui-toast-image.devui-toast-image-info{background-color:var(--devui-info, #0a59f7)}.devui-toast-image.devui-toast-image-error{background-color:var(--devui-danger, #e02128)}.devui-toast-image.devui-toast-image-success{background-color:var(--devui-success, #058358)}.devui-toast-image .devui-toast-image-info-path,.devui-toast-image .devui-toast-image-error-path,.devui-toast-image .devui-toast-image-success-path{fill:var(--devui-light-text, #ffffff)}.devui-toast-message{margin-left:20px;word-break:break-all;word-wrap:break-word}.devui-toast-message p{padding:0 8px 0 4px}.devui-toast-message span.devui-toast-title+p{padding:0}.devui-toast-message-common .devui-toast-message{margin-left:0}.devui-toast-message p{font-size:var(--devui-font-size, 12px);margin-top:4px}\n"] }]
}], propDecorators: { containerViewChild: [{
type: ViewChild,
args: ['container', { static: true }]
}], value: [{
type: Input
}], sticky: [{
type: Input
}], life: [{
type: Input
}], style: [{
type: Input
}], styleClass: [{
type: Input
}], appendUpperLimit: [{
type: Input
}], lifeMode: [{
type: Input
}], closeEvent: [{
type: Output
}], valueChange: [{
type: Output
}] } });
class ToastService {
constructor(overlayContainerRef, componentFactoryResolver) {
this.overlayContainerRef = overlayContainerRef;
this.componentFactoryResolver = componentFactoryResolver;
}
open({ value, life = 5000, lifeMode = 'global', sticky = false, style, styleClass, appendUpperLimit, injector,
/**
* @deprecated
*/
component, componentFactoryResolver, } = {}) {
const finalComponentFactoryResolver = componentFactoryResolver || this.componentFactoryResolver;
const toastRef = this.overlayContainerRef.createComponent(finalComponentFactoryResolver.resolveComponentFactory(ToastComponent), injector);
assign(toastRef.instance, {
lifeMode: lifeMode,
sticky: sticky,
style: style,
styleClass: styleClass,
value: value,
life: life,
appendUpperLimit: appendUpperLimit,
});
toastRef.instance.close = (index) => {
if (typeof index === 'number' && index > -1) {
toastRef.instance.removeIndexThrottle(index);
}
else if (index) {
toastRef.instance.removeMsgThrottle(index);
}
else {
setTimeout(() => {
toastRef.instance.removeAll();
setTimeout(() => {
if (toastRef) {
toastRef.destroy();
}
}, 300);
});
}
};
toastRef.instance.onHidden = () => {
if (toastRef?.hostView) {
toastRef.hostView.destroy();
}
};
toastRef.instance.show();
return {
toastInstance: toastRef.instance,
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToastService, deps: [{ token: i1$1.OverlayContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToastService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToastService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: i1$1.OverlayContainerRef }, { type: i0.ComponentFactoryResolver }] });
class ToastModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ToastModule, declarations: [ToastComponent], imports: [CommonModule, IsTemplateModule, SafePipeModule, OverlayContainerModule], exports: [ToastComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToastModule, providers: [ToastService], imports: [CommonModule, IsTemplateModule, SafePipeModule, OverlayContainerModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToastModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, IsTemplateModule, SafePipeModule, OverlayContainerModule],
exports: [ToastComponent],
declarations: [ToastComponent],
providers: [ToastService],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ToastComponent, ToastModule, ToastService };
//# sourceMappingURL=ng-devui-toast.mjs.map