@esri/calcite-components/dist/cdn/GE6D53P3.js

Web Components for Esri's Calcite Design System.

/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import{a as x}from"./CXLQ2GUG.js";import{a as L}from"./7IMDQ6AR.js";import{c as h,e as C,f as O,g as R,h as S,i as p}from"./VNGNPJ2I.js";import{a as H}from"./5LQLL6F3.js";import"./HXIMHC6U.js";import"./M6OXKYRM.js";import"./QUTTHRH3.js";import"./MNIRD7Q7.js";import{h as y,j as k}from"./ZQBZ5QPB.js";import{a as b}from"./CIYXQ5G6.js";import{C as c,D as d,E as T,F as l,I as w,Q as E,g as v,h as g,p as r}from"./G7AHLVJ5.js";var P={positionContainer:"position-container",container:"container"},U="calcite-tooltip",F={host:n=>`${U}-${n}`},m=300,N=m/3,B=m*1.5,A="aria-describedby";function D(n){let{referenceElement:e}=n;return(typeof e=="string"?k(n,{id:e}):e)||null}var f=class{constructor(){this.registeredElements=new WeakMap,this.registeredShadowRootCounts=new WeakMap,this.hoverOpenTimeout=null,this.hoverCloseTimeout=null,this.activeTooltip=null,this.registeredElementCount=0,this.clickedTooltip=null,this.hoveredTooltip=null,this.queryTooltip=e=>{let{registeredElements:t}=this,i=e.find(o=>t.has(o));return t.get(i)},this.keyDownHandler=e=>{if(e.key==="Escape"&&!e.defaultPrevented){let{activeTooltip:t}=this;if(t?.open){this.clearHoverTimeout(),this.closeActiveTooltip();let i=D(t),o=e.composedPath();(i instanceof Element&&o.includes(i)||o.includes(t))&&e.preventDefault()}}},this.pointerLeaveHandler=e=>{e.defaultPrevented||(this.clearHoverTimeout(),this.closeHoveredTooltip())},this.pointerMoveHandler=e=>{if(e.defaultPrevented){this.closeHoveredTooltip();return}let t=e.composedPath(),i=this.queryTooltip(t);if(this.pathHasOpenTooltip(i,t)){this.clearHoverTimeout();return}i!==this.clickedTooltip&&(i!==this.hoveredTooltip&&this.clearHoverOpenTimeout(),this.hoveredTooltip=i,i?this.openHoveredTooltip(i):this.activeTooltip?.open&&this.closeHoveredTooltip(),this.clickedTooltip=null)},this.clickHandler=e=>{if(e.defaultPrevented)return;this.clickedTooltip=null;let t=e.composedPath(),i=this.queryTooltip(t);if(this.pathHasOpenTooltip(i,t)){this.clearHoverTimeout();return}if(this.closeActiveTooltip(),!!i){if(this.clearHoverTimeout(),i.closeOnClick){this.clickedTooltip=i,this.toggleTooltip(i,!1);return}this.toggleTooltip(i,!0)}},this.blurHandler=()=>{this.closeActiveTooltip()},this.focusInHandler=e=>{if(e.defaultPrevented)return;let t=e.composedPath(),i=this.queryTooltip(t);if(this.pathHasOpenTooltip(i,t)){this.clearHoverTimeout();return}i!==this.clickedTooltip&&(this.clickedTooltip=null,this.closeTooltipIfNotActive(i),i&&this.toggleFocusedTooltip(i,!0))},this.openHoveredTooltip=e=>{this.hoverOpenTimeout=window.setTimeout(()=>{this.hoverOpenTimeout===null||e!==this.hoveredTooltip||(this.clearHoverCloseTimeout(),this.closeTooltipIfNotActive(e),this.toggleTooltip(e,!0))},this.activeTooltip?.open?N:m)},this.closeHoveredTooltip=()=>{this.hoverCloseTimeout=window.setTimeout(()=>{this.hoverCloseTimeout!==null&&this.closeActiveTooltip()},B)}}registerElement(e,t){this.registeredElementCount++,this.registeredElements.set(e,t);let i=this.getReferenceElShadowRootNode(e);i&&this.registerShadowRoot(i),this.registeredElementCount===1&&this.addListeners()}unregisterElement(e){let t=this.getReferenceElShadowRootNode(e);t&&this.unregisterShadowRoot(t),this.registeredElements.delete(e)&&this.registeredElementCount--,this.registeredElementCount===0&&this.removeListeners()}pathHasOpenTooltip(e,t){let{activeTooltip:i}=this;return i?.open&&t.includes(i)||e?.open&&t.includes(e)}addShadowListeners(e){e.addEventListener("focusin",this.focusInHandler)}removeShadowListeners(e){e.removeEventListener("focusin",this.focusInHandler)}addListeners(){window.addEventListener("keydown",this.keyDownHandler),window.addEventListener("pointermove",this.pointerMoveHandler),window.addEventListener("click",this.clickHandler),window.addEventListener("focusin",this.focusInHandler),window.addEventListener("blur",this.blurHandler),document.addEventListener("pointerleave",this.pointerLeaveHandler)}removeListeners(){window.removeEventListener("keydown",this.keyDownHandler),window.removeEventListener("pointermove",this.pointerMoveHandler),window.removeEventListener("click",this.clickHandler),window.removeEventListener("focusin",this.focusInHandler),window.removeEventListener("blur",this.blurHandler),document.removeEventListener("pointerleave",this.pointerLeaveHandler)}clearHoverOpenTimeout(){window.clearTimeout(this.hoverOpenTimeout),this.hoverOpenTimeout=null}clearHoverCloseTimeout(){window.clearTimeout(this.hoverCloseTimeout),this.hoverCloseTimeout=null}clearHoverTimeout(){this.clearHoverOpenTimeout(),this.clearHoverCloseTimeout()}closeTooltipIfNotActive(e){this.activeTooltip!==e&&this.closeActiveTooltip()}closeActiveTooltip(){let{activeTooltip:e}=this;e?.open&&this.toggleTooltip(e,!1)}toggleFocusedTooltip(e,t){t&&this.clearHoverTimeout(),this.toggleTooltip(e,t)}toggleTooltip(e,t){e.open=t,this.activeTooltip=t?e:null}registerShadowRoot(e){let{registeredShadowRootCounts:t}=this,i=t.get(e),o=Math.min((typeof i=="number"?i:0)+1,1);o===1&&this.addShadowListeners(e),t.set(e,o)}unregisterShadowRoot(e){let{registeredShadowRootCounts:t}=this,i=t.get(e),o=Math.max((typeof i=="number"?i:1)-1,0);o===0&&this.removeShadowListeners(e),t.set(e,o)}getReferenceElShadowRootNode(e){return e instanceof Element?y(e):null}},M=v`:host{display:contents}:host([top-layer-disabled]){--calcite-floating-ui-z-index: var(--calcite-z-index-tooltip)}.position-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.position-container{opacity:0;inset-block-start:0;left:0}}.position-container{max-inline-size:var(--calcite-tooltip-max-size-x, 20rem);max-block-size:20rem}.position-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.position-container:popover-open{display:block}.position-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.position-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.position-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.position-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.position-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.calcite-floating-ui-arrow{pointer-events:none;position:absolute;z-index:calc(var(--calcite-z-index) * -1);fill:var(--calcite-color-foreground-1)}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-color-border-3)}.container{position:relative;overflow:hidden;padding:.75rem 1rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-medium);word-wrap:break-word;word-break:break-word;border-radius:var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round));color:var(--calcite-tooltip-text-color, var(--calcite-color-text-1));text-align:start}.position-container .calcite-floating-ui-anim{border-width:1px;border-style:solid;background-color:var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-tooltip-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round))}.calcite-floating-ui-arrow{fill:var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1))}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-tooltip-border-color, var(--calcite-color-border-3))}:host([hidden]){display:none}[hidden]{display:none}`,I=new f,u=class extends T{constructor(){super(...arguments),this.arrowRef=c(),this.guid=F.host(b()),this.transitionProp="opacity",this.transitionRef=c(),this.topLayer=L({disabledOverride:()=>this.open&&!this.referenceEl,target:()=>this.floatingEl})(this),this.floatingLayout="vertical",this.closeOnClick=!1,this.offsetDistance=p,this.offsetSkidding=0,this.open=!1,this.overlayPositioning="absolute",this.placement="auto",this.topLayerDisabled=!1,this.calciteTooltipBeforeClose=r({cancelable:!1}),this.calciteTooltipBeforeOpen=r({cancelable:!1}),this.calciteTooltipClose=r({cancelable:!1}),this.calciteTooltipOpen=r({cancelable:!1})}static{this.properties={floatingLayout:[16,{},{state:!0}],referenceEl:[16,{},{state:!0}],closeOnClick:[7,{},{reflect:!0,type:Boolean}],label:1,offsetDistance:[11,{},{type:Number,reflect:!0}],offsetSkidding:[11,{},{reflect:!0,type:Number}],open:[7,{},{reflect:!0,type:Boolean}],overlayPositioning:[3,{},{reflect:!0}],placement:[3,{},{reflect:!0}],referenceElement:1,topLayerDisabled:[7,{},{reflect:!0,type:Boolean}]}}static{this.styles=M}async reposition(e=!1){let{referenceEl:t,placement:i,overlayPositioning:o,offsetDistance:s,offsetSkidding:a,arrowRef:z,floatingEl:_}=this;return C(this,{floatingEl:_,referenceEl:t,overlayPositioning:o,placement:i,offsetDistance:s,offsetSkidding:a,arrowEl:z.value,type:"tooltip"},e)}connectedCallback(){super.connectedCallback(),this.setUpReferenceElement(!0)}willUpdate(e){(e.has("offsetDistance")&&(this.hasUpdated||this.offsetDistance!==p)||e.has("offsetSkidding")&&(this.hasUpdated||this.offsetSkidding!==0)||e.has("overlayPositioning")&&(this.hasUpdated||this.overlayPositioning!=="absolute")||e.has("placement")&&(this.hasUpdated||this.placement!=="auto"))&&this.reposition(!0),e.has("open")&&(this.hasUpdated||this.open!==!1)&&this.openHandler(),e.has("referenceElement")&&(this.setUpReferenceElement(),!this.referenceElement&&this.open&&this.topLayer.hide())}loaded(){this.referenceElement&&!this.referenceEl&&this.setUpReferenceElement()}disconnectedCallback(){super.disconnectedCallback(),this.removeReferences(),S(this)}openHandler(){H(this),this.reposition(!0)}onBeforeOpen(){this.calciteTooltipBeforeOpen.emit(),this.topLayer.show()}onOpen(){this.calciteTooltipOpen.emit()}onBeforeClose(){this.calciteTooltipBeforeClose.emit()}onClose(){this.calciteTooltipClose.emit(),O(this),this.topLayer.hide()}setFloatingEl(e){this.floatingEl=e,e&&requestAnimationFrame(()=>this.setUpReferenceElement())}setUpReferenceElement(e=!0){this.removeReferences(),this.referenceEl=D(this.el),R(this);let{el:t,referenceElement:i,referenceEl:o}=this;e&&i&&!o&&console.warn(`${t.tagName}: reference-element id "${i}" was not found.`,{el:t}),this.addReferences()}getId(){return this.el.id||this.guid}addReferences(){let{referenceEl:e}=this;if(!e)return;let t=this.getId();"setAttribute"in e&&e.setAttribute(A,t),I.registerElement(e,this.el)}removeReferences(){let{referenceEl:e}=this;e&&("removeAttribute"in e&&e.removeAttribute(A),I.unregisterElement(e))}render(){let{referenceEl:e,label:t,open:i,floatingLayout:o}=this,s=e&&i,a=!s;return this.el.inert=a,this.el.ariaLabel=t,this.el.ariaLive="polite",w(this.el,"id",this.getId()),this.el.role="tooltip",g`<div class=${l(P.positionContainer)} popover=manual ${d(this.setFloatingEl)}><div class=${l({[h.animation]:!0,[h.animationActive]:s})} ${d(this.transitionRef)}>${x({floatingLayout:o,ref:this.arrowRef})}<div class=${l(P.container)}><slot></slot></div></div></div>`}};E("calcite-tooltip",u);export{u as Tooltip};