@vonage/vivid 5.15.1 → 5.17.0

package/range-slider/index.js

@@ -1,458 +1,288 @@
-import { P as y, a as u, p as T } from "../bundled/definition9.js";
-import { V as $, o as c, a as n, n as k, h as d, c as z, d as E } from "../bundled/vivid-element.js";
-import { a as x, k as w, c as C, h as L, b as F, g as S } from "../bundled/key-codes.js";
-import { F as P } from "../bundled/form-associated.js";
-import { i as v, l as V, r as D, d as A, g as N } from "../bundled/slider.template.js";
-import { L as R } from "../bundled/localized.js";
-import { F as O } from "../bundled/form-element.js";
-import { O as h } from "../bundled/aria.js";
-import { l as M } from "../bundled/numbers.js";
-import { r as m } from "../bundled/ref.js";
-import { w as b } from "../bundled/when.js";
-import { c as _ } from "../bundled/class-names.js";
-const B = ':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}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;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));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;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{position:absolute;block-size:100%;inline-size:6px;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{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.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:translate(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{position:absolute;display:block;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 0s}.thumb-container:after{position:absolute;display:block;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)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media(hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}';
-var I = Object.defineProperty, r = (l, e, t, a) => {
-  for (var s = void 0, o = l.length - 1, p; o >= 0; o--)
-    (p = l[o]) && (s = p(e, t, s) || s);
-  return s && I(e, t, s), s;
+import { t as e } from "../bundled/localized.js";
+import { T as t, d as n, l as r, o as i, s as a, t as o, u as s } from "../bundled/vivid-element.js";
+import { t as c } from "../bundled/ref.js";
+import { t as l } from "../bundled/when.js";
+import "../bundled/definition2.js";
+import { t as u } from "../bundled/decorate.js";
+import { t as d } from "../bundled/form-element.js";
+import { t as f } from "../bundled/aria.js";
+import { t as p } from "../bundled/class-names.js";
+import { i as m, n as h, r as g, t as _ } from "../bundled/key-codes.js";
+import { n as v } from "../bundled/numbers.js";
+import { n as y } from "../bundled/form-associated.js";
+import { i as b, r as x, t as S } from "../bundled/definition8.js";
+import { a as C, i as w, n as T, o as E, r as D } from "../bundled/slider.template.js";
+//#region src/lib/range-slider/range-slider.scss?inline
+var O = ":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}", k = {
+	Increment: 1,
+	Decrement: -1
+}, A = class extends e(d(y(o))) {
+	constructor(...e) {
+		super(...e), this.start = "", this.end = "", this.min = 0, this.max = 10, this.step = 1, this.orientation = f.horizontal, this.ariaStartLabel = null, this.ariaEndLabel = null, this.markers = !1, this.pin = !1, this.valueTextFormatter = (e) => parseFloat(e).toLocaleString(this.locale.lang), this.proxy = document.createElement("input"), this._trackEl = null, this._startThumbEl = null, this._endThumbEl = null, this._draggingThumb = !1, this._visiblyFocusedThumb = null, this._hoveredThumb = null, this._startThumbCss = "", this._endThumbCss = "", this._selectedRangeCss = "";
+	}
+	#e = !1;
+	startChanged() {
+		this.currentStart = this.start, this.#e || (this.dirtyValue = !0, this.#r()), this.$fastController.isConnected && this.#c();
+	}
+	initialStartChanged(e, t) {
+		t && !this.dirtyValue && (this.start = t, this.dirtyValue = !1);
+	}
+	currentStartChanged() {
+		this.start = this.currentStart;
+	}
+	get startAsNumber() {
+		return parseFloat(this.start);
+	}
+	set startAsNumber(e) {
+		this.start = e.toString();
+	}
+	endChanged() {
+		this.currentEnd = this.end, this.#e || (this.dirtyValue = !0, this.#r()), this.$fastController.isConnected && this.#c();
+	}
+	initialEndChanged(e, t) {
+		t && !this.dirtyValue && (this.end = t, this.dirtyValue = !1);
+	}
+	currentEndChanged() {
+		this.end = this.currentEnd;
+	}
+	get endAsNumber() {
+		return parseFloat(this.end);
+	}
+	set endAsNumber(e) {
+		this.end = e.toString();
+	}
+	#t({ start: e, end: t }, n = !0) {
+		e === this.start && (e = void 0), t === this.end && (t = void 0), !(e === void 0 && t === void 0) && (this.#e = !0, e !== void 0 && (this.start = e), t !== void 0 && (this.end = t), this.#e = !1, n && (e !== void 0 && this.$emit("input:start"), t !== void 0 && this.$emit("input:end"), this.$emit("input"), this.$emit("change"), this.dirtyValue = !0), this.#r());
+	}
+	#n(e, t) {
+		this.#t({ [e]: this.#d(e, Number(this[e]) + t * this.step).toString() });
+	}
+	orientationChanged() {
+		this.$fastController.isConnected && this.#c();
+	}
+	nameChanged(e, t) {
+		super.nameChanged(e, t), this.#r();
+	}
+	#r() {
+		if (!this.name) this.setFormValue(null);
+		else {
+			let e = new FormData();
+			e.append(this.name, this.start), e.append(this.name, this.end), this.setFormValue(e);
+		}
+	}
+	formResetCallback() {
+		this.#t({
+			start: this.initialStart ?? this.min.toString(),
+			end: this.initialEnd ?? this.max.toString()
+		}), super.formResetCallback();
+	}
+	get #i() {
+		return {
+			start: this._startThumbEl,
+			end: this._endThumbEl
+		};
+	}
+	get #a() {
+		return {
+			start: {
+				min: this.min,
+				max: this.endAsNumber
+			},
+			end: {
+				min: this.startAsNumber,
+				max: this.max
+			}
+		};
+	}
+	#o(e) {
+		return e === this._startThumbEl ? "start" : "end";
+	}
+	#s(e) {
+		return this.#o(e.target);
+	}
+	#c() {
+		let e = this.#l(this.startAsNumber), t = this.#l(this.endAsNumber), [n, r] = this.orientation === f.horizontal ? ["right", "width"] : ["bottom", "height"], i = `transition: ${this._draggingThumb ? "none" : "all 0.2s ease"};`;
+		this._startThumbCss = `${n}: ${e}%; ${i}`, this._endThumbCss = `${n}: ${t}%; ${i}`, this._selectedRangeCss = `${n}: ${t}%; ${r}: ${e - t}%; ${i}`;
+	}
+	#l(e) {
+		return (1 - D(this.min, this.max, e)) * 100;
+	}
+	#u(e) {
+		let t = this._trackEl.getBoundingClientRect(), [n, r, i] = this.orientation === f.horizontal ? [
+			this._trackEl.clientLeft,
+			this._trackEl.clientWidth,
+			e.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
+		] : [
+			t.top,
+			t.bottom,
+			e.pageY - document.documentElement.scrollTop
+		];
+		return w(this.min, this.max, D(n, r, i));
+	}
+	#d(e, t) {
+		return v(this.#a[e].min, this.#a[e].max, E(t - this.min, this.step) + this.min);
+	}
+	#f = !1;
+	#p(e) {
+		this.#f = !0, e.focus(), this.#f = !1;
+	}
+	_isThumbPopupOpen(e) {
+		return this._visiblyFocusedThumb === e || this._hoveredThumb === e || this._draggingThumb === e;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#t({
+			start: this.start || this.initialStart || this.min.toString(),
+			end: this.end || this.initialEnd || this.max.toString()
+		}, !1), this.#m(), this.#c();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#h(), this.#C();
+	}
+	#m() {
+		for (let e of ["start", "end"]) this.#i[e].addEventListener("keydown", this.#x), this.#i[e].addEventListener("mousedown", this.#b, { passive: !0 }), this.#i[e].addEventListener("touchstart", this.#b, { passive: !0 }), this.#i[e].addEventListener("mouseover", this.#v, { passive: !0 }), this.#i[e].addEventListener("mouseout", this.#y, { passive: !0 }), this.#i[e].addEventListener("focus", this.#g), this.#i[e].addEventListener("blur", this.#_);
+	}
+	#h() {
+		for (let e of ["start", "end"]) this.#i[e].removeEventListener("keydown", this.#x), this.#i[e].removeEventListener("mousedown", this.#b), this.#i[e].removeEventListener("touchstart", this.#b), this.#i[e].removeEventListener("mouseover", this.#v), this.#i[e].removeEventListener("mouseout", this.#y), this.#i[e].removeEventListener("focus", this.#g), this.#i[e].removeEventListener("blur", this.#_);
+	}
+	_onMouseDown(e) {
+		if (this.disabled || this._draggingThumb) return;
+		let t = this.#u(e), n = Math.abs(t - Number(this.start)), r = Math.abs(t - Number(this.end)), i = n < r || n === r && t < Number(this.start) ? "start" : "end";
+		this.#t({ [i]: `${this.#d(i, t)}` }), this._draggingThumb = i, this.#p(this.#i[i]), this.#S();
+	}
+	#g = (e) => {
+		this.#f || (this._visiblyFocusedThumb = this.#s(e));
+	};
+	#_ = () => {
+		this._visiblyFocusedThumb = null;
+	};
+	#v = (e) => {
+		this._hoveredThumb = this.#s(e);
+	};
+	#y = () => {
+		this._hoveredThumb = null;
+	};
+	#b = (e) => {
+		if (this.disabled || e.defaultPrevented) return;
+		let t = e.target;
+		t === this._endThumbEl && this.startAsNumber === this.max && this.endAsNumber === this.max && (t = this._startThumbEl), this.#p(t), this._draggingThumb = this.#o(t), this.#S();
+	};
+	#x = (e) => {
+		let t = this.#s(e);
+		if (this._visiblyFocusedThumb = t, e.key === "Home") e.preventDefault(), this.#t({ [t]: `${this.#a[t].min}` });
+		else if (e.key === "End") e.preventDefault(), this.#t({ [t]: `${this.#a[t].max}` });
+		else {
+			if (e.shiftKey) return;
+			switch (e.key) {
+				case g:
+				case _:
+					e.preventDefault(), this.#n(t, k.Increment);
+					break;
+				case h:
+				case m:
+					e.preventDefault(), this.#n(t, k.Decrement);
+					break;
+			}
+		}
+	};
+	#S() {
+		window.addEventListener("mousemove", this.#w, { passive: !0 }), window.addEventListener("touchmove", this.#w, { passive: !0 }), window.addEventListener("mouseup", this.#T), window.addEventListener("touchend", this.#T), window.document.addEventListener("mouseleave", this.#T);
+	}
+	#C() {
+		window.removeEventListener("mouseup", this.#T), window.document.removeEventListener("mouseleave", this.#T), window.removeEventListener("mousemove", this.#w), window.removeEventListener("touchmove", this.#w), window.removeEventListener("touchend", this.#T);
+	}
+	#w = (e) => {
+		if (this.disabled || e.defaultPrevented || !this._draggingThumb) return;
+		let t = "TouchEvent" in window && e instanceof TouchEvent ? e.touches[0] : e, n = this.#u(t);
+		this.#t({ [this._draggingThumb]: `${this.#d(this._draggingThumb, n)}` });
+	};
+	#T = () => {
+		this._draggingThumb = !1, this.#C();
+	};
 };
