@duetds/components
Version:
This package includes Duet Core Components and related tools.
1 lines • 6.51 kB
JavaScript
import{r as t,d as s,h as e,H as i,c as a}from"./p-6403d5dc.js";import{a as h,c as n}from"./p-da8c2c96.js";import{t as u}from"./p-8ad09b8a.js";const r=class{constructor(e){t(this,e),this.rangeId=h("DuetRange"),this.ua=navigator.userAgent||navigator.vendor,this.percentage=0,this.theme="",this.margin="auto",this.expand=!1,this.min=0,this.label="label",this.unit="",this.max=100,this.step=1,this.value=0,this.debounce=0,this.onInput=t=>{const s=t.target;s&&(this.value=parseInt(s.value)||0),this.duetInput.emit(t),this.calculatePercentage()},this.duetChange=s(this,"duetChange",3),this.duetInput=s(this,"duetInput",7)}debounceChanged(){this.duetChange=n(this.duetChange,this.debounce)}valueChanged(){this.duetChange.emit({value:this.value,component:"duet-range-slider"})}componentWillLoad(){"default"!==this.theme&&document.documentElement.classList.contains("duet-theme-turva")&&(this.theme="turva"),this.calculatePercentage()}componentDidLoad(){this.debounceChanged()}calculatePercentage(){this.percentage=Math.ceil((this.value-this.min)/(this.max-this.min)*100)}async setFocus(){const t=this.element.querySelector("input");t&&t.focus()}render(){const t=this.identifier||this.rangeId;this.expand&&this.element.classList.add("duet-expand");const s="turva"===this.theme?u.colorPrimaryTurva:u.colorPrimary,a={background:"-webkit-linear-gradient(left, "+s+" 0%, "+s+" "+this.percentage+"%,"+("turva"===this.theme?u.colorGrayTurva:u.colorGray)+" "+this.percentage+"%)"};return e(i,{class:{"duet-m-0":"none"===this.margin}},e("div",{class:{"duet-range-container":!0,"duet-theme-turva":"turva"===this.theme,"duet-ie":document.documentMode||/Edge/.test(this.ua)}},e("duet-label",{theme:"turva"===this.theme?"turva":"default",margin:"small",for:t},this.label),e("output",{htmlFor:t,class:"duet-output"},this.value,this.unit),e("input",{onInput:this.onInput,type:"range",min:this.min,max:this.max,step:this.step,value:this.value,style:a,"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.value,id:t,name:"range",class:"duet-range"})))}get element(){return a(this)}static get watchers(){return{debounce:["debounceChanged"],value:["valueChanged"]}}static get style(){return".sc-duet-range-slider-h{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;margin-right:16px!important;margin-bottom:20px!important;display:-ms-inline-flexbox;display:inline-flex;vertical-align:bottom;text-align:left;max-width:100%;width:100%}.sc-duet-range-slider-h:last-child, .sc-duet-range-slider-h:last-of-type{margin-right:0!important}\@media only screen and (min-width:36em){.sc-duet-range-slider-h{width:calc(50% - 16px - 3px)}.duet-expand.sc-duet-range-slider-h{width:100%!important}}.duet-m-0.sc-duet-range-slider-h{margin:0!important}.duet-range-container.sc-duet-range-slider{background:transparent;position:relative;width:100%}.duet-output.sc-duet-range-slider, .duet-range-container.sc-duet-range-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;border:0;padding:0;margin:0}.duet-output.sc-duet-range-slider{background:transparent;position:absolute;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;background:#fff;color:#00294d;font-weight:400;line-height:1.25;font-size:.875rem;z-index:200;top:12px;right:0}.duet-theme-turva.sc-duet-range-slider .duet-output.sc-duet-range-slider{color:#111;font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.duet-range.sc-duet-range-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;background:#cfd2d4;position:relative;z-index:100;border-radius:4px;height:4px;width:100%}.duet-ie.sc-duet-range-slider .duet-range.sc-duet-range-slider{height:26px;background:transparent!important;width:auto;display:block}.duet-range.sc-duet-range-slider::-moz-range-track{-moz-appearance:none;border:0;height:1px;background:transparent}.duet-range.sc-duet-range-slider::-ms-track{background:transparent;color:transparent;border:0}.duet-range.sc-duet-range-slider:active, .duet-range.sc-duet-range-slider:focus{outline:none}.user-is-tabbing.sc-duet-range-slider-h .duet-range.sc-duet-range-slider:focus{outline:1px dotted #0077b3;outline:5px auto -webkit-focus-ring-color}.duet-range.sc-duet-range-slider::-webkit-slider-runnable-track{background:transparent}.duet-range.sc-duet-range-slider::-webkit-slider-thumb{-webkit-transition:-webkit-box-shadow .3s ease;transition:-webkit-box-shadow .3s ease;transition:box-shadow .3s ease;transition:box-shadow .3s ease,-webkit-box-shadow .3s ease;background:#fff;-webkit-appearance:none;border-radius:50%;border:1px solid #909599;position:relative;cursor:-webkit-grab;height:24px;width:24px}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-webkit-slider-thumb{border-color:#757575}.duet-range.sc-duet-range-slider:active::-webkit-slider-thumb{cursor:-webkit-grabbing}.duet-range.sc-duet-range-slider::-moz-range-track{background:transparent!important}.duet-range.sc-duet-range-slider::-moz-range-thumb{background:#fff;border:1px solid #909599;-moz-appearance:none;appearance:none;border-radius:50%;position:relative;cursor:-moz-grab;height:24px;width:24px}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-moz-range-thumb{border-color:#757575}.duet-range.sc-duet-range-slider:active::-moz-range-thumb{cursor:-moz-grabbing}.duet-range.sc-duet-range-slider::-ms-thumb{background:#fff;border:1px solid #909599;overflow:visible;border-radius:50%;position:relative;height:24px;width:24px}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-ms-thumb{border-color:#757575}.duet-range.sc-duet-range-slider::-ms-fill-lower{background:#0077b3;height:4px}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-ms-fill-lower{background:#c60c30}.duet-range.sc-duet-range-slider::-ms-fill-upper{background:#cfd2d4;height:4px}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-ms-fill-upper{background:#d1d1d1}"}};export{r as duet_range_slider};