516 lines
31 KiB
JavaScript
516 lines
31 KiB
JavaScript
import { jsx as N } from "react/jsx-runtime";
|
|
import $ from "react";
|
|
import { o as T } from "./create-component-CVXl33PD.mjs";
|
|
import { a as _, r as y, _ as i, n as s, x as c, c as v, E as f, b as L } from "./class-map-CwiboTfb.mjs";
|
|
import "./elevation-Dg8ssDJC.mjs";
|
|
import "./ripple-pQcEjR05.mjs";
|
|
import { e as V, a as u, r as h } from "./animation-DjClVFum.mjs";
|
|
import { o as P } from "./style-map-CdUj7GnE.mjs";
|
|
import { m as H } from "./delegate-BXi1gVeU.mjs";
|
|
import { i as O, d as R } from "./form-label-activation-ed0HgVsy.mjs";
|
|
import { r as g } from "./redispatch-event-taWUbWUt.mjs";
|
|
import { m as F } from "./element-internals-3IY9gE4L.mjs";
|
|
import { m as I, g as M } from "./form-associated-CyYeHPMb.mjs";
|
|
/**
|
|
* @license
|
|
* Copyright 2017 Google LLC
|
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
*/
|
|
function w(l) {
|
|
return (e, a) => V(e, a, { async get() {
|
|
var t;
|
|
return await this.updateComplete, ((t = this.renderRoot) == null ? void 0 : t.querySelector(l)) ?? null;
|
|
} });
|
|
}
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const B = _`@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 b(l, e, a) {
|
|
return l ? e(l) : a == null ? void 0 : a(l);
|
|
}
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const q = H(I(F(y)));
|
|
let r = class extends q {
|
|
/**
|
|
* The HTML name to use in form submission for a range slider's starting
|
|
* value. Use `name` instead if both the start and end values should use the
|
|
* same name.
|
|
*/
|
|
get nameStart() {
|
|
return this.getAttribute("name-start") ?? this.name;
|
|
}
|
|
set nameStart(e) {
|
|
this.setAttribute("name-start", e);
|
|
}
|
|
/**
|
|
* The HTML name to use in form submission for a range slider's ending value.
|
|
* Use `name` instead if both the start and end values should use the same
|
|
* name.
|
|
*/
|
|
get nameEnd() {
|
|
return this.getAttribute("name-end") ?? this.nameStart;
|
|
}
|
|
set nameEnd(e) {
|
|
this.setAttribute("name-end", e);
|
|
}
|
|
// Note: start aria-* properties are only applied when range=true, which is
|
|
// why they do not need to handle both cases.
|
|
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);
|
|
}
|
|
// Note: end aria-* properties are applied for single and range sliders, which
|
|
// is why it needs to handle `this.range` (while start aria-* properties do
|
|
// not).
|
|
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) => {
|
|
!O(e) || !this.inputEnd || (this.focus(), R(this.inputEnd));
|
|
});
|
|
}
|
|
focus() {
|
|
var e;
|
|
(e = this.inputEnd) == null || e.focus();
|
|
}
|
|
willUpdate(e) {
|
|
var t, n;
|
|
this.renderValueStart = e.has("valueStart") ? this.valueStart : (t = this.inputStart) == null ? void 0 : t.valueAsNumber;
|
|
const a = e.has("valueEnd") && this.range || e.has("value");
|
|
this.renderValueEnd = a ? 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 a, t;
|
|
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 o = this.inputStart.valueAsNumber;
|
|
this.valueStart = this.renderValueStart = o;
|
|
}
|
|
if (this.valueEnd === void 0) {
|
|
this.inputEnd.valueAsNumber = this.min + 2 * n;
|
|
const o = this.inputEnd.valueAsNumber;
|
|
this.valueEnd = this.renderValueEnd = o;
|
|
}
|
|
} else
|
|
this.value ?? (this.value = this.renderValueEnd);
|
|
if (e.has("range") || e.has("renderValueStart") || e.has("renderValueEnd") || this.isUpdatePending) {
|
|
const n = (a = this.handleStart) == null ? void 0 : a.querySelector(".handleNub"), o = (t = this.handleEnd) == null ? void 0 : t.querySelector(".handleNub");
|
|
this.handlesOverlapping = U(n, o);
|
|
}
|
|
this.performUpdate();
|
|
}
|
|
render() {
|
|
const e = this.step === 0 ? 1 : this.step, a = Math.max(this.max - this.min, e), t = this.range ? ((this.renderValueStart ?? this.min) - this.min) / a : 0, n = ((this.renderValueEnd ?? this.min) - this.min) / a, o = {
|
|
// for clipping inputs and active track.
|
|
"--_start-fraction": String(t),
|
|
"--_end-fraction": String(n),
|
|
// for generating tick marks
|
|
"--_tick-count": String(a / e)
|
|
}, d = { ranged: this.range }, m = this.valueLabelStart || String(this.renderValueStart), x = (this.range ? this.valueLabelEnd : this.valueLabel) || String(this.renderValueEnd), S = {
|
|
start: !0,
|
|
value: this.renderValueStart,
|
|
ariaLabel: this.renderAriaLabelStart,
|
|
ariaValueText: this.renderAriaValueTextStart,
|
|
ariaMin: this.min,
|
|
ariaMax: this.valueEnd ?? this.max
|
|
}, E = {
|
|
start: !1,
|
|
value: this.renderValueEnd,
|
|
ariaLabel: this.renderAriaLabelEnd,
|
|
ariaValueText: this.renderAriaValueTextEnd,
|
|
ariaMin: this.range ? this.valueStart ?? this.min : this.min,
|
|
ariaMax: this.max
|
|
}, z = {
|
|
start: !0,
|
|
hover: this.handleStartHover,
|
|
label: m
|
|
}, A = {
|
|
start: !1,
|
|
hover: this.handleEndHover,
|
|
label: x
|
|
}, C = {
|
|
hover: this.handleStartHover || this.handleEndHover
|
|
};
|
|
return c` <div
|
|
class="container ${v(d)}"
|
|
style=${P(o)}>
|
|
${b(this.range, () => this.renderInput(S))}
|
|
${this.renderInput(E)} ${this.renderTrack()}
|
|
<div class="handleContainerPadded">
|
|
<div class="handleContainerBlock">
|
|
<div class="handleContainer ${v(C)}">
|
|
${b(this.range, () => this.renderHandle(z))}
|
|
${this.renderHandle(A)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
renderTrack() {
|
|
return c`
|
|
<div class="track"></div>
|
|
${this.ticks ? c`<div class="tickmarks"></div>` : f}
|
|
`;
|
|
}
|
|
renderLabel(e) {
|
|
return c`<div class="label" aria-hidden="true">
|
|
<span class="labelContent" part="label">${e}</span>
|
|
</div>`;
|
|
}
|
|
renderHandle({ start: e, hover: a, label: t }) {
|
|
const n = !this.disabled && e === this.startOnTop, o = !this.disabled && this.handlesOverlapping, d = e ? "start" : "end";
|
|
return c`<div
|
|
class="handle ${v({
|
|
[d]: !0,
|
|
hover: a,
|
|
onTop: n,
|
|
isOverlapping: o
|
|
})}">
|
|
<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>
|
|
${b(this.labeled, () => this.renderLabel(t))}
|
|
</div>`;
|
|
}
|
|
renderInput({ start: e, value: a, ariaLabel: t, ariaValueText: n, ariaMin: o, ariaMax: d }) {
|
|
const m = e ? "start" : "end";
|
|
return c`<input
|
|
type="range"
|
|
class="${v({
|
|
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=${m}
|
|
.disabled=${this.disabled}
|
|
.min=${String(this.min)}
|
|
aria-valuemin=${o}
|
|
.max=${String(this.max)}
|
|
aria-valuemax=${d}
|
|
.step=${String(this.step)}
|
|
.value=${String(a)}
|
|
.tabIndex=${e ? 1 : 0}
|
|
aria-label=${t || f}
|
|
aria-valuetext=${n} />`;
|
|
}
|
|
async toggleRippleHover(e, a) {
|
|
const t = await e;
|
|
t && (a ? t.handlePointerenter(new PointerEvent("pointerenter", {
|
|
isPrimary: !0,
|
|
pointerId: this.ripplePointerId
|
|
})) : t.handlePointerleave(new PointerEvent("pointerleave", {
|
|
isPrimary: !0,
|
|
pointerId: this.ripplePointerId
|
|
})));
|
|
}
|
|
handleFocus(e) {
|
|
this.updateOnTop(e.target);
|
|
}
|
|
startAction(e) {
|
|
const a = e.target, t = a === this.inputStart ? this.inputEnd : this.inputStart;
|
|
this.action = {
|
|
canFlip: e.type === "pointerdown",
|
|
flipped: !1,
|
|
target: a,
|
|
fixed: t,
|
|
values: /* @__PURE__ */ new Map([
|
|
[a, a.valueAsNumber],
|
|
[t, t == null ? void 0 : t.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 a = e.target === this.inputStart;
|
|
this.handleStartHover = !this.disabled && a && !!this.handleStart, this.handleEndHover = !this.disabled && !a && !!this.handleEnd;
|
|
}
|
|
async handleUp(e) {
|
|
if (!this.action)
|
|
return;
|
|
const { target: a, values: t, flipped: n } = this.action;
|
|
await new Promise(requestAnimationFrame), a !== void 0 && (a.focus(), n && a.valueAsNumber !== t.get(a) && a.dispatchEvent(new Event("change", { bubbles: !0 }))), this.finishAction(e);
|
|
}
|
|
/**
|
|
* The move handler tracks handle hovering to facilitate proper ripple
|
|
* behavior on the slider handle. This is needed because user interaction with
|
|
* the native input is leveraged to position the handle. Because the separate
|
|
* displayed handle element has pointer events disabled (to allow interaction
|
|
* with the input) and the input's handle is a pseudo-element, neither can be
|
|
* the ripple's interactive element. Therefore the input is the ripple's
|
|
* interactive element and has a `ripple` directive; however the ripple
|
|
* is gated on the handle being hovered. In addition, because the ripple
|
|
* hover state is being specially handled, it must be triggered independent
|
|
* of the directive. This is done based on the hover state when the
|
|
* slider is updated.
|
|
*/
|
|
handleMove(e) {
|
|
this.handleStartHover = !this.disabled && k(e, this.handleStart), this.handleEndHover = !this.disabled && k(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: a } = this.action;
|
|
return e === this.inputStart ? e.valueAsNumber > a.valueAsNumber : e.valueAsNumber < a.valueAsNumber;
|
|
}
|
|
// if start/end start coincident and the first drag input would e.g. move
|
|
// start > end, avoid clamping and "flip" to use the other input
|
|
// as the action target.
|
|
isActionFlipped() {
|
|
const { action: e } = this;
|
|
if (!e)
|
|
return !1;
|
|
const { target: a, fixed: t, values: n } = e;
|
|
return e.canFlip && n.get(a) === n.get(t) && this.needsClamping() && (e.canFlip = !1, e.flipped = !0, e.target = t, e.fixed = a), e.flipped;
|
|
}
|
|
// when flipped, apply the drag input to the flipped target and reset
|
|
// the actual target.
|
|
flipAction() {
|
|
if (!this.action)
|
|
return !1;
|
|
const { target: e, fixed: a, values: t } = this.action, n = e.valueAsNumber !== a.valueAsNumber;
|
|
return e.valueAsNumber = a.valueAsNumber, a.valueAsNumber = t.get(a), n;
|
|
}
|
|
// clamp such that start does not move beyond end and visa versa.
|
|
clampAction() {
|
|
if (!this.needsClamping() || !this.action)
|
|
return !1;
|
|
const { target: e, fixed: a } = this.action;
|
|
return e.valueAsNumber = a.valueAsNumber, !0;
|
|
}
|
|
handleInput(e) {
|
|
if (this.isRedispatchingEvent)
|
|
return;
|
|
let a = !1, t = !1;
|
|
this.range && (this.isActionFlipped() && (a = !0, t = this.flipAction()), this.clampAction() && (a = !0, t = !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, a && e.stopPropagation(), t && (this.isRedispatchingEvent = !0, g(n, e), this.isRedispatchingEvent = !1);
|
|
}
|
|
handleChange(e) {
|
|
const a = e.target, { target: t, values: n } = this.action ?? {};
|
|
t && t.valueAsNumber === n.get(a) || g(this, e), this.finishAction(e);
|
|
}
|
|
[M]() {
|
|
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 a = this.getAttribute("value-start");
|
|
this.valueStart = a !== null ? Number(a) : void 0;
|
|
const t = this.getAttribute("value-end");
|
|
this.valueEnd = t !== null ? Number(t) : void 0;
|
|
return;
|
|
}
|
|
const e = this.getAttribute("value");
|
|
this.value = e !== null ? Number(e) : void 0;
|
|
}
|
|
formStateRestoreCallback(e) {
|
|
if (Array.isArray(e)) {
|
|
const [[, a], [, t]] = e;
|
|
this.valueStart = Number(a), this.valueEnd = Number(t), this.range = !0;
|
|
return;
|
|
}
|
|
this.value = Number(e), this.range = !1;
|
|
}
|
|
};
|
|
r.shadowRootOptions = {
|
|
...y.shadowRootOptions,
|
|
delegatesFocus: !0
|
|
};
|
|
i([
|
|
s({ type: Number })
|
|
], r.prototype, "min", void 0);
|
|
i([
|
|
s({ type: Number })
|
|
], r.prototype, "max", void 0);
|
|
i([
|
|
s({ type: Number })
|
|
], r.prototype, "value", void 0);
|
|
i([
|
|
s({ type: Number, attribute: "value-start" })
|
|
], r.prototype, "valueStart", void 0);
|
|
i([
|
|
s({ type: Number, attribute: "value-end" })
|
|
], r.prototype, "valueEnd", void 0);
|
|
i([
|
|
s({ attribute: "value-label" })
|
|
], r.prototype, "valueLabel", void 0);
|
|
i([
|
|
s({ attribute: "value-label-start" })
|
|
], r.prototype, "valueLabelStart", void 0);
|
|
i([
|
|
s({ attribute: "value-label-end" })
|
|
], r.prototype, "valueLabelEnd", void 0);
|
|
i([
|
|
s({ attribute: "aria-label-start" })
|
|
], r.prototype, "ariaLabelStart", void 0);
|
|
i([
|
|
s({ attribute: "aria-valuetext-start" })
|
|
], r.prototype, "ariaValueTextStart", void 0);
|
|
i([
|
|
s({ attribute: "aria-label-end" })
|
|
], r.prototype, "ariaLabelEnd", void 0);
|
|
i([
|
|
s({ attribute: "aria-valuetext-end" })
|
|
], r.prototype, "ariaValueTextEnd", void 0);
|
|
i([
|
|
s({ type: Number })
|
|
], r.prototype, "step", void 0);
|
|
i([
|
|
s({ type: Boolean })
|
|
], r.prototype, "ticks", void 0);
|
|
i([
|
|
s({ type: Boolean })
|
|
], r.prototype, "labeled", void 0);
|
|
i([
|
|
s({ type: Boolean })
|
|
], r.prototype, "range", void 0);
|
|
i([
|
|
u("input.start")
|
|
], r.prototype, "inputStart", void 0);
|
|
i([
|
|
u(".handle.start")
|
|
], r.prototype, "handleStart", void 0);
|
|
i([
|
|
w("md-ripple.start")
|
|
], r.prototype, "rippleStart", void 0);
|
|
i([
|
|
u("input.end")
|
|
], r.prototype, "inputEnd", void 0);
|
|
i([
|
|
u(".handle.end")
|
|
], r.prototype, "handleEnd", void 0);
|
|
i([
|
|
w("md-ripple.end")
|
|
], r.prototype, "rippleEnd", void 0);
|
|
i([
|
|
h()
|
|
], r.prototype, "handleStartHover", void 0);
|
|
i([
|
|
h()
|
|
], r.prototype, "handleEndHover", void 0);
|
|
i([
|
|
h()
|
|
], r.prototype, "startOnTop", void 0);
|
|
i([
|
|
h()
|
|
], r.prototype, "handlesOverlapping", void 0);
|
|
i([
|
|
h()
|
|
], r.prototype, "renderValueStart", void 0);
|
|
i([
|
|
h()
|
|
], r.prototype, "renderValueEnd", void 0);
|
|
function k({ x: l, y: e }, a) {
|
|
if (!a)
|
|
return !1;
|
|
const { top: t, left: n, bottom: o, right: d } = a.getBoundingClientRect();
|
|
return l >= n && l <= d && e >= t && e <= o;
|
|
}
|
|
function U(l, e) {
|
|
if (!(l && e))
|
|
return !1;
|
|
const a = l.getBoundingClientRect(), t = e.getBoundingClientRect();
|
|
return !(a.top > t.bottom || a.right < t.left || a.bottom < t.top || a.left > t.right);
|
|
}
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const X = _`: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 p = class extends r {
|
|
};
|
|
p.styles = [X, B];
|
|
p = i([
|
|
L("md-slider")
|
|
], p);
|
|
const D = T({
|
|
react: $,
|
|
elementClass: p,
|
|
tagName: "md-slider"
|
|
}), le = ({
|
|
className: l,
|
|
id: e,
|
|
style: a,
|
|
...t
|
|
}) => /* @__PURE__ */ N(
|
|
D,
|
|
{
|
|
className: l,
|
|
id: e,
|
|
style: a,
|
|
...t
|
|
}
|
|
);
|
|
export {
|
|
le as Slider
|
|
};
|