finpro/dist/chunk-XTM7VFTE.js

Design System

import{a as m,b as u,c as g,d as b,e as w,f as y,g as E,h as _}from"./chunk-MZYIQ6EQ.js";import{a as n}from"./chunk-23UFIOHV.js";import{a as f}from"./chunk-2M6HTKCC.js";import{a as c}from"./chunk-JA3VZI2D.js";import{a as d,b as h,g as v,h as i,i as s,j as a}from"./chunk-GBPY57YZ.js";import{a as r}from"./chunk-NZ3RGSR6.js";var O=d`.popover{--arrow-display:var(--fp-popover-arrow-display,none);--background-color:var(--fp-popover-background-color,var(--fp-color-primary-background));--border-color:var(--fp-popover-border-color,var(--fp-color-primary-hover));--padding:var(--fp-popover-padding,var(--fp-size-m));--border-radius:var(--fp-popover-border-radius,var(--fp-size-3xs));--position:var(--fp-popover-position,fixed);position:var(--position);box-sizing:border-box;border:1px solid var(--border-color);padding:var(--padding);border-radius:var(--border-radius);z-index:999;width:max-content;hyphens:auto;background-color:var(--background-color);font:var(--fp-font-title-3-regular);color:var(--fp-color-content-primary)}.popover:not(.visible){visibility:hidden}.arrow{--arrow-rotation:45deg;box-sizing:border-box;display:var(--arrow-display);position:absolute;background-color:var(--background-color);width:var(--fp-size-2xs);height:var(--fp-size-2xs);transform:rotate(var(--arrow-rotation));border:1px solid var(--border-color);border-bottom:0;border-right:0}`,x=O;var t=class extends c{constructor(){super(...arguments);this.placement="bottom";this.fitSize=!1;this.offset=8;this._visible=!1;this._handleClickOutside=e=>{let o=e.composedPath();!o.includes(this._target)&&!o.includes(this)&&this.hide()}}static get styles(){return[x]}connectedCallback(){super.connectedCallback(),this._handlePopoverShowEvent=this._handlePopoverShowEvent.bind(this),this._handleKeyupEvent=this._handleKeyupEvent.bind(this),this._handleClickOutside=this._handleClickOutside.bind(this)}disconnectedCallback(){super.disconnectedCallback(),this.popoverAutoUpdateCleanup&&this.popoverAutoUpdateCleanup()}getMiddleware(){let e=[];return e.push(b(this.offset),g(),u(),w({padding:4})),this.fitSize&&e.push(y({apply(o){o.elements.floating&&o.elements.reference&&Object.assign(o.elements.floating.style,{width:`${o.elements.reference.getBoundingClientRect().width}px`})}})),e.push(m({element:this.arrow,padding:5})),e}setPopover(){this.target&&(this.popoverAutoUpdateCleanup=E(this.target,this.popover,()=>{_(this.target,this.popover,{placement:this.placement,strategy:"fixed",middleware:this.getMiddleware()}).then(({x:e,y:o,placement:k,middlewareData:p})=>{if(Object.assign(this.popover.style,{left:`${e}px`,top:`${o}px`}),p.arrow){let{x:C,y:M}=p.arrow;Object.assign(this.arrow.style,{left:`${C}px`,top:`${M}px`});let S={top:"bottom",right:"left",bottom:"top",left:"right"},z={top:"225deg",right:"315deg",bottom:"45deg",left:"135deg"},l=k.split("-")[0],L=S[l];this.arrow.style.setProperty(L,"-5px"),this.arrow.style.setProperty("--arrow-rotation",z[l])}})}))}get target(){return this._target}set target(e){typeof e=="string"?this._target=document.getElementById(e):e instanceof Element?this._target=e:console.warn("FpPopover target only accepts an Element instance or a string id of a DOM element.")}show(){this._visible=!0,this.setPopover(),this.onFpPopoverShow(""),document.addEventListener("click",this._handleClickOutside),document.addEventListener("keyup",this._handleKeyupEvent),document.addEventListener("fp-popover-show",this._handlePopoverShowEvent)}hide(){this._visible=!1,document.removeEventListener("click",this._handleClickOutside),document.removeEventListener("keyup",this._handleKeyupEvent),document.removeEventListener("fp-popover-show",this._handlePopoverShowEvent),this.onFpPopoverHide("")}get visible(){return this._visible}_handlePopoverShowEvent(e){e.target!==this&&this.hide()}_handleKeyupEvent(e){e.key==="Escape"&&this.visible&&(this.hide(),e.preventDefault())}render(){let e=f({popover:!0,visible:this._visible});return h`<div class=${e}>
      <slot id="popover" aria-live=${this._visible?"polite":"off"}></slot>
      <div class="arrow" aria-hidden="true"></div>
    </div>`}};r([a(".popover")],t.prototype,"popover",2),r([a(".arrow")],t.prototype,"arrow",2),r([i({type:String})],t.prototype,"placement",2),r([s()],t.prototype,"_target",2),r([i({type:Boolean,attribute:"fit-size"})],t.prototype,"fitSize",2),r([i({type:Number})],t.prototype,"offset",2),r([s()],t.prototype,"_visible",2),r([n("fp-popover-show")],t.prototype,"onFpPopoverShow",2),r([n("fp-popover-hide")],t.prototype,"onFpPopoverHide",2),r([i()],t.prototype,"target",1),t=r([v("fp-popover")],t);export{t as a};
//# sourceMappingURL=chunk-XTM7VFTE.js.map