smart-tooltip-angular/bundles/smart-tooltip-angular.umd.min.js

A package that allows you tooltip to show intelligently base on where it is

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core")):"function"==typeof define&&define.amd?define("smart-tooltip-angular",["exports","@angular/core"],e):e((t=t||self)["smart-tooltip-angular"]={},t.ng.core)}(this,(function(t,e){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */function n(t,e,n,o){var i,r=arguments.length,l=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,n,o);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(l=(r<3?i(l):r>3?i(e,n,l):i(e,n))||l);return r>3&&l&&Object.defineProperty(e,n,l),l}function o(t){var e="function"==typeof Symbol&&Symbol.iterator,n=e&&t[e],o=0;if(n)return n.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&o>=t.length&&(t=void 0),{value:t&&t[o++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}var i=function(){function t(){}return t.ɵprov=e.ɵɵdefineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t=n([e.Injectable({providedIn:"root"})],t)}(),r=function(){function t(t){this.elementRef=t,this.classes=["right","right-t","right-b","left","left-t","left-b","bottom","bottom-r","bottom-l","top","top-r","top-l"],this.offSetValue=5,t.nativeElement.classList.add("smart-tooltip-container")}return t.prototype.mouseEnter=function(){this.elementRef.nativeElement.classList.contains("clicktoshow")||this.myfunc(this.elementRef)},t.prototype.click=function(){this.elementRef.nativeElement.classList.contains("clicktoshow")&&(this.elementRef.nativeElement.querySelector(".smart-tooltip").classList.add("stick"),this.myfunc(this.elementRef))},t.prototype.mouseLeave=function(){this.mouseLeft(this.elementRef)},t.prototype.ngOnInit=function(){var t=this,e=this.elementRef.nativeElement.querySelector(".smart-tooltip");e&&(e.tabIndex=1,e.addEventListener("blur",(function(e){t.toolTipBlured(e.target)})),e.addEventListener("mouseleave",(function(e){t.tooltipMouseLeft(e.target)})),e.addEventListener("mouseenter",(function(e){t.tooltipMouseEnter(e.target)})))},t.prototype.toolTipBlured=function(t){if(this.removeOverlayClass(t)){t.getBoundingClientRect();t.style.position="",t.style.top="",t.style.left="",t.style.bottom="",t.style.right="",t.classList.add("overlay")}t.style.visibility="collapse",t.style.opacity="0",t.style.display="none"},t.prototype.myfunc=function(t){clearTimeout(this.mouseLeftTimeOut);var e=this,n=t.nativeElement;if(n){var o=n.querySelector(".smart-tooltip");if(o){o.style.visibility="visible",o.style.opacity="1",o.style.display="block";var i=o.getBoundingClientRect(),r=n.getBoundingClientRect(),l=window.innerWidth,s=window.innerHeight,a={left:r.left>i.width,right:l-r.right>i.width,top:r.top>i.height,bottom:s-r.bottom>i.height,getSpace:function(t){var n=e.getStayClass(o);return n?n==t:this[t]}};if(this.removeTooltipClass(o),a.getSpace("left")){var p=s-(c=r.bottom-r.height/2),f=i.height/2;r.height>=i.height||c>f&&p>f?this.manipulateOverlayIfPresent(r,o,"left")||o.classList.add("left"):c<=f?this.manipulateOverlayIfPresent(r,o,"left-b")||o.classList.add("left-b"):p<=f&&(this.manipulateOverlayIfPresent(r,o,"left-t")||o.classList.add("left-t"))}else if(a.getSpace("right")){var c;p=s-(c=r.bottom-r.height/2),f=i.height/2;r.height>=i.height||c>f&&p>f?this.manipulateOverlayIfPresent(r,o,"right")||o.classList.add("right"):c<=f?this.manipulateOverlayIfPresent(r,o,"right-b")||o.classList.add("right-b"):p<=f&&(this.manipulateOverlayIfPresent(r,o,"right-t")||o.classList.add("right-t"))}else if(a.getSpace("top")){var m=l-(h=r.right-r.width/2);f=i.width/2;r.width>=i.width||h>f&&m>f?this.manipulateOverlayIfPresent(r,o,"top")||o.classList.add("top"):h<=f?this.manipulateOverlayIfPresent(r,o,"top-r")||o.classList.add("top-r"):m<=f&&(this.manipulateOverlayIfPresent(r,o,"top-l")||o.classList.add("top-l"))}else if(a.getSpace("bottom")){var h;m=l-(h=r.right-r.width/2),f=i.width/2;r.width>=i.width||h>f&&m>f?this.manipulateOverlayIfPresent(r,o,"bottom")||o.classList.add("bottom"):h<=f?this.manipulateOverlayIfPresent(r,o,"bottom-r")||o.classList.add("bottom-r"):m<=f&&(this.manipulateOverlayIfPresent(r,o,"bottom-l")||o.classList.add("bottom-l"))}else this.manipulateOverlayIfPresent(r,o,"bottom")||o.classList.add("bottom")}}},t.prototype.removeTooltipClass=function(t){var e=this,n=t.classList;n.forEach((function(t){e.classes.includes(t)&&n.remove(t)}))},t.prototype.getStayClass=function(t){var e;return t.classList.forEach((function(t){t.includes("stay-")&&(e=t.split("-")[1])})),e},t.prototype.mouseLeft=function(t){var e=this,n=t.nativeElement;if(n){var o=n.querySelector(".smart-tooltip");if(o){var i=this.getStickyTime(o);isNaN(i)?o.focus():this.mouseLeftTimeOut=setTimeout((function(){if(!o.classList.contains("hovered")){if(e.removeOverlayClass(o)){o.getBoundingClientRect();o.style.position="",o.style.top="",o.style.left="",o.style.bottom="",o.style.right="",o.classList.add("overlay")}o.style.visibility="collapse",o.style.opacity="0",o.style.display="none"}}),i)}}},t.prototype.removeOverlayClass=function(t){var e=!1;return t.classList.contains("overlayed")&&(e=!0,t.classList.remove("overlayed")),e},t.prototype.removeOverlayMarkClass=function(t){var e=!1;return t.classList.contains("overlay")&&(e=!0,t.classList.remove("overlay")),e},t.prototype.getOverlayCoordinates=function(t,e,n){var o=window.innerWidth,i=window.innerHeight;if(n.includes("right")){var r={left:t.right+this.offSetValue,top:t.top+t.height/2-e.height/2,props:["left","top"]};return"right-t"==n?(r.bottom=i-t.bottom,r.props=["left","bottom"]):"right-b"==n&&(r.top=t.top+this.offSetValue),r}if(n.includes("left")){r={right:o-t.left+this.offSetValue,top:t.top+t.height/2-e.height/2,props:["right","top"]};return"left-t"==n?(r.bottom=i-t.bottom,r.props=["right","bottom"]):"left-b"==n&&(r.top=t.top+this.offSetValue),r}if(n.includes("top")){r={left:t.right-t.width/2-e.width/2,bottom:i-t.top+this.offSetValue,props:["left","bottom"]};return"top-l"==n?(r.right=o-t.right+this.offSetValue,r.props=["right","bottom"]):"top-r"==n&&(r.left=t.left+this.offSetValue),r}if(n.includes("bottom")){r={left:t.right-t.width/2-e.width/2,top:t.bottom+this.offSetValue,props:["left","top"]};return"bottom-l"==n?(r.right=o-t.right+this.offSetValue,r.props=["right","top"]):"bottom-r"==n&&(r.left=t.left+this.offSetValue),r}},t.prototype.manipulateOverlayIfPresent=function(t,e,n){var i,r;if(this.removeOverlayMarkClass(e)){var l=this.getOverlayCoordinates(t,e.getBoundingClientRect(),n);e.style.position="fixed";try{for(var s=o(l.props),a=s.next();!a.done;a=s.next()){var p=a.value;e.style[p]=l[p]+"px"}}catch(t){i={error:t}}finally{try{a&&!a.done&&(r=s.return)&&r.call(s)}finally{if(i)throw i.error}}return e.classList.add("overlayed"),!0}return!1},t.prototype.getStickyTime=function(t){var e,n;try{try{for(var i=o(t.classList),r=i.next();!r.done;r=i.next()){var l=r.value;if(l.includes("stick"))return l.includes("-")?+l.split("-")[1]:Number.NaN}}catch(t){e={error:t}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(e)throw e.error}}}catch(t){return 0}return 0},t.prototype.tooltipMouseLeft=function(t){t.classList.contains("hovered")&&(isNaN(this.getStickyTime(t))||(t.classList.add("stayonhover"),t.classList.remove("hovered")))},t.prototype.tooltipMouseEnter=function(t){t.classList.contains("stayonhover")&&(isNaN(this.getStickyTime(t))||(t.classList.remove("stayonhover"),t.classList.add("hovered")))},t.ctorParameters=function(){return[{type:e.ElementRef}]},n([e.HostBinding("style.position")],t.prototype,"position",void 0),n([e.HostListener("mouseenter")],t.prototype,"mouseEnter",null),n([e.HostListener("click")],t.prototype,"click",null),n([e.HostListener("mouseleave")],t.prototype,"mouseLeave",null),t=n([e.Directive({selector:"[smart-tooltip-container]"})],t)}(),l=function(){function t(){var t=document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css",e.innerHTML="\n            .smart-tooltip-container {\n              position: relative;\n        }\n\n        .smart-tooltip {\n              position: absolute;\n              background-color: #333;\n              border-radius: 5px;\n              color: #eee;\n              padding: 10px 12px;\n              z-index: 100000;\n              top: 50%;\n              -webkit-transform: translate(-50%, -50%);\n              transform: translate(-50%, -50%);\n              left: 50%;\n              visibility: collapse;\n              /*transition: all .2s;*/\n              opacity: 0;\n              outline: none;\n        }\n\n        .smart-tooltip.left-t {\n              -webkit-transform: none;\n              transform: none;\n              right: calc(100% + 5px);\n              left: initial;\n              top: initial;\n              bottom: 5px;\n\n              \n        }\n\n        .smart-tooltip.left-b {\n              -webkit-transform: none;\n              transform: none;\n              right: calc(100% + 5px);\n              left: initial;\n              top: 5px;\n              bottom: initial;\n        }\n\n        .smart-tooltip.left {\n              right: calc(100% + 5px);\n              left: initial;\n              top: 50%;\n              -webkit-transform: translateY(-50%);\n              transform: translateY(-50%);\n        }\n\n        .smart-tooltip.right-b {\n              -webkit-transform: none;\n              transform: none;\n              left: calc(100% + 5px);\n              top: 5px;\n              right: initial;\n              bottom: initial;    \n        }\n\n        .smart-tooltip.right-t {\n              -webkit-transform: none;\n              transform: none;\n              /* display: none; */\n              left: calc(100% + 5px);\n              top: initial;\n              bottom: 5px;\n        }\n\n        .smart-tooltip.right {\n              left: calc(100% + 5px);\n              top: 50%;\n              bottom: initial;\n              right: initial;\n              -webkit-transform: translateY(-50%);\n              transform: translateY(-50%);\n        }\n\n        .smart-tooltip.bottom-r {\n              /* display: none; */\n              top: calc(100% + 5px);\n              bottom: initial;\n              left: 5px;\n              right:initial;\n              transform: none;\n        }\n        .smart-tooltip.bottom-l {\n              /* display: none; */\n              top: calc(100% + 5px);\n              bottom: initial;\n              right: 5px;\n              left:initial;\n              transform: none;\n        }\n        .smart-tooltip.bottom {\n              /* display: none; */\n              top: calc(100% + 5px);\n              bottom: initial;\n              left: 50%;\n              transform: translateX(-50%);\n        }\n\n        .smart-tooltip.top-r {\n              /* display: none; */\n              bottom: calc(100% + 5px);\n              top: initial;\n              left: 5px;\n              right:initial;\n              transform: none;\n        }\n        .smart-tooltip.top-l {\n              /* display: none; */\n              bottom: calc(100% + 5px);\n              top: initial;\n              right: 5px;\n              left: initial;\n              transform: none;\n        }\n        .smart-tooltip.top {\n              /* display: none; */\n              bottom: calc(100% + 5px);\n              top: initial;\n              left: 50%;\n              transform: translateX(-50%);\n        }\n\n        .smart-tooltip-container .smart-tooltip.overlayed{\n            \n              transform: none;\n              top:initial;\n              right:initial;\n              bottom:initial;\n              left:initial;\n        }\n    ",t.appendChild(e)}return t=n([e.NgModule({declarations:[r],imports:[],exports:[r]})],t)}();t.SmartTooltipAngularDirective=r,t.SmartTooltipAngularModule=l,t.SmartTooltipAngularService=i,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=smart-tooltip-angular.umd.min.js.map