@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 4.52 kB
JavaScript
import{r as e,c as r,h as a,H as t,g as s}from"./p-WTwLUJcM.js";import{i}from"./p-CK4jS9_E.js";import"./p-COrzvkrr.js";const l=class{constructor(a){e(this,a),this.valueChange=r(this,"valueChange",7),this.value=0,this.step=1,this.hideLabel=!1,this.hideMinMaxLabel=!1,this.disabled=!1,this.valueFormatter=i,this.getRangeElement=()=>this.el.shadowRoot.querySelector("input"),this.getInputValue=e=>parseInt(e.value),this.applyCssStyles=()=>{const e=this.getRangeElement(),r=this.getInputValue(e),a=((e,r)=>100*(e-r)/(this.max-r))(r,this.min),t=(e=>-.25*(e-50))(a);if(!this.hideLabel){const e=this.el.shadowRoot.getElementById("select-value"),t=((e,r)=>(e-50)*(-.15*r.toString().length))(a,r);e.style.left=a+"%",e.style.marginLeft=t+"px"}e.style.background=`linear-gradient(90deg, var(--slider-background-filled${this.disabled?"-disabled":""}) calc(${a}% + ${t}px), var(--slider-background-empty) calc(${a}% + ${t}px))`},this.onInputChange=()=>{const e=this.getInputValue(this.getRangeElement());this.valueChange.emit(e)}}componentDidRender(){this.applyCssStyles()}get displayMinLabel(){return this.minLabel||`${this.min}`}get displayMaxLabel(){return this.maxLabel||`${this.max}`}render(){return a(t,{key:"6974ea74e9e481a674eda167059081016998cc0b"},a("div",{key:"5754c5ad741ab693e80286977c3a8733d67d3adf",class:{"range-container":!0,"has-label":!this.hideLabel}},a("input",{key:"8982a2e9bcd47a3b4e5b856e0a6b9126f04588b0",id:"slider",class:"slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.disabled,onInput:this.onInputChange}),!this.hideLabel&&a("span",{key:"42e2e49b642f0c3bdeb9d36849527ddd161a325e",id:"select-value",class:{"select-value":!0,disabled:this.disabled}},this.valueFormatter(this.value)),!this.hideMinMaxLabel&&a("div",{key:"45978f30eadc7a8e59d80edc6acbff63259d7a06",class:"range-min-max"},a("span",{key:"2c138cc6f4f981e734228af2a60de8a32b255bb7"},this.displayMinLabel),a("span",{key:"618283106e2653ae33196196f30c503523252123"},this.displayMaxLabel))))}get el(){return s(this)}};l.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{--range-width:100%;--range-height:10px;--range-selector-radius:20px;--select-label-disabled-color:var(--text-surface-neutral-tertiary);--slider-background-filled-disabled:var(--text-surface-neutral-tertiary);--slider-background-filled:var(--background-surface-brand-default);--slider-background-empty:var(--background-surface-neutral-strong);--thumb-border-color:var(--border-surface-slider-value-default);--range-label-color:var(--text-surface-neutral-tertiary);--select-label-color:var(--text-surface-neutral-primary)}.range-container{width:var(--range-width);margin-top:var(--range-margin-top, calc(var(--range-selector-radius) * 0.5));position:relative}.range-container.has-label{margin-top:49px}.range-min-max{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;width:100%;display:flex;justify-content:space-between;margin-top:var(--spacing-xs);user-select:none;color:var(--range-label-color)}.slider{width:calc(var(--range-width) - 2px);height:var(--range-height);outline:none;margin:0;border-radius:6px;user-select:none;background:var(--slider-background-empty);border:1px solid var(--slider-background-empty)}.slider::-webkit-slider-thumb{border:var(--range-selector-border-radius, calc(var(--spacing-xs) - 1px)) solid var(--thumb-border-color);background:var(--thumb-background-color, var(--slider-background-filled));height:calc(var(--range-selector-radius) + 5px);width:calc(var(--range-selector-radius) + 5px);border-radius:50%;cursor:pointer;appearance:none}.slider::-moz-range-thumb{border:var(--range-selector-border-radius, var(--spacing-xs)) solid var(--thumb-border-color);background:var(--thumb-background-color, var(--slider-background-filled));height:var(--range-selector-radius);width:var(--range-selector-radius);border-radius:50%;cursor:pointer;appearance:none}.slider:disabled::-webkit-slider-thumb{cursor:not-allowed;user-select:none;background:var(--slider-background-filled-disabled)}.select-value{font-family:Proxima Nova;font-weight:600;font-size:24px;line-height:32px;letter-spacing:0;top:-49px;transform:translateX(-50%);position:absolute;background-color:transparent;text-align:center;color:var(--select-label-color)}.select-value.disabled{color:var(--select-label-disabled-color)}input{appearance:none}';export{l as kv_range}