-const g = {
-  Increment: 1,
-  Decrement: -1
-};
-class i extends R(
-  O(P($))
-) {
-  constructor() {
-    super(...arguments), this.#r = !1, this.start = "", this.end = "", this.min = 0, this.max = 10, this.step = 1, this.orientation = h.horizontal, this.ariaStartLabel = null, this.ariaEndLabel = null, this.markers = !1, this.pin = !1, this.valueTextFormatter = (e) => parseFloat(e).toLocaleString(this.locale.lang), this.proxy = document.createElement("input"), this._trackEl = null, this._startThumbEl = null, this._endThumbEl = null, this._draggingThumb = !1, this._visiblyFocusedThumb = null, this._hoveredThumb = null, this._startThumbCss = "", this._endThumbCss = "", this._selectedRangeCss = "", this.#c = !1, this.#d = (e) => {
-      this.#c || (this._visiblyFocusedThumb = this.#h(e));
-    }, this.#m = () => {
-      this._visiblyFocusedThumb = null;
-    }, this.#b = (e) => {
-      this._hoveredThumb = this.#h(e);
-    }, this.#p = () => {
-      this._hoveredThumb = null;
-    }, this.#a = (e) => {
-      if (this.disabled || e.defaultPrevented)
-        return;
-      let t = e.target;
-      t === this._endThumbEl && this.startAsNumber === this.max && this.endAsNumber === this.max && (t = this._startThumbEl), this.#y(t), this._draggingThumb = this.#f(t), this.#T();
-    }, this.#v = (e) => {
-      const t = this.#h(e);
-      if (this._visiblyFocusedThumb = t, e.key === x)
-        e.preventDefault(), this.#e({ [t]: `${this.#n[t].min}` });
-      else if (e.key === w)
-        e.preventDefault(), this.#e({ [t]: `${this.#n[t].max}` });
-      else {
-        if (e.shiftKey) return;
-        switch (e.key) {
-          case S:
-          case F:
-            e.preventDefault(), this.#g(t, g.Increment);
-            break;
-          case L:
-          case C:
-            e.preventDefault(), this.#g(t, g.Decrement);
-            break;
-        }
-      }
-    }, this.#o = (e) => {
-      if (this.disabled || e.defaultPrevented || !this._draggingThumb)
-        return;
-      const t = "TouchEvent" in window && e instanceof TouchEvent ? e.touches[0] : e, a = this.#_(t);
-      this.#e({
-        [this._draggingThumb]: `${this.#u(
-          this._draggingThumb,
-          a
-        )}`
-      });
-    }, this.#i = () => {
-      this._draggingThumb = !1, this.#$();
-    };
-  }
-  #r;
-  /**
-   * @internal
-   */
-  startChanged() {
-    this.currentStart = this.start, this.#r || (this.dirtyValue = !0, this.#s()), this.$fastController.isConnected && this.#l();
-  }
-  /**
-   * @internal
-   */
-  initialStartChanged(e, t) {
-    t && !this.dirtyValue && (this.start = t, this.dirtyValue = !1);
-  }
-  /**
-   * @internal
-   */
-  currentStartChanged() {
-    this.start = this.currentStart;
-  }
-  /**
-   * The start property, typed as a number.
-   *
-   * @public
-   */
-  get startAsNumber() {
-    return parseFloat(this.start);
-  }
-  set startAsNumber(e) {
-    this.start = e.toString();
-  }
-  /**
-   * @internal
-   */
-  endChanged() {
-    this.currentEnd = this.end, this.#r || (this.dirtyValue = !0, this.#s()), this.$fastController.isConnected && this.#l();
-  }
-  /**
-   * @internal
-   */
-  initialEndChanged(e, t) {
-    t && !this.dirtyValue && (this.end = t, this.dirtyValue = !1);
-  }
-  /**
-   * @internal
-   */
-  currentEndChanged() {
-    this.end = this.currentEnd;
-  }
-  /**
-   * The end property, typed as a number.
-   *
-   * @public
-   */
-  get endAsNumber() {
-    return parseFloat(this.end);
-  }
-  set endAsNumber(e) {
-    this.end = e.toString();
-  }
-  #e({ start: e, end: t }, a = !0) {
-    e === this.start && (e = void 0), t === this.end && (t = void 0), !(e === void 0 && t === void 0) && (this.#r = !0, e !== void 0 && (this.start = e), t !== void 0 && (this.end = t), this.#r = !1, a && (e !== void 0 && this.$emit("input:start"), t !== void 0 && this.$emit("input:end"), this.$emit("input"), this.$emit("change"), this.dirtyValue = !0), this.#s());
-  }
-  #g(e, t) {
-    this.#e({
-      [e]: this.#u(
-        e,
-        Number(this[e]) + t * this.step
-      ).toString()
-    });
-  }
-  /**
-   * @internal
-   */
-  orientationChanged() {
-    this.$fastController.isConnected && this.#l();
-  }
-  /**
-   * @internal
-   */
-  nameChanged(e, t) {
-    super.nameChanged(e, t), this.#s();
-  }
-  #s() {
-    if (!this.name)
-      this.setFormValue(null);
-    else {
-      const e = new FormData();
-      e.append(this.name, this.start), e.append(this.name, this.end), this.setFormValue(e);
-    }
-  }
-  formResetCallback() {
-    this.#e({
-      start: this.initialStart ?? this.min.toString(),
-      end: this.initialEnd ?? this.max.toString()
-    }), super.formResetCallback();
-  }
-  get #t() {
-    return {
-      start: this._startThumbEl,
-      end: this._endThumbEl
-    };
-  }
-  get #n() {
-    return {
-      start: { min: this.min, max: this.endAsNumber },
-      end: { min: this.startAsNumber, max: this.max }
-    };
-  }
-  #f(e) {
-    return e === this._startThumbEl ? "start" : "end";
-  }
-  #h(e) {
-    return this.#f(e.target);
-  }
-  #l() {
-    const e = this.#k(this.startAsNumber), t = this.#k(this.endAsNumber), [a, s] = this.orientation === h.horizontal ? ["right", "width"] : ["bottom", "height"], o = `transition: ${this._draggingThumb ? "none" : "all 0.2s ease"};`;
-    this._startThumbCss = `${a}: ${e}%; ${o}`, this._endThumbCss = `${a}: ${t}%; ${o}`, this._selectedRangeCss = `${a}: ${t}%; ${s}: ${e - t}%; ${o}`;
-  }
-  #k(e) {
-    return (1 - v(this.min, this.max, e)) * 100;
-  }
-  #_(e) {
-    const t = this._trackEl.getBoundingClientRect(), [a, s, o] = this.orientation === h.horizontal ? [
-      this._trackEl.clientLeft,
-      this._trackEl.clientWidth,
-      e.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
-    ] : [
-      t.top,
-      t.bottom,
-      e.pageY - document.documentElement.scrollTop
-    ];
-    return V(this.min, this.max, v(a, s, o));
-  }
-  #u(e, t) {
-    return M(
-      this.#n[e].min,
-      this.#n[e].max,
-      D(t - this.min, this.step) + this.min
-    );
-  }
-  #c;
-  #y(e) {
-    this.#c = !0, e.focus(), this.#c = !1;
-  }
-  /**
-   * @internal
-   */
-  _isThumbPopupOpen(e) {
-    return this._visiblyFocusedThumb === e || this._hoveredThumb === e || this._draggingThumb === e;
-  }
-  // --- Lifecycle ---
-  connectedCallback() {
-    super.connectedCallback(), this.#e(
-      {
-        start: this.start || this.initialStart || this.min.toString(),
-        end: this.end || this.initialEnd || this.max.toString()
-      },
-      !1
-    ), this.#z(), this.#l();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.#E(), this.#$();
-  }
-  // --- Event handling ---
-  #z() {
-    for (const e of ["start", "end"])
-      this.#t[e].addEventListener("keydown", this.#v), this.#t[e].addEventListener(
-        "mousedown",
-        this.#a,
-        { passive: !0 }
-      ), this.#t[e].addEventListener(
-        "touchstart",
-        this.#a,
-        { passive: !0 }
-      ), this.#t[e].addEventListener("mouseover", this.#b, {
-        passive: !0
-      }), this.#t[e].addEventListener("mouseout", this.#p, {
-        passive: !0
-      }), this.#t[e].addEventListener("focus", this.#d), this.#t[e].addEventListener("blur", this.#m);
-  }
-  #E() {
-    for (const e of ["start", "end"])
-      this.#t[e].removeEventListener("keydown", this.#v), this.#t[e].removeEventListener(
-        "mousedown",
-        this.#a
-      ), this.#t[e].removeEventListener(
-        "touchstart",
-        this.#a
-      ), this.#t[e].removeEventListener("mouseover", this.#b), this.#t[e].removeEventListener("mouseout", this.#p), this.#t[e].removeEventListener("focus", this.#d), this.#t[e].removeEventListener("blur", this.#m);
-  }
-  /**
-   * @internal
-   */
-  _onMouseDown(e) {
-    if (this.disabled || this._draggingThumb)
-      return;
-    const t = this.#_(e), a = Math.abs(t - Number(this.start)), s = Math.abs(t - Number(this.end)), o = a < s || a === s && t < Number(this.start) ? "start" : "end";
-    this.#e({
-      [o]: `${this.#u(o, t)}`
-    }), this._draggingThumb = o, this.#y(this.#t[o]), this.#T();
-  }
-  #d;
-  #m;
-  #b;
-  #p;
-  #a;
-  #v;
-  #T() {
-    window.addEventListener("mousemove", this.#o, { passive: !0 }), window.addEventListener("touchmove", this.#o, { passive: !0 }), window.addEventListener("mouseup", this.#i), window.addEventListener("touchend", this.#i), window.document.addEventListener("mouseleave", this.#i);
-  }
-  #$() {
-    window.removeEventListener("mouseup", this.#i), window.document.removeEventListener("mouseleave", this.#i), window.removeEventListener("mousemove", this.#o), window.removeEventListener("touchmove", this.#o), window.removeEventListener("touchend", this.#i);
-  }
-  #o;
-  #i;
-}
-r([
-  c
-], i.prototype, "start");
-r([
-  n({ mode: "fromView", attribute: "start" })
-], i.prototype, "initialStart");
-r([
-  n({ attribute: "current-start" })
-], i.prototype, "currentStart");
-r([
-  c
-], i.prototype, "end");
-r([
-  n({ mode: "fromView", attribute: "end" })
-], i.prototype, "initialEnd");
-r([
-  n({ attribute: "current-end" })
-], i.prototype, "currentEnd");
-r([
-  n({ converter: k })
-], i.prototype, "min");
-r([
-  n({ converter: k })
-], i.prototype, "max");
-r([
-  n({ converter: A })
-], i.prototype, "step");
-r([
-  n
-], i.prototype, "orientation");
-r([
-  n({ attribute: "aria-start-label" })
-], i.prototype, "ariaStartLabel");
-r([
-  n({ attribute: "aria-end-label" })
-], i.prototype, "ariaEndLabel");
-r([
-  n({ mode: "boolean" })
-], i.prototype, "markers");
-r([
-  n
-], i.prototype, "connotation");
-r([
-  n({ mode: "boolean" })
-], i.prototype, "pin");
-r([
-  c
-], i.prototype, "valueTextFormatter");
-r([
-  c
-], i.prototype, "_draggingThumb");
-r([
-  c
-], i.prototype, "_visiblyFocusedThumb");
-r([
-  c
-], i.prototype, "_hoveredThumb");
-r([
-  c
-], i.prototype, "_startThumbCss");
-r([
-  c
-], i.prototype, "_endThumbCss");
-r([
-  c
-], i.prototype, "_selectedRangeCss");
-const H = ({ disabled: l, connotation: e }) => _(
-  "control",
-  ["disabled", !!l],
-  [`connotation-${e}`, !!e]
-), f = (l) => ({ _visiblyFocusedThumb: e }) => _("thumb-container", [
-  "focus-visible",
-  e === l
-]), K = (l) => {
-  const e = l.tagFor(y);
-  return d` <template
-		@mousedown="${(t, a) => t._onMouseDown(a.event)}"
+u([t], A.prototype, "start", void 0), u([r({
+	mode: "fromView",
+	attribute: "start"
+})], A.prototype, "initialStart", void 0), u([r({ attribute: "current-start" })], A.prototype, "currentStart", void 0), u([t], A.prototype, "end", void 0), u([r({
+	mode: "fromView",
+	attribute: "end"
+})], A.prototype, "initialEnd", void 0), u([r({ attribute: "current-end" })], A.prototype, "currentEnd", void 0), u([r({ converter: s })], A.prototype, "min", void 0), u([r({ converter: s })], A.prototype, "max", void 0), u([r({ converter: C })], A.prototype, "step", void 0), u([r], A.prototype, "orientation", void 0), u([r({ attribute: "aria-start-label" })], A.prototype, "ariaStartLabel", void 0), u([r({ attribute: "aria-end-label" })], A.prototype, "ariaEndLabel", void 0), u([r({ mode: "boolean" })], A.prototype, "markers", void 0), u([r], A.prototype, "connotation", void 0), u([r({ mode: "boolean" })], A.prototype, "pin", void 0), u([t], A.prototype, "valueTextFormatter", void 0), u([t], A.prototype, "_draggingThumb", void 0), u([t], A.prototype, "_visiblyFocusedThumb", void 0), u([t], A.prototype, "_hoveredThumb", void 0), u([t], A.prototype, "_startThumbCss", void 0), u([t], A.prototype, "_endThumbCss", void 0), u([t], A.prototype, "_selectedRangeCss", void 0);
+//#endregion
+//#region src/lib/range-slider/range-slider.template.ts
+var j = ({ disabled: e, connotation: t }) => p("control", ["disabled", !!e], [`connotation-${t}`, !!t]), M = (e) => ({ _visiblyFocusedThumb: t }) => p("thumb-container", ["focus-visible", t === e]);
+//#endregion
+//#region src/lib/range-slider/index.ts
+a(i("range-slider", A, (e) => {
+	let t = e.tagFor(b);
+	return n` <template
+		@mousedown="${(e, t) => e._onMouseDown(t.event)}"
 	>
-		<div class="${H} ${(t) => t.orientation}">
+		<div class="${j} ${(e) => e.orientation}">
 			<div class="positioning-region">
-				<div ${m("_trackEl")} class="track">
-					<div class="track-start" style="${(t) => t._selectedRangeCss}"></div>
-					${b(
-    (t) => t.markers,
-    d`${(t) => N(
-      t.orientation === h.horizontal,
-      Math.floor((t.max - t.min) / t.step)
-    )}`
-  )}
+				<div ${c("_trackEl")} class="track">
+					<div class="track-start" style="${(e) => e._selectedRangeCss}"></div>
+					${l((e) => e.markers, n`${(e) => T(e.orientation === f.horizontal, Math.floor((e.max - e.min) / e.step))}`)}
 				</div>
 				<div
 					id="start-thumb"
-					${m("_startThumbEl")}
-					class="${f("start")}"
-					style="${(t) => t._startThumbCss}"
+					${c("_startThumbEl")}
+					class="${M("start")}"
+					style="${(e) => e._startThumbCss}"
 					role="slider"
-					tabindex="${(t) => t.disabled ? null : 0}"
-					aria-label="${(t) => t.ariaStartLabel || t.locale.rangeSlider.startThumbLabel}"
-					aria-valuetext="${(t) => t.valueTextFormatter(t.start)}"
-					aria-valuenow="${(t) => t.start}"
-					aria-valuemin="${(t) => t.min}"
-					aria-valuemax="${(t) => t.end}"
-					aria-disabled="${(t) => t.disabled}"
-					aria-orientation="${(t) => t.orientation}"
+					tabindex="${(e) => e.disabled ? null : 0}"
+					aria-label="${(e) => e.ariaStartLabel || e.locale.rangeSlider.startThumbLabel}"
+					aria-valuetext="${(e) => e.valueTextFormatter(e.start)}"
+					aria-valuenow="${(e) => e.start}"
+					aria-valuemin="${(e) => e.min}"
+					aria-valuemax="${(e) => e.end}"
+					aria-disabled="${(e) => e.disabled}"
+					aria-orientation="${(e) => e.orientation}"
 				></div>
-				${b(
-    (t) => t.pin,
-    d`<${e}
+				${l((e) => e.pin, n`<${t}
 					class="popup"
 					arrow
 					alternate
-					:anchor="${(t) => t._startThumbEl}"
-					:open=${(t) => t._isThumbPopupOpen("start")}
-					:placementStrategy=${(t) => t.orientation === h.horizontal ? u.AutoPlacementHorizontal : u.AutoPlacementVertical}
+					:anchor="${(e) => e._startThumbEl}"
+					:open=${(e) => e._isThumbPopupOpen("start")}
+					:placementStrategy=${(e) => e.orientation === f.horizontal ? x.AutoPlacementHorizontal : x.AutoPlacementVertical}
 					animation-frame
 					exportparts="vvd-theme-alternate"
 					aria-hidden="true"
 				>
-					<div class="tooltip">${(t) => t.valueTextFormatter(t.start)}</div>
-				</${e}>`
-  )}
+					<div class="tooltip">${(e) => e.valueTextFormatter(e.start)}</div>
+				</${t}>`)}
 				<div
 					id="end-thumb"
-					${m("_endThumbEl")}
-					class="${f("end")}"
-					style="${(t) => t._endThumbCss}"
+					${c("_endThumbEl")}
+					class="${M("end")}"
+					style="${(e) => e._endThumbCss}"
 					role="slider"
-					tabindex="${(t) => t.disabled ? null : 0}"
-					aria-label="${(t) => t.ariaEndLabel || t.locale.rangeSlider.endThumbLabel}"
-					aria-valuetext="${(t) => t.valueTextFormatter(t.end)}"
-					aria-valuenow="${(t) => t.end}"
-					aria-valuemin="${(t) => t.start}"
-					aria-valuemax="${(t) => t.max}"
-					aria-disabled="${(t) => t.disabled}"
-					aria-orientation="${(t) => t.orientation}"
+					tabindex="${(e) => e.disabled ? null : 0}"
+					aria-label="${(e) => e.ariaEndLabel || e.locale.rangeSlider.endThumbLabel}"
+					aria-valuetext="${(e) => e.valueTextFormatter(e.end)}"
+					aria-valuenow="${(e) => e.end}"
+					aria-valuemin="${(e) => e.start}"
+					aria-valuemax="${(e) => e.max}"
+					aria-disabled="${(e) => e.disabled}"
+					aria-orientation="${(e) => e.orientation}"
 				></div>
-				${b(
-    (t) => t.pin,
-    d`<${e}
+				${l((e) => e.pin, n`<${t}
 					class="popup"
 					arrow
 					alternate
-					:anchor="${(t) => t._endThumbEl}"
-					:open=${(t) => t._isThumbPopupOpen("end")}
-					:placementStrategy=${(t) => t.orientation === h.horizontal ? u.AutoPlacementHorizontal : u.AutoPlacementVertical}
+					:anchor="${(e) => e._endThumbEl}"
+					:open=${(e) => e._isThumbPopupOpen("end")}
+					:placementStrategy=${(e) => e.orientation === f.horizontal ? x.AutoPlacementHorizontal : x.AutoPlacementVertical}
 					animation-frame
 					exportparts="vvd-theme-alternate"
 					aria-hidden="true"
 				>
-					<div class="tooltip">${(t) => t.valueTextFormatter(t.end)}</div>
-				</${e}>`
-  )}
+					<div class="tooltip">${(e) => e.valueTextFormatter(e.end)}</div>
+				</${t}>`)}
 			</div>
 		</div>
 	</template>`;
-}, U = E(
-  "range-slider",
-  i,
-  K,
-  [T],
-  {
-    styles: B,
-    shadowOptions: {
-      delegatesFocus: !0
-    }
-  }
-), Y = z(
-  U
-);
-Y();
+}, [S], {
+	styles: O,
+	shadowOptions: { delegatesFocus: !0 }
+}))();
+//#endregion