@duoduo-oba/ng-devui/bundles/ng-devui-toast.umd.min.js

DevUI components based on Angular

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("@angular/common"),require("ng-devui/utils")):"function"==typeof define&&define.amd?define("ng-devui/toast",["exports","@angular/core","rxjs","rxjs/operators","@angular/common","ng-devui/utils"],t):t(((e=e||self)["ng-devui"]=e["ng-devui"]||{},e["ng-devui"].toast={}),e.ng.core,e.rxjs,e.rxjs.operators,e.ng.common,e["ng-devui"].utils)}(this,(function(e,t,n,i,r,s){"use strict";var o=function(){function e(){}return e.prototype.fadeIn=function(e,t){e.style.opacity=0;var n=+new Date,i=0,r=function(){i=+e.style.opacity+((new Date).getTime()-n)/t,e.style.opacity=i,n=+new Date,+i<1&&(window.requestAnimationFrame?requestAnimationFrame(r):setTimeout(r,16))};r()},e.prototype.fadeOut=function(e,t,n){var i=1,r=50/t,s=setInterval((function(){(i-=r)<=0&&(i=0,clearInterval(s),n&&n()),e.style.opacity=i}),50)},e.zIndex=1060,e.decorators=[{type:t.Injectable}],e}();var a=function(){function e(e,r){var s=this;this.el=e,this.toastService=r,this.closeEvent=new t.EventEmitter,this.valueChange=new t.EventEmitter,this.zIndex=o.zIndex,this.clickSub=new n.Subject,this.subItem=this.clickSub.pipe(i.throttleTime(250,void 0,{leading:!0,trailing:!1})).subscribe((function(e){return s.remove(e.index,e.dom)}))}return Object.defineProperty(e.prototype,"_life",{get:function(){if(this.life)return this.life;if(!(this.value&&this.value.length>0))return 5e3;switch(this.value[0].severity){case"success":case"info":return 5e3;case"warn":case"error":return 1e4;default:return 5e3}},enumerable:!0,configurable:!0}),e.prototype.ngAfterViewInit=function(){this.container=this.containerViewChild.nativeElement},Object.defineProperty(e.prototype,"value",{get:function(){return this._value},set:function(e){this._value=e,this.container&&this.handleValueChange()},enumerable:!0,configurable:!0}),e.prototype.handleValueChange=function(){var e=this;this.zIndex=++o.zIndex,this.toastService.fadeIn(this.container,250),this.sticky||(this.timeout&&clearTimeout(this.timeout),this.timestamp=(new Date).getTime(),this.timeout=setTimeout((function(){e.removeAll()}),this._life))},e.prototype.interrupt=function(e){var t=this;this.resetDelay((function(){var n=t._value.slice(0);n.splice(e,1,void 0);var i=t.container.children;n.forEach((function(e,n){return e&&t.toastService.fadeOut(i[n],250)}))}))},e.prototype.resetDelay=function(e){if(!this.sticky&&this.timeout){clearTimeout(this.timeout);var t=this._life-((new Date).getTime()-this.timestamp);this.timeout=setTimeout((function(){e()}),t)}},e.prototype.remove=function(e,t){var n=this;this.toastService.fadeOut(t,250,(function(){n.closeEvent.emit({message:n.value[e]}),n._value=n.value.filter((function(t,n){return n!==e})),n.valueChange.emit(n._value),n.removeReset()}))},e.prototype.removeAll=function(){var e=this;this.value&&this.value.length&&this.toastService.fadeOut(this.container,250,(function(){e.value.forEach((function(t,n){return e.closeEvent.emit({message:e.value[n]})})),e.value=[],e.valueChange.emit(e.value)}))},e.prototype.removeThrottle=function(e,t){this.clickSub.next({index:e,dom:t})},e.prototype.removeReset=function(){var e=this;this.resetDelay((function(){e.removeAll()}))},e.prototype.ngOnDestroy=function(){this.sticky||clearTimeout(this.timeout),this.subItem&&this.subItem.unsubscribe()},e.decorators=[{type:t.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}"]}]}],e.ctorParameters=function(){return[{type:t.ElementRef},{type:o}]},e.propDecorators={sticky:[{type:t.Input}],life:[{type:t.Input}],style:[{type:t.Input}],styleClass:[{type:t.Input}],closeEvent:[{type:t.Output}],valueChange:[{type:t.Output}],containerViewChild:[{type:t.ViewChild,args:["container",{static:!0}]}],value:[{type:t.Input}]},e}();var u=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[r.CommonModule,s.SafePipeModule],exports:[a],declarations:[a],providers:[o]}]}],e}();e.ToastComponent=a,e.ToastModule=u,e.ToastService=o,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-toast.umd.min.js.map