finpro/dist/chunk-YZK6PJBE.js

Design System

import{a as f,b as u,c as g,d as b,e as w,g as y,h as x}from"./chunk-MZYIQ6EQ.js";import{a as r}from"./chunk-23UFIOHV.js";import{a as m}from"./chunk-2M6HTKCC.js";import{a as n,b as p,f as d,g as h,h as c,i as v,j as i}from"./chunk-GBPY57YZ.js";import{a as e}from"./chunk-NZ3RGSR6.js";var z=n`.trigger{display:inline-block;cursor:pointer}.tooltip{position:fixed;box-sizing:border-box;border:0;background-color:var(--fp-color-secondary);color:var(--fp-color-content-primary-contrast);border-radius:var(--fp-size-3xs);pointer-events:none;font:var(--fp-font-title-3-regular);padding:var(--fp-size-m);z-index:999;width:max-content;hyphens:auto;--max-viewport:calc(100vw - var(--fp-size-s));--tooltip-max-width:424px;max-width:min(var(--max-viewport),var(--tooltip-max-width))}.tooltip:not(.visible){visibility:hidden}.arrow{position:absolute;background-color:var(--fp-color-secondary);width:var(--fp-size-2xs);height:var(--fp-size-2xs);transform:rotate(45deg)}`,E=z;var t=class extends d{constructor(){super(...arguments);this.placement="top";this._visible=!1}static get styles(){return[E]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeyDown),this.popoverAutoUpdateCleanup&&this.popoverAutoUpdateCleanup()}setTooltip(){this.popoverAutoUpdateCleanup=y(this.trigger,this.tooltip,()=>{x(this.trigger,this.tooltip,{placement:this.placement,strategy:"fixed",middleware:[b(8),w({padding:5}),u(),g(),f({element:this.arrow,padding:5})]}).then(({x:o,y:k,placement:C,middlewareData:s})=>{if(Object.assign(this.tooltip.style,{left:`${o}px`,top:`${k}px`}),s.arrow){let{x:a,y:l}=s.arrow;Object.assign(this.arrow.style,{left:a!=null?`${a}px`:"",top:l!=null?`${l}px`:""});let $={top:"bottom",right:"left",bottom:"top",left:"right"},D=C.split("-")[0],S=$[D];this.arrow.style.setProperty(S,"-4px")}})})}show(){this._visible=!0,this.setTooltip(),this.onShow("Show event fired!")}hide(){this._visible=!1,this.onHide("Hide event fired!")}get visible(){return this._visible}handleKeyDown(o){this._visible&&o.key==="Escape"&&(o.stopPropagation(),this.hide())}render(){let o=m({tooltip:!0,visible:this._visible});return p`<slot
        class="trigger"
        name="tooltip-trigger"
        aria-describedby="tooltip"
        @focus=${{handleEvent:()=>this.show(),capture:!0}}
        @blur=${{handleEvent:()=>this.hide(),capture:!0}}
        @mouseover=${()=>this.show()}
        @mouseleave=${()=>this.hide()}
      >
      </slot>
      <div class=${o}>
        <slot id="tooltip" role="tooltip" aria-live=${this._visible?"polite":"off"}></slot>
        <div class="arrow" aria-hidden="true"></div>
      </div>`}};e([i(".tooltip")],t.prototype,"tooltip",2),e([i(".trigger")],t.prototype,"trigger",2),e([i(".arrow")],t.prototype,"arrow",2),e([c({type:String})],t.prototype,"placement",2),e([v()],t.prototype,"_visible",2),e([r("fp-tooltip-show")],t.prototype,"onShow",2),e([r("fp-tooltip-hide")],t.prototype,"onHide",2),t=e([h("fp-tooltip")],t);export{t as a};
//# sourceMappingURL=chunk-YZK6PJBE.js.map