@vonage/vivid 5.15.0 → 5.16.0

package/unbundled/definition55.js

@@ -0,0 +1,492 @@
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { t as __decorate } from "./decorate.js";
+import { n as FormAssociated } from "./form-associated.js";
+import { t as FormElement } from "./form-element.js";
+import { t as Localized } from "./localized.js";
+import { i as Popup, r as PlacementStrategy, t as popupDefinition } from "./definition10.js";
+import { n as keyArrowRight$1, t as keyArrowLeft$1 } from "./key-codes.js";
+import { a as defaultToOneConverter, i as lerp, n as getMarkersTemplate, o as roundToStepValue, r as inverseLerp } from "./slider.template.js";
+import { attr, html, nullableNumberConverter, observable, ref, when } from "@microsoft/fast-element";
+import { Orientation, classNames, keyArrowDown, keyArrowUp, keyEnd, keyHome, limit } from "@microsoft/fast-web-utilities";
+//#region src/lib/range-slider/range-slider.scss?inline
+var range_slider_default = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary:var(--vvd-slider-cta-primary,var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-slider-accent-primary,var(--vvd-color-canvas-text))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;--_thumb-size:12px;--_thumb-interaction-indicator-size:36px;--_track-start-inset-inline-start:0;--_track-start-inset-block-start:0;cursor:pointer;user-select:none;outline:none}.control .positioning-region{position:relative}.control .track{background:var(--_track-background-color);border-radius:4px;position:absolute}.control .track-start{border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;position:absolute;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));min-inline-size:var(--_thumb-size);margin-inline-start:calc(var(--_thumb-size) / 2)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:2px;left:0;right:0}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start:1px;border-top-left-radius:0;border-bottom-left-radius:0}.control.horizontal .track .mark{block-size:6px;inline-size:100%;position:absolute;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:6px;position:absolute;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start:1px;border-radius:0}.control.disabled{--_track-background-color:var(--vvd-color-neutral-100);--_track-start-background-color:var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color:var(--vvd-color-neutral-300);--_track-start-background-color:var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);touch-action:none;border-radius:50%;outline:none;position:absolute}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--_thumb-interaction-indicator-alpha:.05;border-radius:50%}.control.horizontal .thumb-container{transform:translateX(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover:hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha:.12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha:.25}.thumb-container:before{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha,0);transition:opacity .2s ease-out;display:block;position:absolute}.thumb-container:after{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);display:block;position:absolute}.popup{pointer-events:none}.tooltip{width:auto;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);padding:8px 12px}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s}:host([internal-part]) .control.horizontal .track{block-size:4px;top:16px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control,:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start:auto;--_track-start-inset-block-start:auto}";
+//#endregion
+//#region src/lib/range-slider/range-slider.ts
+var Direction$1 = {
+	Increment: 1,
+	Decrement: -1
+};
+/**
+* Base class for range-slider
+*
+* @component range-slider
+* @public
+* @event {CustomEvent<undefined>} input:start - Event emitted when the start value changes
+* @event {CustomEvent<undefined>} input:end - Event emitted when the end value changes
+* @event {CustomEvent<undefined>} input - Event emitted when either the start or end value changes.
+* @event {CustomEvent<undefined>} change - Event emitted when either the start or end value changes.
+* @vueModel start start input:start `event.currentTarget.start`
+* @vueModel end end input:end `event.currentTarget.end`
+* @vueModel startAsNumber startAsNumber input:start `event.currentTarget.startAsNumber`
+* @vueModel endAsNumber endAsNumber input:end `event.currentTarget.endAsNumber`
+* @testSelector byLabel byLabel
+* @testAction slideStartTo slideTo #track #startThumb
+* @testAction slideEndTo slideTo #track #endThumb
+* @testQuery range rangeAsNumber
+* @testRef track shadow .control
+* @testRef startThumb shadow #start-thumb
+* @testRef endThumb shadow #end-thumb
+*/
+var RangeSlider = class extends Localized(FormElement(FormAssociated(VividElement))) {
+	constructor(..._args) {
+		super(..._args);
+		this.start = "";
+		this.end = "";
+		this.min = 0;
+		this.max = 10;
+		this.step = 1;
+		this.orientation = Orientation.horizontal;
+		this.ariaStartLabel = null;
+		this.ariaEndLabel = null;
+		this.markers = false;
+		this.pin = false;
+		this.valueTextFormatter = (value) => parseFloat(value).toLocaleString(this.locale.lang);
+		this.proxy = document.createElement("input");
+		this._trackEl = null;
+		this._startThumbEl = null;
+		this._endThumbEl = null;
+		this._draggingThumb = false;
+		this._visiblyFocusedThumb = null;
+		this._hoveredThumb = null;
+		this._startThumbCss = "";
+		this._endThumbCss = "";
+		this._selectedRangeCss = "";
+	}
+	#isInternalValueUpdate = false;
+	/**
+	* @internal
+	*/
+	startChanged() {
+		this.currentStart = this.start;
+		if (!this.#isInternalValueUpdate) {
+			this.dirtyValue = true;
+			this.#updateFormValue();
+		}
+		if (this.$fastController.isConnected) this.#updateThumbPositions();
+	}
+	/**
+	* @internal
+	*/
+	initialStartChanged(_, newValue) {
+		if (newValue && !this.dirtyValue) {
+			this.start = newValue;
+			this.dirtyValue = false;
+		}
+	}
+	/**
+	* @internal
+	*/
+	currentStartChanged() {
+		this.start = this.currentStart;
+	}
+	/**
+	* The start property, typed as a number.
+	*
+	* @public
+	*/
+	get startAsNumber() {
+		return parseFloat(this.start);
+	}
+	set startAsNumber(next) {
+		this.start = next.toString();
+	}
+	/**
+	* @internal
+	*/
+	endChanged() {
+		this.currentEnd = this.end;
+		if (!this.#isInternalValueUpdate) {
+			this.dirtyValue = true;
+			this.#updateFormValue();
+		}
+		if (this.$fastController.isConnected) this.#updateThumbPositions();
+	}
+	/**
+	* @internal
+	*/
+	initialEndChanged(_, newValue) {
+		if (newValue && !this.dirtyValue) {
+			this.end = newValue;
+			this.dirtyValue = false;
+		}
+	}
+	/**
+	* @internal
+	*/
+	currentEndChanged() {
+		this.end = this.currentEnd;
+	}
+	/**
+	* The end property, typed as a number.
+	*
+	* @public
+	*/
+	get endAsNumber() {
+		return parseFloat(this.end);
+	}
+	set endAsNumber(next) {
+		this.end = next.toString();
+	}
+	#updateValues({ start, end }, emitEvents = true) {
+		if (start === this.start) start = void 0;
+		if (end === this.end) end = void 0;
+		if (start === void 0 && end === void 0) return;
+		this.#isInternalValueUpdate = true;
+		if (start !== void 0) this.start = start;
+		if (end !== void 0) this.end = end;
+		this.#isInternalValueUpdate = false;
+		if (emitEvents) {
+			if (start !== void 0) this.$emit("input:start");
+			if (end !== void 0) this.$emit("input:end");
+			this.$emit("input");
+			this.$emit("change");
+			this.dirtyValue = true;
+		}
+		this.#updateFormValue();
+	}
+	#applyStep(thumb, direction) {
+		this.#updateValues({ [thumb]: this.#roundToNearestStep(thumb, Number(this[thumb]) + direction * this.step).toString() });
+	}
+	/**
+	* @internal
+	*/
+	orientationChanged() {
+		if (this.$fastController.isConnected) this.#updateThumbPositions();
+	}
+	/**
+	* @internal
+	*/
+	nameChanged(previous, next) {
+		super.nameChanged(previous, next);
+		this.#updateFormValue();
+	}
+	#updateFormValue() {
+		if (!this.name) this.setFormValue(null);
+		else {
+			const formData = new FormData();
+			formData.append(this.name, this.start);
+			formData.append(this.name, this.end);
+			this.setFormValue(formData);
+		}
+	}
+	formResetCallback() {
+		this.#updateValues({
+			start: this.initialStart ?? this.min.toString(),
+			end: this.initialEnd ?? this.max.toString()
+		});
+		super.formResetCallback();
+	}
+	get #thumbs() {
+		return {
+			start: this._startThumbEl,
+			end: this._endThumbEl
+		};
+	}
+	get #thumbConstraints() {
+		return {
+			start: {
+				min: this.min,
+				max: this.endAsNumber
+			},
+			end: {
+				min: this.startAsNumber,
+				max: this.max
+			}
+		};
+	}
+	#getThumbId(thumb) {
+		return thumb === this._startThumbEl ? "start" : "end";
+	}
+	#getThumbIdFromEvent(e) {
+		return this.#getThumbId(e.target);
+	}
+	#updateThumbPositions() {
+		const startOffsetPct = this.#thumbTrackEndOffset(this.startAsNumber);
+		const endOffsetPct = this.#thumbTrackEndOffset(this.endAsNumber);
+		const [dirProp, dimProp] = this.orientation === Orientation.horizontal ? ["right", "width"] : ["bottom", "height"];
+		const transition = `transition: ${this._draggingThumb ? "none" : "all 0.2s ease"};`;
+		this._startThumbCss = `${dirProp}: ${startOffsetPct}%; ${transition}`;
+		this._endThumbCss = `${dirProp}: ${endOffsetPct}%; ${transition}`;
+		this._selectedRangeCss = `${dirProp}: ${endOffsetPct}%; ${dimProp}: ${startOffsetPct - endOffsetPct}%; ${transition}`;
+	}
+	#thumbTrackEndOffset(value) {
+		return (1 - inverseLerp(this.min, this.max, value)) * 100;
+	}
+	#calculateValueFromMouseEvent(e) {
+		const trackClientRect = this._trackEl.getBoundingClientRect();
+		const [minPos, maxPos, valuePos] = this.orientation === Orientation.horizontal ? [
+			this._trackEl.clientLeft,
+			this._trackEl.clientWidth,
+			e.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
+		] : [
+			trackClientRect.top,
+			trackClientRect.bottom,
+			e.pageY - document.documentElement.scrollTop
+		];
+		return lerp(this.min, this.max, inverseLerp(minPos, maxPos, valuePos));
+	}
+	#roundToNearestStep(thumb, value) {
+		return limit(this.#thumbConstraints[thumb].min, this.#thumbConstraints[thumb].max, roundToStepValue(value - this.min, this.step) + this.min);
+	}
+	#isNonVisibleFocus = false;
+	#focusThumbNonVisibly(thumb) {
+		this.#isNonVisibleFocus = true;
+		thumb.focus();
+		this.#isNonVisibleFocus = false;
+	}
+	/**
+	* @internal
+	*/
+	_isThumbPopupOpen(thumb) {
+		return this._visiblyFocusedThumb === thumb || this._hoveredThumb === thumb || this._draggingThumb === thumb;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#updateValues({
+			start: this.start || this.initialStart || this.min.toString(),
+			end: this.end || this.initialEnd || this.max.toString()
+		}, false);
+		this.#registerThumbListeners();
+		this.#updateThumbPositions();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#unregisterThumbListeners();
+		this.#unregisterDragListeners();
+	}
+	#registerThumbListeners() {
+		for (const thumb of ["start", "end"]) {
+			this.#thumbs[thumb].addEventListener("keydown", this.#onThumbKeydown);
+			this.#thumbs[thumb].addEventListener("mousedown", this.#onThumbMousedown, { passive: true });
+			this.#thumbs[thumb].addEventListener("touchstart", this.#onThumbMousedown, { passive: true });
+			this.#thumbs[thumb].addEventListener("mouseover", this.#onMouseOver, { passive: true });
+			this.#thumbs[thumb].addEventListener("mouseout", this.#onMouseOut, { passive: true });
+			this.#thumbs[thumb].addEventListener("focus", this.#onThumbFocus);
+			this.#thumbs[thumb].addEventListener("blur", this.#onThumbBlur);
+		}
+	}
+	#unregisterThumbListeners() {
+		for (const thumb of ["start", "end"]) {
+			this.#thumbs[thumb].removeEventListener("keydown", this.#onThumbKeydown);
+			this.#thumbs[thumb].removeEventListener("mousedown", this.#onThumbMousedown);
+			this.#thumbs[thumb].removeEventListener("touchstart", this.#onThumbMousedown);
+			this.#thumbs[thumb].removeEventListener("mouseover", this.#onMouseOver);
+			this.#thumbs[thumb].removeEventListener("mouseout", this.#onMouseOut);
+			this.#thumbs[thumb].removeEventListener("focus", this.#onThumbFocus);
+			this.#thumbs[thumb].removeEventListener("blur", this.#onThumbBlur);
+		}
+	}
+	/**
+	* @internal
+	*/
+	_onMouseDown(e) {
+		if (this.disabled || this._draggingThumb) return;
+		const value = this.#calculateValueFromMouseEvent(e);
+		const startDistance = Math.abs(value - Number(this.start));
+		const endDistance = Math.abs(value - Number(this.end));
+		const thumb = startDistance < endDistance || startDistance === endDistance && value < Number(this.start) ? "start" : "end";
+		this.#updateValues({ [thumb]: `${this.#roundToNearestStep(thumb, value)}` });
+		this._draggingThumb = thumb;
+		this.#focusThumbNonVisibly(this.#thumbs[thumb]);
+		this.#registerDragHandlers();
+	}
+	#onThumbFocus = (e) => {
+		if (!this.#isNonVisibleFocus) this._visiblyFocusedThumb = this.#getThumbIdFromEvent(e);
+	};
+	#onThumbBlur = () => {
+		this._visiblyFocusedThumb = null;
+	};
+	#onMouseOver = (e) => {
+		this._hoveredThumb = this.#getThumbIdFromEvent(e);
+	};
+	#onMouseOut = () => {
+		this._hoveredThumb = null;
+	};
+	#onThumbMousedown = (event) => {
+		if (this.disabled || event.defaultPrevented) return;
+		let target = event.target;
+		if (target === this._endThumbEl && this.startAsNumber === this.max && this.endAsNumber === this.max) target = this._startThumbEl;
+		this.#focusThumbNonVisibly(target);
+		this._draggingThumb = this.#getThumbId(target);
+		this.#registerDragHandlers();
+	};
+	#onThumbKeydown = (e) => {
+		const thumb = this.#getThumbIdFromEvent(e);
+		this._visiblyFocusedThumb = thumb;
+		if (e.key === keyHome) {
+			e.preventDefault();
+			this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].min}` });
+		} else if (e.key === keyEnd) {
+			e.preventDefault();
+			this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].max}` });
+		} else {
+			if (e.shiftKey) return;
+			switch (e.key) {
+				case keyArrowRight$1:
+				case keyArrowDown:
+					e.preventDefault();
+					this.#applyStep(thumb, Direction$1.Increment);
+					break;
+				case keyArrowLeft$1:
+				case keyArrowUp:
+					e.preventDefault();
+					this.#applyStep(thumb, Direction$1.Decrement);
+					break;
+			}
+		}
+	};
+	#registerDragHandlers() {
+		window.addEventListener("mousemove", this.#onDragMove, { passive: true });
+		window.addEventListener("touchmove", this.#onDragMove, { passive: true });
+		window.addEventListener("mouseup", this.#onDragEnd);
+		window.addEventListener("touchend", this.#onDragEnd);
+		window.document.addEventListener("mouseleave", this.#onDragEnd);
+	}
+	#unregisterDragListeners() {
+		window.removeEventListener("mouseup", this.#onDragEnd);
+		window.document.removeEventListener("mouseleave", this.#onDragEnd);
+		window.removeEventListener("mousemove", this.#onDragMove);
+		window.removeEventListener("touchmove", this.#onDragMove);
+		window.removeEventListener("touchend", this.#onDragEnd);
+	}
+	#onDragMove = (e) => {
+		if (this.disabled || e.defaultPrevented || !this._draggingThumb) return;
+		const sourceEvent = "TouchEvent" in window && e instanceof TouchEvent ? e.touches[0] : e;
+		const value = this.#calculateValueFromMouseEvent(sourceEvent);
+		this.#updateValues({ [this._draggingThumb]: `${this.#roundToNearestStep(this._draggingThumb, value)}` });
+	};
+	#onDragEnd = () => {
+		this._draggingThumb = false;
+		this.#unregisterDragListeners();
+	};
+};
+__decorate([observable], RangeSlider.prototype, "start", void 0);
+__decorate([attr({
+	mode: "fromView",
+	attribute: "start"
+})], RangeSlider.prototype, "initialStart", void 0);
+__decorate([attr({ attribute: "current-start" })], RangeSlider.prototype, "currentStart", void 0);
+__decorate([observable], RangeSlider.prototype, "end", void 0);
+__decorate([attr({
+	mode: "fromView",
+	attribute: "end"
+})], RangeSlider.prototype, "initialEnd", void 0);
+__decorate([attr({ attribute: "current-end" })], RangeSlider.prototype, "currentEnd", void 0);
+__decorate([attr({ converter: nullableNumberConverter })], RangeSlider.prototype, "min", void 0);
+__decorate([attr({ converter: nullableNumberConverter })], RangeSlider.prototype, "max", void 0);
+__decorate([attr({ converter: defaultToOneConverter })], RangeSlider.prototype, "step", void 0);
+__decorate([attr], RangeSlider.prototype, "orientation", void 0);
+__decorate([attr({ attribute: "aria-start-label" })], RangeSlider.prototype, "ariaStartLabel", void 0);
+__decorate([attr({ attribute: "aria-end-label" })], RangeSlider.prototype, "ariaEndLabel", void 0);
+__decorate([attr({ mode: "boolean" })], RangeSlider.prototype, "markers", void 0);
+__decorate([attr], RangeSlider.prototype, "connotation", void 0);
+__decorate([attr({ mode: "boolean" })], RangeSlider.prototype, "pin", void 0);
+__decorate([observable], RangeSlider.prototype, "valueTextFormatter", void 0);
+__decorate([observable], RangeSlider.prototype, "_draggingThumb", void 0);
+__decorate([observable], RangeSlider.prototype, "_visiblyFocusedThumb", void 0);
+__decorate([observable], RangeSlider.prototype, "_hoveredThumb", void 0);
+__decorate([observable], RangeSlider.prototype, "_startThumbCss", void 0);
+__decorate([observable], RangeSlider.prototype, "_endThumbCss", void 0);
+__decorate([observable], RangeSlider.prototype, "_selectedRangeCss", void 0);
+//#endregion
+//#region src/lib/range-slider/range-slider.template.ts
+var getClasses = ({ disabled, connotation }) => classNames("control", ["disabled", Boolean(disabled)], [`connotation-${connotation}`, Boolean(connotation)]);
+var getThumbClassesFor = (thumb) => ({ _visiblyFocusedThumb }) => classNames("thumb-container", ["focus-visible", _visiblyFocusedThumb === thumb]);
+var RangeSliderTemplate = (context) => {
+	const popupTag = context.tagFor(Popup);
+	return html` <template
+		@mousedown="${(x, c) => x._onMouseDown(c.event)}"
+	>
+		<div class="${getClasses} ${(x) => x.orientation}">
+			<div class="positioning-region">
+				<div ${ref("_trackEl")} class="track">
+					<div class="track-start" style="${(x) => x._selectedRangeCss}"></div>
+					${when((x) => x.markers, html`${(x) => getMarkersTemplate(x.orientation === Orientation.horizontal, Math.floor((x.max - x.min) / x.step))}`)}
+				</div>
+				<div
+					id="start-thumb"
+					${ref("_startThumbEl")}
+					class="${getThumbClassesFor("start")}"
+					style="${(x) => x._startThumbCss}"
+					role="slider"
+					tabindex="${(x) => x.disabled ? null : 0}"
+					aria-label="${(x) => x.ariaStartLabel || x.locale.rangeSlider.startThumbLabel}"
+					aria-valuetext="${(x) => x.valueTextFormatter(x.start)}"
+					aria-valuenow="${(x) => x.start}"
+					aria-valuemin="${(x) => x.min}"
+					aria-valuemax="${(x) => x.end}"
+					aria-disabled="${(x) => x.disabled}"
+					aria-orientation="${(x) => x.orientation}"
+				></div>
+				${when((x) => x.pin, html`<${popupTag}
+					class="popup"
+					arrow
+					alternate
+					:anchor="${(x) => x._startThumbEl}"
+					:open=${(x) => x._isThumbPopupOpen("start")}
+					:placementStrategy=${(x) => x.orientation === Orientation.horizontal ? PlacementStrategy.AutoPlacementHorizontal : PlacementStrategy.AutoPlacementVertical}
+					animation-frame
+					exportparts="vvd-theme-alternate"
+					aria-hidden="true"
+				>
+					<div class="tooltip">${(x) => x.valueTextFormatter(x.start)}</div>
+				</${popupTag}>`)}
+				<div
+					id="end-thumb"
+					${ref("_endThumbEl")}
+					class="${getThumbClassesFor("end")}"
+					style="${(x) => x._endThumbCss}"
+					role="slider"
+					tabindex="${(x) => x.disabled ? null : 0}"
+					aria-label="${(x) => x.ariaEndLabel || x.locale.rangeSlider.endThumbLabel}"
+					aria-valuetext="${(x) => x.valueTextFormatter(x.end)}"
+					aria-valuenow="${(x) => x.end}"
+					aria-valuemin="${(x) => x.start}"
+					aria-valuemax="${(x) => x.max}"
+					aria-disabled="${(x) => x.disabled}"
+					aria-orientation="${(x) => x.orientation}"
+				></div>
+				${when((x) => x.pin, html`<${popupTag}
+					class="popup"
+					arrow
+					alternate
+					:anchor="${(x) => x._endThumbEl}"
+					:open=${(x) => x._isThumbPopupOpen("end")}
+					:placementStrategy=${(x) => x.orientation === Orientation.horizontal ? PlacementStrategy.AutoPlacementHorizontal : PlacementStrategy.AutoPlacementVertical}
+					animation-frame
+					exportparts="vvd-theme-alternate"
+					aria-hidden="true"
+				>
+					<div class="tooltip">${(x) => x.valueTextFormatter(x.end)}</div>
+				</${popupTag}>`)}
+			</div>
+		</div>
+	</template>`;
+};
+//#endregion
+//#region src/lib/range-slider/definition.ts
+/**
+* @internal
+*/
+var rangeSliderDefinition = defineVividComponent("range-slider", RangeSlider, RangeSliderTemplate, [popupDefinition], {
+	styles: range_slider_default,
+	shadowOptions: { delegatesFocus: true }
+});
+/**
+* Registers the range-slider element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerRangeSlider = createRegisterFunction(rangeSliderDefinition);
+//#endregion
+export { registerRangeSlider as n, RangeSlider as r, rangeSliderDefinition as t };