@radix-ng/primitives 0.17.0 → 0.18.0

package/fesm2022/radix-ng-primitives-slider.mjs

@@ -0,0 +1,830 @@
+import * as i0 from '@angular/core';
+import { inject, EventEmitter, Directive, Output, input, booleanAttribute, viewChild, signal, Component, Input, Injectable, numberAttribute, model, computed, ElementRef, NgModule } from '@angular/core';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+
+// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js
+function linearScale(input, output) {
+    return (value) => {
+        if (input[0] === input[1] || output[0] === output[1])
+            return output[0];
+        const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+        return output[0] + ratio * (value - input[0]);
+    };
+}
+/**
+ * Verifies the minimum steps between all values is greater than or equal
+ * to the expected minimum steps.
+ *
+ * @example
+ * // returns false
+ * hasMinStepsBetweenValues([1,2,3], 2);
+ *
+ * @example
+ * // returns true
+ * hasMinStepsBetweenValues([1,2,3], 1);
+ */
+function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
+    if (minStepsBetweenValues > 0) {
+        const stepsBetweenValues = getStepsBetweenValues(values);
+        const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
+        return actualMinStepsBetweenValues >= minStepsBetweenValues;
+    }
+    return true;
+}
+/**
+ * Given a `values` array and a `nextValue`, determine which value in
+ * the array is closest to `nextValue` and return its index.
+ *
+ * @example
+ * // returns 1
+ * getClosestValueIndex([10, 30], 25);
+ */
+function getClosestValueIndex(values, nextValue) {
+    if (values.length === 1)
+        return 0;
+    const distances = values.map((value) => Math.abs(value - nextValue));
+    const closestDistance = Math.min(...distances);
+    return distances.indexOf(closestDistance);
+}
+/**
+ * Gets an array of steps between each value.
+ *
+ * @example
+ * // returns [1, 9]
+ * getStepsBetweenValues([10, 11, 20]);
+ */
+function getStepsBetweenValues(values) {
+    return values.slice(0, -1).map((value, index) => values[index + 1] - value);
+}
+/**
+ * Offsets the thumb centre point while sliding to ensure it remains
+ * within the bounds of the slider when reaching the edges
+ */
+function getThumbInBoundsOffset(width, left, direction) {
+    const halfWidth = width / 2;
+    const halfPercent = 50;
+    const offset = linearScale([0, halfPercent], [0, halfWidth]);
+    return (halfWidth - offset(left) * direction) * direction;
+}
+function convertValueToPercentage(value, min, max) {
+    const maxSteps = max - min;
+    const percentPerStep = 100 / maxSteps;
+    const percentage = percentPerStep * (value - min);
+    return clamp(percentage, 0, 100);
+}
+function getDecimalCount(value) {
+    return (String(value).split('.')[1] || '').length;
+}
+function roundValue(value, decimalCount) {
+    const rounder = 10 ** decimalCount;
+    return Math.round(value * rounder) / rounder;
+}
+function getNextSortedValues(prevValues = [], nextValue, atIndex) {
+    const nextValues = [...prevValues];
+    nextValues[atIndex] = nextValue;
+    return nextValues.sort((a, b) => a - b);
+}
+const PAGE_KEYS = ['PageUp', 'PageDown'];
+const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+const BACK_KEYS = {
+    'from-left': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],
+    'from-right': ['Home', 'PageDown', 'ArrowDown', 'ArrowRight'],
+    'from-bottom': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],
+    'from-top': ['Home', 'PageDown', 'ArrowUp', 'ArrowLeft']
+};
+function clamp(value, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY) {
+    return Math.min(Math.max(value, min), max);
+}
+
+class RdxSliderImplDirective {
+    constructor() {
+        this.rootContext = inject(RdxSliderRootComponent);
+        this.slideStart = new EventEmitter();
+        this.slideMove = new EventEmitter();
+        this.slideEnd = new EventEmitter();
+        this.homeKeyDown = new EventEmitter();
+        this.endKeyDown = new EventEmitter();
+        this.stepKeyDown = new EventEmitter();
+    }
+    onKeyDown(event) {
+        if (event.key === 'Home') {
+            this.homeKeyDown.emit(event);
+            // Prevent scrolling to page start
+            event.preventDefault();
+        }
+        else if (event.key === 'End') {
+            this.endKeyDown.emit(event);
+            // Prevent scrolling to page end
+            event.preventDefault();
+        }
+        else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {
+            this.stepKeyDown.emit(event);
+            // Prevent scrolling for directional key presses
+            event.preventDefault();
+        }
+    }
+    onPointerDown(event) {
+        const target = event.target;
+        target.setPointerCapture(event.pointerId);
+        // Prevent browser focus behaviour because we focus a thumb manually when values change.
+        event.preventDefault();
+        // Touch devices have a delay before focusing so won't focus if touch immediately moves
+        // away from target (sliding). We want thumb to focus regardless.
+        if (this.rootContext.thumbElements.includes(target)) {
+            target.focus();
+        }
+        else {
+            this.slideStart.emit(event);
+        }
+    }
+    onPointerMove(event) {
+        const target = event.target;
+        if (target.hasPointerCapture(event.pointerId)) {
+            this.slideMove.emit(event);
+        }
+    }
+    onPointerUp(event) {
+        const target = event.target;
+        if (target.hasPointerCapture(event.pointerId)) {
+            target.releasePointerCapture(event.pointerId);
+            this.slideEnd.emit(event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderImplDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: RdxSliderImplDirective, isStandalone: true, selector: "[rdxSliderImpl]", outputs: { slideStart: "slideStart", slideMove: "slideMove", slideEnd: "slideEnd", homeKeyDown: "homeKeyDown", endKeyDown: "endKeyDown", stepKeyDown: "stepKeyDown" }, host: { attributes: { "role": "slider", "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderImplDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSliderImpl]',
+                    standalone: true,
+                    host: {
+                        role: 'slider',
+                        tabindex: '0',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerup)': 'onPointerUp($event)'
+                    }
+                }]
+        }], propDecorators: { slideStart: [{
+                type: Output
+            }], slideMove: [{
+                type: Output
+            }], slideEnd: [{
+                type: Output
+            }], homeKeyDown: [{
+                type: Output
+            }], endKeyDown: [{
+                type: Output
+            }], stepKeyDown: [{
+                type: Output
+            }] } });
+
+class RdxSliderHorizontalComponent {
+    constructor() {
+        this.rootContext = inject(RdxSliderRootComponent);
+        this.dir = 'ltr';
+        this.inverted = input(false, { transform: booleanAttribute });
+        this.min = 0;
+        this.max = 100;
+        this.className = '';
+        this.slideStart = new EventEmitter();
+        this.slideMove = new EventEmitter();
+        this.slideEnd = new EventEmitter();
+        this.stepKeyDown = new EventEmitter();
+        this.endKeyDown = new EventEmitter();
+        this.homeKeyDown = new EventEmitter();
+        this.sliderElement = viewChild('sliderElement');
+        this.rect = signal(undefined);
+    }
+    onSlideStart(event) {
+        const value = this.getValueFromPointer(event.clientX);
+        this.slideStart.emit(value);
+    }
+    onSlideMove(event) {
+        const value = this.getValueFromPointer(event.clientX);
+        this.slideMove.emit(value);
+    }
+    onSlideEnd() {
+        this.rect.set(undefined);
+        this.slideEnd.emit();
+    }
+    onStepKeyDown(event) {
+        const slideDirection = this.rootContext.isSlidingFromLeft() ? 'from-left' : 'from-right';
+        const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
+        this.stepKeyDown.emit({ event, direction: isBackKey ? -1 : 1 });
+    }
+    getValueFromPointer(pointerPosition) {
+        this.rect.set(this.sliderElement()?.nativeElement.getBoundingClientRect());
+        const rect = this.rect();
+        if (!rect)
+            return 0;
+        const input = [0, rect.width];
+        const output = this.rootContext.isSlidingFromLeft()
+            ? [this.min, this.max]
+            : [this.max, this.min];
+        const value = linearScale(input, output);
+        this.rect.set(rect);
+        return value(pointerPosition - rect.left);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.11", type: RdxSliderHorizontalComponent, isStandalone: true, selector: "rdx-slider-horizontal", inputs: { dir: { classPropertyName: "dir", publicName: "dir", isSignal: false, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { slideStart: "slideStart", slideMove: "slideMove", slideEnd: "slideEnd", stepKeyDown: "stepKeyDown", endKeyDown: "endKeyDown", homeKeyDown: "homeKeyDown" }, viewQueries: [{ propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
+        <span
+            #sliderElement
+            [class]="className"
+            [attr.data-orientation]="'horizontal'"
+            [style]="{ '--rdx-slider-thumb-transform': 'translateX(-50%)' }"
+            (slideStart)="onSlideStart($event)"
+            (slideMove)="onSlideMove($event)"
+            (slideEnd)="onSlideEnd()"
+            (stepKeyDown)="onStepKeyDown($event)"
+            (endKeyDown)="endKeyDown.emit($event)"
+            (homeKeyDown)="homeKeyDown.emit($event)"
+            rdxSliderImpl
+        >
+            <ng-content />
+        </span>
+    `, isInline: true, dependencies: [{ kind: "directive", type: RdxSliderImplDirective, selector: "[rdxSliderImpl]", outputs: ["slideStart", "slideMove", "slideEnd", "homeKeyDown", "endKeyDown", "stepKeyDown"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderHorizontalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rdx-slider-horizontal',
+                    standalone: true,
+                    imports: [RdxSliderImplDirective],
+                    template: `
+        <span
+            #sliderElement
+            [class]="className"
+            [attr.data-orientation]="'horizontal'"
+            [style]="{ '--rdx-slider-thumb-transform': 'translateX(-50%)' }"
+            (slideStart)="onSlideStart($event)"
+            (slideMove)="onSlideMove($event)"
+            (slideEnd)="onSlideEnd()"
+            (stepKeyDown)="onStepKeyDown($event)"
+            (endKeyDown)="endKeyDown.emit($event)"
+            (homeKeyDown)="homeKeyDown.emit($event)"
+            rdxSliderImpl
+        >
+            <ng-content />
+        </span>
+    `
+                }]
+        }], propDecorators: { dir: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], slideStart: [{
+                type: Output
+            }], slideMove: [{
+                type: Output
+            }], slideEnd: [{
+                type: Output
+            }], stepKeyDown: [{
+                type: Output
+            }], endKeyDown: [{
+                type: Output
+            }], homeKeyDown: [{
+                type: Output
+            }] } });
+
+class RdxSliderOrientationContextService {
+    constructor() {
+        this.contextSignal = signal({
+            startEdge: 'left',
+            endEdge: 'right',
+            direction: 1,
+            size: 'width'
+        });
+    }
+    get context() {
+        return this.contextSignal();
+    }
+    updateContext(context) {
+        this.contextSignal.update((current) => ({
+            ...current,
+            ...context
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderOrientationContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderOrientationContextService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderOrientationContextService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class RdxSliderVerticalComponent {
+    constructor() {
+        this.rootContext = inject(RdxSliderRootComponent);
+        this.dir = 'ltr';
+        this.inverted = input(false, { transform: booleanAttribute });
+        this.min = 0;
+        this.max = 100;
+        this.className = '';
+        this.slideStart = new EventEmitter();
+        this.slideMove = new EventEmitter();
+        this.slideEnd = new EventEmitter();
+        this.stepKeyDown = new EventEmitter();
+        this.endKeyDown = new EventEmitter();
+        this.homeKeyDown = new EventEmitter();
+        this.sliderElement = viewChild('sliderElement');
+        this.rect = signal(undefined);
+    }
+    onSlideStart(event) {
+        const value = this.getValueFromPointer(event.clientY);
+        this.slideStart.emit(value);
+    }
+    onSlideMove(event) {
+        const value = this.getValueFromPointer(event.clientY);
+        this.slideMove.emit(value);
+    }
+    onSlideEnd() {
+        this.rect.set(undefined);
+        this.slideEnd.emit();
+    }
+    onStepKeyDown(event) {
+        const slideDirection = this.rootContext.isSlidingFromBottom() ? 'from-bottom' : 'from-top';
+        const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
+        this.stepKeyDown.emit({ event, direction: isBackKey ? -1 : 1 });
+    }
+    getValueFromPointer(pointerPosition) {
+        this.rect.set(this.sliderElement()?.nativeElement.getBoundingClientRect());
+        const rect = this.rect();
+        if (!rect)
+            return 0;
+        const input = [0, rect.height];
+        const output = this.rootContext.isSlidingFromBottom()
+            ? [this.max, this.min]
+            : [this.min, this.max];
+        const value = linearScale(input, output);
+        this.rect.set(rect);
+        return value(pointerPosition - rect.top);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.11", type: RdxSliderVerticalComponent, isStandalone: true, selector: "rdx-slider-vertical", inputs: { dir: { classPropertyName: "dir", publicName: "dir", isSignal: false, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { slideStart: "slideStart", slideMove: "slideMove", slideEnd: "slideEnd", stepKeyDown: "stepKeyDown", endKeyDown: "endKeyDown", homeKeyDown: "homeKeyDown" }, viewQueries: [{ propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
+        <span
+            #sliderElement
+            [class]="className"
+            [attr.data-orientation]="'vertical'"
+            [style]="{ '--rdx-slider-thumb-transform': 'translateY(-50%)' }"
+            (slideStart)="onSlideStart($event)"
+            (slideMove)="onSlideMove($event)"
+            (slideEnd)="onSlideEnd()"
+            (stepKeyDown)="onStepKeyDown($event)"
+            (endKeyDown)="endKeyDown.emit($event)"
+            (homeKeyDown)="homeKeyDown.emit($event)"
+            rdxSliderImpl
+        >
+            <ng-content />
+        </span>
+    `, isInline: true, dependencies: [{ kind: "directive", type: RdxSliderImplDirective, selector: "[rdxSliderImpl]", outputs: ["slideStart", "slideMove", "slideEnd", "homeKeyDown", "endKeyDown", "stepKeyDown"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderVerticalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rdx-slider-vertical',
+                    standalone: true,
+                    imports: [RdxSliderImplDirective],
+                    template: `
+        <span
+            #sliderElement
+            [class]="className"
+            [attr.data-orientation]="'vertical'"
+            [style]="{ '--rdx-slider-thumb-transform': 'translateY(-50%)' }"
+            (slideStart)="onSlideStart($event)"
+            (slideMove)="onSlideMove($event)"
+            (slideEnd)="onSlideEnd()"
+            (stepKeyDown)="onStepKeyDown($event)"
+            (endKeyDown)="endKeyDown.emit($event)"
+            (homeKeyDown)="homeKeyDown.emit($event)"
+            rdxSliderImpl
+        >
+            <ng-content />
+        </span>
+    `
+                }]
+        }], propDecorators: { dir: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], slideStart: [{
+                type: Output
+            }], slideMove: [{
+                type: Output
+            }], slideEnd: [{
+                type: Output
+            }], stepKeyDown: [{
+                type: Output
+            }], endKeyDown: [{
+                type: Output
+            }], homeKeyDown: [{
+                type: Output
+            }] } });
+
+class RdxSliderRootComponent {
+    constructor() {
+        /** @ignore */
+        this.orientationContext = inject(RdxSliderOrientationContextService);
+        this.min = input(0, { transform: numberAttribute });
+        this.max = input(100, { transform: numberAttribute });
+        this.step = input(1, { transform: numberAttribute });
+        this.minStepsBetweenThumbs = input(0, { transform: numberAttribute });
+        this.orientation = input('horizontal');
+        this.disabled = input(false, { transform: booleanAttribute });
+        this.inverted = input(false, { transform: booleanAttribute });
+        this.dir = input('ltr');
+        this.className = '';
+        this.valueChange = new EventEmitter();
+        this.valueCommit = new EventEmitter();
+        this.modelValue = model([0]);
+        /** @ignore */
+        this.valueIndexToChange = model(0);
+        /** @ignore */
+        this.valuesBeforeSlideStart = model([]);
+        this.isSlidingFromLeft = computed(() => (this.dir() === 'ltr' && !this.inverted()) || (this.dir() !== 'ltr' && this.inverted()));
+        this.isSlidingFromBottom = computed(() => !this.inverted());
+        /** @ignore */
+        this.thumbElements = [];
+    }
+    /** @ignore */
+    ngOnInit() {
+        const isHorizontal = this.orientation() === 'horizontal';
+        if (isHorizontal) {
+            this.orientationContext.updateContext({
+                direction: this.isSlidingFromLeft() ? 1 : -1,
+                size: 'width',
+                startEdge: this.isSlidingFromLeft() ? 'left' : 'right',
+                endEdge: this.isSlidingFromLeft() ? 'right' : 'left'
+            });
+        }
+        else {
+            this.orientationContext.updateContext({
+                direction: this.isSlidingFromBottom() ? -1 : 1,
+                size: 'height',
+                startEdge: this.isSlidingFromBottom() ? 'bottom' : 'top',
+                endEdge: this.isSlidingFromBottom() ? 'top' : 'bottom'
+            });
+        }
+    }
+    /** @ignore */
+    onPointerDown() {
+        this.valuesBeforeSlideStart.set([...this.modelValue()]);
+    }
+    /** @ignore */
+    handleSlideStart(value) {
+        const closestIndex = getClosestValueIndex(this.modelValue(), value);
+        this.updateValues(value, closestIndex);
+    }
+    /** @ignore */
+    handleSlideMove(value) {
+        this.updateValues(value, this.valueIndexToChange());
+    }
+    /** @ignore */
+    handleSlideEnd() {
+        const prevValue = this.valuesBeforeSlideStart()[this.valueIndexToChange()];
+        const nextValue = this.modelValue()[this.valueIndexToChange()];
+        const hasChanged = nextValue !== prevValue;
+        if (hasChanged) {
+            this.valueCommit.emit([...this.modelValue()]);
+        }
+    }
+    /** @ignore */
+    handleStepKeyDown(event) {
+        const stepInDirection = this.step() * event.direction;
+        const atIndex = this.valueIndexToChange();
+        const currentValue = this.modelValue()[atIndex];
+        this.updateValues(currentValue + stepInDirection, atIndex, true);
+    }
+    /** @ignore */
+    updateValues(value, atIndex, commit = false) {
+        const decimalCount = getDecimalCount(this.step());
+        const snapToStep = roundValue(Math.round((value - this.min()) / this.step()) * this.step() + this.min(), decimalCount);
+        const nextValue = clamp(snapToStep, this.min(), this.max());
+        const nextValues = getNextSortedValues(this.modelValue(), nextValue, atIndex);
+        if (hasMinStepsBetweenValues(nextValues, this.minStepsBetweenThumbs() * this.step())) {
+            this.valueIndexToChange.set(nextValues.indexOf(nextValue));
+            const hasChanged = String(nextValues) !== String(this.modelValue());
+            if (hasChanged) {
+                this.modelValue.set(nextValues);
+                this.valueChange.emit([...this.modelValue()]);
+                this.thumbElements[this.valueIndexToChange()]?.focus();
+                if (commit) {
+                    this.valueCommit.emit([...this.modelValue()]);
+                }
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.11", type: RdxSliderRootComponent, isStandalone: true, selector: "rdx-slider", inputs: { 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 }, minStepsBetweenThumbs: { classPropertyName: "minStepsBetweenThumbs", publicName: "minStepsBetweenThumbs", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: false, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null }, valueIndexToChange: { classPropertyName: "valueIndexToChange", publicName: "valueIndexToChange", isSignal: true, isRequired: false, transformFunction: null }, valuesBeforeSlideStart: { classPropertyName: "valuesBeforeSlideStart", publicName: "valuesBeforeSlideStart", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", valueCommit: "valueCommit", modelValue: "modelValueChange", valueIndexToChange: "valueIndexToChangeChange", valuesBeforeSlideStart: "valuesBeforeSlideStartChange" }, ngImport: i0, template: `
+        <ng-template #transclude><ng-content /></ng-template>
+
+        <ng-container *ngIf="orientation() === 'horizontal'">
+            <rdx-slider-horizontal
+                [className]="className"
+                [min]="min()"
+                [max]="max()"
+                [dir]="dir()"
+                [inverted]="inverted()"
+                [attr.aria-disabled]="disabled()"
+                [attr.data-disabled]="disabled() ? '' : undefined"
+                (pointerdown)="onPointerDown()"
+                (slideStart)="handleSlideStart($event)"
+                (slideMove)="handleSlideMove($event)"
+                (slideEnd)="handleSlideEnd()"
+                (homeKeyDown)="updateValues(min(), 0, true)"
+                (endKeyDown)="updateValues(max(), modelValue().length - 1, true)"
+                (stepKeyDown)="handleStepKeyDown($event)"
+            >
+                <ng-container *ngTemplateOutlet="transclude" />
+            </rdx-slider-horizontal>
+        </ng-container>
+
+        <ng-container *ngIf="orientation() === 'vertical'">
+            <rdx-slider-vertical
+                [className]="className"
+                [min]="min()"
+                [max]="max()"
+                [dir]="dir()"
+                [inverted]="inverted()"
+                [attr.aria-disabled]="disabled()"
+                [attr.data-disabled]="disabled() ? '' : undefined"
+                (pointerdown)="onPointerDown()"
+                (slideStart)="handleSlideStart($event)"
+                (slideMove)="handleSlideMove($event)"
+                (slideEnd)="handleSlideEnd()"
+                (homeKeyDown)="updateValues(min(), 0, true)"
+                (endKeyDown)="updateValues(max(), modelValue().length - 1, true)"
+                (stepKeyDown)="handleStepKeyDown($event)"
+            >
+                <ng-container *ngTemplateOutlet="transclude" />
+            </rdx-slider-vertical>
+        </ng-container>
+    `, isInline: true, dependencies: [{ kind: "component", type: RdxSliderHorizontalComponent, selector: "rdx-slider-horizontal", inputs: ["dir", "inverted", "min", "max", "className"], outputs: ["slideStart", "slideMove", "slideEnd", "stepKeyDown", "endKeyDown", "homeKeyDown"] }, { kind: "component", type: RdxSliderVerticalComponent, selector: "rdx-slider-vertical", inputs: ["dir", "inverted", "min", "max", "className"], outputs: ["slideStart", "slideMove", "slideEnd", "stepKeyDown", "endKeyDown", "homeKeyDown"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderRootComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rdx-slider',
+                    standalone: true,
+                    imports: [RdxSliderHorizontalComponent, RdxSliderVerticalComponent, NgIf, NgTemplateOutlet],
+                    template: `
+        <ng-template #transclude><ng-content /></ng-template>
+
+        <ng-container *ngIf="orientation() === 'horizontal'">
+            <rdx-slider-horizontal
+                [className]="className"
+                [min]="min()"
+                [max]="max()"
+                [dir]="dir()"
+                [inverted]="inverted()"
+                [attr.aria-disabled]="disabled()"
+                [attr.data-disabled]="disabled() ? '' : undefined"
+                (pointerdown)="onPointerDown()"
+                (slideStart)="handleSlideStart($event)"
+                (slideMove)="handleSlideMove($event)"
+                (slideEnd)="handleSlideEnd()"
+                (homeKeyDown)="updateValues(min(), 0, true)"
+                (endKeyDown)="updateValues(max(), modelValue().length - 1, true)"
+                (stepKeyDown)="handleStepKeyDown($event)"
+            >
+                <ng-container *ngTemplateOutlet="transclude" />
+            </rdx-slider-horizontal>
+        </ng-container>
+
+        <ng-container *ngIf="orientation() === 'vertical'">
+            <rdx-slider-vertical
+                [className]="className"
+                [min]="min()"
+                [max]="max()"
+                [dir]="dir()"
+                [inverted]="inverted()"
+                [attr.aria-disabled]="disabled()"
+                [attr.data-disabled]="disabled() ? '' : undefined"
+                (pointerdown)="onPointerDown()"
+                (slideStart)="handleSlideStart($event)"
+                (slideMove)="handleSlideMove($event)"
+                (slideEnd)="handleSlideEnd()"
+                (homeKeyDown)="updateValues(min(), 0, true)"
+                (endKeyDown)="updateValues(max(), modelValue().length - 1, true)"
+                (stepKeyDown)="handleStepKeyDown($event)"
+            >
+                <ng-container *ngTemplateOutlet="transclude" />
+            </rdx-slider-vertical>
+        </ng-container>
+    `
+                }]
+        }], propDecorators: { className: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], valueCommit: [{
+                type: Output
+            }] } });
+
+class RdxSliderRangeComponent {
+    constructor() {
+        this.rootContext = inject(RdxSliderRootComponent);
+        this.percentages = computed(() => this.rootContext
+            .modelValue()
+            ?.map((value) => convertValueToPercentage(value, this.rootContext.min(), this.rootContext.max())));
+        this.offsetStart = computed(() => (this.rootContext.modelValue().length > 1 ? Math.min(...this.percentages()) : 0));
+        this.offsetEnd = computed(() => 100 - Math.max(...this.percentages()));
+        this.rangeStyles = computed(() => {
+            const context = this.rootContext.orientationContext.context;
+            return {
+                [context.startEdge]: `${this.offsetStart()}%`,
+                [context.endEdge]: `${this.offsetEnd()}%`
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: RdxSliderRangeComponent, isStandalone: true, selector: "rdx-slider-range", host: { properties: { "attr.data-disabled": "rootContext.disabled() ? \"\" : undefined", "attr.data-orientation": "rootContext.orientation()", "style": "rangeStyles()" } }, ngImport: i0, template: `
+        <ng-content />
+    `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderRangeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rdx-slider-range',
+                    standalone: true,
+                    host: {
+                        '[attr.data-disabled]': 'rootContext.disabled() ? "" : undefined',
+                        '[attr.data-orientation]': 'rootContext.orientation()',
+                        '[style]': 'rangeStyles()'
+                    },
+                    template: `
+        <ng-content />
+    `
+                }]
+        }] });
+
+class RdxSliderThumbImplDirective {
+    constructor() {
+        this.rootContext = inject(RdxSliderRootComponent);
+        this.elementRef = inject(ElementRef);
+        this.isMounted = signal(false);
+        this.thumbIndex = computed(() => {
+            const thumbElement = this.elementRef.nativeElement;
+            const index = this.rootContext.thumbElements.indexOf(thumbElement);
+            return index >= 0 ? index : null;
+        });
+        this.value = computed(() => {
+            const index = this.thumbIndex();
+            if (index === null)
+                return undefined;
+            return this.rootContext.modelValue()?.[index];
+        });
+        this.percent = computed(() => {
+            const val = this.value();
+            if (val === undefined)
+                return 0;
+            return convertValueToPercentage(val, this.rootContext.min(), this.rootContext.max());
+        });
+        this.transform = computed(() => {
+            const percent = this.percent();
+            const offset = this.thumbInBoundsOffset();
+            return `calc(${percent}% + ${offset}px)`;
+        });
+        this.orientationSize = signal(0);
+        this.thumbInBoundsOffset = computed(() => {
+            const context = this.rootContext.orientationContext.context;
+            const size = this.orientationSize();
+            const percent = this.percent();
+            const direction = context.direction;
+            return size ? getThumbInBoundsOffset(size, percent, direction) : 0;
+        });
+        this.combinedStyles = computed(() => {
+            const context = this.rootContext.orientationContext.context;
+            const startEdge = context.startEdge;
+            const percent = this.percent();
+            const offset = this.thumbInBoundsOffset();
+            return {
+                position: 'absolute',
+                transform: 'var(--rdx-slider-thumb-transform)',
+                display: (this.isMounted() && this.value()) === false ? 'none' : undefined,
+                [startEdge]: `calc(${percent}% + ${offset}px)`
+            };
+        });
+    }
+    onFocus() {
+        if (this.thumbIndex() !== null) {
+            this.rootContext.valueIndexToChange.set(this.thumbIndex());
+        }
+    }
+    ngOnInit() {
+        const thumbElement = this.elementRef.nativeElement;
+        this.rootContext.thumbElements.push(thumbElement);
+        this.resizeObserver = new ResizeObserver(() => {
+            const rect = thumbElement.getBoundingClientRect();
+            const context = this.rootContext.orientationContext.context;
+            const size = context.size === 'width' ? rect.width : rect.height;
+            this.orientationSize.set(size);
+        });
+        this.resizeObserver.observe(thumbElement);
+        this.isMounted.set(true);
+    }
+    ngOnDestroy() {
+        const thumbElement = this.elementRef.nativeElement;
+        const index = this.rootContext.thumbElements.indexOf(thumbElement);
+        if (index >= 0)
+            this.rootContext.thumbElements.splice(index, 1);
+        if (this.resizeObserver) {
+            this.resizeObserver.unobserve(thumbElement);
+        }
+        this.isMounted.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderThumbImplDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: RdxSliderThumbImplDirective, isStandalone: true, selector: "[rdxSliderThumbImpl]", host: { attributes: { "role": "slider" }, listeners: { "focus": "onFocus()" }, properties: { "tabindex": "rootContext.disabled() ? undefined : 0", "attr.aria-valuenow": "rootContext.modelValue()", "attr.aria-valuemin": "rootContext.min()", "attr.aria-valuemax": "rootContext.max()", "attr.aria-orientation": "rootContext.orientation()", "attr.data-orientation": "rootContext.orientation()", "attr.data-disabled": "rootContext.disabled() ? \"\" : undefined", "style": "combinedStyles()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderThumbImplDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSliderThumbImpl]',
+                    standalone: true,
+                    host: {
+                        role: 'slider',
+                        '[tabindex]': 'rootContext.disabled() ? undefined : 0',
+                        '[attr.aria-valuenow]': 'rootContext.modelValue()',
+                        '[attr.aria-valuemin]': 'rootContext.min()',
+                        '[attr.aria-valuemax]': 'rootContext.max()',
+                        '[attr.aria-orientation]': 'rootContext.orientation()',
+                        '[attr.data-orientation]': 'rootContext.orientation()',
+                        '[attr.data-disabled]': 'rootContext.disabled() ? "" : undefined',
+                        '[style]': 'combinedStyles()',
+                        '(focus)': 'onFocus()'
+                    }
+                }]
+        }] });
+
+class RdxSliderThumbComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderThumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: RdxSliderThumbComponent, isStandalone: true, selector: "rdx-slider-thumb", hostDirectives: [{ directive: RdxSliderThumbImplDirective }], ngImport: i0, template: `
+        <ng-content />
+    `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderThumbComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rdx-slider-thumb',
+                    standalone: true,
+                    hostDirectives: [RdxSliderThumbImplDirective],
+                    template: `
+        <ng-content />
+    `
+                }]
+        }] });
+
+class RdxSliderTrackComponent {
+    constructor() {
+        this.rootContext = inject(RdxSliderRootComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderTrackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: RdxSliderTrackComponent, isStandalone: true, selector: "rdx-slider-track", host: { properties: { "attr.data-disabled": "rootContext.disabled() ? '' : undefined", "attr.data-orientation": "rootContext.orientation()" } }, ngImport: i0, template: `
+        <ng-content />
+    `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderTrackComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rdx-slider-track',
+                    standalone: true,
+                    host: {
+                        '[attr.data-disabled]': "rootContext.disabled() ? '' : undefined",
+                        '[attr.data-orientation]': 'rootContext.orientation()'
+                    },
+                    template: `
+        <ng-content />
+    `
+                }]
+        }] });
+
+const _imports = [RdxSliderRootComponent, RdxSliderTrackComponent, RdxSliderRangeComponent, RdxSliderThumbComponent];
+class RdxSliderModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderModule, imports: [RdxSliderRootComponent, RdxSliderTrackComponent, RdxSliderRangeComponent, RdxSliderThumbComponent], exports: [RdxSliderRootComponent, RdxSliderTrackComponent, RdxSliderRangeComponent, RdxSliderThumbComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSliderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [..._imports],
+                    exports: [..._imports]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxSliderHorizontalComponent, RdxSliderImplDirective, RdxSliderModule, RdxSliderRangeComponent, RdxSliderRootComponent, RdxSliderThumbComponent, RdxSliderThumbImplDirective, RdxSliderTrackComponent, RdxSliderVerticalComponent };
+//# sourceMappingURL=radix-ng-primitives-slider.mjs.map