ionic4-tooltips
Version:
Tooltips module for Ionic 2+ and Angular 8+ apps
2 lines • 8.92 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/common"),require("@angular/core"),require("@angular/animations"),require("@ionic/angular")):"function"==typeof define&&define.amd?define("ionic4-tooltips",["exports","@angular/common","@angular/core","@angular/animations","@ionic/angular"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["ionic4-tooltips"]={},t.ng.common,t.ng.core,t.ng.animations,t["@ionic/angular"])}(this,(function(t,e,o,i,n){"use strict";var r=function(){function t(t,e){var o=this;this.elementRef=t,this.rnd=e,this.fadeState="invisible",this.role="status",this.tooltipStyles={},this.init=new Promise((function(t){o.initResolve=t}))}return Object.defineProperty(t.prototype,"arrow",{set:function(t){this.rnd.setAttribute(this.getNativeElement(),"class","has-arrow arrow-"+t)},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"posTop",{set:function(t){this.rnd.setStyle(this.getNativeElement(),"top",t+"px")},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"posLeft",{set:function(t){this.rnd.setStyle(this.getNativeElement(),"left",t+"px")},enumerable:!1,configurable:!0}),t.prototype.getNativeElement=function(){return this.elementRef.nativeElement},t.prototype.ngAfterViewInit=function(){this.initResolve()},t}();r.decorators=[{type:o.Component,args:[{selector:"tooltip-box",template:'<div class="tooltip-box"\n [attr.aria-role]="role"\n [ngStyle]="tooltipStyles">\n <div *ngIf="tooltipHtml; else txt" [innerHTML]="tooltipHtml"></div>\n\n <ng-template #txt><div [innerHtml]="text"></div></ng-template>\n</div>\n',animations:[i.trigger("fade",[i.state("visible",i.style({opacity:1})),i.state("invisible",i.style({opacity:0})),i.transition("visible <=> invisible",i.animate("300ms linear"))])],changeDetection:o.ChangeDetectionStrategy.OnPush,styles:[':host{background-color:rgba(0,0,0,.8);color:#fff;display:inline-block;font-size:15px;padding:15px 25px;position:fixed;z-index:3}:host.has-arrow:before{border:5px solid transparent;content:"";height:0;position:absolute;width:0}:host.has-arrow.arrow-top:before{border-bottom:5px solid rgba(0,0,0,.8);top:-10px}:host.has-arrow.arrow-left:before{border-right:5px solid rgba(0,0,0,.8);left:-10px}:host.has-arrow.arrow-right:before{border-left:5px solid rgba(0,0,0,.8);right:-10px}:host.has-arrow.arrow-bottom:before{border-top:5px solid rgba(0,0,0,.8);bottom:-10px}']}]}],r.ctorParameters=function(){return[{type:o.ElementRef},{type:o.Renderer2}]},r.propDecorators={fadeState:[{type:o.HostBinding,args:["@fade"]}],role:[{type:o.Input}],text:[{type:o.Input}],tooltipHtml:[{type:o.Input}],tooltipStyles:[{type:o.Input}],arrow:[{type:o.Input}],posTop:[{type:o.Input}],posLeft:[{type:o.Input}]};var s,p=function(){function t(){this.allowMultiple=!0,this.activeTooltips=[]}return t.prototype.addTooltip=function(t){(t.hideOthers||!this.allowMultiple&&this.activeTooltips.length>0)&&this.hideAll(),this.activeTooltips.push(t)},t.prototype.removeTooltip=function(t){this.activeTooltips.splice(this.activeTooltips.indexOf(t),1)},t.prototype.hideAll=function(){this.activeTooltips.forEach((function(t){t.removeTooltip()}))},t}();p.ɵprov=o.ɵɵdefineInjectable({factory:function(){return new p},token:p,providedIn:"root"}),p.decorators=[{type:o.Injectable,args:[{providedIn:"root"}]}],function(t){t.CLICK="click",t.HOVER="hover",t.PRESS="press"}(s||(s={}));var l=function(){function t(t,e,o,i,n,r){this.el=t,this.appRef=e,this.platform=o,this.cfr=i,this.tooltipCtrl=n,this.vcr=r,this._active=!1,this._arrow=!1,this._canShow=!0,this._debouncedPromise=null,this._navTooltip=!1,this.debounce=0,this.desktopEvent=s.HOVER,this.duration=3e3,this.tooltipStyles={}}return Object.defineProperty(t.prototype,"navTooltip",{get:function(){return this._navTooltip},set:function(t){this._navTooltip="boolean"!=typeof t||!1!==t},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"arrow",{get:function(){return this._arrow},set:function(t){this._arrow="boolean"!=typeof t||!1!==t},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"active",{get:function(){return this._active},set:function(t){this._active="boolean"!=typeof t||!1!==t,this._active&&this.canShow?this.showTooltip():this.removeTooltip()},enumerable:!1,configurable:!0}),t.prototype.ngOnInit=function(){void 0===this.event&&(this.event=this.platform.is("mobile")?this.mobileEvent:this.desktopEvent),this.removeTooltip()},t.prototype.ngAfterViewInit=function(){this._active&&this.trigger()},t.prototype.ngOnDestroy=function(){this._tooltipElement&&"function"==typeof this._tooltipElement.destroy&&this._tooltipElement.destroy()},Object.defineProperty(t.prototype,"canShow",{get:function(){return this._canShow&&("string"==typeof this.tooltip&&""!==this.tooltip||"string"==typeof this.tooltipHtml&&""!==this.tooltipHtml)},set:function(t){this._canShow=t},enumerable:!1,configurable:!0}),t.prototype.trigger=function(){this.canShow&&(this._tooltipElement?this._resetTimer():this.showTooltip())},t.prototype.showTooltip=function(){var t=this;this._debouncedPromise=setTimeout((function(){t._debouncedPromise=null,t._createTooltipComponent();var e=t._tooltipElement.instance;e.role=t.role,e.text=t.tooltip,e.tooltipStyles=t.tooltipStyles,e.tooltipHtml=t.tooltipHtml,e.init.then((function(){var o=t._getTooltipPosition();if(e.posLeft=o.left,e.posTop=o.top,e.fadeState="visible",t.arrow){var i=void 0;i="top"===t.positionV?"bottom":"bottom"===t.positionV?"top":"left"===t.positionH?"right":"left",e.arrow=i}t._active||(t._tooltipTimeout=setTimeout(t.removeTooltip.bind(t),t.duration))}))}),this.debounce)},t.prototype.onClick=function(){this.event===s.CLICK&&this.trigger()},t.prototype.onPress=function(){this.event===s.PRESS&&this.trigger()},t.prototype.onMouseEnter=function(){this.event===s.HOVER&&(this.active=!0)},t.prototype.onMouseLeave=function(){this.event===s.HOVER&&(this.active=!1)},t.prototype._createTooltipComponent=function(){var t=this.cfr.resolveComponentFactory(r);this._tooltipElement=this.vcr.createComponent(t),this.tooltipCtrl.addTooltip(this)},t.prototype._getTooltipPosition=function(){var t,e,o=this._tooltipElement.instance.getNativeElement(),i=this.el.nativeElement,n=i.getBoundingClientRect(),r=10;return this.navTooltip&&(this.positionV="bottom",this.arrow=!1,r=20),t="right"===this.positionH?n.right+r:"left"===this.positionH?n.left-r-o.offsetWidth:this.navTooltip?n.left+i.offsetWidth/2:n.left,e="top"===this.positionV?n.top-r-o.offsetHeight:"bottom"===this.positionV?n.bottom+r:n.top+i.offsetHeight/2-o.offsetHeight/2,this.topOffset++,this.topOffset&&(e+=+this.topOffset),this.leftOffset++,this.leftOffset&&(t+=+this.leftOffset),t+o.offsetWidth+r>this.platform.width()?t=this.platform.width()-o.offsetWidth-r:t+o.offsetWidth-r<0&&(t=r),e+o.offsetHeight+r>this.platform.height()?e=this.platform.height()-o.offsetHeight-r:e+o.offsetHeight-r<0&&(e=r),{left:t,top:e}},t.prototype.removeTooltip=function(){var t=this;if(this._debouncedPromise&&(clearTimeout(this._debouncedPromise),this._debouncedPromise=null),!this._tooltipElement)return this._tooltipElement=void 0,void(this._tooltipTimeout=void 0);this._tooltipElement.instance.fadeState="invisible",this.canShow=!1,setTimeout((function(){t._tooltipElement&&"function"==typeof t._tooltipElement.destroy&&t._tooltipElement.destroy(),t.tooltipCtrl.removeTooltip(t),t._tooltipElement=t._tooltipTimeout=void 0,t.canShow=!0}),300)},t.prototype._resetTimer=function(){var t=this;clearTimeout(this._tooltipTimeout),this._tooltipTimeout=setTimeout((function(){t.active=!1}),this.duration)},t}();l.decorators=[{type:o.Directive,args:[{selector:"[tooltip]"}]}],l.ctorParameters=function(){return[{type:o.ElementRef},{type:o.ApplicationRef},{type:n.Platform},{type:o.ComponentFactoryResolver},{type:p},{type:o.ViewContainerRef}]},l.propDecorators={debounce:[{type:o.Input}],desktopEvent:[{type:o.Input}],duration:[{type:o.Input}],event:[{type:o.Input}],hideOthers:[{type:o.Input}],leftOffset:[{type:o.Input}],mobileEvent:[{type:o.Input}],positionV:[{type:o.Input}],positionH:[{type:o.Input}],role:[{type:o.Input}],tooltip:[{type:o.Input}],tooltipHtml:[{type:o.Input}],tooltipStyles:[{type:o.Input}],topOffset:[{type:o.Input}],navTooltip:[{type:o.Input}],arrow:[{type:o.Input}],active:[{type:o.Input}],onClick:[{type:o.HostListener,args:["click"]}],onPress:[{type:o.HostListener,args:["press"]}],onMouseEnter:[{type:o.HostListener,args:["mouseenter"]}],onMouseLeave:[{type:o.HostListener,args:["mouseleave"]}]};var a=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[p]}},t}();a.decorators=[{type:o.NgModule,args:[{declarations:[l,r],entryComponents:[r],exports:[l],imports:[e.CommonModule]}]}],t.TooltipBoxComponent=r,t.TooltipController=p,t.TooltipDirective=l,t.TooltipsModule=a,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ionic4-tooltips.umd.min.js.map