@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 7.42 kB
JavaScript
import{r,c as e,h as a,H as t,g as o}from"./p-D-JVwta2.js";import{i}from"./p-CK4jS9_E.js";const n=class{constructor(a){r(this,a),this.valueChange=e(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=r=>parseInt(r.value),this.applyCssStyles=()=>{const r=this.getRangeElement(),e=this.getInputValue(r),a=((r,e)=>100*(r-e)/(this.max-e))(e,this.min),t=(r=>-.25*(r-50))(a);if(!this.hideLabel){const r=this.el.shadowRoot.getElementById("select-value"),t=((r,e)=>(r-50)*(-.15*e.toString().length))(a,e);r.style.left=a+"%",r.style.marginLeft=t+"px"}r.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 r=this.getInputValue(this.getRangeElement());this.valueChange.emit(r)}}componentDidRender(){this.applyCssStyles()}get displayMinLabel(){return this.minLabel||`${this.min}`}get displayMaxLabel(){return this.maxLabel||`${this.max}`}render(){return a(t,{key:"bc0270d759fec0324e408081965ab658fab0ab73"},a("div",{key:"7524c05857b0e8b456ad797f8d3f878887680096",class:{"range-container":!0,"has-label":!this.hideLabel}},a("input",{key:"6d78bd3ed813bac35a6086fa55072bd3a24d499f",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:"e4f3273684e78271c60dcff43aa0e96d85121b74",id:"select-value",class:{"select-value":!0,disabled:this.disabled}},this.valueFormatter(this.value)),!this.hideMinMaxLabel&&a("div",{key:"222f780e29132c7b57fb8901c254821c9e914fd3",class:"range-min-max"},a("span",{key:"15e094128b3e2e4969035c892f59375d9c50726b"},this.displayMinLabel),a("span",{key:"b24c47eb3f92805c79f0c276cea634f061745c31"},this.displayMaxLabel))))}get el(){return o(this)}};n.style={light:'@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--range-width:100%;--range-height:10px;--range-selector-radius:20px;--select-label-disabled-color:var(--kv-neutral-5, #707070);--slider-background-filled-disabled:var(--kv-neutral-5, #707070)}.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:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;width:100%;display:flex;justify-content:space-between;margin-top:var(--kv-spacing, 4px);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(--kv-spacing, 4px) - 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(--kv-spacing, 4px)) 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:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:24px;font-weight:600;font-stretch:normal;font-style:normal;line-height:36px;letter-spacing:normal;text-transform:none;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}:host{--slider-background-filled:var(--kv-primary, #005cc7);--slider-background-empty:var(--kv-neutral-3, #ddd);--thumb-border-color:var(--kv-primary, #005cc7);--range-label-color:var(--kv-neutral-5, #707070);--select-label-color:var(--kv-neutral-5, #707070)}',night:'@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--range-width:100%;--range-height:10px;--range-selector-radius:20px;--select-label-disabled-color:var(--kv-neutral-5, #707070);--slider-background-filled-disabled:var(--kv-neutral-5, #707070)}.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:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;width:100%;display:flex;justify-content:space-between;margin-top:var(--kv-spacing, 4px);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(--kv-spacing, 4px) - 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(--kv-spacing, 4px)) 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:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:24px;font-weight:600;font-stretch:normal;font-style:normal;line-height:36px;letter-spacing:normal;text-transform:none;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}:host{--slider-background-filled:var(--kv-primary, #005cc7);--slider-background-empty:var(--kv-neutral-9, #121212);--thumb-border-color:var(--kv-neutral-0, #fff);--range-label-color:var(--kv-neutral-5, #707070);--select-label-color:var(--kv-neutral-0, #fff)}'};export{n as kv_range}