text: import{r as t,c as r,h as i,H as a,g as e}from"./p-900e5a2b.js";import{createGesture as n}from"./p-947c14e3.js";import{h as s,j as o,i as h,d as b,e as l}from"./p-d56ecf06.js";import{s as d,h as g}from"./p-b0f3bd3c.js";import"./p-2263719e.js";const c=class{constructor(i){t(this,i),this.bkkrChange=r(this,"bkkrChange",7),this.bkkrStyle=r(this,"bkkrStyle",7),this.bkkrFocus=r(this,"bkkrFocus",7),this.bkkrBlur=r(this,"bkkrBlur",7),this.rangeId="bkkr-r-"+m++,this.didLoad=!1,this.noUpdate=!1,this.hasFocus=!1,this.inheritedAttributes={},this.ratioA=0,this.ratioB=0,this.debounce=0,this.name="",this.dualKnobs=!1,this.min=0,this.max=100,this.pin=!1,this.snaps=!1,this.step=1,this.ticks=!0,this.disabled=!1,this.value=0,this.clampBounds=t=>s(this.min,t,this.max),this.ensureValueInBounds=t=>this.dualKnobs?{lower:this.clampBounds(t.lower),upper:this.clampBounds(t.upper)}:this.clampBounds(t),this.setupGesture=async()=>{const t=this.rangeSlider;t&&(this.gesture=n({el:t,gestureName:"range",gesturePriority:100,threshold:0,onStart:t=>this.onStart(t),onMove:t=>this.onMove(t),onEnd:t=>this.onEnd(t)}),this.gesture.enable(!this.disabled))},this.handleKeyboard=(t,r)=>{let i=this.step;i=i>0?i:1,i/=this.max-this.min,r||(i*=-1),"A"===t?this.ratioA=s(0,this.ratioA+i,1):this.ratioB=s(0,this.ratioB+i,1),this.updateValue()},this.onBlur=()=>{this.hasFocus&&(this.hasFocus=!1,this.bkkrBlur.emit(),this.emitStyle())},this.onFocus=()=>{this.hasFocus||(this.hasFocus=!0,this.bkkrFocus.emit(),this.emitStyle())}}debounceChanged(){this.bkkrChange=o(this.bkkrChange,this.debounce)}minChanged(){this.noUpdate||this.updateRatio()}maxChanged(){this.noUpdate||this.updateRatio()}disabledChanged(){this.gesture&&this.gesture.enable(!this.disabled),this.emitStyle()}valueChanged(t){this.noUpdate||this.updateRatio(),t=this.ensureValueInBounds(t),this.bkkrChange.emit({value:t})}componentWillLoad(){this.inheritedAttributes=h(this.el,["aria-label"])}componentDidLoad(){this.setupGesture(),this.didLoad=!0}connectedCallback(){this.updateRatio(),this.debounceChanged(),this.disabledChanged(),this.didLoad&&this.setupGesture()}disconnectedCallback(){this.gesture&&(this.gesture.destroy(),this.gesture=void 0)}getValue(){const t=this.value||0;return this.dualKnobs?"object"==typeof t?t:{lower:0,upper:t}:"object"==typeof t?t.upper:t}emitStyle(){this.bkkrStyle.emit({interactive:!0,"interactive-disabled":this.disabled})}onStart(t){const r=this.rect=this.rangeSlider.getBoundingClientRect(),i=t.currentX;let a=s(0,(i-r.left)/r.width,1);"rtl"===document.dir&&(a=1-a),this.pressedKnob=!this.dualKnobs||Math.abs(this.ratioA-a)<Math.abs(this.ratioB-a)?"A":"B",this.setFocus(this.pressedKnob),this.update(i)}onMove(t){this.update(t.currentX)}onEnd(t){this.update(t.currentX),this.pressedKnob=void 0}update(t){const r=this.rect;let i=s(0,(t-r.left)/r.width,1);"rtl"===document.dir&&(i=1-i),this.snaps&&(i=u(p(i,this.min,this.max,this.step),this.min,this.max)),"A"===this.pressedKnob?this.ratioA=i:this.ratioB=i,this.updateValue()}get valA(){return p(this.ratioA,this.min,this.max,this.step)}get valB(){return p(this.ratioB,this.min,this.max,this.step)}get ratioLower(){return this.dualKnobs?Math.min(this.ratioA,this.ratioB):0}get ratioUpper(){return this.dualKnobs?Math.max(this.ratioA,this.ratioB):this.ratioA}updateRatio(){const t=this.getValue(),{min:r,max:i}=this;this.dualKnobs?(this.ratioA=u(t.lower,r,i),this.ratioB=u(t.upper,r,i)):this.ratioA=u(t,r,i)}updateValue(){this.noUpdate=!0;const{valA:t,valB:r}=this;this.value=this.dualKnobs?{lower:Math.min(t,r),upper:Math.max(t,r)}:t,this.noUpdate=!1}setFocus(t){if(this.el.shadowRoot){const r=this.el.shadowRoot.querySelector("A"===t?".range-knob-a":".range-knob-b");r&&r.focus()}}render(){const{min:t,max:r,step:e,el:n,handleKeyboard:s,pressedKnob:o,disabled:h,pin:c,ratioLower:p,ratioUpper:m,inheritedAttributes:v,rangeId:x}=this;let{labelText:f}=b(n,x);null==f&&(f=v["aria-label"]);const w="rtl"===document.dir,z=w?"right":"left",y=t=>({[z]:t[z]}),A={[z]:100*p+"%",[w?"left":"right"]:100-100*m+"%"},C=[];if(this.snaps&&this.ticks)for(let i=t;i<=r;i+=e){const a=u(i,t,r),e={ratio:a,active:a>=p&&a<=m};e[z]=100*a+"%",C.push(e)}return l(!0,n,this.name,JSON.stringify(this.getValue()),h),i(a,{onFocusin:this.onFocus,onFocusout:this.onBlur,id:x,class:d(this.color,{"in-item":g("bkkr-item",n),"range-has-pin":c,"state-disabled":h,"state-pressed":void 0!==o,"state-focusable":!0})},i("slot",{name:"start"}),i("div",{class:"range-slider",ref:t=>this.rangeSlider=t},C.map((t=>i("div",{style:y(t),role:"presentation",class:{"range-tick":!0,"range-tick-active":t.active},part:t.active?"tick-active":"tick"}))),i("div",{class:"range-bar",role:"presentation",part:"bar"}),i("div",{class:"range-bar range-bar-active",role:"presentation",style:A,part:"bar-active"}),k(w,{knob:"A",pressed:"A"===o,value:this.valA,ratio:this.ratioA,pin:c,disabled:h,handleKeyboard:s,min:t,max:r,labelText:f}),this.dualKnobs&&k(w,{knob:"B",pressed:"B"===o,value:this.valB,ratio:this.ratioB,pin:c,disabled:h,handleKeyboard:s,min:t,max:r,labelText:f})),i("slot",{name:"end"}))}get el(){return e(this)}static get watchers(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],disabled:["disabledChanged"],value:["valueChanged"]}}},k=(t,{knob:r,value:a,ratio:e,min:n,max:s,disabled:o,pressed:h,pin:b,handleKeyboard:l,labelText:d})=>{const g=t?"right":"left";return i("div",{onKeyDown:t=>{const i=t.key;"ArrowLeft"===i||"ArrowDown"===i?(l(r,!1),t.preventDefault(),t.stopPropagation()):"ArrowRight"!==i&&"ArrowUp"!==i||(l(r,!0),t.preventDefault(),t.stopPropagation())},class:{"range-knob-handle":!0,"range-knob-a":"A"===r,"range-knob-b":"B"===r,"range-knob-pressed":h,"range-knob-min":a===n,"range-knob-max":a===s},style:(()=>{const t={};return t[g]=100*e+"%",t})(),role:"slider",tabindex:o?-1:0,"aria-label":d,"aria-valuemin":n,"aria-valuemax":s,"aria-disabled":o?"true":null,"aria-valuenow":a},b&&i("div",{class:"range-pin",role:"presentation",part:"pin"},Math.round(a)),i("div",{class:"range-knob",role:"presentation",part:"knob"}))},p=(t,r,i,a)=>{let e=(i-r)*t;return a>0&&(e=Math.round(e/a)*a+r),s(r,e,i)},u=(t,r,i)=>s(0,(t-r)/(i-r),1);let m=0;c.style=":host{--knob-handle-size:calc(var(--knob-size) * 2);--knob-border-radius:50%;--knob-background:var(--bkkr-input-knob-background, var(--bkkr-background-color, #fff));--knob-box-shadow:0 1.5px 2.5px 0 rgba(var(--box-shadow-color, 0, 0, 0), 0.1), 0 6px 5px 0 rgba(var(--box-shadow-color, 0, 0, 0), 0.12), 0 0.6px 10px 0 rgba(var(--box-shadow-color, 0, 0, 0), 0.08);--knob-size:24px;--bar-height:2px;--bar-background:rgba(var(--bkkr-text-color-rgb, 0, 0, 0), 0.1);--bar-background-hover:rgba(var(--bkkr-text-color-rgb, 0, 0, 0), 0.3);--bar-background-focus:rgba(var(--bkkr-text-color-rgb, 0, 0, 0), 0.3);--bar-background-active:var(--color-base, var(--color-primary, #3880ff));--bar-border-radius:0;--bar-transition:0.2s background-color cubic-bezier(0.32, 0.72, 0, 1);--height:42px;padding-left:16px;padding-right:16px;padding-top:0.5rem;padding-bottom:0.5rem;display:-ms-flexbox;display:flex;position:relative;-ms-flex:3;flex:3;-ms-flex-align:center;align-items:center;font-family:var(--bkkr-font-family);-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}::slotted(bkkr-label){-ms-flex:initial;flex:initial}::slotted(bkkr-icon[slot]){font-size:1.5rem}::slotted([slot=start]){margin-left:0;margin-right:var(--bkkr-spacer, 16px);margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--bkkr-spacer, 16px);margin-inline-end:var(--bkkr-spacer, 16px)}}::slotted([slot=end]){margin-left:var(--bkkr-spacer, 16px);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--bkkr-spacer, 16px);margin-inline-start:var(--bkkr-spacer, 16px);-webkit-margin-end:0;margin-inline-end:0}}.range-slider{position:relative;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:pointer;-ms-touch-action:pan-y;touch-action:pan-y}:host(.state-pressed) .range-knob-handle{cursor:-webkit-grabbing;cursor:grabbing}.range-pin{padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;display:inline-block;position:relative;top:-20px;min-width:28px;-webkit-transform:translate3d(0, 28px, 0) scale(0.01);transform:translate3d(0, 28px, 0) scale(0.01);-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);transition:-webkit-transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);transition:transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);transition:transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), -webkit-transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);background:transparent;color:var(--bkkr-text-color, #000);font-size:0.75rem;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-pin{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}:host(.range-has-pin){padding-top:1.25rem}.range-bar{border-radius:var(--bar-border-radius);top:calc((var(--height) - var(--bar-height)) / 2);left:0;position:absolute;width:100%;height:var(--bar-height);-webkit-transition:var(--bar-transition);transition:var(--bar-transition);background-color:var(--bar-background);pointer-events:none}[dir=rtl] .range-bar,:host-context([dir=rtl]) .range-bar{left:unset}.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}.range-tick{margin-left:-1px;border-radius:0;position:absolute;top:18px;width:2px;height:8px;pointer-events:none;background:rgba(var(--bkkr-text-color-rgb, 0, 0, 0), 0.1)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-tick{margin-left:unset;-webkit-margin-start:-1px;margin-inline-start:-1px}}.range-tick-active{background:var(--bar-background-active)}.range-knob{--knob-transition:0.2s transform cubic-bezier(0.25, 1.11, 0.78, 1.59);--knob-transform:translateZ(0);border-radius:var(--knob-border-radius);top:calc(50% - var(--knob-size) / 2);left:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);-webkit-transform:var(--knob-transform);transform:var(--knob-transform);-webkit-transition:var(--knob-transition);transition:var(--knob-transition);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}[dir=rtl] .range-knob,:host-context([dir=rtl]) .range-knob{left:unset}.range-knob-handle{top:calc((var(--height) - var(--knob-handle-size)) / 2);left:0;margin-left:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center;cursor:-webkit-grab;cursor:grab}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-knob-handle{margin-left:unset;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2)}}[dir=rtl] .range-knob-handle,:host-context([dir=rtl]) .range-knob-handle{left:unset}.range-knob-handle:active,.range-knob-handle:focus{outline:none}.range-knob-pressed .range-knob{--knob-transform:scale3d(0.9, 0.9, 1);--knob-transition:0.2s transform ease-out}.range-knob-pressed .range-pin{-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}@media (any-hover: hover){:host(:hover) .range-bar:not(.range-bar-active),:host(:hover) .range-tick:not(.range-tick-active){background:var(--bar-background-hover)}}:host(:focus) .range-bar:not(.range-bar-active),:host(:focus) .range-tick:not(.range-tick-active),:host(.state-focused) .range-bar:not(.range-bar-active),:host(.state-focused) .range-tick:not(.range-tick-active){background:var(--bar-background-focus)}:host(.state-pressed) .range-bar-active{will-change:left, right}:host(:disabled),:host(.state-disabled){pointer-events:none;opacity:0.3}:host(.range-color) .range-bar-active,:host(.range-color) .range-tick-active{background:var(--color-base)}:host(.in-item){width:100%}:host(.in-item) ::slotted(bkkr-label){-ms-flex-item-align:center;align-self:center}";export{c as bkkr_range}