@limetech/lime-elements/dist/lime-elements/p-faceccc0.entry.js

Lime Elements

import{r as e,c as t,h as r,H as o}from"./p-DBTJNfo7.js";import{c as i}from"./p-JbKhhoXs.js";const s=class{constructor(o){e(this,o),this.change=t(this,"change"),this.disabled=!1,this.readonly=!1,this.factor=1,this.required=!1,this.invalid=!1,this.displaysPercentageColors=!1,this.unit="",this.valuemax=100,this.valuemin=0,this.renderStepDots=(e,t)=>{if(!this.step)return;const o=this.multiplyByFactor(this.step),i=Math.floor((t-e)/o)+1;return i>20?void 0:Array.from({length:i},(()=>r("span",{class:"step-dot"})))},this.renderHelperLine=()=>{if(this.helperText)return r("limel-helper-line",{helperText:this.helperText,helperTextId:this.helperTextId,invalid:this.invalid})},this.handleInput=e=>{e.stopPropagation();const t=Number(e.target.value);this.displayValue=t,this.setPercentageClass(t/this.factor)},this.handleChange=e=>{e.stopPropagation();let t=Number(e.target.value);const r=this.multiplyByFactor(this.step);this.isMultipleOfStep(t,r)||(t=this.roundToStep(t,r)),this.change.emit(t/this.factor)},this.getContainerClassList=()=>this.percentageClass?{[this.percentageClass]:!0}:{},this.multiplyByFactor=e=>Math.round(e*this.factor),this.getValue=()=>{let e=this.value;return Number.isFinite(e)||(e=this.valuemin),e},this.getFraction=()=>{const e=this.multiplyByFactor(this.valuemin),t=this.multiplyByFactor(this.valuemax);return t===e?0:Math.max(0,Math.min(1,(this.displayValue-e)/(t-e)))},this.setPercentageClass=e=>{this.percentageClass=function(e){return 0===e?"percent-0":e<.1?"percent-0-10":e<.2?"percent-10-20":e<.3?"percent-20-30":e<.4?"percent-30-40":e<.5?"percent-40-50":e<.6?"percent-50-60":e<.7?"percent-60-70":e<.8?"percent-70-80":e<.9?"percent-80-90":"percent-90-100"}((e-this.valuemin)/(this.valuemax-this.valuemin))},this.isMultipleOfStep=(e,t)=>!t||e%t==0,this.roundToStep=(e,t)=>Math.round(e/t)*t,this.labelId=i(),this.helperTextId=i()}componentWillLoad(){this.displayValue=this.multiplyByFactor(this.getValue()),this.setPercentageClass(this.getValue())}render(){const e=this.multiplyByFactor(this.valuemin),t=this.multiplyByFactor(this.valuemax),i=this.getFraction(),s={};return this.step&&(s.step=this.multiplyByFactor(this.step)),(this.disabled||this.readonly)&&(s.disabled=!0),r(o,{key:"fa9695563f078bdab1707422cad3aaef2610e592",class:this.getContainerClassList()},r("limel-notched-outline",{key:"8b71ef15e9544a6b346248217c2c2fa8acbba6e7",labelId:this.labelId,label:this.label,required:this.required,invalid:this.invalid,disabled:this.disabled,readonly:this.readonly,hasValue:!!this.value,hasFloatingLabel:!0},r("div",{key:"0327cf7d5295bb1d56e2e34b8dca15cfc3e15c0d",slot:"content"},r("div",{key:"83fade77119ba9fa1d24ae8fdcd54317648918b3",class:"slider",style:{"--slider-fraction":`${i}`}},r("input",Object.assign({key:"5181430787abe75b4556923e31ebe8520df977e9",type:"range",min:e,max:t,value:this.displayValue,"aria-labelledby":this.labelId,"aria-describedby":this.helperText?this.helperTextId:void 0,onInput:this.handleInput,onChange:this.handleChange},s)),r("div",{key:"6ee95d718f1d01e92adcf9592882ed1d32e4ba67",class:"track"},r("div",{key:"bba420e41501990bdeb1326e59e6eff57000848d",class:"active"}),this.renderStepDots(e,t)),r("div",{key:"46e5a45adbda4e1a650d01408c3d228f1c6be68d",class:"thumb"},r("div",{key:"eeba995f52ff3291e2e7818528b05c7c1dec1b32",class:"knob"}),r("div",{key:"d0321459ed22c6870d939da54df43fe2bfef6333",class:"indicator","aria-hidden":"true"},this.displayValue))),r("div",{key:"bcc4449d7605343fd64f4b89b50c8e5d665f6937",class:"range-labels"},r("span",{key:"301c78b1640551fe814ad3b2768bb40f9b682b39",class:"min"},this.multiplyByFactor(this.valuemin),this.unit),r("span",{key:"7f8d741f63030b6f8e88231e5215448b815bf3ca",class:"max"},this.multiplyByFactor(this.valuemax),this.unit)))),this.renderHelperLine())}watchValue(){this.displayValue=this.multiplyByFactor(this.getValue()),this.setPercentageClass(this.getValue())}static get watchers(){return{value:[{watchValue:0}]}}};s.style='@charset "UTF-8";:host([displays-percentage-colors].percent-0){--lime-primary-color:var(--color-percent--0)}:host([displays-percentage-colors].percent-0-10){--lime-primary-color:var(--color-percent--0to10)}:host([displays-percentage-colors].percent-10-20){--lime-primary-color:var(--color-percent--10to20)}:host([displays-percentage-colors].percent-20-30){--lime-primary-color:var(--color-percent--20to30)}:host([displays-percentage-colors].percent-30-40){--lime-primary-color:var(--color-percent--30to40)}:host([displays-percentage-colors].percent-40-50){--lime-primary-color:var(--color-percent--40to50)}:host([displays-percentage-colors].percent-50-60){--lime-primary-color:var(--color-percent--50to60)}:host([displays-percentage-colors].percent-60-70){--lime-primary-color:var(--color-percent--60to70)}:host([displays-percentage-colors].percent-70-80){--lime-primary-color:var(--color-percent--70to80)}:host([displays-percentage-colors].percent-80-90){--lime-primary-color:var(--color-percent--80to90)}:host([displays-percentage-colors].percent-90-100){--lime-primary-color:var(--color-percent--90to100)}:host([displays-percentage-colors].percent-30-40) .indicator,:host([displays-percentage-colors].percent-40-50) .indicator,:host([displays-percentage-colors].percent-70-80) .indicator{color:rgb(var(--color-gray-darker))}:host([displays-percentage-colors].percent-50-60) .indicator,:host([displays-percentage-colors].percent-60-70) .indicator{color:rgb(var(--color-gray-dark))}:host([readonly]:not([readonly=false])) input[type=range]{cursor:default}:host([readonly]:not([readonly=false])) .track,:host([readonly]:not([readonly=false])) .active,:host([readonly]:not([readonly=false])) .indicator{height:0.75rem}:host([readonly]:not([readonly=false])) .indicator{box-shadow:none}:host([readonly]:not([readonly=false])) .knob{opacity:0}:host([readonly]:not([readonly=false])) .active{background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.thumb{position:absolute;left:calc(var(--slider-fraction) * 100%);top:0;bottom:0;width:0;z-index:1}.knob{transition:border-color 0.5s ease;position:absolute;top:50%;left:0;transform:translate3d(-50%, -50%, 0);width:1.25rem;height:1.25rem;border-radius:50%;border:0.5rem solid;border-color:var(--lime-primary-color, var(--limel-theme-primary-color));background-color:rgb(var(--contrast-100))}.knob:before,.knob:after{transition:all 0.2s ease 0.2s;content:"";display:block;position:absolute;top:0;bottom:0;margin:auto;width:0;height:0;border:0.375rem solid transparent}:host([disabled]:not([disabled=false])) .knob:before,:host([disabled]:not([disabled=false])) .knob:after{content:none}.knob:before{opacity:calc(var(--slider-fraction) * 100);left:-1rem;transform:rotate(90deg)}.knob:after{opacity:calc((1 - var(--slider-fraction)) * 100);right:-1rem;transform:rotate(-90deg)}.slider:hover .knob,.slider:has(input[type=range]:active) .knob,.slider:has(input[type=range]:focus) .knob{box-shadow:var(--button-shadow-normal)}.slider:hover .knob:before,.slider:has(input[type=range]:active) .knob:before,.slider:has(input[type=range]:focus) .knob:before{left:-1.5rem;border-top-color:rgb(var(--contrast-1400), 0.5)}.slider:hover .knob:after,.slider:has(input[type=range]:active) .knob:after,.slider:has(input[type=range]:focus) .knob:after{right:-1.5rem;border-top-color:rgb(var(--contrast-1400), 0.5)}.indicator{user-select:none;position:absolute;left:0;top:50%;z-index:1;transform:translate3d(-50%, -50%, 0);transform-origin:bottom center;transition:transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.5s ease;border-radius:1.25rem;padding:0 0.375rem;height:1.25rem;display:flex;align-items:center;white-space:nowrap;color:rgb(var(--color-white));font-size:0.6875rem;background-color:var(--lime-primary-color, var(--limel-theme-primary-color));box-shadow:var(--button-shadow-normal)}:host(:not([disabled]):not([readonly])) input[type=range]:active~.thumb .indicator,:host(:not([disabled]):not([readonly])) input[type=range]:focus~.thumb .indicator{transform:translate3d(-50%, calc(-100% - 0.75rem), 0) scale(1.25);box-shadow:var(--shadow-depth-16)}*,*:before,*:after{box-sizing:border-box;min-width:0;min-height:0}:host(limel-slider){box-sizing:border-box;isolation:isolate;position:relative;display:flex;flex-direction:column}:host(limel-slider:not([invalid]):not([invalid=true])) .limel-notched-outline,:host(limel-slider[disabled]:not([disabled=false])) .limel-notched-outline{--limel-notched-outline-border-color:transparent;--limel-notched-outline-background-color:transparent}div[slot=content]{display:flex;flex-direction:column;width:100%;padding:0 0.25rem}.slider{position:relative;height:2.5rem;margin:0 0.75rem}input[type=range]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;margin:0;appearance:none}:host([disabled]:not([disabled=false])) input[type=range]{cursor:not-allowed}:host([disabled]:not([disabled=false])) .track .active{opacity:0.5}:host([disabled]:not([disabled=false])) .indicator{border-radius:0.125rem;box-shadow:var(--button-shadow-pressed)}.track{transition:background-color 0.5s ease;display:flex;align-items:center;justify-content:space-between;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:0.5rem;border-radius:1rem;background-color:rgba(var(--contrast-700), 0.6)}.track:before,.track:after{content:"";display:inline-block;position:absolute;top:0;bottom:0;margin:auto;width:0.375rem;height:0.375rem;border-radius:50%;background-color:rgba(var(--contrast-700), 0.6)}.track:before{left:-0.75rem}.track:after{right:-0.75rem}.track .active{transition:background-color 0.5s ease;position:absolute;height:100%;width:calc(var(--slider-fraction) * 100%);border-radius:inherit;background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.step-dot{transform:translateX(-50%);border-radius:50%;height:0.25rem;width:0.25rem;background-color:rgb(var(--contrast-100), 0.6)}.step-dot:first-of-type,.step-dot:last-of-type{opacity:0}.range-labels{display:flex;justify-content:space-between;margin-top:-0.75rem;width:100%}.range-labels .min,.range-labels .max{line-height:1;font-size:0.75rem;color:var(--limel-notched-outline-label-color, rgb(var(--contrast-1200)))}:host(limel-slider:focus),:host(limel-slider:focus-visible),:host(limel-slider:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-slider){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-slider:focus) limel-helper-line,:host(limel-slider:focus-visible) limel-helper-line,:host(limel-slider:focus-within) limel-helper-line,:host(limel-slider:hover) limel-helper-line{will-change:grid-template-rows}';export{s as limel_slider}