@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 8.47 kB
JavaScript
import{r as t,c as i,h as e,H as s,g as o}from"./p-WTwLUJcM.js";import{o as a,b as r,c as h,h as n,d,e as c,a as l}from"./p-CJTtq_QG.js";import{b as p,c as f}from"./p-B4OowdnI.js";import{m as b}from"./p-Z0C9-DU6.js";import{i as m}from"./p-DjSNdVAB.js";import{b as u}from"./p-Q8gJ6v8U.js";import{a as v}from"./p-DCOsOAOy.js";import{i as w}from"./p-GpUjqmUL.js";import"./p-COrzvkrr.js";import"./p-BL_6ssnk.js";import"./p-CK4jS9_E.js";import"./p-Dkd2PDJ-.js";import"./p-DavHqO6y.js";const y={hidden:-1,show:p},k={padding:5},g=class{constructor(e){t(this,e),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=y.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(k)];return this.withArrow&&i.push(h({element:t,padding:5})),i.push(n({padding:15})),i},this.getOptions=()=>{const t=this.getMiddlewareConfig();return b({middleware:t},this.options)}}showWatch(t){t?this.showPortalContent():this.hidePortalContent()}referenceWatch(){this.show&&this.showPortalContent()}getClosestThemedAncestor(){let t=this.element;for(;t;){const i=t.closest("[data-theme]");if(i)return i;const e=t.getRootNode();t=e instanceof ShadowRoot?e.host:null}return null}createPortal(){this.portal=document.createElement("div"),this.portal.setAttribute("id",this.portalId),this.portal.style.zIndex=`${y.hidden}`,this.portal.style.position="absolute";const t=this.getClosestThemedAncestor(),i=null==t?void 0:t.getAttribute("data-theme");i&&this.portal.setAttribute("data-theme",i),document.body.prepend(this.portal)}moveElementToPortal(){this.portal.appendChild(this.element),this.elementAppend.emit(this.element)}updatePosition(){d(this.reference,this.portal,this.getOptions()).then((({x:t,y:i,placement:e,middlewareData:s})=>{if(this.autoUpdate){const{referenceHidden:t}=s.hide;this.show&&(this.visible=!t,this.portal.style.zIndex=t?`${y.hidden}`:`${this.zIndex}`)}if(Object.assign(this.portal.style,{left:`${t}px`,top:`${i}px`}),this.withArrow){const{x:t,y:i}=s.arrow;Object.assign(this.getPortalArrowElement().style,Object.assign({},((t,i,e)=>{const s={top:"bottom",right:"left",bottom:"top",left:"right"}[e.split("-")[0]];return{left:null!=t?`${t}px`:"",top:null!=i?`${i}px`:"",right:"",bottom:"",[s]:"-5px",transform:"rotate(45deg)"}})(t,i,e)))}}))}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=`${y.hidden}`,this.timeoutId&&(window.clearTimeout(this.timeoutId),this.timeoutId=void 0),m(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 e(s,{key:"edcd8472eb044ae6d4475cb1f8e63151b831157c"},e("div",{key:"1ba1eb8760e0104a688235c34a5b3ee6e59fca0b",class:{"portal-container":!0,"portal-container--animated":this.animated,"portal-container--visible":this.visible}},e("slot",{key:"94ed2ad8e45ac3e9287bb5d1dd40eeccfd7fde57"}),this.withArrow&&e("div",{key:"04806f60effcb03f57fd7d5344000e9ba3922582",id:"portal-arrow",class:"portal-arrow"})))}get element(){return o(this)}static get watchers(){return{show:["showWatch"],reference:["referenceWatch"]}}};g.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--portal-arrow-color:var(--tooltip-background-default)}.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 x={strategy:"fixed",middleware:[a(5),r({padding:5})]},j={padding:5},O=class{constructor(i){t(this,i),this.text="",this.options=x,this.disabled=!1,this.contentElement=null,this.truncate=!1,this.delay=1e3,this.hideDelay=1e3,this.withArrow=!1,this.customClass="",this.showTooltip=!1,this.hoverContent=!1,this.hoverTooltip=!1,this.getContentElement=()=>{var t;return null!==(t=this.contentElement)&&void 0!==t?t:this.tooltipContent},this.getOptions=()=>{const t=w(this.allowedPositions)?this.position:void 0,i=[];return!w(this.allowedPositions)&&w(t)&&i.push(l(Object.assign(Object.assign({},j),{allowedPlacements:this.allowedPositions}))),b({placement:t,middleware:i},this.options)},this.hideTooltipHandler=t=>{t?setTimeout((()=>{this.hoverContent||this.hoverTooltip||(this.showTooltip=!1)}),t):this.showTooltip=!1},this.getTooltipSlotElement=()=>this.el.querySelector('[slot="tooltip-text"]'),this.showTooltipHandler=()=>{this.disabled||this.truncate&&!(()=>{const t=u(Array.from(this.el.childNodes));if(void 0!==t){const i=new Range;i.selectNodeContents(t);const{width:e}=i.getBoundingClientRect(),{clientWidth:s}=t;if(s>=Math.round(e))return!1}return!0})()||(this.showTooltip=!0)}}disconnectedCallback(){this.showTooltip=!1}render(){const t=this.getTooltipSlotElement();return e(s,{key:"8cb12be614c78d1bcf039d1b2199763d97735ee7"},e("div",{key:"8de03a96446c4b1b84918df22059710f506bf117",id:"content",part:"content",ref:t=>this.tooltipContent=t,onMouseOver:()=>{this.showTooltipHandler(),this.hoverContent=!0},onMouseOut:()=>{this.hoverContent=!1,this.hideTooltipHandler(w(t)?void 0:this.hideDelay)},onBlur:()=>{this.hoverContent=!1,this.hideTooltipHandler(w(t)?void 0:this.hideDelay)},onClick:()=>{this.hoverContent=!1,this.hideTooltipHandler()}},e("slot",{key:"adab3af0dbba69f4edbc50e708bfc272d9c59fb3"})),e("div",{key:"e54dcd487a1b667861d556c176836603eb543b90",style:{display:"none"}},e("slot",{key:"d12f4a5caa826634666eab65b2e04828764ca9ca",name:"tooltip-text"})),this.showTooltip&&(!w(this.text)||!w(t))&&e("kv-portal",{key:"aee9fbd2781db2a074c93450f34646d357bd6a7c",zIndex:f,show:!0,delay:this.delay,withArrow:this.withArrow,animated:!0,reference:this.getContentElement(),options:this.getOptions()},e("kv-tooltip-text",{key:"20b1f2e5f44b0c1b5da1d16a6f4f041a4457ae0c",class:Object.assign({},v(this.customClass)),text:this.text,style:this.customStyle,onMouseOver:()=>{this.hoverTooltip=!0,this.showTooltipHandler()},onMouseOut:()=>{this.hoverTooltip=!1,this.hideTooltipHandler()},onBlur:()=>{this.hoverTooltip=!1,this.hideTooltipHandler()}},t&&e("div",{key:"b4178ca3ede4d6c087eed3f8989909aee5d51c87",innerHTML:t.innerHTML}))))}get el(){return o(this)}},C=class{constructor(i){t(this,i),this.text=""}render(){return e(s,{key:"70840ea0de71d12ce34b657f0fdf9d2a940f6332"},e("div",{key:"4ff2b2e412cb5d3531548915b4885f9eb109524f",class:"tooltip-container",part:"tooltip-container"},this.text&&e("div",{key:"af8d1f527dbc20d141c1e00ff58f5ebbd320014b",class:"tooltip-text"},this.text),e("div",{key:"e5a8a93fc9d3c37615c10e060cb6cc4026dd3b71",class:"tooltip-slot",part:"tooltip-slot-content"},e("slot",{key:"0e011fc72a7b96a2a4324e1715f679092f11473b"}))))}};C.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--container-white-space:normal;--container-width:fit-content;--container-max-width:280px;--container-background-color:var(--tooltip-background-default)}.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(--container-background-color);user-select:none;border-radius:var(--tooltip-radius-default);padding:var(--tooltip-padding-y-default) var(--tooltip-padding-x-default);white-space:var(--container-white-space)}.tooltip-container .tooltip-text{font-family:Proxima Nova;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0;color:var(--tooltip-text-default)}';export{g as kv_portal,O as kv_tooltip,C as kv_tooltip_text}