@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(e,t,r,o){function i(e){return e instanceof r?e:new r((function(t){t(e)}))}return new(r||(r=Promise))((function(r,a){function n(e){try{l(o.next(e))}catch(t){a(t)}}function s(e){try{l(o["throw"](e))}catch(t){a(t)}}function l(e){e.done?r(e.value):i(e.value).then(n,s)}l((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){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(e){return function(t){return l([e,t])}}function l(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=t.call(e,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-aa8afca4.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-d89fb7b0.js";import{q as queryElementRoots}from"./dom-466af3c7.js";import{g as getKey}from"./key-ec82f942.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:0.25rem}: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-color:var(--calcite-ui-foreground-1);display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-direction:column;flex-direction:column;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;overflow:hidden;font-size:var(--calcite-font-size--2);line-height:1.375;border-radius:0.25rem;max-width:20rem;max-height:20rem}.calcite-popper-anim{background-color:var(--calcite-ui-foreground-1);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);border-radius:0.25rem}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}';var CalciteTooltip=function(){function e(e){var t=this;registerInstance(this,e);this.offsetDistance=defaultOffsetDistance;this.offsetSkidding=0;this.open=false;this.overlayPositioning="absolute";this.placement="auto";this._referenceElement=this.getReferenceElement();this.guid="calcite-tooltip-"+guid();this.getId=function(){return t.el.id||t.guid};this.addReferences=function(){var e=t._referenceElement;if(!e){return}var r=t.getId();e.setAttribute(TOOLTIP_REFERENCE,r);e.setAttribute(ARIA_DESCRIBED_BY,r)};this.removeReferences=function(){var e=t._referenceElement;if(!e){return}e.removeAttribute(TOOLTIP_REFERENCE);e.removeAttribute(ARIA_DESCRIBED_BY)};this.show=function(){t.open=true};this.hide=function(){t.open=false}}e.prototype.offsetDistanceOffsetHandler=function(){this.reposition()};e.prototype.offsetSkiddingHandler=function(){this.reposition()};e.prototype.openHandler=function(){this.reposition()};e.prototype.placementHandler=function(){this.reposition()};e.prototype.referenceElementHandler=function(){this.removeReferences();this._referenceElement=this.getReferenceElement();this.addReferences();this.createPopper()};e.prototype.componentDidLoad=function(){this.addReferences();this.createPopper()};e.prototype.disconnectedCallback=function(){this.removeReferences();this.destroyPopper()};e.prototype.reposition=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,r,o,i;return __generator(this,(function(a){e=this,t=e.popper,r=e.el,o=e.placement;i=this.getModifiers();t?updatePopper({el:r,modifiers:i,placement:o,popper:t}):this.createPopper();return[2]}))}))};e.prototype.getReferenceElement=function(){var e=this,t=e.referenceElement,r=e.el;return(typeof t==="string"?queryElementRoots(r,"#"+t):t)||null};e.prototype.getModifiers=function(){var e=this,t=e.arrowEl,r=e.offsetDistance,o=e.offsetSkidding;var i={name:"arrow",enabled:true,options:{element:t}};var a={name:"offset",enabled:true,options:{offset:[o,r]}};return[i,a]};e.prototype.createPopper=function(){this.destroyPopper();var e=this,t=e.el,r=e.placement,o=e._referenceElement,i=e.overlayPositioning;var a=this.getModifiers();this.popper=createPopper({el:t,modifiers:a,placement:r,overlayPositioning:i,referenceEl:o})};e.prototype.destroyPopper=function(){var e=this.popper;if(e){e.destroy()}this.popper=null};e.prototype.render=function(){var e;var t=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:(e={},e[CSS$1.animation]=true,e[CSS$1.animationActive]=n,e)},h("div",{class:CSS.arrow,ref:function(e){return t.arrowEl=e}}),h("div",{class:CSS.container},h("slot",null))))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{offsetDistance:["offsetDistanceOffsetHandler"],offsetSkidding:["offsetSkiddingHandler"],open:["openHandler"],placement:["placementHandler"],referenceElement:["referenceElementHandler"]}},enumerable:false,configurable:true});return e}();CalciteTooltip.style=calciteTooltipCss;var CalciteTooltipManager=function(){function e(e){var t=this;registerInstance(this,e);this.hoverTimeouts=new WeakMap;this.selector="["+TOOLTIP_REFERENCE+"]";this.queryTooltip=function(e){var r;var o=t,i=o.selector,a=o.el;var n=(r=e.closest(i))===null||r===void 0?void 0:r.getAttribute(TOOLTIP_REFERENCE);return queryElementRoots(a,"#"+n)};this.clearHoverTimeout=function(e){var r=t.hoverTimeouts;if(r.has(e)){window.clearTimeout(r.get(e));r.delete(e)}};this.closeExistingTooltip=function(){var e=t.tooltipEl;if(e){t.toggleTooltip(e,false)}};this.focusTooltip=function(e){var r=e.tooltip,o=e.value;t.closeExistingTooltip();if(o){t.clearHoverTimeout(r)}t.toggleTooltip(r,o)};this.toggleTooltip=function(e,r){e.open=r;if(r){t.tooltipEl=e}};this.hoverToggle=function(e){var r=e.tooltip,o=e.value;var i=t.hoverTimeouts;i.delete(r);if(o){t.closeExistingTooltip()}t.toggleTooltip(r,o)};this.hoverTooltip=function(e){var r=e.tooltip,o=e.value;t.clearHoverTimeout(r);var i=t.hoverTimeouts;var a=window.setTimeout((function(){return t.hoverToggle({tooltip:r,value:o})}),TOOLTIP_DELAY_MS);i.set(r,a)};this.activeTooltipHover=function(e){var r=t,o=r.tooltipEl,i=r.hoverTimeouts;if(!o){return}if(e.composedPath().includes(o)){t.clearHoverTimeout(o)}else if(!i.has(o)){t.hoverTooltip({tooltip:o,value:false})}};this.hoverEvent=function(e,r){var o=t.queryTooltip(e.target);t.activeTooltipHover(e);if(!o){return}t.hoverTooltip({tooltip:o,value:r})};this.focusEvent=function(e,r){var o=t.queryTooltip(e.target);if(!o||o===t.clickedTooltip){t.clickedTooltip=null;return}t.focusTooltip({tooltip:o,value:r})}}e.prototype.render=function(){return h("slot",null)};e.prototype.keyUpHandler=function(e){if(getKey(e.key)==="Escape"){var t=this.tooltipEl;if(t){this.clearHoverTimeout(t);this.toggleTooltip(t,false)}}};e.prototype.mouseEnterShow=function(e){this.hoverEvent(e,true)};e.prototype.mouseLeaveHide=function(e){this.hoverEvent(e,false)};e.prototype.clickHandler=function(e){var t=this.queryTooltip(e.target);this.clickedTooltip=t;if(t){this.toggleTooltip(t,false)}};e.prototype.focusShow=function(e){this.focusEvent(e,true)};e.prototype.blurHide=function(e){this.focusEvent(e,false)};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();export{CalciteTooltip as calcite_tooltip,CalciteTooltipManager as calcite_tooltip_manager};