@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 7.71 kB
JavaScript
import{r,h as e,H as a,g as o}from"./p-D-JVwta2.js";import{d as t}from"./p-CojoW2Y2.js";import{o as n,b as i,a as d}from"./p-CJTtq_QG.js";import{b as s}from"./p-DHsSp4wP.js";import{g as c}from"./p-DKOxy79t.js";import{m as g}from"./p-DOeJaCJq.js";import{b}from"./p-nGbDFIaH.js";import{i as l}from"./p-BA_npyc9.js";import"./p-DjSNdVAB.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";import"./p-DzZLIMy0.js";import"./p-DwRzddFC.js";import"./p-DVds6a5Z.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";const h=class{constructor(e){r(this,e),this.state=t.None}render(){return e(a,{key:"de71abce325ae677cf19e0d4155386eacbbc4a59"},e("span",{key:"3da24a667078bb7358a5fcf0c55c564c955e1dc2",class:`badge badge--state-${this.state}`,part:"badge"},e("slot",{key:"2fecfb13d5d4a2b88d41dc4b9c97f4b4b45f0baf"})))}};h.style={light:'@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--badge-min-width:16px;--badge-max-width:fit-content;--badge-height:16px;--badge-width:unset}.badge{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:10px;font-weight:400;font-stretch:normal;font-style:normal;line-height:15px;letter-spacing:normal;text-transform:none;display:flex;align-items:center;justify-content:center;min-width:var(--badge-min-width);max-width:var(--badge-max-width);height:var(--badge-height);width:var(--badge-width);padding:0 var(--kv-spacing, 4px);line-height:var(--badge-height);border-radius:8px}.badge--state-none{color:var(--badge-text-color-none);background-color:var(--badge-background-color-none)}.badge--state-info{color:var(--badge-text-color-info);background-color:var(--badge-background-color-info)}.badge--state-warning{color:var(--badge-text-color-warning);background-color:var(--badge-background-color-warning)}.badge--state-error{color:var(--badge-text-color-error);background-color:var(--badge-background-color-error)}.badge--state-success{color:var(--badge-text-color-success);background-color:var(--badge-background-color-success)}@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--badge-min-width:16px;--badge-max-width:fit-content;--badge-height:16px;--badge-width:unset}.badge{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:10px;font-weight:400;font-stretch:normal;font-style:normal;line-height:15px;letter-spacing:normal;text-transform:none;display:flex;align-items:center;justify-content:center;min-width:var(--badge-min-width);max-width:var(--badge-max-width);height:var(--badge-height);width:var(--badge-width);padding:0 var(--kv-spacing, 4px);line-height:var(--badge-height);border-radius:8px}.badge--state-none{color:var(--badge-text-color-none);background-color:var(--badge-background-color-none)}.badge--state-info{color:var(--badge-text-color-info);background-color:var(--badge-background-color-info)}.badge--state-warning{color:var(--badge-text-color-warning);background-color:var(--badge-background-color-warning)}.badge--state-error{color:var(--badge-text-color-error);background-color:var(--badge-background-color-error)}.badge--state-success{color:var(--badge-text-color-success);background-color:var(--badge-background-color-success)}:host{--badge-background-color-none:var(--kv-neutral-6, #3f3f3f);--badge-text-color-none:var(--kv-neutral-2, #e5e5e5);--badge-background-color-info:var(--kv-secondary-5, #8358fe);--badge-text-color-info:var(--kv-neutral-2, #e5e5e5);--badge-background-color-warning:var(--kv-warning, #ffc043);--badge-text-color-warning:var(--kv-neutral-0, #fff);--badge-background-color-error:var(--kv-error, #e11900);--badge-text-color-error:var(--kv-neutral-0, #fff);--badge-background-color-success:var(--kv-success, #05a357);--badge-text-color-success:var(--kv-neutral-0, #fff)}',night:'@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--badge-min-width:16px;--badge-max-width:fit-content;--badge-height:16px;--badge-width:unset}.badge{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:10px;font-weight:400;font-stretch:normal;font-style:normal;line-height:15px;letter-spacing:normal;text-transform:none;display:flex;align-items:center;justify-content:center;min-width:var(--badge-min-width);max-width:var(--badge-max-width);height:var(--badge-height);width:var(--badge-width);padding:0 var(--kv-spacing, 4px);line-height:var(--badge-height);border-radius:8px}.badge--state-none{color:var(--badge-text-color-none);background-color:var(--badge-background-color-none)}.badge--state-info{color:var(--badge-text-color-info);background-color:var(--badge-background-color-info)}.badge--state-warning{color:var(--badge-text-color-warning);background-color:var(--badge-background-color-warning)}.badge--state-error{color:var(--badge-text-color-error);background-color:var(--badge-background-color-error)}.badge--state-success{color:var(--badge-text-color-success);background-color:var(--badge-background-color-success)}:host{--badge-background-color-none:var(--kv-neutral-6, #3f3f3f);--badge-text-color-none:var(--kv-neutral-2, #e5e5e5);--badge-background-color-info:var(--kv-secondary-5, #8358fe);--badge-text-color-info:var(--kv-neutral-2, #e5e5e5);--badge-background-color-warning:var(--kv-warning, #ffc043);--badge-text-color-warning:var(--kv-neutral-0, #fff);--badge-background-color-error:var(--kv-error, #e11900);--badge-text-color-error:var(--kv-neutral-0, #fff);--badge-background-color-success:var(--kv-success, #05a357);--badge-text-color-success:var(--kv-neutral-0, #fff)}'};const f={strategy:"fixed",middleware:[n(5),i({padding:5})]},v={padding:5},p=class{constructor(e){r(this,e),this.text="",this.options=f,this.disabled=!1,this.contentElement=null,this.truncate=!1,this.delay=1e3,this.withArrow=!1,this.customClass="",this.showTooltip=!1,this.getContentElement=()=>{var r;return null!==(r=this.contentElement)&&void 0!==r?r:this.tooltipContent},this.getOptions=()=>{const r=l(this.allowedPositions)?this.position:void 0,e=[];return!l(this.allowedPositions)&&l(r)&&e.push(d(Object.assign(Object.assign({},v),{allowedPlacements:this.allowedPositions}))),g({placement:r,middleware:e},this.options)},this.hideTooltipHandler=()=>{this.showTooltip=!1},this.showTooltipHandler=()=>{this.disabled||this.truncate&&!(()=>{const r=s(Array.from(this.el.childNodes));if(void 0!==r){const e=new Range;e.selectNodeContents(r);const{width:a}=e.getBoundingClientRect(),{clientWidth:o}=r;if(o>=Math.round(a))return!1}return!0})()||(this.showTooltip=!0)}}disconnectedCallback(){this.showTooltip=!1}render(){return e(a,{key:"46c2baab0215c134191247cd20f89cf46d6f53ba"},e("div",{key:"4320d2ac877236f4df38de8f450bb1a475e52cc2",id:"content",part:"content",ref:r=>this.tooltipContent=r,onMouseOver:this.showTooltipHandler,onMouseOut:this.hideTooltipHandler,onBlur:this.hideTooltipHandler,onClick:this.hideTooltipHandler},e("slot",{key:"a1e9525c645045b029b37ee8278cd06270328fb5"})),this.showTooltip&&!l(this.text)&&e("kv-portal",{key:"a900bbe7b1cbeb131fb34b02e0ac00a2514173c9",zIndex:b,show:!0,delay:this.delay,withArrow:this.withArrow,animated:!0,reference:this.getContentElement(),options:this.getOptions()},e("kv-tooltip-text",{key:"479c0653ce129108e8e1a6c95d1fa43cb02d7cb2",class:Object.assign({},c(this.customClass)),text:this.text,style:this.customStyle})))}get el(){return o(this)}};export{h as kv_badge,p as kv_tooltip}