@esri/calcite-components/dist/esm-es5/calcite-tooltip_2.entry.js

Web Components for Esri's Calcite Design System.

var __awaiter=this&&this.__awaiter||function(t,e,r,o){function i(t){return t instanceof r?t:new r((function(e){e(t)}))}return new(r||(r=Promise))((function(r,a){function n(t){try{p(o.next(t))}catch(e){a(e)}}function s(t){try{p(o["throw"](t))}catch(e){a(e)}}function p(t){t.done?r(t.value):i(t.value).then(n,s)}p((o=o.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var r={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},o,i,a,n;return n={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function s(t){return function(e){return p([t,e])}}function p(n){if(o)throw new TypeError("Generator is already executing.");while(r)try{if(o=1,i&&(a=n[0]&2?i["return"]:n[0]?i["throw"]||((a=i["return"])&&a.call(i),0):i.next)&&!(a=a.call(i,n[1])).done)return a;if(i=0,a)n=[n[0]&2,a.value];switch(n[0]){case 0:case 1:a=n;break;case 4:r.label++;return{value:n[1],done:false};case 5:r.label++;i=n[1];n=[0];continue;case 7:n=r.ops.pop();r.trys.pop();continue;default:if(!(a=r.trys,a=a.length>0&&a[a.length-1])&&(n[0]===6||n[0]===2)){r=0;continue}if(n[0]===3&&(!a||n[1]>a[0]&&n[1]<a[3])){r.label=n[1];break}if(n[0]===6&&r.label<a[1]){r.label=a[1];a=n;break}if(a&&r.label<a[2]){r.label=a[2];r.ops.push(n);break}if(a[2])r.ops.pop();r.trys.pop();continue}n=e.call(t,r)}catch(s){n=[6,s];i=0}finally{o=a=0}if(n[0]&5)throw n[1];return{value:n[0]?n[1]:void 0,done:true}}};import{r as registerInstance,h,H as Host,g as getElement}from"./index-8fd57462.js";import{d as getElementByAttributeId}from"./dom-d9ba1da4.js";import{g as getKey}from"./key-477fdfc4.js";import{g as guid}from"./guid-09142681.js";import{d as defaultOffsetDistance,u as updatePopper,c as createPopper,C as CSS$1}from"./popper-9e938e6c.js";var CSS={container:"container",arrow:"arrow"};var TOOLTIP_DELAY_MS=500;var TOOLTIP_REFERENCE="data-calcite-tooltip-reference";var ARIA_DESCRIBED_BY="aria-describedby";var calciteTooltipCss='@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:block;position:absolute;z-index:999;-webkit-transform:scale(0);transform:scale(0)}.calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:var(--calcite-border-radius)}:host([data-popper-placement^=bottom]) .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-popper-placement^=top]) .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-popper-placement^=left]) .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-popper-placement^=right]) .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-popper-placement]) .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:"";-webkit-box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-popper-placement^=top]) .arrow{bottom:-4px}:host([data-popper-placement^=bottom]) .arrow{top:-4px}:host([data-popper-placement^=left]) .arrow{right:-4px}:host([data-popper-placement^=right]) .arrow{left:-4px}.container{position:relative;background:var(--calcite-ui-foreground-1);max-width:300px;max-height:300px;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-direction:column;flex-direction:column;font-weight:500;color:var(--calcite-ui-text-1);padding:12px 16px;overflow:hidden;font-size:0.8125rem;line-height:1.5}:host([theme=dark]) .container{background:var(--calcite-ui-foreground-2)}';var CalciteTooltip=function(){function t(t){var e=this;registerInstance(this,t);this.offsetDistance=defaultOffsetDistance;this.offsetSkidding=0;this.open=false;this.placement="auto";this._referenceElement=this.getReferenceElement();this.guid="calcite-tooltip-"+guid();this.getId=function(){return e.el.id||e.guid};this.addReferences=function(){var t=e._referenceElement;if(!t){return}var r=e.getId();t.setAttribute(TOOLTIP_REFERENCE,r);t.setAttribute(ARIA_DESCRIBED_BY,r)};this.removeReferences=function(){var t=e._referenceElement;if(!t){return}t.removeAttribute(TOOLTIP_REFERENCE);t.removeAttribute(ARIA_DESCRIBED_BY)};this.show=function(){e.open=true};this.hide=function(){e.open=false}}t.prototype.offsetDistanceOffsetHandler=function(){this.reposition()};t.prototype.offsetSkiddingHandler=function(){this.reposition()};t.prototype.openHandler=function(){this.reposition()};t.prototype.placementHandler=function(){this.reposition()};t.prototype.referenceElementHandler=function(){this.removeReferences();this._referenceElement=this.getReferenceElement();this.addReferences();this.createPopper()};t.prototype.componentDidLoad=function(){this.addReferences();this.createPopper()};t.prototype.disconnectedCallback=function(){this.removeReferences();this.destroyPopper()};t.prototype.reposition=function(){return __awaiter(this,void 0,void 0,(function(){var t,e,r,o,i;return __generator(this,(function(a){t=this,e=t.popper,r=t.el,o=t.placement;i=this.getModifiers();e?updatePopper({el:r,modifiers:i,placement:o,popper:e}):this.createPopper();return[2]}))}))};t.prototype.getReferenceElement=function(){var t=this.referenceElement;return(typeof t==="string"?document.getElementById(t):t)||null};t.prototype.getModifiers=function(){var t=this,e=t.arrowEl,r=t.offsetDistance,o=t.offsetSkidding;var i={name:"arrow",enabled:true,options:{element:e}};var a={name:"offset",enabled:true,options:{offset:[o,r]}};return[i,a]};t.prototype.createPopper=function(){this.destroyPopper();var t=this,e=t.el,r=t.placement,o=t._referenceElement;var i=this.getModifiers();this.popper=createPopper({el:e,modifiers:i,placement:r,referenceEl:o})};t.prototype.destroyPopper=function(){var t=this.popper;if(t){t.destroy()}this.popper=null};t.prototype.render=function(){var t;var e=this;var r=this,o=r._referenceElement,i=r.label,a=r.open;var n=o&&a;var s=!n;return h(Host,{"aria-hidden":s.toString(),"aria-label":i,"calcite-hydrated-hidden":s,id:this.getId(),role:"tooltip"},h("div",{class:(t={},t[CSS$1.animation]=true,t[CSS$1.animationActive]=n,t)},h("div",{class:CSS.arrow,ref:function(t){return e.arrowEl=t}}),h("div",{class:CSS.container},h("slot",null))))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{offsetDistance:["offsetDistanceOffsetHandler"],offsetSkidding:["offsetSkiddingHandler"],open:["openHandler"],placement:["placementHandler"],referenceElement:["referenceElementHandler"]}},enumerable:false,configurable:true});return t}();CalciteTooltip.style=calciteTooltipCss;var CalciteTooltipManager=function(){function t(t){var e=this;registerInstance(this,t);this.hoverTimeouts=new WeakMap;this.selector="["+TOOLTIP_REFERENCE+"]";this.queryTooltip=function(t){return getElementByAttributeId(t.closest(e.selector),TOOLTIP_REFERENCE)};this.clearHoverTimeout=function(t){var r=e.hoverTimeouts;if(r.has(t)){window.clearTimeout(r.get(t))}};this.closeExistingTooltip=function(){var t=e.tooltipEl;if(t){e.toggleTooltip(t,false)}};this.focusTooltip=function(t){var r=t.tooltip,o=t.value;e.closeExistingTooltip();if(o){e.clearHoverTimeout(r)}e.toggleTooltip(r,o)};this.toggleTooltip=function(t,r){t.open=r;if(r){e.tooltipEl=t}};this.hoverToggle=function(t){var r=t.tooltip,o=t.value;var i=e.hoverTimeouts;i.delete(r);if(o){e.closeExistingTooltip()}e.toggleTooltip(r,o)};this.hoverTooltip=function(t){var r=t.tooltip,o=t.value;e.clearHoverTimeout(r);var i=e.hoverTimeouts;var a=window.setTimeout((function(){return e.hoverToggle({tooltip:r,value:o})}),TOOLTIP_DELAY_MS);i.set(r,a)};this.activeTooltipHover=function(t){var r=e,o=r.tooltipEl,i=r.hoverTimeouts;if(!o||!i.has(o)){return}var a=t.composedPath().includes(o);a?e.clearHoverTimeout(o):e.hoverTooltip({tooltip:o,value:false})};this.hoverEvent=function(t,r){var o=e.queryTooltip(t.target);e.activeTooltipHover(t);if(!o){return}e.hoverTooltip({tooltip:o,value:r})};this.focusEvent=function(t,r){var o=e.queryTooltip(t.target);if(!o){return}e.focusTooltip({tooltip:o,value:r})}}t.prototype.render=function(){return h(Host,null)};t.prototype.keyUpHandler=function(t){if(getKey(t.key)==="Escape"){var e=this.tooltipEl;if(e){this.clearHoverTimeout(e);this.toggleTooltip(e,false)}}};t.prototype.mouseEnterShow=function(t){this.hoverEvent(t,true)};t.prototype.mouseLeaveHide=function(t){this.hoverEvent(t,false)};t.prototype.focusShow=function(t){this.focusEvent(t,true)};t.prototype.blurHide=function(t){this.focusEvent(t,false)};return t}();export{CalciteTooltip as calcite_tooltip,CalciteTooltipManager as calcite_tooltip_manager};