@spartan-ng/brain 0.0.1-alpha.437 → 0.0.1-alpha.439

package/fesm2022/spartan-ng-brain-slider.mjs

@@ -1,408 +1,344 @@
-import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, computed, signal, inject, PLATFORM_ID, ElementRef, Renderer2, ChangeDetectorRef, effect, untracked, Directive, input, model, Injector, contentChild, forwardRef } from '@angular/core';
-import { Directionality } from '@angular/cdk/bidi';
-import { SharedResizeObserver } from '@angular/cdk/observers/private';
-import { toObservable } from '@angular/core/rxjs-interop';
+import { InjectionToken, inject, Directive, ElementRef, PLATFORM_ID, computed, HostListener, TemplateRef, ViewContainerRef, effect, ChangeDetectorRef, model, input, numberAttribute, booleanAttribute, linkedSignal, signal } from '@angular/core';
+import { DOCUMENT, isPlatformServer } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent } from 'rxjs';
+import { switchMap, takeUntil } from 'rxjs/operators';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Subject, merge } from 'rxjs';
-import { takeUntil, tap, debounceTime } from 'rxjs/operators';
 
-const BRN_SLIDER_INPUT = new InjectionToken('BrnSliderInput');
-const BRN_SLIDER_TRACK = new InjectionToken('BrnSliderTrack');
-const BRN_SLIDER = new InjectionToken('BrnSlider');
-/**
- * Directive that adds slider-specific behaviors to an input element inside `<brn-slider>`.
- */
-class BrnSliderInputDirective {
-    _onChangeFn;
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    _onTouchedFn = () => { };
-    isDisabled = computed(() => (this._slider.disabled() === true ? true : undefined));
-    valueNow = computed(() => this.value() ?? 0);
-    valueMin = computed(() => this._slider.min());
-    valueMax = computed(() => this._slider.max());
-    ariaLabelledby = computed(() => this._slider.label()?.id);
-    ariaLabel = computed(() => {
-        if (!this._slider.ariaLabel() && !this.ariaLabelledby()) {
-            throw new Error("'ariaLabel' input must be provided as fallback accessibility aria label when no aria-labelledby element is provided.");
+const BrnSliderToken = new InjectionToken('BrnSliderToken');
+function provideBrnSlider(slider) {
+    return { provide: BrnSliderToken, useExisting: slider };
+}
+function injectBrnSlider() {
+    return inject(BrnSliderToken);
+}
+
+class BrnSliderRangeDirective {
+    /** Access the slider */
+    slider = injectBrnSlider();
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderRangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: BrnSliderRangeDirective, isStandalone: true, selector: "[brnSliderRange]", host: { properties: { "attr.data-disabled": "slider.disabled()", "style.width.%": "slider.percentage()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderRangeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnSliderRange]',
+                    host: {
+                        '[attr.data-disabled]': 'slider.disabled()',
+                        '[style.width.%]': 'slider.percentage()',
+                    },
+                }]
+        }] });
+
+class BrnSliderThumbDirective {
+    slider = injectBrnSlider();
+    _document = inject(DOCUMENT);
+    _elementRef = inject(ElementRef);
+    _platform = inject(PLATFORM_ID);
+    /**
+     * Offsets the thumb centre point while sliding to ensure it remains
+     * within the bounds of the slider when reaching the edges.
+     * Based on https://github.com/radix-ui/primitives/blob/main/packages/react/slider/src/slider.tsx
+     */
+    thumbOffset = computed(() => {
+        // we can't compute the offset on the server
+        if (isPlatformServer(this._platform)) {
+            return this.slider.percentage() + '%';
         }
-        return this._slider.ariaLabel();
+        const halfWidth = this._elementRef.nativeElement.offsetWidth / 2;
+        const offset = this.linearScale([0, 50], [0, halfWidth]);
+        const thumbInBoundsOffset = halfWidth - offset(this.slider.percentage());
+        const percent = this.slider.percentage();
+        return `calc(${percent}% + ${thumbInBoundsOffset}px)`;
     });
-    value = signal(0);
-    isFocused = signal(false);
-    _platformId = inject(PLATFORM_ID);
-    _elementRef = inject((ElementRef));
-    _slider = inject(BRN_SLIDER);
-    _renderer2 = inject(Renderer2);
-    _changeDetector = inject(ChangeDetectorRef);
     constructor() {
-        effect(() => {
-            if (isPlatformBrowser(this._platformId)) {
-                const step = this._slider.step();
-                const min = this._slider.min();
-                const max = this._slider.max();
-                const direction = this._slider.direction();
-                untracked(() => {
-                    this._updateHostElementStep(step);
-                    this._updateMinValue(min);
-                    this._updateMaxValue(max);
-                    this._updateDirection(direction);
-                });
-            }
-        });
-    }
-    onFocus() {
-        this.isFocused.set(true);
-    }
-    onBlur() {
-        this.isFocused.set(false);
-        this._onTouchedFn();
+        const mousedown = fromEvent(this._elementRef.nativeElement, 'pointerdown');
+        const mouseup = fromEvent(this._document, 'pointerup');
+        const mousemove = fromEvent(this._document, 'pointermove');
+        // Listen for mousedown events on the slider thumb
+        mousedown
+            .pipe(switchMap(() => mousemove.pipe(takeUntil(mouseup))), takeUntilDestroyed())
+            .subscribe(this.dragThumb.bind(this));
     }
-    onInput() {
-        this._updateValue();
-    }
-    onChange() {
-        this._updateValue();
-    }
-    writeValue(obj) {
-        this.value.set(obj);
-        this._updateHostElementValue(obj);
-    }
-    registerOnChange(fn) {
-        this._onChangeFn = fn;
-    }
-    registerOnTouched(fn) {
-        this._onTouchedFn = fn;
+    /** @internal */
+    dragThumb(event) {
+        if (this.slider.disabled()) {
+            return;
+        }
+        const rect = this.slider.track()?.elementRef.nativeElement.getBoundingClientRect();
+        if (!rect) {
+            return;
+        }
+        const percentage = (event.clientX - rect.left) / rect.width;
+        this.slider.setValue(this.slider.min() + (this.slider.max() - this.slider.min()) * Math.max(0, Math.min(1, percentage)));
     }
     /**
-     * Sets the disabled state of the slider.
-     * @param isDisabled The new disabled state
+     * Handle keyboard events.
+     * @param event
      */
-    setDisabledState(isDisabled) {
-        /** Disable slider only when slider component
-         * is not disabled and isDisabled param is explicitly set to true
-         */
-        if (isDisabled && !this._slider.disabled()) {
-            this._slider.disabled.set(isDisabled);
+    handleKeydown(event) {
+        const dir = getComputedStyle(this._elementRef.nativeElement).direction;
+        let multiplier = event.shiftKey ? 10 : 1;
+        const value = this.slider.value();
+        // if the slider is RTL, flip the multiplier
+        if (dir === 'rtl') {
+            multiplier = event.shiftKey ? -10 : -1;
+        }
+        switch (event.key) {
+            case 'ArrowLeft':
+                this.slider.setValue(Math.max(value - this.slider.step() * multiplier, this.slider.min()));
+                event.preventDefault();
+                break;
+            case 'ArrowRight':
+                this.slider.setValue(Math.min(value + this.slider.step() * multiplier, this.slider.max()));
+                event.preventDefault();
+                break;
+            case 'Home':
+                this.slider.setValue(this.slider.min());
+                event.preventDefault();
+                break;
+            case 'End':
+                this.slider.setValue(this.slider.max());
+                event.preventDefault();
+                break;
         }
     }
-    _updateHostElementValue(value) {
-        this._elementRef.nativeElement.value = value?.toString() ?? '0';
-        this._changeDetector.detectChanges();
-    }
-    _updateValue() {
-        this.value.set(this._elementRef.nativeElement.valueAsNumber);
-        this._onChangeFn?.(this.value());
-    }
-    _updateHostElementStep(step) {
-        this._elementRef.nativeElement.step = step.toString();
-        this._updateValue();
-    }
-    _updateMinValue(value) {
-        this._elementRef.nativeElement.min = value.toString();
-        this._updateValue();
-    }
-    _updateMaxValue(value) {
-        this._elementRef.nativeElement.max = value.toString();
-        this._updateValue();
-    }
-    _updateDirection(direction) {
-        this._renderer2.setStyle(this._elementRef.nativeElement, 'direction', direction);
+    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]);
+        };
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: BrnSliderInputDirective, isStandalone: true, selector: "input[brnSliderInput]", host: { attributes: { "type": "range", "role": "slider", "aria-orientation": "horizontal" }, listeners: { "change": "onChange()", "input": "onInput()", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.disabled": "isDisabled()", "attr.aria-valuenow": "valueNow()", "attr.aria-valuemin": "valueMin()", "attr.aria-valuemax": "valueMax()", "attr.aria-labelledby": "ariaLabelledby()", "attr.aria-label": "ariaLabel()" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: BrnSliderInputDirective,
-                multi: true,
-            },
-            {
-                provide: BRN_SLIDER_INPUT,
-                useExisting: BrnSliderInputDirective,
-            },
-        ], ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderThumbDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: BrnSliderThumbDirective, isStandalone: true, selector: "[brnSliderThumb]", host: { attributes: { "role": "slider" }, listeners: { "keydown": "handleKeydown($event)" }, properties: { "attr.aria-valuenow": "slider.value()", "attr.aria-valuemin": "slider.min()", "attr.aria-valuemax": "slider.max()", "attr.tabindex": "slider.disabled() ? -1 : 0", "attr.data-disabled": "slider.disabled()", "style.inset-inline-start": "thumbOffset()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderThumbDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'input[brnSliderInput]',
+                    selector: '[brnSliderThumb]',
                     host: {
-                        type: 'range',
                         role: 'slider',
-                        '(change)': 'onChange()',
-                        '(input)': 'onInput()',
-                        '(focus)': 'onFocus()',
-                        '(blur)': 'onBlur()',
-                        '[attr.disabled]': 'isDisabled()',
-                        '[attr.aria-valuenow]': 'valueNow()',
-                        '[attr.aria-valuemin]': 'valueMin()',
-                        '[attr.aria-valuemax]': 'valueMax()',
-                        '[attr.aria-labelledby]': 'ariaLabelledby()',
-                        '[attr.aria-label]': 'ariaLabel()',
-                        'aria-orientation': 'horizontal',
+                        '[attr.aria-valuenow]': 'slider.value()',
+                        '[attr.aria-valuemin]': 'slider.min()',
+                        '[attr.aria-valuemax]': 'slider.max()',
+                        '[attr.tabindex]': 'slider.disabled() ? -1 : 0',
+                        '[attr.data-disabled]': 'slider.disabled()',
+                        '[style.inset-inline-start]': 'thumbOffset()',
                     },
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: BrnSliderInputDirective,
-                            multi: true,
-                        },
-                        {
-                            provide: BRN_SLIDER_INPUT,
-                            useExisting: BrnSliderInputDirective,
-                        },
-                    ],
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [] });
-class BrnSliderDirective {
-    label = input(null);
-    ariaLabel = input(null);
-    /** Used only as an input. */
-    dir = input('ltr');
-    disabled = model(false, { alias: 'brnSliderDisabled' });
-    min = model(0);
-    max = model(100);
-    step = input(1);
-    showTickMarks = input(false);
-    direction = signal('ltr');
-    _destroyed = new Subject();
-    _injector = inject(Injector);
-    _dir = inject(Directionality);
-    _platformId = inject(PLATFORM_ID);
-    brnSliderTrack = contentChild(BRN_SLIDER_TRACK);
-    ngAfterViewInit() {
-        if (isPlatformBrowser(this._platformId)) {
-            this._updateDirectionality();
-        }
+        }], ctorParameters: () => [], propDecorators: { handleKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class BrnSliderTickDirective {
+    _slider = injectBrnSlider();
+    _templateRef = inject(TemplateRef);
+    _viewContainer = inject(ViewContainerRef);
+    _ticks = [];
+    constructor() {
+        effect(() => {
+            const ticks = this._slider.ticks();
+            // remove any existing ticks
+            this._ticks.forEach((tick) => this._viewContainer.remove(this._viewContainer.indexOf(tick)));
+            // create new ticks
+            this._ticks = [];
+            ticks.forEach((tick, index) => {
+                const view = this._viewContainer.createEmbeddedView(this._templateRef, {
+                    $implicit: tick,
+                    index,
+                    position: (index / (ticks.length - 1)) * 100,
+                });
+                this._ticks.push(view);
+            });
+        });
     }
     ngOnDestroy() {
-        this._destroyed.next();
-        this._destroyed.complete();
-    }
-    /**
-     * The method is responsible of setting the current direction state
-     * based on the latest 'dir' input or bidi state change. The only
-     * source of truth for slider direction state is the 'direction' signal
-     * and all interested consumers of it, will consume this interface exposed signal.
-     */
-    _updateDirectionality() {
-        merge(toObservable(this.dir, { injector: this._injector }), this._dir.change)
-            .pipe(takeUntil(this._destroyed), tap((dir) => this.direction.set(dir)))
-            .subscribe();
+        this._ticks.forEach((tick) => this._viewContainer.remove(this._viewContainer.indexOf(tick)));
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.1", type: BrnSliderDirective, isStandalone: true, selector: "[brnSlider]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "brnSliderDisabled", 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 }, showTickMarks: { classPropertyName: "showTickMarks", publicName: "showTickMarks", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "brnSliderDisabledChange", min: "minChange", max: "maxChange" }, providers: [
-            {
-                provide: BRN_SLIDER,
-                useExisting: BrnSliderDirective,
-            },
-        ], queries: [{ propertyName: "brnSliderTrack", first: true, predicate: BRN_SLIDER_TRACK, descendants: true, isSignal: true }], exportAs: ["brnSlider"], ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderTickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: BrnSliderTickDirective, isStandalone: true, selector: "[brnSliderTick]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderTickDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[brnSlider]',
-                    standalone: true,
-                    providers: [
-                        {
-                            provide: BRN_SLIDER,
-                            useExisting: BrnSliderDirective,
-                        },
-                    ],
-                    exportAs: 'brnSlider',
+                    selector: '[brnSliderTick]',
                 }]
-        }] });
+        }], ctorParameters: () => [] });
+
+const BrnSliderTrackToken = new InjectionToken('BrnSliderTrackToken');
+function provideBrnSliderTrack(slider) {
+    return { provide: BrnSliderTrackToken, useExisting: slider };
+}
+function injectBrnSliderTrack() {
+    return inject(BrnSliderTrackToken);
+}
+
 class BrnSliderTrackDirective {
-    hostElementWidth = signal(0);
-    _destroyed = new Subject();
-    _slider = inject(BRN_SLIDER);
-    _platformId = inject(PLATFORM_ID);
-    _elementRef = inject((ElementRef));
-    _sharedResizeObserver = inject(SharedResizeObserver);
-    brnSliderInput = contentChild(forwardRef(() => BRN_SLIDER_INPUT));
-    activeTrackPercentage = computed(() => {
-        const inputValue = this.brnSliderInput()?.value();
-        if (this._slider.min() >= this._slider.max() || !inputValue || inputValue < this._slider.min()) {
-            return 0;
-        }
-        if (inputValue > this._slider.max()) {
-            return 1;
+    /** Access the slider */
+    slider = injectBrnSlider();
+    /** @internal Access the slider track */
+    elementRef = inject(ElementRef);
+    constructor() {
+        this.slider.track.set(this);
+    }
+    moveThumbToPoint(event) {
+        if (this.slider.disabled()) {
+            return;
         }
-        return (inputValue - this._slider.min()) / (this._slider.max() - this._slider.min());
+        const position = event.clientX;
+        const rect = this.elementRef.nativeElement.getBoundingClientRect();
+        const percentage = (position - rect.left) / rect.width;
+        // update the value based on the position
+        this.slider.setValue(this.slider.min() + (this.slider.max() - this.slider.min()) * percentage);
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderTrackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: BrnSliderTrackDirective, isStandalone: true, selector: "[brnSliderTrack]", host: { listeners: { "mousedown": "moveThumbToPoint($event)" }, properties: { "attr.data-disabled": "slider.disabled()" } }, providers: [provideBrnSliderTrack(BrnSliderTrackDirective)], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderTrackDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnSliderTrack]',
+                    providers: [provideBrnSliderTrack(BrnSliderTrackDirective)],
+                    host: {
+                        '[attr.data-disabled]': 'slider.disabled()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { moveThumbToPoint: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+
+class BrnSliderDirective {
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _elementRef = inject(ElementRef);
+    value = model(0);
+    min = input(0, {
+        transform: numberAttribute,
     });
-    tickMarkTrackWidth = computed(() => {
-        if (!this._slider.showTickMarks()) {
-            return 0;
-        }
-        const sliderStep = this._slider.step();
-        const sliderMax = this._slider.max();
-        const sliderMin = this._slider.min();
-        const step = sliderStep && sliderStep > 0 ? sliderStep : 1;
-        const maxValue = Math.floor((sliderMax - sliderMin) / step) * step + sliderMin;
-        const percentage = (maxValue - sliderMin) / (sliderMax - sliderMin);
-        return this.hostElementWidth() * percentage;
+    max = input(100, {
+        transform: numberAttribute,
+    });
+    step = input(1, {
+        transform: numberAttribute,
+    });
+    _disabled = input(false, {
+        alias: 'disabled',
+        transform: booleanAttribute,
+    });
+    /** Whether we should show tick marks */
+    showTicks = input(false, {
+        transform: booleanAttribute,
     });
-    tickMarks = computed(() => {
-        const inputValue = this.brnSliderInput()?.value();
-        if (!this._slider.showTickMarks() || inputValue === null || inputValue === undefined) {
+    /** @internal */
+    ticks = computed(() => {
+        const value = this.value();
+        if (!this.showTicks()) {
             return [];
         }
-        let numActive = Math.max(Math.floor((inputValue - this._slider.min()) / this._slider.step()), 0);
-        let numInactive = Math.max(Math.floor((this._slider.max() - inputValue) / this._slider.step()), 0);
-        this._slider.direction() === 'rtl' ? numInactive++ : numActive++;
+        let numActive = Math.max(Math.floor((value - this.min()) / this.step()), 0);
+        let numInactive = Math.max(Math.floor((this.max() - value) / this.step()), 0);
+        const direction = getComputedStyle(this._elementRef.nativeElement).direction;
+        direction === 'rtl' ? numInactive++ : numActive++;
         return Array(numActive).fill(true).concat(Array(numInactive).fill(false));
     });
-    ngAfterViewInit() {
-        if (isPlatformBrowser(this._platformId)) {
-            this._storeDimensions();
-            this._onResize();
+    /** @internal */
+    disabled = linkedSignal(() => this._disabled());
+    /** @internal */
+    percentage = computed(() => ((this.value() - this.min()) / (this.max() - this.min())) * 100);
+    /** @internal Store the on change callback */
+    _onChange;
+    /** @internal Store the on touched callback */
+    _onTouched;
+    /** @internal Store the track */
+    track = signal(null);
+    ngOnInit() {
+        // ensure the value is within the min and max range
+        if (this.value() < this.min()) {
+            this.value.set(this.min());
+        }
+        if (this.value() > this.max()) {
+            this.value.set(this.max());
         }
     }
-    ngOnDestroy() {
-        this._destroyed.next();
-        this._destroyed.complete();
+    registerOnChange(fn) {
+        this._onChange = fn;
     }
-    _onResize() {
-        this._sharedResizeObserver
-            .observe(this._elementRef.nativeElement)
-            .pipe(debounceTime(32), takeUntil(this._destroyed), tap(() => this._storeDimensions()))
-            .subscribe();
+    registerOnTouched(fn) {
+        this._onTouched = fn;
     }
-    _storeDimensions() {
-        const computedStyle = getComputedStyle(this._elementRef.nativeElement);
-        this.hostElementWidth.set(this._elementRef.nativeElement.offsetWidth -
-            Number.parseFloat(computedStyle.paddingLeft) -
-            Number.parseFloat(computedStyle.paddingRight));
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderTrackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.1", type: BrnSliderTrackDirective, isStandalone: true, selector: "[brnSliderTrack]", providers: [
+    writeValue(value) {
+        const clampedValue = clamp(value, [this.min(), this.max()]);
+        this.value.set(clampedValue);
+        if (value !== clampedValue) {
+            this._onChange?.(clampedValue);
+        }
+        this._changeDetectorRef.detectChanges();
+    }
+    setValue(value) {
+        const decimalCount = getDecimalCount(this.step());
+        const snapToStep = roundValue(Math.round((value - this.min()) / this.step()) * this.step() + this.min(), decimalCount);
+        value = clamp(snapToStep, [this.min(), this.max()]);
+        this.value.set(value);
+        this._onChange?.(value);
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.1", type: BrnSliderDirective, isStandalone: true, selector: "[brnSlider]", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showTicks: { classPropertyName: "showTicks", publicName: "showTicks", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "aria-orientation": "horizontal" }, listeners: { "focusout": "_onTouched?.()" } }, providers: [
+            provideBrnSlider(BrnSliderDirective),
             {
-                provide: BRN_SLIDER_TRACK,
-                useExisting: BrnSliderTrackDirective,
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: BrnSliderDirective,
+                multi: true,
             },
-        ], queries: [{ propertyName: "brnSliderInput", first: true, predicate: i0.forwardRef(() => BRN_SLIDER_INPUT), descendants: true, isSignal: true }], ngImport: i0 });
+        ], exportAs: ["brnSlider"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderTrackDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[brnSliderTrack]',
-                    standalone: true,
+                    selector: '[brnSlider]',
+                    exportAs: 'brnSlider',
                     providers: [
+                        provideBrnSlider(BrnSliderDirective),
                         {
-                            provide: BRN_SLIDER_TRACK,
-                            useExisting: BrnSliderTrackDirective,
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: BrnSliderDirective,
+                            multi: true,
                         },
                     ],
+                    host: {
+                        'aria-orientation': 'horizontal',
+                        '(focusout)': '_onTouched?.()',
+                    },
                 }]
         }] });
-
-class BrnSliderThumbDirective {
-    _platformId = inject(PLATFORM_ID);
-    _elementRef = inject((ElementRef));
-    _slider = inject(BRN_SLIDER);
-    translateX = computed(() => this._calcTranslateX());
-    constructor() {
-        effect(() => {
-            if (isPlatformBrowser(this._platformId)) {
-                this._updateTranslateX(this.translateX());
-            }
-        });
-    }
-    _calcTranslateX() {
-        const activeTrackPercentage = this._slider.brnSliderTrack()?.activeTrackPercentage();
-        const trackHostElementWidth = this._slider.brnSliderTrack()?.hostElementWidth();
-        if (!activeTrackPercentage || !trackHostElementWidth) {
-            return 0;
-        }
-        if (this._slider.direction() === 'rtl') {
-            return -(activeTrackPercentage * trackHostElementWidth);
-        }
-        return activeTrackPercentage * trackHostElementWidth;
-    }
-    _updateTranslateX(value) {
-        this._elementRef.nativeElement.style.transform = `translate(${value}px, -50%)`;
-    }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderThumbDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: BrnSliderThumbDirective, isStandalone: true, selector: "[brnSliderThumb]", ngImport: i0 });
+function roundValue(value, decimalCount) {
+    const rounder = Math.pow(10, decimalCount);
+    return Math.round(value * rounder) / rounder;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderThumbDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[brnSliderThumb]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [] });
-
-class BrnSliderTickMarkDirective {
-    _platformId = inject(PLATFORM_ID);
-    data = input();
-    _sliderTrack = inject(BRN_SLIDER_TRACK);
-    _elementRef = inject((ElementRef));
-    _slider = inject(BRN_SLIDER);
-    constructor() {
-        effect(() => {
-            if (isPlatformBrowser(this._platformId)) {
-                this._updateTranslateX();
-            }
-        });
-    }
-    _updateTranslateX() {
-        const data = this.data();
-        if (!data) {
-            return;
-        }
-        const translateX = data.tickMarkIndex * (this._sliderTrack.tickMarkTrackWidth() / (data.totalTickMarks - 1));
-        this._elementRef.nativeElement.style.transform =
-            this._slider.direction() === 'rtl' ? `translateX(${-translateX}px)` : `translateX(${translateX}px)`;
-    }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderTickMarkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.1", type: BrnSliderTickMarkDirective, isStandalone: true, selector: "[brnSliderTickMark]", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+function getDecimalCount(value) {
+    return (String(value).split('.')[1] || '').length;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderTickMarkDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[brnSliderTickMark]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [] });
-
-class BrnSliderTrackActiveFillDirective {
-    _platformId = inject(PLATFORM_ID);
-    _elementRef = inject((ElementRef));
-    _sliderTrack = inject(BRN_SLIDER_TRACK);
-    constructor() {
-        effect(() => {
-            if (isPlatformBrowser(this._platformId)) {
-                this._updateActiveTrackPercentage(this._sliderTrack.activeTrackPercentage());
-            }
-        });
-    }
-    _updateActiveTrackPercentage(percentage) {
-        this._elementRef.nativeElement.style.transform = `scaleX(${percentage})`;
-    }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderTrackActiveFillDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: BrnSliderTrackActiveFillDirective, isStandalone: true, selector: "[brnSliderTrackActiveFill]", ngImport: i0 });
+function clamp(value, [min, max]) {
+    return Math.min(max, Math.max(min, value));
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: BrnSliderTrackActiveFillDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[brnSliderTrackActiveFill]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [] });
 
 const BrnSliderImports = [
     BrnSliderDirective,
     BrnSliderTrackDirective,
-    BrnSliderInputDirective,
     BrnSliderThumbDirective,
+    BrnSliderRangeDirective,
+    BrnSliderTickDirective,
 ];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BRN_SLIDER, BRN_SLIDER_INPUT, BRN_SLIDER_TRACK, BrnSliderDirective, BrnSliderImports, BrnSliderInputDirective, BrnSliderThumbDirective, BrnSliderTickMarkDirective, BrnSliderTrackActiveFillDirective, BrnSliderTrackDirective };
+export { BrnSliderDirective, BrnSliderImports, BrnSliderRangeDirective, BrnSliderThumbDirective, BrnSliderTickDirective, BrnSliderTrackDirective, injectBrnSlider, provideBrnSlider };
 //# sourceMappingURL=spartan-ng-brain-slider.mjs.map