@sandlada/mdc/build/components/tooltip-box/tooltip-box.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{customElement as e}from"../../node_modules/@lit/reactive-element/decorators/custom-element.js";import{property as t}from"../../node_modules/@lit/reactive-element/decorators/property.js";import{state as n}from"../../node_modules/@lit/reactive-element/decorators/state.js";import{queryAssignedElements as r}from"../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";import"../../node_modules/lit/decorators.js";import{html as i}from"../../node_modules/lit-html/lit-html.js";import{LitElement as a}from"../../node_modules/lit-element/lit-element.js";import"../../node_modules/lit/index.js";import{composeMixin as o}from"../../utils/compose-mixin/compose-mixin.js";import s from"../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{mixinDelegatesAria as c}from"../../utils/aria/delegate.js";import{autoUpdate as l,computePosition as u,flip as d,offset as f,shift as p}from"../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{TOOLTIP_BOX_HIDDEN_EVENT as m,TOOLTIP_BOX_HIDING_EVENT as h,TOOLTIP_BOX_SHOWING_EVENT as g,TOOLTIP_BOX_SHOWN_EVENT as _}from"./tooltip-box.interface.js";import{TooltipBoxStyles as v}from"./tooltip-box.style.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
let y=class extends o(c)(a){static{this.styles=v}get tooltipElement(){return this.tooltipSlotElements[0]}get anchorElement(){return this.anchorSlotElements[0]}constructor(){super(),this.placement=`bottom`,this.offset=8,this.showDelay=400,this.hideDelay=0,this.trigger=`hover`,this.open=!1,this.disableFlip=!1,this.quick=!1,this.hasSlottedTooltip=!1,this.showTimeoutId=null,this.hideTimeoutId=null,this.cleanupAutoUpdate=null,this.generation=0,this.handlePointerEnter=()=>{this.trigger===`hover`&&this.scheduleShow()},this.handlePointerLeave=()=>{this.trigger===`hover`&&this.scheduleHide()},this.handleFocusIn=()=>{this.trigger===`focus`&&this.scheduleShow()},this.handleFocusOut=()=>{this.trigger===`focus`&&this.scheduleHide()},this.handleKeyDown=e=>{e.key===`Escape`&&this.open&&this.hide()}}connectedCallback(){super.connectedCallback(),this.addEventListener(`pointerenter`,this.handlePointerEnter),this.addEventListener(`pointerleave`,this.handlePointerLeave),this.addEventListener(`focusin`,this.handleFocusIn),this.addEventListener(`focusout`,this.handleFocusOut),document.addEventListener(`keydown`,this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.clearShowTimeout(),this.clearHideTimeout(),this.stopPositionTracking(),this.removeEventListener(`pointerenter`,this.handlePointerEnter),this.removeEventListener(`pointerleave`,this.handlePointerLeave),this.removeEventListener(`focusin`,this.handleFocusIn),this.removeEventListener(`focusout`,this.handleFocusOut),document.removeEventListener(`keydown`,this.handleKeyDown)}render(){return i`<div part="anchor" class="anchor"><slot></slot></div><slot name="tooltip" @slotchange="${this.handleTooltipSlotChange}"></slot>`}async show(){if(this.open)return;let e=++this.generation,t=new CustomEvent(g,{bubbles:!0,composed:!0,cancelable:!0,detail:{tooltipBox:this}});if(this.dispatchEvent(t),t.defaultPrevented){this.generation--;return}this.open=!0;let n=this.tooltipElement;n&&(n.setAttribute(`open`,``),this.startPositionTracking(),this.quick||await this.animateTooltip(`open`,e),e===this.generation&&this.dispatchEvent(new CustomEvent(_,{bubbles:!0,composed:!0,detail:{tooltipBox:this}})))}async hide(){if(!this.open)return;let e=++this.generation,t=new CustomEvent(h,{bubbles:!0,composed:!0,cancelable:!0,detail:{tooltipBox:this}});if(this.dispatchEvent(t),t.defaultPrevented){this.generation--;return}if(this.quick||await this.animateTooltip(`close`,e),e!==this.generation)return;this.open=!1;let n=this.tooltipElement;n&&n.removeAttribute(`open`),this.stopPositionTracking(),this.dispatchEvent(new CustomEvent(m,{bubbles:!0,composed:!0,detail:{tooltipBox:this}}))}handleTooltipSlotChange(e){let t=e.target;this.hasSlottedTooltip=t.assignedElements().length>0}scheduleShow(){this.clearHideTimeout(),!this.open&&(this.showTimeoutId=setTimeout(()=>{this.showTimeoutId=null,this.show()},this.showDelay))}scheduleHide(){this.clearShowTimeout(),this.open&&(this.hideTimeoutId=setTimeout(()=>{this.hideTimeoutId=null,this.hide()},this.hideDelay))}clearShowTimeout(){this.showTimeoutId!==null&&(clearTimeout(this.showTimeoutId),this.showTimeoutId=null)}clearHideTimeout(){this.hideTimeoutId!==null&&(clearTimeout(this.hideTimeoutId),this.hideTimeoutId=null)}startPositionTracking(){this.stopPositionTracking();let e=this.anchorElement,t=this.tooltipElement;if(!e||!t)return;let n=t.style;n.setProperty(`position`,`fixed`,`important`),n.setProperty(`left`,`0`,`important`),n.setProperty(`top`,`0`,`important`),n.setProperty(`right`,`auto`,`important`),n.setProperty(`bottom`,`auto`,`important`),n.setProperty(`transform`,`none`,`important`),n.setProperty(`margin`,`0`,`important`),this.cleanupAutoUpdate=l(e,t,()=>{this.updatePosition()})}stopPositionTracking(){this.cleanupAutoUpdate?.(),this.cleanupAutoUpdate=null;let e=this.tooltipElement;if(e){let t=e.style;t.removeProperty(`position`),t.removeProperty(`left`),t.removeProperty(`top`),t.removeProperty(`right`),t.removeProperty(`bottom`),t.removeProperty(`transform`),t.removeProperty(`margin`)}}async updatePosition(){let e=this.anchorElement,t=this.tooltipElement;if(!e||!t)return;let n=[f(this.offset),...this.disableFlip?[]:[d()],p({padding:8})],{x:r,y:i}=await u(e,t,{placement:this.placement,middleware:n});t.style.setProperty(`left`,`${r}px`,`important`),t.style.setProperty(`top`,`${i}px`,`important`)}async animateTooltip(e,t){let n=this.tooltipElement;if(!n)return;let r=this.placement.split(`-`)[0],i;switch(r){case`top`:i=`translateY(10px)`;break;case`bottom`:i=`translateY(-10px)`;break;case`left`:i=`translateX(10px)`;break;case`right`:i=`translateX(-10px)`;break;default:i=`translateY(-10px)`}let a=e===`open`?[{opacity:0,transform:i},{opacity:1,transform:`none`}]:[{opacity:1,transform:`none`},{opacity:0,transform:i}],o=n.animate(a,{duration:150,easing:`ease-out`,fill:`forwards`});try{await o.finished}catch{}finally{o.commitStyles(),o.cancel()}}};s([t({type:String,reflect:!0})],y.prototype,`placement`,void 0),s([t({type:Number})],y.prototype,`offset`,void 0),s([t({type:Number,attribute:`show-delay`})],y.prototype,`showDelay`,void 0),s([t({type:Number,attribute:`hide-delay`})],y.prototype,`hideDelay`,void 0),s([t({type:String,reflect:!0})],y.prototype,`trigger`,void 0),s([t({type:Boolean,reflect:!0})],y.prototype,`open`,void 0),s([t({type:Boolean,reflect:!0,attribute:`disable-flip`})],y.prototype,`disableFlip`,void 0),s([t({type:Boolean,reflect:!0})],y.prototype,`quick`,void 0),s([n()],y.prototype,`hasSlottedTooltip`,void 0),s([r({slot:`tooltip`,flatten:!0})],y.prototype,`tooltipSlotElements`,void 0),s([r({flatten:!0})],y.prototype,`anchorSlotElements`,void 0),y=s([e(`mdc-tooltip-box`)],y);export{y as MDCTooltipBox};
//# sourceMappingURL=tooltip-box.js.map