@acorex/components 18.7.2 → 18.8.1

package/fesm2022/acorex-components-range-slider.mjs

@@ -1,23 +1,618 @@
-import { CommonModule } from '@angular/common';
+import { MXValueComponent, AXValuableComponent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { Component, NgModule } from '@angular/core';
+import { inject, NgZone, output, input, model, computed, effect, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, HostListener, HostBinding, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { classes } from 'polytype';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+//import { AXRange } from '@acorex/components/common';
 
 /**
  * @category
  * Range slider for selecting a range of values.
  */
-class AXRangeSliderComponent {
+class AXRangeSliderComponent extends classes((MXValueComponent)) {
+    //protected AXTooltip = computed(() => {});
+    constructor() {
+        super();
+        /**
+         * @ignore
+         */
+        this.zone = inject(NgZone);
+        /**
+         * @event onStart when user interact with range-slider with its bar
+         */
+        this.onStart = output();
+        /**
+         * @description orientation including vertical and horizontal
+         */
+        this.orientation = input('horizontal');
+        /**
+         * @description color for highlight and tooltip and handler
+         */
+        this.color = input('primary');
+        /**
+         * @description values is a number single mode
+         * and array of 2 number for dual mode
+         */
+        this.values = model(this.value);
+        /**
+         * @description mode including single and dual
+         */
+        this.mode = input('single');
+        /**
+         * @description minimum value
+         */
+        this.min = input(0);
+        /**
+         * @description maximum value
+         */
+        this.max = input(100);
+        /**
+         * @description step for changing values
+         */
+        this.step = input(1);
+        /**
+         * @description act as ruler for range slider,
+         * its range of showing to user
+         */
+        this.snap = input(1);
+        /**
+         * @description tooltip for showing value of handlers
+         */
+        this.tooltipMode = input('end');
+        /**
+         * @description deferent modes for snap including start, end and both
+         */
+        this.snapMode = input('start');
+        /**
+         * @description a flag for showing snap
+         */
+        this.hasSnap = input(false);
+        /**
+         * @description a flag for showing snap labels
+         */
+        this.hasLable = input(this.hasSnap());
+        /**
+         * @description a flag for showing tooltip for values
+         */
+        this.hasTooltip = input(false);
+        this.height = 0.25;
+        this.newHeight = 'var(--ax-range-slider-base-thickness)';
+        this.range = computed(() => this.max() - this.min());
+        this.isHorizontal = computed(() => this.orientation() === 'horizontal');
+        this.isDual = computed(() => this.mode() === 'dual');
+        /**
+         * @ignore
+         */
+        this.calculateSnapBar = computed(() => {
+            if (this.hasSnap()) {
+                let array = [];
+                for (let i = this.min(); i < this.max(); i += this.snap()) {
+                    array.push(i);
+                }
+                array = [...array, this.max()];
+                if (array[0] < 0) {
+                    array = array.map((i) => i + -array[0]).sort((a, b) => a - b);
+                }
+                if (array[0] > 0) {
+                    array = array.map((i) => i - array[0]).sort((a, b) => a - b);
+                }
+                return array;
+            }
+            else {
+                return undefined;
+            }
+        });
+        /**
+         * @ignore
+         */
+        this.calculatePos = computed(() => {
+            if (this.isDual() && this.values()) {
+                return [
+                    ((this.values()[0] - this.min()) / this.range()) * 100,
+                    ((this.values()[1] - this.min()) / this.range()) * 100,
+                ];
+            }
+            else {
+                return ((this.values() - this.min()) / this.range()) * 100;
+            }
+        });
+        /**
+         * @ignore
+         */
+        this.choosenHandler = undefined;
+        /**
+         * @ignore
+         */
+        this.sliderElement = null;
+        /**
+         * @ignore
+         */
+        this.AXRangeSliderHighlight = computed(() => this.isHorizontal()
+            ? {
+                left: this.isDual() ? this.calculatePos()[0] + '%' : '0%',
+                width: this.isDual()
+                    ? this.calculatePos()[1] - this.calculatePos()[0] + '%'
+                    : this.calculatePos() + '%',
+            }
+            : {
+                height: this.isDual()
+                    ? this.calculatePos()[1] - this.calculatePos()[0] + '%'
+                    : this.calculatePos() + '%',
+                top: this.mode() === 'dual' ? this.calculatePos()[0] + '%' : this.min() + '%',
+            });
+        /**
+         * @ignore
+         */
+        this.AXRangeSliderHandler1 = computed(() => this.isHorizontal()
+            ? {
+                left: this.isDual() ? this.calculatePos()[0] + '%' : this.calculatePos() + '%',
+            }
+            : {
+                top: this.isDual() ? this.calculatePos()[0] + '%' : this.calculatePos() + '%',
+            });
+        /**
+         * @ignore
+         */
+        this.AXRangeSliderHandler2 = computed(() => this.isHorizontal()
+            ? {
+                left: this.calculatePos()[1] + '%',
+            }
+            : {
+                top: this.calculatePos()[1] + '%',
+            });
+        /**
+         * @ignore
+         */
+        this.AXRangeSliderStep = computed(() => {
+            if (this.isHorizontal()) {
+                switch (this.snapMode()) {
+                    case 'both':
+                        return { top: '0', height: 8 * this.height + 'rem' };
+                    case 'start':
+                        return { top: 4 * this.height + 'rem', height: 4 * this.height + 'rem' };
+                    case 'end':
+                        return { top: -2 * this.height + 'rem', height: 4 * this.height + 'rem' };
+                }
+            }
+            else {
+                switch (this.snapMode()) {
+                    case 'both':
+                        return { top: '0', width: 8 * this.height + 'rem' };
+                    case 'start':
+                        return { left: 4 * this.height + 'rem', width: 4 * this.height + 'rem' };
+                    case 'end':
+                        return { left: -2 * this.height + 'rem', width: 4 * this.height + 'rem' };
+                }
+            }
+        });
+        /**
+         * @ignore
+         */
+        this.AXRangeLabel = computed(() => {
+            if (this.isHorizontal()) {
+                switch (this.snapMode()) {
+                    case 'both':
+                        return { top: 6 * this.height + 'rem' };
+                    case 'start':
+                        return { top: 4 * this.height + 'rem' };
+                    case 'end':
+                        return { top: -6 * this.height + 'rem' };
+                }
+            }
+            else {
+                switch (this.snapMode()) {
+                    case 'both':
+                        return { left: 8 * this.height + 'rem' };
+                    case 'start':
+                        return { left: 4 * this.height + 'rem' };
+                    case 'end':
+                        return { left: -8 * this.height + 'rem' };
+                }
+            }
+        });
+        effect(() => {
+            this.fixInitializeValues();
+            this.fixChangingMode();
+        }, { allowSignalWrites: true });
+    }
+    /**
+     * @ignore
+     */
+    ngOnInit() {
+        //(window as any).rangeSlider = this; for debugging purpose only
+        super.ngOnInit();
+        this.initializeValues();
+    }
+    /**
+     * @ignore
+     */
+    handleOnStart(event, circle) {
+        this.zone.runOutsideAngular(() => {
+            if (this.disabled)
+                return;
+            event.preventDefault();
+            this.sliderElement = event.target.closest('ax-range-slider');
+            if (this.sliderElement) {
+                this.choosenHandler = circle;
+                const moveListener = (moveEvent) => this.onMove(moveEvent, circle);
+                const endListener = () => this.onEnd(moveListener, endListener);
+                window.addEventListener('mousemove', moveListener);
+                window.addEventListener('mouseup', endListener);
+                window.addEventListener('touchmove', moveListener, { passive: true });
+                window.addEventListener('touchend', endListener);
+            }
+        });
+    }
+    /**
+     * @ignore
+     */
+    onclickBar(event) {
+        let circle = 'first';
+        this.sliderElement = event.target.closest('ax-range-slider');
+        this.zone.runOutsideAngular(() => {
+            if (!this.sliderElement || this.disabled)
+                return;
+            const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
+            const sliderRect = this.sliderElement.getBoundingClientRect();
+            const clickPosition = ((clientX - sliderRect.left) / sliderRect.width) * 100;
+            let newValue = Math.round(this.min() + (clickPosition / 100) * (this.max() - this.min()));
+            newValue = this.calculateStep(newValue);
+            if (this.isDual()) {
+                if (clickPosition < this.calculatePos()[0]) {
+                    this.values.set([newValue, this.values()[1]]);
+                    this.commitValue(this.values());
+                }
+                else if (clickPosition > this.calculatePos()[1]) {
+                    circle = 'second';
+                    this.values.set([this.values()[0], newValue]);
+                    this.commitValue(this.values());
+                }
+            }
+            else {
+                if (clickPosition > this.calculatePos()) {
+                    this.values.set(newValue);
+                    this.commitValue(this.values());
+                }
+            }
+            this.onStart.emit({
+                component: this,
+                htmlElement: event.target,
+                isUserInteraction: event.isTrusted,
+                data: this.values(),
+            });
+        });
+        this.handleOnStart(event, circle);
+    }
+    /**
+     * @ignore
+     */
+    onMove(event, circle) {
+        if (!this.sliderElement || this.disabled)
+            return;
+        const sliderRect = this.sliderElement.getBoundingClientRect();
+        let newValue;
+        if (this.isHorizontal()) {
+            const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
+            let newLeft = ((clientX - sliderRect.left) / sliderRect.width) * 100;
+            newLeft = Math.max(0, Math.min(newLeft, 100));
+            newValue = Math.round(this.min() + (newLeft / 100) * (this.max() - this.min()));
+        }
+        else {
+            const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
+            let newLeft = ((clientY - sliderRect.top) / sliderRect.height) * 100;
+            newLeft = Math.max(0, Math.min(newLeft, 100));
+            newValue = Math.round(this.min() + (newLeft / 100) * (this.max() - this.min()));
+        }
+        if (!this.readonly) {
+            if (this.isDual()) {
+                if (circle === 'first') {
+                    newValue = Math.max(this.min(), Math.min(newValue, this.values()[1] - this.step()));
+                    if (this.step() !== 1)
+                        newValue = this.calculateStep(newValue);
+                    if (this.values()[0] !== newValue) {
+                        this.values.set([newValue, this.values()[1]]);
+                        this.commitValue(this.values());
+                    }
+                }
+                else {
+                    newValue = Math.min(this.max(), Math.max(newValue, this.values()[0] + this.step()));
+                    if (this.step() !== 1)
+                        newValue = this.calculateStep(newValue);
+                    if (this.values()[1] !== newValue) {
+                        this.values.set([this.values()[0], newValue]);
+                        this.commitValue(this.values());
+                    }
+                }
+            }
+            else {
+                newValue = Math.max(this.min(), newValue);
+                if (this.step() !== 1)
+                    newValue = this.calculateStep(newValue);
+                if (this.values() !== newValue) {
+                    this.values.set(newValue);
+                    this.commitValue(newValue);
+                }
+            }
+            this.onStart.emit({
+                component: this,
+                htmlElement: event.target,
+                isUserInteraction: event.isTrusted,
+                data: this.values(),
+            });
+        }
+    }
+    /**
+     * @ignore
+     */
+    onEnd(moveListener, endListener) {
+        window.removeEventListener('mousemove', moveListener);
+        window.removeEventListener('mouseup', endListener);
+        window.removeEventListener('touchmove', moveListener);
+        window.removeEventListener('touchend', endListener);
+        this.sliderElement = null;
+    }
+    /**
+     * @ignore
+     */
+    initializeValues() {
+        this.fixInitializeUndefined();
+        this.fixInitializeValues();
+        this.fixInitializeStep();
+    }
+    /**
+     * @ignore
+     */
+    fixInitializeUndefined() {
+        if (typeof this.values() === 'undefined') {
+            if (this.isDual()) {
+                this.values.set([this.min(), this.max()]);
+            }
+            else {
+                this.values.set(this.min());
+            }
+            this.commitValue(this.values());
+        }
+    }
+    /**
+     * @ignore
+     */
+    fixInitializeValues() {
+        //swap value
+        if (this.isDual() && this.values()[0] > this.values()[1]) {
+            this.values.set([this.values()[1], this.values()[0]]);
+            this.commitValue(this.values());
+        }
+        //not in range
+        if (typeof this.values() === 'number' && !this.checkValue(this.values())) {
+            this.values.set(this.min());
+            this.commitValue(this.values());
+        }
+        else if (typeof this.values() !== 'number' &&
+            !this.checkValues(this.values()[0], 'first', this.values()[1])) {
+            this.values.set([this.min(), this.max()]);
+            this.commitValue(this.values());
+        }
+    }
+    /**
+     * @ignore
+     */
+    fixInitializeStep() {
+        if (this.step() !== 1) {
+            if (this.isDual()) {
+                this.values.update((old) => [this.calculateStep(old[0]), this.calculateStep(old[1])]);
+                this.commitValue(this.values());
+                this.commitValue(this.values());
+                if (this.values()[0] === this.values()[1]) {
+                    this.values.update((old) => [this.calculateStep(old[0]), this.calculateStep(old[1]) + this.step()]);
+                    this.commitValue(this.values());
+                }
+            }
+            else {
+                this.values.update((old) => this.calculateStep(old));
+                this.commitValue(this.values());
+            }
+        }
+    }
+    /**
+     * @ignore
+     */
+    fixChangingMode() {
+        if (typeof this.values() === 'number' && this.isDual()) {
+            this.values.set([this.min(), this.max()]);
+            this.commitValue(this.values());
+        }
+        else if (typeof this.values() !== 'number' && !this.isDual()) {
+            this.values.set(this.min());
+            this.commitValue(this.values());
+        }
+    }
+    /**
+     * @ignore
+     */
+    calculateStep(x) {
+        const roundedValue = Math.round(x / this.step()) * this.step();
+        if (roundedValue > this.max())
+            return this.max();
+        else if (roundedValue < this.min())
+            return this.min();
+        //else if (x >= this.min() && x < this.min() - (this.min() % this.step())) return this.min();
+        else if (x <= this.max() && x > this.max() - (this.max() % this.step()))
+            return this.max();
+        else
+            return roundedValue;
+    }
+    /**
+     * @ignore
+     */
+    checkValue(x) {
+        if (x >= this.min() && x <= this.max())
+            return true;
+        else
+            return false;
+    }
+    /**
+     * @ignore
+     */
+    checkValues(value1, y, value2) {
+        if (value1 >= this.min() && value1 <= this.max()) {
+            if (y === 'first') {
+                if (value1 < value2 && value2 <= this.max())
+                    return true;
+                else
+                    return false;
+            }
+            else {
+                if (value1 > value2 && value2 >= this.min())
+                    return true;
+                else
+                    return false;
+            }
+        }
+        else
+            return false;
+    }
+    /**
+     * @ignore
+     */
+    getPercantage(value) {
+        return (value / this.range()) * 100;
+    }
+    /**
+     * Increase a step to value if slider in single mode
+     * and increase a step the second value if slider in dual mode
+     * @method increaseStep
+     */
+    increaseStep() {
+        if (this.isDual()) {
+            const newValue = this.calculateStep(this.values()[1] + this.step());
+            this.values.set([this.values()[0], newValue]);
+        }
+        else {
+            const newValue = this.calculateStep(this.values() + this.step());
+            this.values.set(newValue);
+        }
+    }
+    /**
+     * Decrease a step to value if slider in single mode
+     * and decrease a step the second value if slider in dual mode
+     * @method decreaseStep
+     */
+    decreaseStep() {
+        if (this.isDual()) {
+            const newValue = this.calculateStep(this.values()[0] - this.step());
+            this.values.set([newValue, this.values()[1]]);
+        }
+        else {
+            const newValue = this.calculateStep(this.values() - this.step());
+            this.values.set(newValue);
+        }
+    }
+    /**
+     * @ignore
+     */
+    onWheel(event) {
+        this.zone.runOutsideAngular(() => {
+            event.preventDefault();
+            if (!this.choosenHandler || this.readonly || this.disabled)
+                return;
+            let newValue;
+            if (this.isDual()) {
+                if (event.deltaY < 0) {
+                    if (this.choosenHandler === 'first') {
+                        newValue = this.calculateStep(this.values()[0] + this.step());
+                        if (this.checkValues(newValue, this.choosenHandler, this.values()[1]) &&
+                            this.values()[0] !== newValue) {
+                            this.values.update((old) => [this.calculateStep(old[0] + this.step()), old[1]]);
+                            this.commitValue(this.values());
+                        }
+                    }
+                    else {
+                        newValue = this.calculateStep(this.values()[1] + this.step());
+                        if (newValue <= this.max() && this.values()[1] !== newValue) {
+                            this.values.update((old) => [old[0], this.calculateStep(old[1] + this.step())]);
+                            this.commitValue(this.values());
+                        }
+                    }
+                }
+                else {
+                    if (this.choosenHandler === 'first') {
+                        newValue = this.calculateStep(this.values()[0] - this.step());
+                        if (this.checkValues(newValue, this.choosenHandler, this.values()[1]) &&
+                            this.values() !== newValue) {
+                            this.values.update((old) => [this.calculateStep(old[0] - this.step()), old[1]]);
+                            this.commitValue(this.values());
+                        }
+                    }
+                    else {
+                        newValue = this.calculateStep(this.values()[1] - this.step());
+                        if (this.checkValues(newValue, this.choosenHandler, this.values()[0]) &&
+                            this.values()[1] !== newValue) {
+                            this.values.update((old) => [old[0], this.calculateStep(old[1] - this.step())]);
+                            this.commitValue(this.values());
+                        }
+                    }
+                }
+            }
+            else {
+                if (event.deltaY < 0) {
+                    if (this.checkValue(this.calculateStep(this.values() + this.step()))) {
+                        this.values.update((old) => this.calculateStep(old + this.step()));
+                        this.commitValue(this.values());
+                    }
+                }
+                else {
+                    if (this.checkValue(this.calculateStep(this.values() - this.step()))) {
+                        this.values.update((old) => this.calculateStep(old - this.step()));
+                        this.commitValue(this.values());
+                    }
+                }
+            }
+        });
+    }
+    /**
+     * @ignore
+     */
+    get __hostClass() {
+        return [
+            `ax-${this.color()}-solid`,
+            `${this.disabled ? 'ax-state-disabled' : ''}`,
+            `${this.readonly ? 'ax-state-readonly' : ''}`,
+        ];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: AXRangeSliderComponent, selector: "ax-range-slider", ngImport: i0, template: "<p>test</p>", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", 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 }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, tooltipMode: { classPropertyName: "tooltipMode", publicName: "tooltipMode", isSignal: true, isRequired: false, transformFunction: null }, snapMode: { classPropertyName: "snapMode", publicName: "snapMode", isSignal: true, isRequired: false, transformFunction: null }, hasSnap: { classPropertyName: "hasSnap", publicName: "hasSnap", isSignal: true, isRequired: false, transformFunction: null }, hasLable: { classPropertyName: "hasLable", publicName: "hasLable", isSignal: true, isRequired: false, transformFunction: null }, hasTooltip: { classPropertyName: "hasTooltip", publicName: "hasTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStart: "onStart", values: "valuesChange" }, host: { listeners: { "wheel": "onWheel($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+            { provide: AXValuableComponent, useExisting: AXRangeSliderComponent },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXRangeSliderComponent),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n  <div class=\"ax-range-slider-bar\" (mousedown)=\"onclickBar($event)\" (touchstart)=\"onclickBar($event)\"></div>\n  <div class=\"ax-range-slider-highlight\" [ngStyle]=\"AXRangeSliderHighlight()\"></div>\n\n  <div\n    class=\"ax-range-slider-handler\"\n    [ngStyle]=\"AXRangeSliderHandler1()\"\n    (mousedown)=\"handleOnStart($event, 'first')\"\n    (touchstart)=\"handleOnStart($event, 'first')\"\n  >\n    @if (hasTooltip()) {\n      <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n    }\n  </div>\n\n  @if (isDual()) {\n    <div\n      class=\"ax-range-slider-handler\"\n      [ngStyle]=\"AXRangeSliderHandler2()\"\n      (mousedown)=\"handleOnStart($event, 'second')\"\n      (touchstart)=\"handleOnStart($event, 'second')\"\n    >\n      @if (hasTooltip()) {\n        <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n      }\n    </div>\n  }\n  @if (hasSnap()) {\n    <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n      @for (item of calculateSnapBar(); track $index) {\n        <div\n          class=\"ax-range-slider-steps\"\n          [ngStyle]=\"\n            isHorizontal() ? { left: getPercantage(item) + '%' } : { top: getPercantage(item) + '%' }\n          \"\n        >\n          @if (hasLable()) {\n            <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n              {{ item + min() }}\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":root{--ax-range-slider-base-thickness: .25rem}ax-range-slider{display:flex;align-items:center;justify-content:center;padding:1rem;font-size:small}ax-range-slider .ax-range-slider.ax-orientation-horizontal{position:relative;width:100%;height:calc(var(--ax-range-slider-base-thickness) * 4)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{position:absolute;top:50%;left:0;width:100.1%;height:var(--ax-range-slider-base-thickness);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{position:absolute;top:50%;height:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg))}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{position:absolute;top:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background-color:rgb(var(--ax-range-slider-fg));border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);transition:box-shadow .1s linear}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip{position:absolute;left:calc(var(--ax-range-slider-base-thickness) * 2.8);top:calc(var(--ax-range-slider-base-thickness) * -2);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;white-space:nowrap;font-weight:600;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 7);left:50%;transform:translate(-50%);border-width:.5rem;border-style:solid;border-color:rgb(var(--ax-range-slider-fg)) transparent transparent transparent}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step{position:absolute;display:flex;flex-direction:row;width:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps{position:absolute;border-left:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default));height:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:relative;text-align:center;top:calc(var(--ax-range-slider-base-thickness) * 2);left:-50%}ax-range-slider .ax-range-slider.ax-orientation-vertical{position:relative;width:calc(var(--ax-range-slider-base-thickness) * 4);height:100%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-bar{position:absolute;top:0;left:50%;width:var(--ax-range-slider-base-thickness);height:100.1%;transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-highlight{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background-color:rgb(var(--ax-range-slider-fg));border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);transition:background-color .2s ease}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{border:1px solid transparent;box-shadow:var(--tw-ring-inset) 0 0 0 calc(.5rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip{position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 8.5);left:calc(var(--ax-range-slider-base-thickness) * -8);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;font-weight:600;white-space:nowrap;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:50%;left:97%;transform:translateY(-50%);border-width:.5rem;border-style:solid;border-color:transparent transparent transparent rgb(var(--ax-range-slider-fg))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step{position:absolute;display:flex;flex-direction:column;height:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps{position:absolute;width:50%;border-top:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:absolute;left:150%;top:calc(var(--ax-range-slider-base-thickness) * -3)}ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-200);--ax-range-slider-fg: var(--ax-color-primary-500);--ax-range-tooltip-text: var(--ax-color-primary-fore)}ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-200);--ax-range-slider-fg: var(--ax-color-secondary-500);--ax-range-tooltip-text: var(--ax-color-secondary-fore)}ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-200);--ax-range-slider-fg: var(--ax-color-success-500);--ax-range-tooltip-text: var(--ax-color-success-fore)}ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-200);--ax-range-slider-fg: var(--ax-color-warning-500);--ax-range-tooltip-text: var(--ax-color-warning-fore)}ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-200);--ax-range-slider-fg: var(--ax-color-danger-500);--ax-range-tooltip-text: var(--ax-color-danger-fore)}ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-200);--ax-range-slider-fg: var(--ax-color-info-500);--ax-range-tooltip-text: var(--ax-color-info-fore)}ax-range-slider.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-range-slider.ax-state-readonly{opacity:.75}.ax-dark ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-700);--ax-range-slider-fg: var(--ax-color-primary-200);--ax-range-tooltip-text: var(--ax-color-primary-fore-tint)}.ax-dark ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-700);--ax-range-slider-fg: var(--ax-color-secondary-200);--ax-range-tooltip-text: var(--ax-color-secondary-fore-tint)}.ax-dark ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-700);--ax-range-slider-fg: var(--ax-color-success-200);--ax-range-tooltip-text: var(--ax-color-success-fore-tint)}.ax-dark ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-700);--ax-range-slider-fg: var(--ax-color-warning-200);--ax-range-tooltip-text: var(--ax-color-warning-fore-tint)}.ax-dark ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-700);--ax-range-slider-fg: var(--ax-color-danger-200);--ax-range-tooltip-text: var(--ax-color-danger-fore-tint)}.ax-dark ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-700);--ax-range-slider-fg: var(--ax-color-info-200);--ax-range-tooltip-text: var(--ax-color-info-fore-tint)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXRangeSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-range-slider', template: "<p>test</p>" }]
-        }] });
+            args: [{ selector: 'ax-range-slider', inputs: ['disabled', 'readonly'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: AXValuableComponent, useExisting: AXRangeSliderComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXRangeSliderComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n  <div class=\"ax-range-slider-bar\" (mousedown)=\"onclickBar($event)\" (touchstart)=\"onclickBar($event)\"></div>\n  <div class=\"ax-range-slider-highlight\" [ngStyle]=\"AXRangeSliderHighlight()\"></div>\n\n  <div\n    class=\"ax-range-slider-handler\"\n    [ngStyle]=\"AXRangeSliderHandler1()\"\n    (mousedown)=\"handleOnStart($event, 'first')\"\n    (touchstart)=\"handleOnStart($event, 'first')\"\n  >\n    @if (hasTooltip()) {\n      <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n    }\n  </div>\n\n  @if (isDual()) {\n    <div\n      class=\"ax-range-slider-handler\"\n      [ngStyle]=\"AXRangeSliderHandler2()\"\n      (mousedown)=\"handleOnStart($event, 'second')\"\n      (touchstart)=\"handleOnStart($event, 'second')\"\n    >\n      @if (hasTooltip()) {\n        <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n      }\n    </div>\n  }\n  @if (hasSnap()) {\n    <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n      @for (item of calculateSnapBar(); track $index) {\n        <div\n          class=\"ax-range-slider-steps\"\n          [ngStyle]=\"\n            isHorizontal() ? { left: getPercantage(item) + '%' } : { top: getPercantage(item) + '%' }\n          \"\n        >\n          @if (hasLable()) {\n            <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n              {{ item + min() }}\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":root{--ax-range-slider-base-thickness: .25rem}ax-range-slider{display:flex;align-items:center;justify-content:center;padding:1rem;font-size:small}ax-range-slider .ax-range-slider.ax-orientation-horizontal{position:relative;width:100%;height:calc(var(--ax-range-slider-base-thickness) * 4)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{position:absolute;top:50%;left:0;width:100.1%;height:var(--ax-range-slider-base-thickness);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{position:absolute;top:50%;height:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg))}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{position:absolute;top:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background-color:rgb(var(--ax-range-slider-fg));border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);transition:box-shadow .1s linear}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip{position:absolute;left:calc(var(--ax-range-slider-base-thickness) * 2.8);top:calc(var(--ax-range-slider-base-thickness) * -2);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;white-space:nowrap;font-weight:600;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 7);left:50%;transform:translate(-50%);border-width:.5rem;border-style:solid;border-color:rgb(var(--ax-range-slider-fg)) transparent transparent transparent}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step{position:absolute;display:flex;flex-direction:row;width:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps{position:absolute;border-left:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default));height:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:relative;text-align:center;top:calc(var(--ax-range-slider-base-thickness) * 2);left:-50%}ax-range-slider .ax-range-slider.ax-orientation-vertical{position:relative;width:calc(var(--ax-range-slider-base-thickness) * 4);height:100%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-bar{position:absolute;top:0;left:50%;width:var(--ax-range-slider-base-thickness);height:100.1%;transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-highlight{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background-color:rgb(var(--ax-range-slider-fg));border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);transition:background-color .2s ease}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{border:1px solid transparent;box-shadow:var(--tw-ring-inset) 0 0 0 calc(.5rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip{position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 8.5);left:calc(var(--ax-range-slider-base-thickness) * -8);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;font-weight:600;white-space:nowrap;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:50%;left:97%;transform:translateY(-50%);border-width:.5rem;border-style:solid;border-color:transparent transparent transparent rgb(var(--ax-range-slider-fg))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step{position:absolute;display:flex;flex-direction:column;height:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps{position:absolute;width:50%;border-top:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:absolute;left:150%;top:calc(var(--ax-range-slider-base-thickness) * -3)}ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-200);--ax-range-slider-fg: var(--ax-color-primary-500);--ax-range-tooltip-text: var(--ax-color-primary-fore)}ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-200);--ax-range-slider-fg: var(--ax-color-secondary-500);--ax-range-tooltip-text: var(--ax-color-secondary-fore)}ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-200);--ax-range-slider-fg: var(--ax-color-success-500);--ax-range-tooltip-text: var(--ax-color-success-fore)}ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-200);--ax-range-slider-fg: var(--ax-color-warning-500);--ax-range-tooltip-text: var(--ax-color-warning-fore)}ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-200);--ax-range-slider-fg: var(--ax-color-danger-500);--ax-range-tooltip-text: var(--ax-color-danger-fore)}ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-200);--ax-range-slider-fg: var(--ax-color-info-500);--ax-range-tooltip-text: var(--ax-color-info-fore)}ax-range-slider.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-range-slider.ax-state-readonly{opacity:.75}.ax-dark ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-700);--ax-range-slider-fg: var(--ax-color-primary-200);--ax-range-tooltip-text: var(--ax-color-primary-fore-tint)}.ax-dark ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-700);--ax-range-slider-fg: var(--ax-color-secondary-200);--ax-range-tooltip-text: var(--ax-color-secondary-fore-tint)}.ax-dark ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-700);--ax-range-slider-fg: var(--ax-color-success-200);--ax-range-tooltip-text: var(--ax-color-success-fore-tint)}.ax-dark ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-700);--ax-range-slider-fg: var(--ax-color-warning-200);--ax-range-tooltip-text: var(--ax-color-warning-fore-tint)}.ax-dark ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-700);--ax-range-slider-fg: var(--ax-color-danger-200);--ax-range-tooltip-text: var(--ax-color-danger-fore-tint)}.ax-dark ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-700);--ax-range-slider-fg: var(--ax-color-info-200);--ax-range-tooltip-text: var(--ax-color-info-fore-tint)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { onWheel: [{
+                type: HostListener,
+                args: ['wheel', ['$event']]
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 class AXRangeSliderModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXRangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXRangeSliderModule, declarations: [AXRangeSliderComponent], imports: [CommonModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXRangeSliderModule, declarations: [AXRangeSliderComponent], imports: [CommonModule], exports: [AXRangeSliderComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXRangeSliderModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXRangeSliderModule, decorators: [{
@@ -25,6 +620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             args: [{
                     declarations: [AXRangeSliderComponent],
                     imports: [CommonModule],
+                    exports: [AXRangeSliderComponent],
                 }]
         }] });
 
@@ -32,5 +628,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXRangeSliderModule };
+export { AXRangeSliderComponent, AXRangeSliderModule };
 //# sourceMappingURL=acorex-components-range-slider.mjs.map