@sandlada/mdc/build/components/slider/internal/base-slider.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{property as e}from"../../../node_modules/@lit/reactive-element/decorators/property.js";import{state as t}from"../../../node_modules/@lit/reactive-element/decorators/state.js";import{query as n}from"../../../node_modules/@lit/reactive-element/decorators/query.js";import{queryAsync as r}from"../../../node_modules/@lit/reactive-element/decorators/query-async.js";import"../../../node_modules/lit/decorators.js";import{html as i,nothing as a}from"../../../node_modules/lit-html/lit-html.js";import{LitElement as o}from"../../../node_modules/lit-element/lit-element.js";import"../../../node_modules/lit/index.js";import{classMap as s}from"../../../node_modules/lit-html/directives/class-map.js";import"../../../node_modules/lit/directives/class-map.js";import{mixinElementInternals as c}from"../../../utils/behaviors/element-internals.js";import{composeMixin as l}from"../../../utils/compose-mixin/compose-mixin.js";import u from"../../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{dispatchActivationClick as d,isActivationClick as f}from"../../../utils/event/form-label-activation.js";import{getFormState as p,getFormValue as m,mixinFormAssociated as h}from"../../../utils/form/form-associated.js";import{createValidator as g,getValidityAnchor as _,mixinConstraintValidation as v}from"../../../utils/behaviors/constraint-validation.js";import{redispatchEvent as y}from"../../../utils/event/redispatch-event.js";import{styleMap as b}from"../../../node_modules/lit-html/directives/style-map.js";import"../../../node_modules/lit/directives/style-map.js";import{when as x}from"../../../node_modules/lit-html/directives/when.js";import{SliderValidator as S}from"../../../utils/behaviors/validators/slider-validator.js";
/**
* @license
* Copyright 2023 Google LLC
* SPDX-License-Identifier: Apache-2.0
*
* [Modified By Kai-Orion & Sandlada]
*
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*
* @link
* https://github.com/material-components/material-web/blob/main/slider/internal/slider.ts
*/
function C(t){class n extends t{constructor(...e){super(...e),this.min=0,this.max=100,this.valueLabel=``,this.valueLabelStart=``,this.valueLabelEnd=``,this.ariaLabelStart=``,this.ariaValueTextStart=``,this.ariaLabelEnd=``,this.ariaValueTextEnd=``,this.step=1,this.ticks=!1,this.labeled=!1,this.range=!1}get nameStart(){return this.getAttribute(`name-start`)??this.name}set nameStart(e){this.setAttribute(`name-start`,e)}get nameEnd(){return this.getAttribute(`name-end`)??this.nameStart}set nameEnd(e){this.setAttribute(`name-end`,e)}}return u([e({type:Number})],n.prototype,`min`,void 0),u([e({type:Number})],n.prototype,`max`,void 0),u([e({type:Number})],n.prototype,`value`,void 0),u([e({type:Number,attribute:`value-start`})],n.prototype,`valueStart`,void 0),u([e({type:Number,attribute:`value-end`})],n.prototype,`valueEnd`,void 0),u([e({attribute:`value-label`})],n.prototype,`valueLabel`,void 0),u([e({attribute:`value-label-start`})],n.prototype,`valueLabelStart`,void 0),u([e({attribute:`value-label-end`})],n.prototype,`valueLabelEnd`,void 0),u([e({attribute:`aria-label-start`})],n.prototype,`ariaLabelStart`,void 0),u([e({attribute:`aria-valuetext-start`})],n.prototype,`ariaValueTextStart`,void 0),u([e({attribute:`aria-label-end`})],n.prototype,`ariaLabelEnd`,void 0),u([e({attribute:`aria-valuetext-end`})],n.prototype,`ariaValueTextEnd`,void 0),u([e({type:Number})],n.prototype,`step`,void 0),u([e({type:Boolean})],n.prototype,`ticks`,void 0),u([e({type:Boolean})],n.prototype,`labeled`,void 0),u([e({type:Boolean,attribute:`ranged`})],n.prototype,`range`,void 0),n}var w=class extends l(c,h,v,C)(o){static{this.shadowRootOptions={...o.shadowRootOptions,delegatesFocus:!0}}get renderAriaLabelStart(){let{ariaLabel:e}=this;return this.ariaLabelStart||e&&`${e} start`||this.valueLabelStart||String(this.valueStart)}get renderAriaValueTextStart(){return this.ariaValueTextStart||this.valueLabelStart||String(this.valueStart)}get renderAriaLabelEnd(){let{ariaLabel:e}=this;return this.range?this.ariaLabelEnd||e&&`${e} end`||this.valueLabelEnd||String(this.valueEnd):e||this.valueLabel||String(this.value)}get renderAriaValueTextEnd(){if(this.range)return this.ariaValueTextEnd||this.valueLabelEnd||String(this.valueEnd);let{ariaValueText:e}=this;return e||this.valueLabel||String(this.value)}constructor(){super(),this.handleStartHover=!1,this.handleEndHover=!1,this.startOnTop=!1,this.handlesOverlapping=!1,this.ripplePointerId=1,this.isRedispatchingEvent=!1,this.addEventListener(`click`,e=>{!f(e)||!this.inputEnd||(this.focus(),d(this.inputEnd))})}focus(){this.inputEnd?.focus()}willUpdate(e){this.renderValueStart=e.has(`valueStart`)?this.valueStart:this.inputStart?.valueAsNumber;let t=e.has(`valueEnd`)&&this.range||e.has(`value`);this.renderValueEnd=t?this.range?this.valueEnd:this.value:this.inputEnd?.valueAsNumber,e.get(`handleStartHover`)===void 0?e.get(`handleEndHover`)!==void 0&&this.toggleRippleHover(this.rippleEnd,this.handleEndHover):this.toggleRippleHover(this.rippleStart,this.handleStartHover)}updated(e){if(this.range&&(this.renderValueStart=this.inputStart.valueAsNumber),this.renderValueEnd=this.inputEnd.valueAsNumber,this.range){let e=(this.max-this.min)/3;if(this.valueStart===void 0){this.inputStart.valueAsNumber=this.min+e;let t=this.inputStart.valueAsNumber;this.valueStart=this.renderValueStart=t}if(this.valueEnd===void 0){this.inputEnd.valueAsNumber=this.min+2*e;let t=this.inputEnd.valueAsNumber;this.valueEnd=this.renderValueEnd=t}}else this.value??=this.renderValueEnd;if(e.has(`range`)||e.has(`renderValueStart`)||e.has(`renderValueEnd`)||this.isUpdatePending){let e=this.handleStart?.querySelector(`.handleNub`),t=this.handleEnd?.querySelector(`.handleNub`);this.handlesOverlapping=E(e,t)}this.performUpdate()}render(){let e=this.step===0?1:this.step,t=Math.max(this.max-this.min,e),n=this.range?((this.renderValueStart??this.min)-this.min)/t:0,r=((this.renderValueEnd??this.min)-this.min)/t,a={"--_start-fraction":String(n),"--_end-fraction":String(r),"--_tick-count":String(t/e)},o={ranged:this.range},c=this.valueLabelStart||String(this.renderValueStart),l=(this.range?this.valueLabelEnd:this.valueLabel)||String(this.renderValueEnd),u={start:!0,value:this.renderValueStart,ariaLabel:this.renderAriaLabelStart,ariaValueText:this.renderAriaValueTextStart,ariaMin:this.min,ariaMax:this.valueEnd??this.max},d={start:!1,value:this.renderValueEnd,ariaLabel:this.renderAriaLabelEnd,ariaValueText:this.renderAriaValueTextEnd,ariaMin:this.range?this.valueStart??this.min:this.min,ariaMax:this.max},f={start:!0,hover:this.handleStartHover,label:c},p={start:!1,hover:this.handleEndHover,label:l},m={hover:this.handleStartHover||this.handleEndHover};return i`<div class="container ${s(o)}" style="${b(a)}">${x(this.range,()=>this.renderInput(u))} ${this.renderInput(d)} ${this.renderTrack()}<div class="handleContainerPadded"><div class="handleContainerBlock"><div class="handleContainer ${s(m)}">${x(this.range,()=>this.renderHandle(f))} ${this.renderHandle(p)}</div></div></div></div>`}renderTrack(){return i`<div class="track"></div>${this.ticks?i`<div class="tickmarks"></div>`:a}`}renderLabel(e){return i`<div class="label" aria-hidden="true"><span class="labelContent" part="label">${e}</span></div>`}renderHandle({start:e,hover:t,label:n}){let r=!this.disabled&&e===this.startOnTop,a=!this.disabled&&this.handlesOverlapping,o=e?`start`:`end`;return i`<div class="handle ${s({[o]:!0,hover:t,onTop:r,isOverlapping:a})}"><mdc-focus-ring part="focus-ring" for="${o}"></mdc-focus-ring><mdc-ripple for="${o}" class="${o}" ?disabled="${this.disabled}"></mdc-ripple><div class="handleNub"><mdc-elevation part="elevation"></mdc-elevation></div>${x(this.labeled,()=>this.renderLabel(n))}</div>`}renderInput({start:e,value:t,ariaLabel:n,ariaValueText:r,ariaMin:o,ariaMax:c}){let l=e?`start`:`end`;return i`<input type="range" class="${s({start:e,end:!e})}" @focus="${this.handleFocus}" @pointerdown="${this.handleDown}" @pointerup="${this.handleUp}" @pointerenter="${this.handleEnter}" @pointermove="${this.handleMove}" @pointerleave="${this.handleLeave}" @keydown="${this.handleKeydown}" @keyup="${this.handleKeyup}" @input="${this.handleInput}" @change="${this.handleChange}" id="${l}" .disabled="${this.disabled}" .min="${String(this.min)}" aria-valuemin="${o}" .max="${String(this.max)}" aria-valuemax="${c}" .step="${String(this.step)}" .value="${String(t)}" .tabIndex="${+!!e}" aria-label="${n||a}" aria-valuetext="${r}">`}async toggleRippleHover(e,t){let n=await e;n&&(t?n.action.handlePointerenter(new PointerEvent(`pointerenter`,{isPrimary:!0,pointerId:this.ripplePointerId})):n.action.handlePointerleave(new PointerEvent(`pointerleave`,{isPrimary:!0,pointerId:this.ripplePointerId})))}handleFocus(e){this.updateOnTop(e.target)}startAction(e){let t=e.target,n=t===this.inputStart?this.inputEnd:this.inputStart;this.action={canFlip:e.type===`pointerdown`,flipped:!1,target:t,fixed:n,values:new Map([[t,t.valueAsNumber],[n,n?.valueAsNumber]])}}finishAction(e){this.action=void 0}handleKeydown(e){this.startAction(e)}handleKeyup(e){this.finishAction(e)}handleDown(e){this.startAction(e),this.ripplePointerId=e.pointerId;let t=e.target===this.inputStart;this.handleStartHover=!this.disabled&&t&&!!this.handleStart,this.handleEndHover=!this.disabled&&!t&&!!this.handleEnd}async handleUp(e){if(!this.action)return;let{target:t,values:n,flipped:r}=this.action;await new Promise(requestAnimationFrame),t!==void 0&&(t.focus(),r&&t.valueAsNumber!==n.get(t)&&t.dispatchEvent(new Event(`change`,{bubbles:!0}))),this.finishAction(e)}handleMove(e){if(this.disabled){this.handleStartHover=!1,this.handleEndHover=!1;return}this.handleStartHover=T(e,this.handleStart),this.handleEndHover=T(e,this.handleEnd)}handleEnter(e){this.handleMove(e)}handleLeave(){this.handleStartHover=!1,this.handleEndHover=!1}updateOnTop(e){this.startOnTop=e.classList.contains(`start`)}needsClamping(){if(!this.action)return!1;let{target:e,fixed:t}=this.action;return e===this.inputStart?e.valueAsNumber>t.valueAsNumber:e.valueAsNumber<t.valueAsNumber}isActionFlipped(){let{action:e}=this;if(!e)return!1;let{target:t,fixed:n,values:r}=e;return e.canFlip&&r.get(t)===r.get(n)&&this.needsClamping()&&(e.canFlip=!1,e.flipped=!0,e.target=n,e.fixed=t),e.flipped}flipAction(){if(!this.action)return!1;let{target:e,fixed:t,values:n}=this.action,r=e.valueAsNumber!==t.valueAsNumber;return e.valueAsNumber=t.valueAsNumber,t.valueAsNumber=n.get(t),r}clampAction(){if(!this.needsClamping()||!this.action)return!1;let{target:e,fixed:t}=this.action;return e.valueAsNumber=t.valueAsNumber,!0}handleInput(e){if(this.isRedispatchingEvent)return;let t=!1,n=!1;this.range&&(this.isActionFlipped()&&(t=!0,n=this.flipAction()),this.clampAction()&&(t=!0,n=!1));let r=e.target;this.updateOnTop(r),this.range?(this.valueStart=this.inputStart.valueAsNumber,this.valueEnd=this.inputEnd.valueAsNumber):this.value=this.inputEnd.valueAsNumber,t&&e.stopPropagation(),n&&(this.isRedispatchingEvent=!0,y(r,e),this.isRedispatchingEvent=!1)}handleChange(e){let t=e.target,{target:n,values:r}=this.action??{};n&&n.valueAsNumber===r.get(t)||y(this,e),this.finishAction(e)}[m](){if(this.range){let e=new FormData;return e.append(this.nameStart,String(this.valueStart)),e.append(this.nameEnd,String(this.valueEnd)),e}return String(this.value)}formResetCallback(){if(this.range){let e=this.getAttribute(`default-value-start`);this.valueStart=e===null?void 0:Number(e);let t=this.getAttribute(`default-value-end`);this.valueEnd=t===null?void 0:Number(t);return}let e=this.getAttribute(`default-value`);this.value=e===null?void 0:Number(e)}formStateRestoreCallback(e){if(Array.isArray(e)){let[[,t],[,n]]=e;this.valueStart=Number(t),this.valueEnd=Number(n),this.range=!0;return}this.value=Number(e),this.range=!1}[g](){return new S(()=>({min:this.min,max:this.max,step:this.step,range:this.range,value:this.value,valueStart:this.valueStart,valueEnd:this.valueEnd}))}[_](){return this}[p](){if(this.range){let e=new FormData;return e.append(this.nameStart,String(this.valueStart)),e.append(this.nameEnd,String(this.valueEnd)),e}return String(this.value)}};u([n(`input.start`)],w.prototype,`inputStart`,void 0),u([n(`.handle.start`)],w.prototype,`handleStart`,void 0),u([r(`mdc-ripple.start`)],w.prototype,`rippleStart`,void 0),u([n(`input.end`)],w.prototype,`inputEnd`,void 0),u([n(`.handle.end`)],w.prototype,`handleEnd`,void 0),u([r(`mdc-ripple.end`)],w.prototype,`rippleEnd`,void 0),u([t()],w.prototype,`handleStartHover`,void 0),u([t()],w.prototype,`handleEndHover`,void 0),u([t()],w.prototype,`startOnTop`,void 0),u([t()],w.prototype,`handlesOverlapping`,void 0),u([t()],w.prototype,`renderValueStart`,void 0),u([t()],w.prototype,`renderValueEnd`,void 0);function T({x:e,y:t},n){if(!n)return!1;let{top:r,left:i,bottom:a,right:o}=n.getBoundingClientRect();return e>=i&&e<=o&&t>=r&&t<=a}function E(e,t){if(!(e&&t))return!1;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect();return!(n.top>r.bottom||n.right<r.left||n.bottom<r.top||n.left>r.right)}export{w as BaseSlider};
//# sourceMappingURL=base-slider.js.map