80 lines
27 KiB
JavaScript
80 lines
27 KiB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react/jsx-runtime"),E=require("react"),z=require("./create-component-D9KTUrcf.js"),a=require("./class-map-DV5418hw.js");require("./elevation-CqmyG_RP.js");require("./ripple-DoKzzEey.js");const o=require("./animation-A38fZ1oY.js"),A=require("./style-map-Bzw6qQ8K.js"),C=require("./delegate-4958lG3m.js"),u=require("./form-label-activation-CYEOF_US.js"),p=require("./redispatch-event-C93E51ce.js"),$=require("./element-internals-OOm6rgx-.js"),b=require("./form-associated-CxXMoMPu.js");/**
|
|
* @license
|
|
* Copyright 2017 Google LLC
|
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
*/function _(s){return(e,t)=>o.e(e,t,{async get(){var r;return await this.updateComplete,((r=this.renderRoot)==null?void 0:r.querySelector(s))??null}})}/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/const N=a.i$1`@media(forced-colors: active){:host{--md-slider-active-track-color: CanvasText;--md-slider-disabled-active-track-color: GrayText;--md-slider-disabled-active-track-opacity: 1;--md-slider-disabled-handle-color: GrayText;--md-slider-disabled-inactive-track-color: GrayText;--md-slider-disabled-inactive-track-opacity: 1;--md-slider-focus-handle-color: CanvasText;--md-slider-handle-color: CanvasText;--md-slider-handle-shadow-color: Canvas;--md-slider-hover-handle-color: CanvasText;--md-slider-hover-state-layer-color: Canvas;--md-slider-hover-state-layer-opacity: 1;--md-slider-inactive-track-color: Canvas;--md-slider-label-container-color: Canvas;--md-slider-label-text-color: CanvasText;--md-slider-pressed-handle-color: CanvasText;--md-slider-pressed-state-layer-color: Canvas;--md-slider-pressed-state-layer-opacity: 1;--md-slider-with-overlap-handle-outline-color: CanvasText}.label,.label::before{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}:host(:not([disabled])) .track::before{border:1px solid var(--_active-track-color)}.tickmarks::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='CanvasText'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/svg%3E")}.tickmarks::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/svg%3E")}:host([disabled]) .tickmarks::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/svg%3E")}}
|
|
`;/**
|
|
* @license
|
|
* Copyright 2021 Google LLC
|
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
*/function v(s,e,t){return s?e(s):t==null?void 0:t(s)}/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/const T=C.mixinDelegatesAria(b.mixinFormAssociated($.mixinElementInternals(a.r)));let i=class extends T{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)}get renderAriaLabelStart(){const{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(){const{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);const{ariaValueText:e}=this;return e||this.valueLabel||String(this.value)}constructor(){super(),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,this.handleStartHover=!1,this.handleEndHover=!1,this.startOnTop=!1,this.handlesOverlapping=!1,this.ripplePointerId=1,this.isRedispatchingEvent=!1,this.addEventListener("click",e=>{!u.isActivationClick(e)||!this.inputEnd||(this.focus(),u.dispatchActivationClick(this.inputEnd))})}focus(){var e;(e=this.inputEnd)==null||e.focus()}willUpdate(e){var r,n;this.renderValueStart=e.has("valueStart")?this.valueStart:(r=this.inputStart)==null?void 0:r.valueAsNumber;const t=e.has("valueEnd")&&this.range||e.has("value");this.renderValueEnd=t?this.range?this.valueEnd:this.value:(n=this.inputEnd)==null?void 0:n.valueAsNumber,e.get("handleStartHover")!==void 0?this.toggleRippleHover(this.rippleStart,this.handleStartHover):e.get("handleEndHover")!==void 0&&this.toggleRippleHover(this.rippleEnd,this.handleEndHover)}updated(e){var t,r;if(this.range&&(this.renderValueStart=this.inputStart.valueAsNumber),this.renderValueEnd=this.inputEnd.valueAsNumber,this.range){const n=(this.max-this.min)/3;if(this.valueStart===void 0){this.inputStart.valueAsNumber=this.min+n;const l=this.inputStart.valueAsNumber;this.valueStart=this.renderValueStart=l}if(this.valueEnd===void 0){this.inputEnd.valueAsNumber=this.min+2*n;const l=this.inputEnd.valueAsNumber;this.valueEnd=this.renderValueEnd=l}}else this.value??(this.value=this.renderValueEnd);if(e.has("range")||e.has("renderValueStart")||e.has("renderValueEnd")||this.isUpdatePending){const n=(t=this.handleStart)==null?void 0:t.querySelector(".handleNub"),l=(r=this.handleEnd)==null?void 0:r.querySelector(".handleNub");this.handlesOverlapping=L(n,l)}this.performUpdate()}render(){const e=this.step===0?1:this.step,t=Math.max(this.max-this.min,e),r=this.range?((this.renderValueStart??this.min)-this.min)/t:0,n=((this.renderValueEnd??this.min)-this.min)/t,l={"--_start-fraction":String(r),"--_end-fraction":String(n),"--_tick-count":String(t/e)},d={ranged:this.range},h=this.valueLabelStart||String(this.renderValueStart),g=(this.range?this.valueLabelEnd:this.valueLabel)||String(this.renderValueEnd),f={start:!0,value:this.renderValueStart,ariaLabel:this.renderAriaLabelStart,ariaValueText:this.renderAriaValueTextStart,ariaMin:this.min,ariaMax:this.valueEnd??this.max},k={start:!1,value:this.renderValueEnd,ariaLabel:this.renderAriaLabelEnd,ariaValueText:this.renderAriaValueTextEnd,ariaMin:this.range?this.valueStart??this.min:this.min,ariaMax:this.max},y={start:!0,hover:this.handleStartHover,label:h},x={start:!1,hover:this.handleEndHover,label:g},w={hover:this.handleStartHover||this.handleEndHover};return a.x` <div
|
|
class="container ${a.e$1(d)}"
|
|
style=${A.o(l)}>
|
|
${v(this.range,()=>this.renderInput(f))}
|
|
${this.renderInput(k)} ${this.renderTrack()}
|
|
<div class="handleContainerPadded">
|
|
<div class="handleContainerBlock">
|
|
<div class="handleContainer ${a.e$1(w)}">
|
|
${v(this.range,()=>this.renderHandle(y))}
|
|
${this.renderHandle(x)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>`}renderTrack(){return a.x`
|
|
<div class="track"></div>
|
|
${this.ticks?a.x`<div class="tickmarks"></div>`:a.E}
|
|
`}renderLabel(e){return a.x`<div class="label" aria-hidden="true">
|
|
<span class="labelContent" part="label">${e}</span>
|
|
</div>`}renderHandle({start:e,hover:t,label:r}){const n=!this.disabled&&e===this.startOnTop,l=!this.disabled&&this.handlesOverlapping,d=e?"start":"end";return a.x`<div
|
|
class="handle ${a.e$1({[d]:!0,hover:t,onTop:n,isOverlapping:l})}">
|
|
<md-focus-ring part="focus-ring" for=${d}></md-focus-ring>
|
|
<md-ripple
|
|
for=${d}
|
|
class=${d}
|
|
?disabled=${this.disabled}></md-ripple>
|
|
<div class="handleNub">
|
|
<md-elevation part="elevation"></md-elevation>
|
|
</div>
|
|
${v(this.labeled,()=>this.renderLabel(r))}
|
|
</div>`}renderInput({start:e,value:t,ariaLabel:r,ariaValueText:n,ariaMin:l,ariaMax:d}){const h=e?"start":"end";return a.x`<input
|
|
type="range"
|
|
class="${a.e$1({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=${h}
|
|
.disabled=${this.disabled}
|
|
.min=${String(this.min)}
|
|
aria-valuemin=${l}
|
|
.max=${String(this.max)}
|
|
aria-valuemax=${d}
|
|
.step=${String(this.step)}
|
|
.value=${String(t)}
|
|
.tabIndex=${e?1:0}
|
|
aria-label=${r||a.E}
|
|
aria-valuetext=${n} />`}async toggleRippleHover(e,t){const r=await e;r&&(t?r.handlePointerenter(new PointerEvent("pointerenter",{isPrimary:!0,pointerId:this.ripplePointerId})):r.handlePointerleave(new PointerEvent("pointerleave",{isPrimary:!0,pointerId:this.ripplePointerId})))}handleFocus(e){this.updateOnTop(e.target)}startAction(e){const t=e.target,r=t===this.inputStart?this.inputEnd:this.inputStart;this.action={canFlip:e.type==="pointerdown",flipped:!1,target:t,fixed:r,values:new Map([[t,t.valueAsNumber],[r,r==null?void 0:r.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;const 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;const{target:t,values:r,flipped:n}=this.action;await new Promise(requestAnimationFrame),t!==void 0&&(t.focus(),n&&t.valueAsNumber!==r.get(t)&&t.dispatchEvent(new Event("change",{bubbles:!0}))),this.finishAction(e)}handleMove(e){this.handleStartHover=!this.disabled&&m(e,this.handleStart),this.handleEndHover=!this.disabled&&m(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;const{target:e,fixed:t}=this.action;return e===this.inputStart?e.valueAsNumber>t.valueAsNumber:e.valueAsNumber<t.valueAsNumber}isActionFlipped(){const{action:e}=this;if(!e)return!1;const{target:t,fixed:r,values:n}=e;return e.canFlip&&n.get(t)===n.get(r)&&this.needsClamping()&&(e.canFlip=!1,e.flipped=!0,e.target=r,e.fixed=t),e.flipped}flipAction(){if(!this.action)return!1;const{target:e,fixed:t,values:r}=this.action,n=e.valueAsNumber!==t.valueAsNumber;return e.valueAsNumber=t.valueAsNumber,t.valueAsNumber=r.get(t),n}clampAction(){if(!this.needsClamping()||!this.action)return!1;const{target:e,fixed:t}=this.action;return e.valueAsNumber=t.valueAsNumber,!0}handleInput(e){if(this.isRedispatchingEvent)return;let t=!1,r=!1;this.range&&(this.isActionFlipped()&&(t=!0,r=this.flipAction()),this.clampAction()&&(t=!0,r=!1));const n=e.target;this.updateOnTop(n),this.range?(this.valueStart=this.inputStart.valueAsNumber,this.valueEnd=this.inputEnd.valueAsNumber):this.value=this.inputEnd.valueAsNumber,t&&e.stopPropagation(),r&&(this.isRedispatchingEvent=!0,p.redispatchEvent(n,e),this.isRedispatchingEvent=!1)}handleChange(e){const t=e.target,{target:r,values:n}=this.action??{};r&&r.valueAsNumber===n.get(t)||p.redispatchEvent(this,e),this.finishAction(e)}[b.getFormValue](){if(this.range){const 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){const t=this.getAttribute("value-start");this.valueStart=t!==null?Number(t):void 0;const r=this.getAttribute("value-end");this.valueEnd=r!==null?Number(r):void 0;return}const e=this.getAttribute("value");this.value=e!==null?Number(e):void 0}formStateRestoreCallback(e){if(Array.isArray(e)){const[[,t],[,r]]=e;this.valueStart=Number(t),this.valueEnd=Number(r),this.range=!0;return}this.value=Number(e),this.range=!1}};i.shadowRootOptions={...a.r.shadowRootOptions,delegatesFocus:!0};a.__decorate([a.n({type:Number})],i.prototype,"min",void 0);a.__decorate([a.n({type:Number})],i.prototype,"max",void 0);a.__decorate([a.n({type:Number})],i.prototype,"value",void 0);a.__decorate([a.n({type:Number,attribute:"value-start"})],i.prototype,"valueStart",void 0);a.__decorate([a.n({type:Number,attribute:"value-end"})],i.prototype,"valueEnd",void 0);a.__decorate([a.n({attribute:"value-label"})],i.prototype,"valueLabel",void 0);a.__decorate([a.n({attribute:"value-label-start"})],i.prototype,"valueLabelStart",void 0);a.__decorate([a.n({attribute:"value-label-end"})],i.prototype,"valueLabelEnd",void 0);a.__decorate([a.n({attribute:"aria-label-start"})],i.prototype,"ariaLabelStart",void 0);a.__decorate([a.n({attribute:"aria-valuetext-start"})],i.prototype,"ariaValueTextStart",void 0);a.__decorate([a.n({attribute:"aria-label-end"})],i.prototype,"ariaLabelEnd",void 0);a.__decorate([a.n({attribute:"aria-valuetext-end"})],i.prototype,"ariaValueTextEnd",void 0);a.__decorate([a.n({type:Number})],i.prototype,"step",void 0);a.__decorate([a.n({type:Boolean})],i.prototype,"ticks",void 0);a.__decorate([a.n({type:Boolean})],i.prototype,"labeled",void 0);a.__decorate([a.n({type:Boolean})],i.prototype,"range",void 0);a.__decorate([o.e$1("input.start")],i.prototype,"inputStart",void 0);a.__decorate([o.e$1(".handle.start")],i.prototype,"handleStart",void 0);a.__decorate([_("md-ripple.start")],i.prototype,"rippleStart",void 0);a.__decorate([o.e$1("input.end")],i.prototype,"inputEnd",void 0);a.__decorate([o.e$1(".handle.end")],i.prototype,"handleEnd",void 0);a.__decorate([_("md-ripple.end")],i.prototype,"rippleEnd",void 0);a.__decorate([o.r()],i.prototype,"handleStartHover",void 0);a.__decorate([o.r()],i.prototype,"handleEndHover",void 0);a.__decorate([o.r()],i.prototype,"startOnTop",void 0);a.__decorate([o.r()],i.prototype,"handlesOverlapping",void 0);a.__decorate([o.r()],i.prototype,"renderValueStart",void 0);a.__decorate([o.r()],i.prototype,"renderValueEnd",void 0);function m({x:s,y:e},t){if(!t)return!1;const{top:r,left:n,bottom:l,right:d}=t.getBoundingClientRect();return s>=n&&s<=d&&e>=r&&e<=l}function L(s,e){if(!(s&&e))return!1;const t=s.getBoundingClientRect(),r=e.getBoundingClientRect();return!(t.top>r.bottom||t.right<r.left||t.bottom<r.top||t.left>r.right)}/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/const V=a.i$1`:host{--_active-track-color: var(--md-slider-active-track-color, var(--md-sys-color-primary, #6750a4));--_active-track-height: var(--md-slider-active-track-height, 4px);--_active-track-shape: var(--md-slider-active-track-shape, var(--md-sys-shape-corner-full, 9999px));--_disabled-active-track-color: var(--md-slider-disabled-active-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-active-track-opacity: var(--md-slider-disabled-active-track-opacity, 0.38);--_disabled-handle-color: var(--md-slider-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-handle-elevation: var(--md-slider-disabled-handle-elevation, 0);--_disabled-inactive-track-color: var(--md-slider-disabled-inactive-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-inactive-track-opacity: var(--md-slider-disabled-inactive-track-opacity, 0.12);--_focus-handle-color: var(--md-slider-focus-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-color: var(--md-slider-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-elevation: var(--md-slider-handle-elevation, 1);--_handle-height: var(--md-slider-handle-height, 20px);--_handle-shadow-color: var(--md-slider-handle-shadow-color, var(--md-sys-color-shadow, #000));--_handle-shape: var(--md-slider-handle-shape, var(--md-sys-shape-corner-full, 9999px));--_handle-width: var(--md-slider-handle-width, 20px);--_hover-handle-color: var(--md-slider-hover-handle-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-slider-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-slider-hover-state-layer-opacity, 0.08);--_inactive-track-color: var(--md-slider-inactive-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_inactive-track-height: var(--md-slider-inactive-track-height, 4px);--_inactive-track-shape: var(--md-slider-inactive-track-shape, var(--md-sys-shape-corner-full, 9999px));--_label-container-color: var(--md-slider-label-container-color, var(--md-sys-color-primary, #6750a4));--_label-container-height: var(--md-slider-label-container-height, 28px);--_pressed-handle-color: var(--md-slider-pressed-handle-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-slider-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-slider-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-slider-state-layer-size, 40px);--_with-overlap-handle-outline-color: var(--md-slider-with-overlap-handle-outline-color, var(--md-sys-color-on-primary, #fff));--_with-overlap-handle-outline-width: var(--md-slider-with-overlap-handle-outline-width, 1px);--_with-tick-marks-active-container-color: var(--md-slider-with-tick-marks-active-container-color, var(--md-sys-color-on-primary, #fff));--_with-tick-marks-container-size: var(--md-slider-with-tick-marks-container-size, 2px);--_with-tick-marks-disabled-container-color: var(--md-slider-with-tick-marks-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_with-tick-marks-inactive-container-color: var(--md-slider-with-tick-marks-inactive-container-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-slider-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-font: var(--md-slider-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-slider-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem));--_label-text-size: var(--md-slider-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem));--_label-text-weight: var(--md-slider-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_start-fraction: 0;--_end-fraction: 0;--_tick-count: 0;display:inline-flex;vertical-align:middle;min-inline-size:200px;--md-elevation-level: var(--_handle-elevation);--md-elevation-shadow-color: var(--_handle-shadow-color)}md-focus-ring{height:48px;inset:unset;width:48px}md-elevation{transition-duration:250ms}@media(prefers-reduced-motion){.label{transition-duration:0}}:host([disabled]){opacity:var(--_disabled-active-track-opacity);--md-elevation-level: var(--_disabled-handle-elevation)}.container{flex:1;display:flex;align-items:center;position:relative;block-size:var(--_state-layer-size);pointer-events:none;touch-action:none}.track,.tickmarks{position:absolute;inset:0;display:flex;align-items:center}.track::before,.tickmarks::before,.track::after,.tickmarks::after{position:absolute;content:"";inset-inline-start:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));inset-inline-end:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));background-size:calc((100% - var(--_with-tick-marks-container-size)*2)/var(--_tick-count)) 100%}.track::before,.tickmarks::before{block-size:var(--_inactive-track-height);border-radius:var(--_inactive-track-shape)}.track::before{background:var(--_inactive-track-color)}.tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-inactive-container-color) 0, var(--_with-tick-marks-inactive-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}:host([disabled]) .track::before{opacity:calc(1/var(--_disabled-active-track-opacity)*var(--_disabled-inactive-track-opacity));background:var(--_disabled-inactive-track-color)}.track::after,.tickmarks::after{block-size:var(--_active-track-height);border-radius:var(--_active-track-shape);clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)))}.track::after{background:var(--_active-track-color)}.tickmarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-active-container-color) 0, var(--_with-tick-marks-active-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}.track:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}.tickmarks:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([disabled]) .track::after{background:var(--_disabled-active-track-color)}:host([disabled]) .tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-disabled-container-color) 0, var(--_with-tick-marks-disabled-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}.handleContainerPadded{position:relative;block-size:100%;inline-size:100%;padding-inline:calc(var(--_state-layer-size)/2)}.handleContainerBlock{position:relative;block-size:100%;inline-size:100%}.handleContainer{position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:calc(100%*var(--_start-fraction));inline-size:calc(100%*(var(--_end-fraction) - var(--_start-fraction)))}.handle{position:absolute;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);border-radius:var(--_handle-shape);display:flex;place-content:center;place-items:center}.handleNub{position:absolute;height:var(--_handle-height);width:var(--_handle-width);border-radius:var(--_handle-shape);background:var(--_handle-color)}:host([disabled]) .handleNub{background:var(--_disabled-handle-color)}input.end:focus~.handleContainerPadded .handle.end>.handleNub,input.start:focus~.handleContainerPadded .handle.start>.handleNub{background:var(--_focus-handle-color)}.container>.handleContainerPadded .handle.hover>.handleNub{background:var(--_hover-handle-color)}:host(:not([disabled])) input.end:active~.handleContainerPadded .handle.end>.handleNub,:host(:not([disabled])) input.start:active~.handleContainerPadded .handle.start>.handleNub{background:var(--_pressed-handle-color)}.onTop.isOverlapping .label,.onTop.isOverlapping .label::before{outline:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.onTop.isOverlapping .handleNub{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.handle.start{inset-inline-start:calc(0px - var(--_state-layer-size)/2)}.handle.end{inset-inline-end:calc(0px - var(--_state-layer-size)/2)}.label{position:absolute;box-sizing:border-box;display:flex;padding:4px;place-content:center;place-items:center;border-radius:var(--md-sys-shape-corner-full, 9999px);color:var(--_label-text-color);font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);inset-block-end:100%;min-inline-size:var(--_label-container-height);min-block-size:var(--_label-container-height);background:var(--_label-container-color);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1);transform-origin:center bottom;transform:scale(0)}:host(:focus-within) .label,.handleContainer.hover .label,:where(:has(input:active)) .label{transform:scale(1)}.label::before,.label::after{position:absolute;display:block;content:"";background:inherit}.label::before{inline-size:calc(var(--_label-container-height)/2);block-size:calc(var(--_label-container-height)/2);bottom:calc(var(--_label-container-height)/-10);transform:rotate(45deg)}.label::after{inset:0px;border-radius:inherit}.labelContent{z-index:1}input[type=range]{opacity:0;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;box-sizing:border-box;height:100%;width:100%;margin:0;background:rgba(0,0,0,0);cursor:pointer;pointer-events:auto;appearance:none}input[type=range]:focus{outline:none}::-webkit-slider-runnable-track{-webkit-appearance:none}::-moz-range-track{appearance:none}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_handle-height);inline-size:var(--_handle-width);opacity:0;z-index:2}input.end::-webkit-slider-thumb{--_track-and-knob-padding: calc( (var(--_state-layer-size) - var(--_handle-width)) / 2 );--_x-translate: calc( var(--_track-and-knob-padding) - 2 * var(--_end-fraction) * var(--_track-and-knob-padding) );transform:translateX(var(--_x-translate))}input.end:dir(rtl)::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}input.start::-webkit-slider-thumb{--_track-and-knob-padding: calc( (var(--_state-layer-size) - var(--_handle-width)) / 2 );--_x-translate: calc( var(--_track-and-knob-padding) - 2 * var(--_start-fraction) * var(--_track-and-knob-padding) );transform:translateX(var(--_x-translate))}input.start:dir(rtl)::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}::-moz-range-thumb{appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);transform:scaleX(0);opacity:0;z-index:2}.ranged input.start{clip-path:inset(0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))) 0 0)}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}.ranged input.end{clip-path:inset(0 0 0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)))}.ranged input.end:dir(rtl){clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}.onTop{z-index:1}.handle{--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-ripple{border-radius:50%;height:var(--_state-layer-size);width:var(--_state-layer-size)}
|
|
`;/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/let c=class extends i{};c.styles=[V,N];c=a.__decorate([a.t$1("md-slider")],c);const P=z.o({react:E,elementClass:c,tagName:"md-slider"}),H=({className:s,id:e,style:t,...r})=>S.jsx(P,{className:s,id:e,style:t,...r});exports.Slider=H;
|