@raqm/ui 0.0.0-stage → 0.1.0

package/fesm2022/raqm-ui-slider.mjs

@@ -0,0 +1,609 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, booleanAttribute, computed, inject, input, output, signal, viewChildren } from "@angular/core";
+function decimalPrecision(value) {
+	if (value === 0) return 0;
+	if (Math.abs(value) < 1) {
+		const [mantissa, exponent] = value.toExponential().split("e-");
+		const fraction = mantissa.split(".")[1];
+		return (fraction ? fraction.length : 0) + Number.parseInt(exponent ?? "0", 10);
+	}
+	const fraction = value.toString().split(".")[1];
+	return fraction ? fraction.length : 0;
+}
+function clamp(value, lower, upper) {
+	return Math.min(Math.max(value, lower), upper);
+}
+function roundToStep(value, step, min) {
+	const nearest = Math.round((value - min) / step) * step + min;
+	return Number(nearest.toFixed(Math.max(decimalPrecision(step), decimalPrecision(min))));
+}
+function pushThumbValues(values, index, nextValue, min, max, initialValues) {
+	const next = values.slice();
+	const lastIndex = next.length - 1;
+	next[index] = clamp(nextValue, min, max);
+	for (let position = index + 1; position <= lastIndex; position += 1) {
+		const lower = next[position - 1];
+		const initial = initialValues[position] ?? next[position];
+		const candidate = Math.max(next[position], lower);
+		next[position] = clamp(initial < candidate ? Math.max(initial, lower) : candidate, lower, max);
+	}
+	for (let position = index - 1; position >= 0; position -= 1) {
+		const upper = next[position + 1];
+		const initial = initialValues[position] ?? next[position];
+		const candidate = Math.min(next[position], upper);
+		next[position] = clamp(initial > candidate ? Math.min(initial, upper) : candidate, min, upper);
+	}
+	return next.map((value) => Number(value.toFixed(12)));
+}
+function offsetExpression(ratio) {
+	return `calc(var(--raqm-slider-thumb-size) / 2 + (100% - var(--raqm-slider-thumb-size)) * ${ratio})`;
+}
+function spanExpression(span) {
+	return `calc((100% - var(--raqm-slider-thumb-size)) * ${span})`;
+}
+var RaqmSliderKeyboard = class {
+	host;
+	constructor(host) {
+		this.host = host;
+	}
+	onKeydown(event, index) {
+		const values = this.host.values();
+		const current = values[index] ?? this.host.min();
+		const increment = event.shiftKey ? 10 : this.host.stepSize();
+		const rtl = this.host.direction() === "rtl";
+		const min = this.host.min();
+		const max = Math.max(this.host.max(), min);
+		let next;
+		switch (event.key) {
+			case "ArrowRight":
+				next = current + (rtl ? -increment : increment);
+				break;
+			case "ArrowLeft":
+				next = current + (rtl ? increment : -increment);
+				break;
+			case "ArrowUp":
+				next = current + increment;
+				break;
+			case "ArrowDown":
+				next = current - increment;
+				break;
+			case "PageUp":
+				next = current + 10;
+				break;
+			case "PageDown":
+				next = current - 10;
+				break;
+			case "Home":
+				next = values[index - 1] ?? min;
+				break;
+			case "End":
+				next = values[index + 1] ?? max;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		const input = event.currentTarget;
+		if (!input.matches(":focus-visible")) {
+			input.blur();
+			input.focus({ preventScroll: true });
+		}
+		this.host.setLastUsed(index);
+		this.host.applyClamped(index, next);
+	}
+};
+var RaqmSliderPointer = class {
+	host;
+	dragValues = null;
+	dragIndex = -1;
+	dragOffset = 0;
+	dragPointerId = null;
+	dragControl = null;
+	constructor(host) {
+		this.host = host;
+	}
+	onPointerDown(event) {
+		if (this.host.disabled() || event.button !== 0 || !event.isPrimary) return;
+		const pressed = this.pressedThumb(event);
+		if (pressed === null) return;
+		event.preventDefault();
+		this.dragValues = this.host.values().slice();
+		this.dragIndex = pressed.index;
+		this.dragOffset = pressed.offset;
+		this.dragPointerId = event.pointerId;
+		this.dragControl = event.currentTarget;
+		this.host.setActive(pressed.index);
+		this.host.setLastUsed(pressed.index);
+		this.focusThumb(pressed.index);
+		this.setFromPointer(event, pressed.index);
+		document.addEventListener("pointermove", this.onPointerMove);
+		document.addEventListener("pointerup", this.onPointerUp);
+		document.addEventListener("pointercancel", this.onPointerUp);
+	}
+	endPointerInteraction() {
+		document.removeEventListener("pointermove", this.onPointerMove);
+		document.removeEventListener("pointerup", this.onPointerUp);
+		document.removeEventListener("pointercancel", this.onPointerUp);
+		this.dragValues = null;
+		this.dragIndex = -1;
+		this.dragOffset = 0;
+		this.dragPointerId = null;
+		this.dragControl = null;
+		this.host.setActive(-1);
+	}
+	pressedThumb(event) {
+		const vertical = this.host.vertical();
+		const coordinate = vertical ? event.clientY : event.clientX;
+		const target = event.target instanceof Element ? event.target.closest(".raqm-slider-thumb") : null;
+		if (target !== null) {
+			const index = Number(target.dataset["raqmIndex"] ?? "-1");
+			if (index < 0) return null;
+			const rect = target.getBoundingClientRect();
+			return {
+				index,
+				offset: coordinate - (vertical ? rect.top + rect.height / 2 : rect.left + rect.width / 2)
+			};
+		}
+		let closest = -1;
+		let distance = Number.POSITIVE_INFINITY;
+		this.host.thumbElements().forEach((thumb, index) => {
+			const rect = thumb.nativeElement.getBoundingClientRect();
+			const center = vertical ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
+			const delta = Math.abs(coordinate - center);
+			if (delta <= distance) {
+				closest = index;
+				distance = delta;
+			}
+		});
+		return closest < 0 ? null : {
+			index: closest,
+			offset: 0
+		};
+	}
+	setFromPointer(event, index) {
+		const control = this.dragControl;
+		if (control === null) return;
+		const value = this.valueFromPointer(event, control, index);
+		if (value === null) return;
+		const values = this.host.values();
+		if (values.length <= 1) {
+			this.host.setValues([value]);
+			return;
+		}
+		this.host.setValues(pushThumbValues(values, index, value, this.host.min(), Math.max(this.host.max(), this.host.min()), this.dragValues ?? values));
+	}
+	valueFromPointer(event, control, index) {
+		const thumb = this.host.thumbElements()[index]?.nativeElement;
+		if (thumb === void 0) return null;
+		const vertical = this.host.vertical();
+		const controlRect = control.getBoundingClientRect();
+		const thumbRect = thumb.getBoundingClientRect();
+		const thumbSize = vertical ? thumbRect.height : thumbRect.width;
+		const controlSize = (vertical ? controlRect.height : controlRect.width) - thumbSize;
+		if (controlSize <= 0) return null;
+		const coordinate = (vertical ? event.clientY : event.clientX) - this.dragOffset;
+		const position = clamp(((vertical ? controlRect.bottom - coordinate : this.host.direction() === "rtl" ? controlRect.right - coordinate : coordinate - controlRect.left) - thumbSize / 2) / controlSize, 0, 1);
+		const min = this.host.min();
+		return this.host.round(min + (Math.max(this.host.max(), min) - min) * position);
+	}
+	onPointerMove = (event) => {
+		if (event.pointerId !== this.dragPointerId) return;
+		if (this.host.disabled()) {
+			this.endPointerInteraction();
+			return;
+		}
+		if (event.buttons === 0) {
+			this.endPointerInteraction();
+			return;
+		}
+		this.setFromPointer(event, this.dragIndex);
+	};
+	onPointerUp = (event) => {
+		if (event.pointerId === this.dragPointerId) this.endPointerInteraction();
+	};
+	focusThumb(index) {
+		this.host.thumbInputs()[index]?.nativeElement.focus({ preventScroll: true });
+	}
+};
+var RaqmSlider = class RaqmSlider {
+	value = input(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	defaultValue = input(null, ...ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []);
+	min = input(0, ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
+	max = input(100, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	step = input(1, ...ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []);
+	vertical = input(false, {
+		...ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	name = input(null, ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	form = input(null, ...ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []);
+	id = input(null, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	thumbLabels = input(null, ...ngDevMode ? [{ debugName: "thumbLabels" }] : /* istanbul ignore next */ []);
+	valueChange = output();
+	host = inject(ElementRef);
+	destroyRef = inject(DestroyRef);
+	uncontrolled = signal(null, ...ngDevMode ? [{ debugName: "uncontrolled" }] : /* istanbul ignore next */ []);
+	activeIndex = signal(-1, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+	lastUsedIndex = signal(-1, ...ngDevMode ? [{ debugName: "lastUsedIndex" }] : /* istanbul ignore next */ []);
+	thumbElements = viewChildren("thumbEl", ...ngDevMode ? [{ debugName: "thumbElements" }] : /* istanbul ignore next */ []);
+	thumbInputs = viewChildren("thumbInput", ...ngDevMode ? [{ debugName: "thumbInputs" }] : /* istanbul ignore next */ []);
+	orientation = computed(() => this.vertical() ? "vertical" : "horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	values = computed(() => {
+		const raw = this.value() ?? this.uncontrolled() ?? this.defaultValue() ?? this.min();
+		const list = (Array.isArray(raw) ? raw : [raw]).slice();
+		return (list.length > 0 ? list : [this.min()]).map((entry) => this.round(entry));
+	}, ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
+	thumbs = computed(() => {
+		const vertical = this.vertical();
+		const active = this.activeIndex();
+		const lastUsed = this.lastUsedIndex();
+		return this.values().map((value, index) => {
+			const position = offsetExpression(this.ratio(value));
+			const stack = active === index ? "2" : lastUsed === index ? "1" : "";
+			return {
+				index,
+				value,
+				style: vertical ? {
+					"inset-block-end": position,
+					"inset-inline-start": "50%",
+					"z-index": stack
+				} : {
+					"inset-inline-start": position,
+					"inset-block-start": "50%",
+					"z-index": stack
+				}
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "thumbs" }] : /* istanbul ignore next */ []);
+	rangeStyle = computed(() => {
+		const values = this.values();
+		const vertical = this.vertical();
+		const first = this.ratio(values[0] ?? this.min());
+		if (values.length <= 1) {
+			const size = offsetExpression(first);
+			return vertical ? {
+				"inset-block-end": "0",
+				"block-size": size
+			} : {
+				"inset-inline-start": "0",
+				"inline-size": size
+			};
+		}
+		const last = this.ratio(values[values.length - 1] ?? this.min());
+		const start = offsetExpression(first);
+		const size = spanExpression(Number((last - first).toFixed(6)));
+		return vertical ? {
+			"inset-block-end": start,
+			"block-size": size
+		} : {
+			"inset-inline-start": start,
+			"inline-size": size
+		};
+	}, ...ngDevMode ? [{ debugName: "rangeStyle" }] : /* istanbul ignore next */ []);
+	pointer = new RaqmSliderPointer({
+		disabled: () => this.disabled(),
+		vertical: () => this.vertical(),
+		values: () => this.values(),
+		min: () => this.min(),
+		max: () => this.max(),
+		round: (value) => this.round(value),
+		direction: () => this.direction(),
+		thumbElements: () => this.thumbElements(),
+		thumbInputs: () => this.thumbInputs(),
+		setValues: (values) => this.setValues(values),
+		setActive: (index) => this.activeIndex.set(index),
+		setLastUsed: (index) => this.lastUsedIndex.set(index)
+	});
+	keyboard = new RaqmSliderKeyboard({
+		values: () => this.values(),
+		min: () => this.min(),
+		max: () => this.max(),
+		stepSize: () => this.stepSize(),
+		direction: () => this.direction(),
+		setLastUsed: (index) => this.lastUsedIndex.set(index),
+		applyClamped: (index, next) => this.applyClamped(index, next)
+	});
+	constructor() {
+		this.destroyRef.onDestroy(() => this.pointer.endPointerInteraction());
+	}
+	inputId(index) {
+		return index === 0 ? this.id() : null;
+	}
+	thumbLabel(index) {
+		return this.thumbLabels()?.[index] ?? null;
+	}
+	onFocus(index) {
+		this.activeIndex.set(index);
+		this.lastUsedIndex.set(index);
+	}
+	onBlur() {
+		this.activeIndex.set(-1);
+	}
+	onInput(event, index) {
+		const input = event.target;
+		if (Number.isFinite(input.valueAsNumber)) this.applyClamped(index, input.valueAsNumber);
+	}
+	onKeydown(event, index) {
+		this.keyboard.onKeydown(event, index);
+	}
+	onPointerDown(event) {
+		this.pointer.onPointerDown(event);
+	}
+	round(value) {
+		const min = this.min();
+		const max = Math.max(this.max(), min);
+		return clamp(roundToStep(Number.isFinite(value) ? value : min, this.stepSize(), min), min, max);
+	}
+	stepSize() {
+		return this.step() > 0 ? this.step() : 1;
+	}
+	ratio(value) {
+		const span = this.max() - this.min();
+		return span > 0 ? Number(((value - this.min()) / span).toFixed(6)) : 0;
+	}
+	applyClamped(index, next) {
+		const values = this.values().slice();
+		if (index < 0 || index >= values.length) return;
+		values[index] = this.round(clamp(next, values[index - 1] ?? -Infinity, values[index + 1] ?? Infinity));
+		this.setValues(values);
+	}
+	setValues(next) {
+		const current = this.values();
+		if (next.length === current.length && next.every((value, index) => value === current[index])) return;
+		if (this.value() === null) this.uncontrolled.set(next);
+		this.valueChange.emit(next.length === 1 ? next[0] : next);
+	}
+	direction() {
+		return getComputedStyle(this.host.nativeElement).direction === "rtl" ? "rtl" : "ltr";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSlider,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmSlider,
+		isStandalone: true,
+		selector: "raqm-slider",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			defaultValue: {
+				classPropertyName: "defaultValue",
+				publicName: "defaultValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			min: {
+				classPropertyName: "min",
+				publicName: "min",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			step: {
+				classPropertyName: "step",
+				publicName: "step",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			vertical: {
+				classPropertyName: "vertical",
+				publicName: "vertical",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			form: {
+				classPropertyName: "form",
+				publicName: "form",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			thumbLabels: {
+				classPropertyName: "thumbLabels",
+				publicName: "thumbLabels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { valueChange: "valueChange" },
+		host: {
+			attributes: { "role": "group" },
+			properties: {
+				"attr.data-raqm-vertical": "vertical() ? '' : null",
+				"attr.data-raqm-disabled": "disabled() ? '' : null",
+				"attr.id": "null"
+			},
+			classAttribute: "raqm-slider"
+		},
+		viewQueries: [{
+			propertyName: "thumbElements",
+			predicate: ["thumbEl"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "thumbInputs",
+			predicate: ["thumbInput"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<!-- The host is the group; each thumb hosts a native range input that owns focus, ARIA and form value. -->\r\n<div\r\n  class=\"raqm-slider-control\"\r\n  [attr.data-raqm-disabled]=\"disabled() ? '' : null\"\r\n  (pointerdown)=\"onPointerDown($event)\"\r\n>\r\n  <div class=\"raqm-slider-track\">\r\n    <div class=\"raqm-slider-range\" [style]=\"rangeStyle()\"></div>\r\n  </div>\r\n  @for (thumb of thumbs(); track thumb.index) {\r\n    <div\r\n      #thumbEl\r\n      class=\"raqm-slider-thumb\"\r\n      [attr.data-raqm-index]=\"thumb.index\"\r\n      [style]=\"thumb.style\"\r\n    >\r\n      <input\r\n        #thumbInput\r\n        type=\"range\"\r\n        class=\"raqm-slider-input\"\r\n        [attr.id]=\"inputId(thumb.index)\"\r\n        [attr.name]=\"name()\"\r\n        [attr.form]=\"form()\"\r\n        [attr.aria-label]=\"thumbLabel(thumb.index)\"\r\n        [attr.aria-orientation]=\"orientation()\"\r\n        [attr.aria-valuemin]=\"min()\"\r\n        [attr.aria-valuemax]=\"max()\"\r\n        [attr.aria-valuenow]=\"thumb.value\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [step]=\"step()\"\r\n        [value]=\"thumb.value\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput($event, thumb.index)\"\r\n        (keydown)=\"onKeydown($event, thumb.index)\"\r\n        (focus)=\"onFocus(thumb.index)\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n",
+		styles: [":host{display:block;--raqm-slider-thumb-size: calc(var(--raqm-spacing) * 3)}:host(:not([data-raqm-vertical])){inline-size:100%}:host([data-raqm-vertical]){block-size:100%}.raqm-slider-control{position:relative;display:flex;align-items:center;inline-size:100%;touch-action:none;-webkit-user-select:none;user-select:none}:host([data-raqm-vertical]) .raqm-slider-control{flex-direction:column;inline-size:auto;block-size:100%;min-block-size:calc(var(--raqm-spacing) * 40)}.raqm-slider-control[data-raqm-disabled]{opacity:var(--raqm-disabled-opacity)}.raqm-slider-track{position:relative;flex-grow:1;overflow:hidden;border-radius:9999px;background-color:var(--raqm-muted);-webkit-user-select:none;user-select:none}:host(:not([data-raqm-vertical])) .raqm-slider-track{block-size:calc(var(--raqm-spacing) * 1);inline-size:100%}:host([data-raqm-vertical]) .raqm-slider-track{block-size:100%;inline-size:calc(var(--raqm-spacing) * 1)}.raqm-slider-range{background-color:var(--raqm-primary);-webkit-user-select:none;user-select:none}:host(:not([data-raqm-vertical])) .raqm-slider-range{position:relative;block-size:100%}:host([data-raqm-vertical]) .raqm-slider-range{position:absolute;inline-size:100%}.raqm-slider-thumb{position:absolute;box-sizing:border-box;inline-size:var(--raqm-slider-thumb-size);block-size:var(--raqm-slider-thumb-size);margin:calc(var(--raqm-slider-thumb-size) / -2);border:1px solid var(--raqm-ring);border-radius:9999px;background-color:var(--raqm-white);-webkit-user-select:none;user-select:none;transition-property:color,box-shadow;transition-duration:var(--raqm-duration-base);transition-timing-function:var(--raqm-ease-standard)}.raqm-slider-thumb:after{content:\"\";position:absolute;inset:calc(var(--raqm-spacing) * -2)}:host(:not([data-raqm-disabled])) .raqm-slider-thumb:hover,:host(:not([data-raqm-disabled])) .raqm-slider-thumb:active,.raqm-slider-thumb:has(.raqm-slider-input:focus-visible){box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-focus-ring-color)}.raqm-slider-thumb:has(.raqm-slider-input:focus-visible){outline:2px solid transparent;outline-offset:2px}.raqm-slider-input{position:absolute;inset:0;inline-size:100%;block-size:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none}:host([data-raqm-vertical]) .raqm-slider-input:dir(rtl){writing-mode:vertical-rl}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSlider,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-slider",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-slider",
+				role: "group",
+				"[attr.data-raqm-vertical]": "vertical() ? '' : null",
+				"[attr.data-raqm-disabled]": "disabled() ? '' : null",
+				"[attr.id]": "null"
+			},
+			template: "<!-- The host is the group; each thumb hosts a native range input that owns focus, ARIA and form value. -->\r\n<div\r\n  class=\"raqm-slider-control\"\r\n  [attr.data-raqm-disabled]=\"disabled() ? '' : null\"\r\n  (pointerdown)=\"onPointerDown($event)\"\r\n>\r\n  <div class=\"raqm-slider-track\">\r\n    <div class=\"raqm-slider-range\" [style]=\"rangeStyle()\"></div>\r\n  </div>\r\n  @for (thumb of thumbs(); track thumb.index) {\r\n    <div\r\n      #thumbEl\r\n      class=\"raqm-slider-thumb\"\r\n      [attr.data-raqm-index]=\"thumb.index\"\r\n      [style]=\"thumb.style\"\r\n    >\r\n      <input\r\n        #thumbInput\r\n        type=\"range\"\r\n        class=\"raqm-slider-input\"\r\n        [attr.id]=\"inputId(thumb.index)\"\r\n        [attr.name]=\"name()\"\r\n        [attr.form]=\"form()\"\r\n        [attr.aria-label]=\"thumbLabel(thumb.index)\"\r\n        [attr.aria-orientation]=\"orientation()\"\r\n        [attr.aria-valuemin]=\"min()\"\r\n        [attr.aria-valuemax]=\"max()\"\r\n        [attr.aria-valuenow]=\"thumb.value\"\r\n        [min]=\"min()\"\r\n        [max]=\"max()\"\r\n        [step]=\"step()\"\r\n        [value]=\"thumb.value\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput($event, thumb.index)\"\r\n        (keydown)=\"onKeydown($event, thumb.index)\"\r\n        (focus)=\"onFocus(thumb.index)\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n",
+			styles: [":host{display:block;--raqm-slider-thumb-size: calc(var(--raqm-spacing) * 3)}:host(:not([data-raqm-vertical])){inline-size:100%}:host([data-raqm-vertical]){block-size:100%}.raqm-slider-control{position:relative;display:flex;align-items:center;inline-size:100%;touch-action:none;-webkit-user-select:none;user-select:none}:host([data-raqm-vertical]) .raqm-slider-control{flex-direction:column;inline-size:auto;block-size:100%;min-block-size:calc(var(--raqm-spacing) * 40)}.raqm-slider-control[data-raqm-disabled]{opacity:var(--raqm-disabled-opacity)}.raqm-slider-track{position:relative;flex-grow:1;overflow:hidden;border-radius:9999px;background-color:var(--raqm-muted);-webkit-user-select:none;user-select:none}:host(:not([data-raqm-vertical])) .raqm-slider-track{block-size:calc(var(--raqm-spacing) * 1);inline-size:100%}:host([data-raqm-vertical]) .raqm-slider-track{block-size:100%;inline-size:calc(var(--raqm-spacing) * 1)}.raqm-slider-range{background-color:var(--raqm-primary);-webkit-user-select:none;user-select:none}:host(:not([data-raqm-vertical])) .raqm-slider-range{position:relative;block-size:100%}:host([data-raqm-vertical]) .raqm-slider-range{position:absolute;inline-size:100%}.raqm-slider-thumb{position:absolute;box-sizing:border-box;inline-size:var(--raqm-slider-thumb-size);block-size:var(--raqm-slider-thumb-size);margin:calc(var(--raqm-slider-thumb-size) / -2);border:1px solid var(--raqm-ring);border-radius:9999px;background-color:var(--raqm-white);-webkit-user-select:none;user-select:none;transition-property:color,box-shadow;transition-duration:var(--raqm-duration-base);transition-timing-function:var(--raqm-ease-standard)}.raqm-slider-thumb:after{content:\"\";position:absolute;inset:calc(var(--raqm-spacing) * -2)}:host(:not([data-raqm-disabled])) .raqm-slider-thumb:hover,:host(:not([data-raqm-disabled])) .raqm-slider-thumb:active,.raqm-slider-thumb:has(.raqm-slider-input:focus-visible){box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-focus-ring-color)}.raqm-slider-thumb:has(.raqm-slider-input:focus-visible){outline:2px solid transparent;outline-offset:2px}.raqm-slider-input{position:absolute;inset:0;inline-size:100%;block-size:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none}:host([data-raqm-vertical]) .raqm-slider-input:dir(rtl){writing-mode:vertical-rl}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		defaultValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "defaultValue",
+				required: false
+			}]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		step: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "step",
+				required: false
+			}]
+		}],
+		vertical: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "vertical",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		form: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "form",
+				required: false
+			}]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		thumbLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "thumbLabels",
+				required: false
+			}]
+		}],
+		valueChange: [{
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		thumbElements: [{
+			type: i0.ViewChildren,
+			args: ["thumbEl", { isSignal: true }]
+		}],
+		thumbInputs: [{
+			type: i0.ViewChildren,
+			args: ["thumbInput", { isSignal: true }]
+		}]
+	}
+});
+export { RaqmSlider };
+
+//# sourceMappingURL=raqm-ui-slider.mjs.map