@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 5.67 kB
JavaScript
import{r as t,c as i,h as o,H as e,g as s}from"./p-D-JVwta2.js";import{o as a,b as r,c as n,h,d as p,e as c}from"./p-CJTtq_QG.js";import{c as l}from"./p-nGbDFIaH.js";import{m as d}from"./p-DOeJaCJq.js";import{i as f}from"./p-DjSNdVAB.js";import"./p-DzZLIMy0.js";import"./p-DwRzddFC.js";import"./p-DVds6a5Z.js";import"./p-CojoW2Y2.js";import"./p-SVedE_O8.js";import"./p-BcMhjKoS.js";import"./p-Do0EyoO8.js";import"./p-CBuzk8fR.js";import"./p-DHk26cGe.js";import"./p-7ioMFMb5.js";import"./p-Dp5Jdzmz.js";import"./p-CK4jS9_E.js";import"./p-DVju43gQ.js";import"./p-DfPM2t43.js";import"./p-Dkd2PDJ-.js";import"./p-CiDQ1Z66.js";import"./p-DSZg-gfB.js";const m={hidden:-1,show:l},b={padding:5},v=class{constructor(o){t(this,o),this.elementAppend=i(this,"elementAppend",7),this.portalId="kv-portal",this.show=!1,this.autoUpdate=!0,this.animated=!1,this.withArrow=!1,this.delay=0,this.zIndex=m.show,this.visible=!1,this.moved=!1,this.getPortalArrowElement=()=>this.element.shadowRoot.querySelector("#portal-arrow"),this.getMiddlewareConfig=()=>{const t=this.getPortalArrowElement(),i=[a(this.withArrow?10:5),r(b)];return this.withArrow&&i.push(n({element:t,padding:5})),i.push(h({padding:15})),i},this.getOptions=()=>{const t=this.getMiddlewareConfig();return d({middleware:t},this.options)}}showWatch(t){t?this.showPortalContent():this.hidePortalContent()}referenceWatch(){this.show&&this.showPortalContent()}createPortal(){this.portal=document.createElement("div"),this.portal.setAttribute("id",this.portalId),this.portal.style.zIndex=`${m.hidden}`,this.portal.style.position="absolute",document.body.prepend(this.portal)}moveElementToPortal(){this.portal.appendChild(this.element),this.elementAppend.emit(this.element)}updatePosition(){p(this.reference,this.portal,this.getOptions()).then((({x:t,y:i,placement:o,middlewareData:e})=>{if(this.autoUpdate){const{referenceHidden:t}=e.hide;this.show&&(this.visible=!t,this.portal.style.zIndex=t?`${m.hidden}`:`${this.zIndex}`)}if(Object.assign(this.portal.style,{left:`${t}px`,top:`${i}px`}),this.withArrow){const{x:t,y:i}=e.arrow;Object.assign(this.getPortalArrowElement().style,Object.assign({},((t,i,o)=>{const e={top:"bottom",right:"left",bottom:"top",left:"right"}[o.split("-")[0]];return{left:null!=t?`${t}px`:"",top:null!=i?`${i}px`:"",right:"",bottom:"",[e]:"-5px",transform:"rotate(45deg)"}})(t,i,o)))}}))}calculatePosition(){this.reference&&this.portal&&(this.autoUpdate?this.closeAutoUpdate=c(this.reference,this.portal,(()=>this.updatePosition())):this.updatePosition())}showPortalContent(){this.portal&&(this.portal.style.zIndex=`${this.zIndex}`,this.delay?this.timeoutId=window.setTimeout((()=>{this.visible=!0,this.calculatePosition()}),this.delay):(this.visible=!0,this.calculatePosition()))}hidePortalContent(){this.visible=!1,this.portal.style.zIndex=`${m.hidden}`,this.timeoutId&&(window.clearTimeout(this.timeoutId),this.timeoutId=void 0),f(this.closeAutoUpdate)||this.closeAutoUpdate()}componentWillLoad(){this.createPortal()}componentDidLoad(){this.moveElementToPortal(),this.show&&this.showPortalContent()}disconnectedCallback(){var t;this.moved?null===(t=this.portal)||void 0===t||t.remove():this.moved=!0}render(){return o(e,{key:"e126a9c675e066b31335ad772d16a1d9abae7e7e"},o("div",{key:"234f8c0ffdf00a3040498e23cc5592a49d1eb469",class:{"portal-container":!0,"portal-container--animated":this.animated,"portal-container--visible":this.visible}},o("slot",{key:"3b104007883cc750869559351d1888bffb1f5858"}),this.withArrow&&o("div",{key:"eb44a8ec8f84de9b94f6f41127c72ce8f0cb8d2f",id:"portal-arrow",class:"portal-arrow"})))}get element(){return s(this)}static get watchers(){return{show:["showWatch"],reference:["referenceWatch"]}}};v.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--portal-arrow-color:var(--kv-neutral-6, #3f3f3f)}.portal-container{visibility:hidden;opacity:0}.portal-container--visible{visibility:visible;opacity:1}.portal-container--visible.portal-container--animated{transition:opacity 0.3s linear}.portal-container .portal-arrow{position:absolute;background:var(--portal-arrow-color);width:10px;height:10px}';const w=class{constructor(i){t(this,i),this.text=""}render(){return o(e,{key:"277b5f5f6afe392e5657e19268b365359eae3cb5"},o("div",{key:"fd7dbf5800f2bc0c2b4143c30364213789de74ba",class:"tooltip-container",part:"tooltip-container"},this.text&&o("div",{key:"f2997530ada322d521850d251eae279c6f3ea1ea",class:"tooltip-text"},this.text),o("div",{key:"efcbeb035cf56668388b59ac214effdcb2fa8df7",class:"tooltip-slot",part:"tooltip-slot-content"},o("slot",{key:"0fc3e2f0f894f4a9c6b795ee17a18bf090bbbe89"}))))}};w.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--container-white-space:normal;--container-width:fit-content;--container-max-width:280px}.tooltip-container{height:fit-content;width:var(--container-width);max-width:var(--container-max-width);display:inline-block;word-wrap:break-word;background-color:var(--kv-neutral-6, #3f3f3f);box-shadow:0 8px 16px -4px rgba(var(--kv-neutral-6-rgb, 63, 63, 63), 0.25), 0 0 1px 0 rgba(var(--kv-neutral-3-rgb, 221, 221, 221), 0.31);user-select:none;border-radius:2px;padding:var(--kv-spacing, 4px) var(--kv-spacing-2x, 8px);white-space:var(--container-white-space)}.tooltip-container .tooltip-text{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:600;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color:var(--kv-neutral-2, #e5e5e5)}';export{v as kv_portal,w as kv_tooltip_text}