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

DevUI components based on Angular

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/animations"),require("ng-devui/position"),require("rxjs"),require("rxjs/operators"),require("ng-devui/overlay-container")):"function"==typeof define&&define.amd?define("ng-devui/popover",["exports","@angular/core","@angular/common","@angular/animations","ng-devui/position","rxjs","rxjs/operators","ng-devui/overlay-container"],t):t(((e=e||self)["ng-devui"]=e["ng-devui"]||{},e["ng-devui"].popover={}),e.ng.core,e.ng.common,e.ng.animations,e["ng-devui"].position,e.rxjs,e.rxjs.operators,e["ng-devui"]["overlay-container"])}(this,(function(e,t,o,n,i,r,p,s){"use strict";var c=function(){function e(e,t,o){this.renderer=e,this.positionService=t,this.elementRef=o,this.showAnimate=!1,this.zIndex=1060,this.animateState=this.showAnimate?"void":"",this.display="block",this.subs=new r.Subscription,this.SCROLL_REFRESH_INTERVAL=100}return Object.defineProperty(e.prototype,"class",{get:function(){return"devui-popover "+this.position+" devui-popover-"+this.popType},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"state",{get:function(){return this.animateState},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.elementRef.nativeElement.style.zIndex=this.zIndex},e.prototype.ngAfterViewInit=function(){var e=this;this.updatePosition(),this.appendToBody&&(this.scrollElement||(this.scrollElement=this.positionService.getScrollParent(this.triggerElementRef.nativeElement)),this.subs.add(r.fromEvent(this.scrollElement||window,"scroll").pipe(p.debounceTime(this.SCROLL_REFRESH_INTERVAL)).subscribe((function(){e.updatePosition()}))),this.subs.add(r.fromEvent(window,"resize").pipe(p.debounceTime(this.SCROLL_REFRESH_INTERVAL)).subscribe((function(){e.updatePosition()}))))},e.prototype.ngAfterContentChecked=function(){this.updatePosition()},e.prototype.show=function(){this.animateState="visible"},e.prototype.hide=function(){this.animateState="void"},e.prototype.onHidden=function(){},e.prototype.onAnimationEnd=function(e){"void"===e.toState&&this.onHidden()},e.prototype.ngOnDestroy=function(){this.subs&&this.subs.unsubscribe()},e.prototype.updatePosition=function(){var e=this.positionService.positionElements(this.triggerElementRef.nativeElement,this.elementRef.nativeElement,this.position,this.appendToBody);this.renderer.setStyle(this.elementRef.nativeElement,"left",e.left+"px"),this.renderer.setStyle(this.elementRef.nativeElement,"top",e.top+"px")},e.decorators=[{type:t.Component,args:[{selector:"d-popover",template:'<div class="arrow"></div>\r\n<div class="devui-popover-content">\r\n  <span class="devui-popover-icon" *ngIf="popType && popType !== \'default\'">\r\n    <svg\r\n      *ngIf="popType === \'success\'"\r\n      class="devui-icon devui-icon-success"\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 stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\r\n        <circle cx="8" cy="8" r="7"></circle>\r\n        <path d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z" fill-rule="nonzero"></path>\r\n        <polygon\r\n          stroke-width="0.4"\r\n          fill-rule="nonzero"\r\n          points="8.16 10.48 7.32 11.32 6.48 10.48 6.48 10.48 3.6 7.68 4.44 6.84 7.28 9.68 11.52 5.44 12.36 6.28"\r\n        ></polygon>\r\n      </g>\r\n    </svg>\r\n    <svg\r\n      *ngIf="popType === \'warning\'"\r\n      class="devui-icon devui-icon-warning"\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 stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\r\n        <polygon\r\n          points="7.5 1.74501946 1.39184847 13.5954649 7.08947368 14.2207621 13.9973698 13.5954649 10.9383683 5.61273879 8.40084114 1.27624313"\r\n        ></polygon>\r\n        <path\r\n          d="M8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.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 Z M8.87894737,11.2105263 L7.08947368,11.2105263 L7.08947368,13 L8.87894737,13 L8.87894737,11.2105263 Z M8.96842105,4.5 L7,4.5 L7.08947368,9.86842105 L8.87894737,9.86842105 L8.96842105,4.5 Z"\r\n        ></path>\r\n      </g>\r\n    </svg>\r\n    <svg\r\n      *ngIf="popType === \'info\'"\r\n      class="devui-icon devui-icon-info"\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 stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\r\n        <circle cx="8" cy="8" r="7"></circle>\r\n        <g stroke-width="1">\r\n          <path\r\n            d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,5 L7,5 L7,3 L9,3 L9,5 Z M9,12.6 L7,12.6 L7,6.6 L9,6.6 L9,12.6 Z"\r\n          ></path>\r\n        </g>\r\n      </g>\r\n    </svg>\r\n    <svg\r\n      *ngIf="popType === \'error\'"\r\n      class="devui-icon devui-icon-error"\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 stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\r\n        <circle cx="8" cy="8" r="7"></circle>\r\n        <path\r\n          d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z"\r\n          fill-rule="nonzero"\r\n        ></path>\r\n      </g>\r\n    </svg>\r\n  </span>\r\n  <div class="devui-popover-main-content" [ngClass]="{ \'with-icon\': popType && popType !== \'default\' }" [innerHTML]="content"></div>\r\n</div>\r\n',animations:[n.trigger("state",[n.state("void",n.style({opacity:0})),n.state("visible",n.style({opacity:1})),n.transition("* => visible",n.animate("150ms cubic-bezier(0.0, 0.0, 0.2, 1)")),n.transition("visible => *",n.animate("150ms cubic-bezier(0.4, 0.0, 1, 1)"))])],styles:[":host.devui-popover{font-size:12px;position:absolute;top:0;left:0;line-height:20px;border:none;border-radius:2px;z-index:1060;background-color:#464d6e;color:#dfe1e6;overflow-wrap:break-word}:host.devui-popover>.arrow{border-width:8px}:host.devui-popover>.arrow,:host.devui-popover>.arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}:host.devui-popover>.arrow::after{content:''}:host.devui-popover.top>.arrow{left:50%;margin-left:-7px;border-bottom-width:0;border-top-color:#464d6e;bottom:-8px}:host.devui-popover.right>.arrow{top:50%;left:-8px;margin-top:-8px;border-left-width:0;border-right-color:#464d6e}:host.devui-popover.bottom>.arrow{left:50%;margin-left:-7px;border-top-width:0;border-bottom-color:#464d6e;top:-8px}:host.devui-popover.left>.arrow{top:50%;right:-8px;margin-top:-8px;border-right-width:0;border-left-color:#464d6e}:host.devui-popover.top{margin-top:-10px;box-shadow:-5px 5px 20px 0 rgba(41,48,64,.2)}:host.devui-popover.bottom{margin-top:10px;box-shadow:5px -5px 20px 0 rgba(41,48,64,.2)}:host.devui-popover.left{margin-left:-10px;box-shadow:5px -5px 20px 0 rgba(41,48,64,.2)}:host.devui-popover.right{margin-left:10px;box-shadow:-5px 5px 20px 0 rgba(41,48,64,.2)}.devui-popover-icon{display:block;position:absolute;left:12px;top:8px}.devui-popover-icon svg.devui-icon{width:16px;height:16px}.devui-popover-main-content.with-icon{text-indent:20px}.devui-icon.devui-icon-success>g>path{fill:#50d4ab}.devui-icon.devui-icon-success>g>circle,.devui-icon.devui-icon-success>g>polygon,.devui-icon.devui-icon-warning>g>polygon{fill:#fff}.devui-icon.devui-icon-warning>g>path{fill:#fac20a}.devui-icon.devui-icon-info>g>g{fill:#5e7ce0}.devui-icon.devui-icon-info>g>circle{fill:#fff}.devui-icon.devui-icon-error>g>path{fill:#f66f6a}.devui-icon.devui-icon-error>g>circle{fill:#fff}.devui-popover-content{padding:5px 14px}"]}]}],e.ctorParameters=function(){return[{type:t.Renderer2},{type:i.PositionService},{type:t.ElementRef}]},e.propDecorators={triggerElementRef:[{type:t.Input}],position:[{type:t.Input}],content:[{type:t.Input}],showAnimate:[{type:t.Input}],scrollElement:[{type:t.Input}],appendToBody:[{type:t.Input}],zIndex:[{type:t.Input}],popType:[{type:t.Input}],display:[{type:t.HostBinding,args:["style.display"]}],class:[{type:t.HostBinding,args:["class"]}],state:[{type:t.HostBinding,args:["@state"]}],onAnimationEnd:[{type:t.HostListener,args:["@state.done",["$event"]]}]},e}();var l=function(){function e(e,t,o,n,i){var p=this;this.triggerElementRef=e,this.overlayContainerRef=t,this.viewContainerRef=o,this.injector=n,this.componentFactoryResolver=i,this.subscription=new r.Subscription,this.blurSub=new r.Subscription,this.blurSubscription=new r.Subscription,this.position="top",this.appendToBody=!0,this.zIndex=1060,this.popType="default",this.trigger="click",this.hoverToContent=!1,this.onDocumentClick=function(e){e.stopPropagation(),!p.controlled||p.triggerElementRef.nativeElement.contains(e.target)||p.popoverComponentRef&&p.popoverComponentRef.instance.elementRef.nativeElement.contains(e.target)||p.hide()}}return Object.defineProperty(e.prototype,"content",{set:function(e){var t=this;this._content=e,this.popoverComponentRef&&(this.popoverComponentRef.instance.content=e,setTimeout((function(){t.popoverComponentRef&&t.popoverComponentRef.instance.updatePosition()})))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"visible",{set:function(e){var t=this;e?setTimeout((function(){return t.show()}),0):this.hide()},enumerable:!0,configurable:!0}),e.prototype.createPopover=function(){this.appendToBody?this.popoverComponentRef=this.overlayContainerRef.createComponent(this.componentFactoryResolver.resolveComponentFactory(c)):this.popoverComponentRef=this.viewContainerRef.createComponent(this.componentFactoryResolver.resolveComponentFactory(c),this.viewContainerRef.length,this.injector),Object.assign(this.popoverComponentRef.instance,{content:this._content,triggerElementRef:this.triggerElementRef,position:this.position,popType:this.popType,scrollElement:this.scrollElement,appendToBody:this.appendToBody,zIndex:this.zIndex})},e.prototype.show=function(){var e=this;this.hide(),this._content&&(this.popoverComponentRef||this.createPopover(),this.showAnimate&&this.popoverComponentRef.instance.show(),document.addEventListener("click",this.onDocumentClick),"hover"===this.trigger&&this.hoverToContent&&(this.blurSubscription=r.fromEvent(this.popoverComponentRef.instance.elementRef.nativeElement,"mouseleave").subscribe((function(t){"mouseleave"===t.type&&e.controlled&&e.hide()})),this.blurSub.add(this.blurSubscription)))},e.prototype.destroy=function(){this.popoverComponentRef&&(this.popoverComponentRef.destroy(),this.popoverComponentRef=null),document.removeEventListener("click",this.onDocumentClick)},e.prototype.ngOnInit=function(){var e=this,t=this.triggerElementRef.nativeElement;"click"===this.trigger?this.subscription.add(r.fromEvent(t,"click").subscribe((function(t){e.controlled&&e.show()}))):"hover"===this.trigger&&this.subscription.add(r.merge(r.fromEvent(t,"mouseenter"),r.fromEvent(t,"mouseleave")).subscribe((function(t){if("mouseenter"===t.type&&e.controlled&&e.show(),"mouseleave"===t.type&&e.controlled)if(e.hoverToContent)var o=setTimeout((function(){var n=t.relatedTarget;e.triggerElementRef.nativeElement.contains(n)||e.popoverComponentRef&&e.popoverComponentRef.instance.elementRef.nativeElement.contains(n)||e.hide(),clearTimeout(o)}),100);else e.hide()})))},e.prototype.ngOnDestroy=function(){this.destroy(),this.subscription.unsubscribe(),this.blurSub&&this.blurSub.unsubscribe()},e.prototype.hide=function(){var e=this;if(this.blurSubscription&&(this.blurSubscription.unsubscribe(),this.blurSub.remove(this.blurSubscription)),this.popoverComponentRef){if(!this.showAnimate)return void this.destroy();this.popoverComponentRef.instance.hide(),this.popoverComponentRef.instance.onHidden=function(){e.destroy()}}},e.decorators=[{type:t.Directive,args:[{selector:"[dPopover]",exportAs:"dPopover"}]}],e.ctorParameters=function(){return[{type:t.ElementRef},{type:s.OverlayContainerRef},{type:t.ViewContainerRef},{type:t.Injector},{type:t.ComponentFactoryResolver}]},e.propDecorators={content:[{type:t.Input}],controlled:[{type:t.Input}],position:[{type:t.Input}],showAnimate:[{type:t.Input}],scrollElement:[{type:t.Input}],appendToBody:[{type:t.Input}],zIndex:[{type:t.Input}],popType:[{type:t.Input}],trigger:[{type:t.Input}],hoverToContent:[{type:t.Input}],visible:[{type:t.Input}]},e}();var a=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[o.CommonModule,i.PositioningModule],exports:[c,l],declarations:[c,l],entryComponents:[c]}]}],e}();e.PopoverComponent=c,e.PopoverDirective=l,e.PopoverModule=a,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-popover.umd.min.js.map