@gravionlabs/helix-core 22.1.1 → 22.1.3

package/fesm2022/gravionlabs-helix-core-slider.mjs

@@ -1,19 +1,18 @@
-export * from '@gravionlabs/helix-core/types/slider';
-import * as i2 from '@angular/common';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, forwardRef, inject, input, booleanAttribute, numberAttribute, output, viewChild, NgZone, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { removeClass, addClass, getWindowScrollLeft, getWindowScrollTop, isRTL } from '@gravionlabs/helix-core/uix/utils';
-import { SharedModule } from '@gravionlabs/helix-core/api';
-import { AutoFocus } from '@gravionlabs/helix-core/autofocus';
-import { PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
-import { BaseEditableHolder } from '@gravionlabs/helix-core/baseeditableholder';
-import * as i1 from '@gravionlabs/helix-core/bind';
-import { Bind, BindModule } from '@gravionlabs/helix-core/bind';
-import { BaseStyle } from '@gravionlabs/helix-core/base';
-
-const style = /*css*/ `
+import * as i2 from "@angular/common";
+import { CommonModule, isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, NgModule, NgZone, ViewEncapsulation, booleanAttribute, forwardRef, inject, input, numberAttribute, output, viewChild } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { addClass, getWindowScrollLeft, getWindowScrollTop, isRTL, removeClass } from "@gravionlabs/helix-core/uix/utils";
+import { SharedModule } from "@gravionlabs/helix-core/api";
+import { AutoFocus } from "@gravionlabs/helix-core/autofocus";
+import { PARENT_INSTANCE } from "@gravionlabs/helix-core/basecomponent";
+import { BaseEditableHolder } from "@gravionlabs/helix-core/baseeditableholder";
+import * as i1 from "@gravionlabs/helix-core/bind";
+import { Bind, BindModule } from "@gravionlabs/helix-core/bind";
+import { BaseStyle } from "@gravionlabs/helix-core/base";
+export * from "@gravionlabs/helix-core/types/slider";
+const style = `
     .h-slider {
         display: block;
         position: relative;
@@ -105,626 +104,836 @@ const style = /*css*/ `
         width: 100%;
     }
 `;
-
 const inlineStyles = {
-    handle: { position: 'absolute' },
-    range: { position: 'absolute' }
+	handle: { position: "absolute" },
+	range: { position: "absolute" }
 };
 const classes = {
-    root: ({ instance }) => [
-        'h-slider h-component',
-        {
-            'h-disabled': instance.$disabled(),
-            'h-invalid': instance.invalid(),
-            'h-slider-horizontal': instance.orientation() === 'horizontal',
-            'h-slider-vertical': instance.orientation() === 'vertical',
-            'h-slider-animate': instance.animate()
-        }
-    ],
-    range: 'h-slider-range',
-    handle: 'h-slider-handle'
+	root: ({ instance }) => ["h-slider h-component", {
+		"h-disabled": instance.$disabled(),
+		"h-invalid": instance.invalid(),
+		"h-slider-horizontal": instance.orientation() === "horizontal",
+		"h-slider-vertical": instance.orientation() === "vertical",
+		"h-slider-animate": instance.animate()
+	}],
+	range: "h-slider-range",
+	handle: "h-slider-handle"
+};
+var SliderStyle = class SliderStyle extends BaseStyle {
+	name = "slider";
+	style = style;
+	classes = classes;
+	inlineStyles = inlineStyles;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SliderStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SliderStyle
+	});
 };
-class SliderStyle extends BaseStyle {
-    name = 'slider';
-    style = style;
-    classes = classes;
-    inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SliderStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SliderStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SliderStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * Slider is a component to provide input with a drag handle.
- *
- * [Live Demo](https://www.primeng.org/slider/)
- *
- * @module sliderstyle
- *
- */
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SliderStyle,
+	decorators: [{ type: Injectable }]
+});
 var SliderClasses;
-(function (SliderClasses) {
-    /**
-     * Class name of the root element
-     */
-    SliderClasses["root"] = "h-slider";
-    /**
-     * Class name of the range element
-     */
-    SliderClasses["range"] = "h-slider-range";
-    /**
-     * Class name of the handle element
-     */
-    SliderClasses["handle"] = "h-slider-handle";
+(function(SliderClasses) {
+	SliderClasses["root"] = "h-slider";
+	SliderClasses["range"] = "h-slider-range";
+	SliderClasses["handle"] = "h-slider-handle";
 })(SliderClasses || (SliderClasses = {}));
-
-const SLIDER_INSTANCE = new InjectionToken('SLIDER_INSTANCE');
+const SLIDER_INSTANCE = new InjectionToken("SLIDER_INSTANCE");
 const SLIDER_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => Slider),
-    multi: true
+	provide: NG_VALUE_ACCESSOR,
+	useExisting: forwardRef(() => Slider),
+	multi: true
 };
-/**
- * Slider is a component to provide input with a drag handle.
- * @group Components
- */
-class Slider extends BaseEditableHolder {
-    componentName = 'Slider';
-    $pcSlider = inject(SLIDER_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    bindDirectiveInstance = inject(Bind, { self: true });
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    /**
-     * When enabled, displays an animation on click of the slider bar.
-     * @group Props
-     */
-    animate = input(undefined, { ...(ngDevMode ? { debugName: "animate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Mininum boundary value.
-     * @group Props
-     */
-    min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    /**
-     * Maximum boundary value.
-     * @group Props
-     */
-    max = input(100, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    /**
-     * Orientation of the slider.
-     * @group Props
-     */
-    orientation = input('horizontal', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    /**
-     * Step factor to increment/decrement the value.
-     * @group Props
-     */
-    step = input(undefined, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    /**
-     * When specified, allows two boundary values to be picked.
-     * @group Props
-     */
-    range = input(undefined, { ...(ngDevMode ? { debugName: "range" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Style class of the component.
-     * @deprecated since v20.0.0, use `class` instead.
-     * @group Props
-     */
-    styleClass = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
-    /**
-     * Defines a string that labels the input for accessibility.
-     * @group Props
-     */
-    ariaLabel = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    /**
-     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
-     * @group Props
-     */
-    ariaLabelledBy = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
-    /**
-     * Index of the element in tabbing order.
-     * @group Props
-     */
-    tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    /**
-     * When present, it specifies that the component should automatically get focus on load.
-     * @group Props
-     */
-    autofocus = input(undefined, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Callback to invoke on value change.
-     * @param {SliderChangeEvent} event - Custom value change event.
-     * @group Emits
-     */
-    onChange = output();
-    /**
-     * Callback to invoke when slide ended.
-     * @param {SliderSlideEndEvent} event - Custom slide end event.
-     * @group Emits
-     */
-    onSlideEnd = output();
-    sliderHandle = viewChild('sliderHandle', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "sliderHandle" }] : /* istanbul ignore next */ []));
-    sliderHandleStart = viewChild('sliderHandleStart', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "sliderHandleStart" }] : /* istanbul ignore next */ []));
-    sliderHandleEnd = viewChild('sliderHandleEnd', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "sliderHandleEnd" }] : /* istanbul ignore next */ []));
-    _componentStyle = inject(SliderStyle);
-    value;
-    values;
-    handleValue;
-    handleValues = [];
-    diff;
-    offset;
-    bottom;
-    dragging;
-    dragListener;
-    mouseupListener;
-    initX;
-    initY;
-    barWidth;
-    barHeight;
-    sliderHandleClick;
-    handleIndex = 0;
-    startHandleValue;
-    startx;
-    starty;
-    ngZone = inject(NgZone);
-    onHostClick(event) {
-        this.onBarClick(event);
-    }
-    onMouseDown(event, index) {
-        if (this.$disabled()) {
-            return;
-        }
-        this.dragging = true;
-        this.updateDomData();
-        this.sliderHandleClick = true;
-        if (this.range() && this.handleValues && this.handleValues[0] === this.max()) {
-            this.handleIndex = 0;
-        }
-        else {
-            this.handleIndex = index;
-        }
-        this.bindDragListeners();
-        event.target.focus();
-        event.preventDefault();
-        if (this.animate()) {
-            removeClass(this.el.nativeElement, 'h-slider-animate');
-        }
-    }
-    onDragStart(event, index) {
-        if (this.$disabled()) {
-            return;
-        }
-        this.el.nativeElement.setAttribute('data-h-sliding', true);
-        var touchobj = event.changedTouches[0];
-        this.startHandleValue = this.range() ? this.handleValues[index] : this.handleValue;
-        this.dragging = true;
-        if (this.range() && this.handleValues && this.handleValues[0] === this.max()) {
-            this.handleIndex = 0;
-        }
-        else {
-            this.handleIndex = index;
-        }
-        if (this.orientation() === 'horizontal') {
-            this.startx = parseInt(touchobj.clientX, 10);
-            this.barWidth = this.el.nativeElement.offsetWidth;
-        }
-        else {
-            this.starty = parseInt(touchobj.clientY, 10);
-            this.barHeight = this.el.nativeElement.offsetHeight;
-        }
-        if (this.animate()) {
-            removeClass(this.el.nativeElement, 'h-slider-animate');
-        }
-        event.preventDefault();
-    }
-    onDrag(event) {
-        if (this.$disabled()) {
-            return;
-        }
-        var touchobj = event.changedTouches[0], handleValue = 0;
-        if (this.orientation() === 'horizontal') {
-            handleValue = Math.floor(((parseInt(touchobj.clientX, 10) - this.startx) * 100) / this.barWidth) + this.startHandleValue;
-        }
-        else {
-            handleValue = Math.floor(((this.starty - parseInt(touchobj.clientY, 10)) * 100) / this.barHeight) + this.startHandleValue;
-        }
-        this.setValueFromHandle(event, handleValue);
-        event.preventDefault();
-    }
-    onDragEnd(event) {
-        if (this.$disabled()) {
-            return;
-        }
-        this.dragging = false;
-        this.el.nativeElement.setAttribute('data-h-sliding', false);
-        if (this.range())
-            this.onSlideEnd.emit({ originalEvent: event, values: this.values });
-        else
-            this.onSlideEnd.emit({ originalEvent: event, value: this.value });
-        if (this.animate()) {
-            addClass(this.el.nativeElement, 'h-slider-animate');
-        }
-        event.preventDefault();
-    }
-    onBarClick(event) {
-        if (this.$disabled()) {
-            return;
-        }
-        if (!this.sliderHandleClick) {
-            this.updateDomData();
-            this.handleChange(event);
-            if (this.range())
-                this.onSlideEnd.emit({ originalEvent: event, values: this.values });
-            else
-                this.onSlideEnd.emit({ originalEvent: event, value: this.value });
-        }
-        this.sliderHandleClick = false;
-    }
-    onKeyDown(event, index) {
-        this.handleIndex = index;
-        switch (event.code) {
-            case 'ArrowDown':
-            case 'ArrowLeft':
-                this.decrementValue(event, index);
-                event.preventDefault();
-                break;
-            case 'ArrowUp':
-            case 'ArrowRight':
-                this.incrementValue(event, index);
-                event.preventDefault();
-                break;
-            case 'PageDown':
-                this.decrementValue(event, index, true);
-                event.preventDefault();
-                break;
-            case 'PageUp':
-                this.incrementValue(event, index, true);
-                event.preventDefault();
-                break;
-            case 'Home':
-                this.updateValue(this.min(), event);
-                event.preventDefault();
-                break;
-            case 'End':
-                this.updateValue(this.max(), event);
-                event.preventDefault();
-                break;
-            default:
-                break;
-        }
-    }
-    decrementValue(event, index, pageKey = false) {
-        let newValue;
-        if (this.range()) {
-            const step = this.step();
-            if (step)
-                newValue = (this.values?.[index] ?? 0) - step;
-            else
-                newValue = (this.values?.[index] ?? 0) - 1;
-        }
-        else {
-            const step = this.step();
-            if (step)
-                newValue = this.value - step;
-            else if (!step && pageKey)
-                newValue = this.value - 10;
-            else
-                newValue = this.value - 1;
-        }
-        this.updateValue(newValue, event);
-        event.preventDefault();
-    }
-    incrementValue(event, index, pageKey = false) {
-        let newValue;
-        if (this.range()) {
-            const step = this.step();
-            if (step)
-                newValue = (this.values?.[index] ?? 0) + step;
-            else
-                newValue = (this.values?.[index] ?? 0) + 1;
-        }
-        else {
-            const step = this.step();
-            if (step)
-                newValue = this.value + step;
-            else if (!step && pageKey)
-                newValue = this.value + 10;
-            else
-                newValue = this.value + 1;
-        }
-        this.updateValue(newValue, event);
-        event.preventDefault();
-    }
-    handleChange(event) {
-        let handleValue = this.calculateHandleValue(event);
-        this.setValueFromHandle(event, handleValue);
-    }
-    bindDragListeners() {
-        if (isPlatformBrowser(this.platformId)) {
-            this.ngZone.runOutsideAngular(() => {
-                const documentTarget = this.el ? this.el.nativeElement.ownerDocument : this.document;
-                if (!this.dragListener) {
-                    this.dragListener = this.renderer.listen(documentTarget, 'mousemove', (event) => {
-                        if (this.dragging) {
-                            this.el.nativeElement.setAttribute('data-h-sliding', true);
-                            this.ngZone.run(() => {
-                                this.handleChange(event);
-                            });
-                        }
-                    });
-                }
-                if (!this.mouseupListener) {
-                    this.mouseupListener = this.renderer.listen(documentTarget, 'mouseup', (event) => {
-                        if (this.dragging) {
-                            this.dragging = false;
-                            this.el.nativeElement.setAttribute('data-h-sliding', false);
-                            this.ngZone.run(() => {
-                                if (this.range())
-                                    this.onSlideEnd.emit({ originalEvent: event, values: this.values });
-                                else
-                                    this.onSlideEnd.emit({ originalEvent: event, value: this.value });
-                                if (this.animate()) {
-                                    addClass(this.el.nativeElement, 'h-slider-animate');
-                                }
-                            });
-                        }
-                    });
-                }
-            });
-        }
-    }
-    unbindDragListeners() {
-        if (this.dragListener) {
-            this.dragListener();
-            this.dragListener = null;
-        }
-        if (this.mouseupListener) {
-            this.mouseupListener();
-            this.mouseupListener = null;
-        }
-    }
-    setValueFromHandle(event, handleValue) {
-        let newValue = this.getValueFromHandle(handleValue);
-        if (this.range()) {
-            if (this.step()) {
-                this.handleStepChange(newValue, this.values[this.handleIndex]);
-            }
-            else {
-                this.handleValues[this.handleIndex] = handleValue;
-                this.updateValue(newValue, event);
-            }
-        }
-        else {
-            if (this.step()) {
-                this.handleStepChange(newValue, this.value);
-            }
-            else {
-                this.handleValue = handleValue;
-                this.updateValue(newValue, event);
-            }
-        }
-        this.cd.markForCheck();
-    }
-    handleStepChange(newValue, oldValue) {
-        let diff = newValue - oldValue;
-        let val = oldValue;
-        let _step = this.step();
-        if (diff < 0) {
-            val = oldValue + Math.ceil(newValue / _step - oldValue / _step) * _step;
-        }
-        else if (diff > 0) {
-            val = oldValue + Math.floor(newValue / _step - oldValue / _step) * _step;
-        }
-        this.updateValue(val);
-        this.updateHandleValue();
-    }
-    get rangeStartLeft() {
-        if (!this.isVertical())
-            return this.handleValues[0] > 100 ? 100 + '%' : this.handleValues[0] + '%';
-        return null;
-    }
-    get rangeStartBottom() {
-        return this.isVertical() ? this.handleValues[0] + '%' : 'auto';
-    }
-    get rangeEndLeft() {
-        return this.isVertical() ? null : this.handleValues[1] + '%';
-    }
-    get rangeEndBottom() {
-        return this.isVertical() ? this.handleValues[1] + '%' : 'auto';
-    }
-    isVertical() {
-        return this.orientation() === 'vertical';
-    }
-    updateDomData() {
-        let rect = this.el.nativeElement.getBoundingClientRect();
-        this.initX = rect.left + getWindowScrollLeft();
-        this.initY = rect.top + getWindowScrollTop();
-        this.barWidth = this.el.nativeElement.offsetWidth;
-        this.barHeight = this.el.nativeElement.offsetHeight;
-    }
-    calculateHandleValue(event) {
-        if (this.orientation() === 'horizontal') {
-            if (isRTL(this.el.nativeElement)) {
-                return ((this.initX + this.barWidth - event.pageX) * 100) / this.barWidth;
-            }
-            else {
-                return ((event.pageX - this.initX) * 100) / this.barWidth;
-            }
-        }
-        else {
-            return ((this.initY + this.barHeight - event.pageY) * 100) / this.barHeight;
-        }
-    }
-    updateHandleValue() {
-        if (this.range()) {
-            this.handleValues[0] = ((this.values[0] < this.min() ? 0 : this.values[0] - this.min()) * 100) / (this.max() - this.min());
-            this.handleValues[1] = ((this.values[1] > this.max() ? 100 : this.values[1] - this.min()) * 100) / (this.max() - this.min());
-        }
-        else {
-            if (this.value < this.min())
-                this.handleValue = 0;
-            else if (this.value > this.max())
-                this.handleValue = 100;
-            else
-                this.handleValue = ((this.value - this.min()) * 100) / (this.max() - this.min());
-        }
-        if (this.step()) {
-            this.updateDiffAndOffset();
-        }
-    }
-    updateDiffAndOffset() {
-        this.diff = this.getDiff();
-        this.offset = this.getOffset();
-    }
-    getDiff() {
-        return Math.abs(this.handleValues[0] - this.handleValues[1]);
-    }
-    getOffset() {
-        return Math.min(this.handleValues[0], this.handleValues[1]);
-    }
-    updateValue(val, event) {
-        if (this.range()) {
-            let value = val;
-            if (this.handleIndex == 0) {
-                if (value < this.min()) {
-                    value = this.min();
-                    this.handleValues[0] = 0;
-                }
-                else if (value > this.values[1]) {
-                    if (value > this.max()) {
-                        value = this.max();
-                        this.handleValues[0] = 100;
-                    }
-                }
-                this.sliderHandleStart()?.nativeElement.focus();
-            }
-            else {
-                if (value > this.max()) {
-                    value = this.max();
-                    this.handleValues[1] = 100;
-                    this.offset = this.handleValues[1];
-                }
-                else if (value < this.min()) {
-                    value = this.min();
-                    this.handleValues[1] = 0;
-                }
-                else if (value < this.values[0]) {
-                    this.offset = this.handleValues[1];
-                }
-                this.sliderHandleEnd()?.nativeElement.focus();
-            }
-            if (this.step()) {
-                this.updateHandleValue();
-            }
-            else {
-                this.updateDiffAndOffset();
-            }
-            this.values[this.handleIndex] = this.getNormalizedValue(value);
-            let newValues = [this.minVal, this.maxVal];
-            this.onModelChange(newValues);
-            this.onChange.emit({ event: event, values: this.values });
-        }
-        else {
-            if (val < this.min()) {
-                val = this.min();
-                this.handleValue = 0;
-            }
-            else if (val > this.max()) {
-                val = this.max();
-                this.handleValue = 100;
-            }
-            this.value = this.getNormalizedValue(val);
-            this.onModelChange(this.value);
-            this.onChange.emit({ event: event, value: this.value });
-            this.sliderHandle()?.nativeElement.focus();
-        }
-        this.updateHandleValue();
-    }
-    getValueFromHandle(handleValue) {
-        return (this.max() - this.min()) * (handleValue / 100) + this.min();
-    }
-    getDecimalsCount(value) {
-        if (value && Math.floor(value) !== value)
-            return value.toString().split('.')[1].length || 0;
-        return 0;
-    }
-    getNormalizedValue(val) {
-        let decimalsCount = this.getDecimalsCount(this.step());
-        if (decimalsCount > 0) {
-            return +parseFloat(val.toString()).toFixed(decimalsCount);
-        }
-        else {
-            return Math.floor(val);
-        }
-    }
-    onDestroy() {
-        this.unbindDragListeners();
-    }
-    get minVal() {
-        return Math.min(this.values[1], this.values[0]);
-    }
-    get maxVal() {
-        return Math.max(this.values[1], this.values[0]);
-    }
-    /**
-     * @override
-     *
-     * @see {@link BaseEditableHolder.writeControlValue}
-     * Writes the value to the control.
-     */
-    writeControlValue(value) {
-        if (this.range())
-            this.values = value || [0, 0];
-        else
-            this.value = value || 0;
-        this.updateHandleValue();
-        this.updateDiffAndOffset();
-        this.cd.markForCheck();
-    }
-    get dataP() {
-        return this.cn({
-            [this.orientation()]: this.orientation()
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Slider, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Slider, isStandalone: true, selector: "h-slider", inputs: { animate: { classPropertyName: "animate", publicName: "animate", 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 }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onSlideEnd: "onSlideEnd" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "attr.data-pc-name": "'slider'", "attr.data-pc-section": "'root'", "class": "cn(cx('root'), styleClass())", "attr.data-h": "dataP", "attr.data-h-sliding": "false" } }, providers: [SLIDER_VALUE_ACCESSOR, SliderStyle, { provide: SLIDER_INSTANCE, useExisting: Slider }, { provide: PARENT_INSTANCE, useExisting: Slider }], viewQueries: [{ propertyName: "sliderHandle", first: true, predicate: ["sliderHandle"], descendants: true, isSignal: true }, { propertyName: "sliderHandleStart", first: true, predicate: ["sliderHandleStart"], descendants: true, isSignal: true }, { propertyName: "sliderHandleEnd", first: true, predicate: ["sliderHandleEnd"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "@if (range() && orientation() == 'horizontal') {\n  <span\n    [class]=\"cx('range')\"\n    [ngStyle]=\"{\n        'inset-inline-start': offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%',\n        width: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%'\n    }\"\n    [style]=\"sx('range')\"\n    [attr.data-pc-section]=\"'range'\"\n    [attr.data-h]=\"dataP\"\n    [hBind]=\"ptm('range')\"\n  ></span>\n}\n@if (range() && orientation() == 'vertical') {\n  <span\n    [class]=\"cx('range')\"\n    [ngStyle]=\"{\n        bottom: offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%',\n        height: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%'\n    }\"\n    [style]=\"sx('range')\"\n    [attr.data-pc-section]=\"'range'\"\n    [attr.data-h]=\"dataP\"\n    [hBind]=\"ptm('range')\"\n  ></span>\n}\n@if (!range() && orientation() == 'vertical') {\n  <span [class]=\"cx('range')\" [attr.data-pc-section]=\"'range'\" [style]=\"sx('range')\" [ngStyle]=\"{ height: handleValue + '%' }\" [hBind]=\"ptm('range')\"></span>\n}\n@if (!range() && orientation() == 'horizontal') {\n  <span [class]=\"cx('range')\" [attr.data-pc-section]=\"'range'\" [style]=\"sx('range')\" [ngStyle]=\"{ width: handleValue + '%' }\" [hBind]=\"ptm('range')\"></span>\n}\n@if (!range()) {\n  <span\n    #sliderHandle\n    [class]=\"cx('handle')\"\n    [style.transition]=\"dragging ? 'none' : null\"\n    [ngStyle]=\"{\n        'inset-inline-start': orientation() == 'horizontal' ? handleValue + '%' : null,\n        bottom: orientation() == 'vertical' ? handleValue + '%' : null\n    }\"\n    [style]=\"sx('handle')\"\n    (touchstart)=\"onDragStart($event)\"\n    (touchmove)=\"onDrag($event)\"\n    (touchend)=\"onDragEnd($event)\"\n    (mousedown)=\"onMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    [attr.tabindex]=\"$disabled() ? null : tabindex()\"\n    role=\"slider\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuenow]=\"value\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.data-pc-section]=\"'handle'\"\n    [hAutoFocus]=\"autofocus()\"\n    [hBind]=\"ptm('handle')\"\n    [attr.data-h]=\"dataP\"\n  ></span>\n}\n@if (range()) {\n  <span\n    #sliderHandleStart\n    [style.transition]=\"dragging ? 'none' : null\"\n    [class]=\"cn(cx('handle'), handleIndex == 0 && 'h-slider-handle-active')\"\n    [style]=\"sx('handle')\"\n    [ngStyle]=\"{ 'inset-inline-start': rangeStartLeft, bottom: rangeStartBottom }\"\n    (keydown)=\"onKeyDown($event, 0)\"\n    (mousedown)=\"onMouseDown($event, 0)\"\n    (touchstart)=\"onDragStart($event, 0)\"\n    (touchmove)=\"onDrag($event)\"\n    (touchend)=\"onDragEnd($event)\"\n    [attr.tabindex]=\"$disabled() ? null : tabindex()\"\n    role=\"slider\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuenow]=\"value ? value[0] : null\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.data-pc-section]=\"'startHandler'\"\n    [hAutoFocus]=\"autofocus()\"\n    [hBind]=\"ptm('startHandler')\"\n    [attr.data-h]=\"dataP\"\n  ></span>\n}\n@if (range()) {\n  <span\n    #sliderHandleEnd\n    [style.transition]=\"dragging ? 'none' : null\"\n    [class]=\"cn(cx('handle'), handleIndex == 1 && 'h-slider-handle-active')\"\n    [ngStyle]=\"{ 'inset-inline-start': rangeEndLeft, bottom: rangeEndBottom }\"\n    [style]=\"sx('handle')\"\n    (keydown)=\"onKeyDown($event, 1)\"\n    (mousedown)=\"onMouseDown($event, 1)\"\n    (touchstart)=\"onDragStart($event, 1)\"\n    (touchmove)=\"onDrag($event)\"\n    (touchend)=\"onDragEnd($event)\"\n    [attr.tabindex]=\"$disabled() ? null : tabindex()\"\n    role=\"slider\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuenow]=\"value ? value[1] : null\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.data-pc-section]=\"'endHandler'\"\n    [hBind]=\"ptm('endHandler')\"\n    [attr.data-h]=\"dataP\"\n  ></span>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: AutoFocus, selector: "[hAutoFocus]", inputs: ["hAutoFocus"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[hBind]", inputs: ["hBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Slider, decorators: [{
-            type: Component,
-            args: [{ selector: 'h-slider', standalone: true, imports: [CommonModule, AutoFocus, SharedModule, BindModule], providers: [SLIDER_VALUE_ACCESSOR, SliderStyle, { provide: SLIDER_INSTANCE, useExisting: Slider }, { provide: PARENT_INSTANCE, useExisting: Slider }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        '[attr.data-pc-name]': "'slider'",
-                        '[attr.data-pc-section]': "'root'",
-                        '[class]': "cn(cx('root'), styleClass())",
-                        '[attr.data-h]': 'dataP',
-                        '[attr.data-h-sliding]': 'false',
-                        '(click)': 'onHostClick($event)'
-                    }, hostDirectives: [Bind], template: "@if (range() && orientation() == 'horizontal') {\n  <span\n    [class]=\"cx('range')\"\n    [ngStyle]=\"{\n        'inset-inline-start': offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%',\n        width: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%'\n    }\"\n    [style]=\"sx('range')\"\n    [attr.data-pc-section]=\"'range'\"\n    [attr.data-h]=\"dataP\"\n    [hBind]=\"ptm('range')\"\n  ></span>\n}\n@if (range() && orientation() == 'vertical') {\n  <span\n    [class]=\"cx('range')\"\n    [ngStyle]=\"{\n        bottom: offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%',\n        height: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%'\n    }\"\n    [style]=\"sx('range')\"\n    [attr.data-pc-section]=\"'range'\"\n    [attr.data-h]=\"dataP\"\n    [hBind]=\"ptm('range')\"\n  ></span>\n}\n@if (!range() && orientation() == 'vertical') {\n  <span [class]=\"cx('range')\" [attr.data-pc-section]=\"'range'\" [style]=\"sx('range')\" [ngStyle]=\"{ height: handleValue + '%' }\" [hBind]=\"ptm('range')\"></span>\n}\n@if (!range() && orientation() == 'horizontal') {\n  <span [class]=\"cx('range')\" [attr.data-pc-section]=\"'range'\" [style]=\"sx('range')\" [ngStyle]=\"{ width: handleValue + '%' }\" [hBind]=\"ptm('range')\"></span>\n}\n@if (!range()) {\n  <span\n    #sliderHandle\n    [class]=\"cx('handle')\"\n    [style.transition]=\"dragging ? 'none' : null\"\n    [ngStyle]=\"{\n        'inset-inline-start': orientation() == 'horizontal' ? handleValue + '%' : null,\n        bottom: orientation() == 'vertical' ? handleValue + '%' : null\n    }\"\n    [style]=\"sx('handle')\"\n    (touchstart)=\"onDragStart($event)\"\n    (touchmove)=\"onDrag($event)\"\n    (touchend)=\"onDragEnd($event)\"\n    (mousedown)=\"onMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    [attr.tabindex]=\"$disabled() ? null : tabindex()\"\n    role=\"slider\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuenow]=\"value\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.data-pc-section]=\"'handle'\"\n    [hAutoFocus]=\"autofocus()\"\n    [hBind]=\"ptm('handle')\"\n    [attr.data-h]=\"dataP\"\n  ></span>\n}\n@if (range()) {\n  <span\n    #sliderHandleStart\n    [style.transition]=\"dragging ? 'none' : null\"\n    [class]=\"cn(cx('handle'), handleIndex == 0 && 'h-slider-handle-active')\"\n    [style]=\"sx('handle')\"\n    [ngStyle]=\"{ 'inset-inline-start': rangeStartLeft, bottom: rangeStartBottom }\"\n    (keydown)=\"onKeyDown($event, 0)\"\n    (mousedown)=\"onMouseDown($event, 0)\"\n    (touchstart)=\"onDragStart($event, 0)\"\n    (touchmove)=\"onDrag($event)\"\n    (touchend)=\"onDragEnd($event)\"\n    [attr.tabindex]=\"$disabled() ? null : tabindex()\"\n    role=\"slider\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuenow]=\"value ? value[0] : null\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.data-pc-section]=\"'startHandler'\"\n    [hAutoFocus]=\"autofocus()\"\n    [hBind]=\"ptm('startHandler')\"\n    [attr.data-h]=\"dataP\"\n  ></span>\n}\n@if (range()) {\n  <span\n    #sliderHandleEnd\n    [style.transition]=\"dragging ? 'none' : null\"\n    [class]=\"cn(cx('handle'), handleIndex == 1 && 'h-slider-handle-active')\"\n    [ngStyle]=\"{ 'inset-inline-start': rangeEndLeft, bottom: rangeEndBottom }\"\n    [style]=\"sx('handle')\"\n    (keydown)=\"onKeyDown($event, 1)\"\n    (mousedown)=\"onMouseDown($event, 1)\"\n    (touchstart)=\"onDragStart($event, 1)\"\n    (touchmove)=\"onDrag($event)\"\n    (touchend)=\"onDragEnd($event)\"\n    [attr.tabindex]=\"$disabled() ? null : tabindex()\"\n    role=\"slider\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuenow]=\"value ? value[1] : null\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.data-pc-section]=\"'endHandler'\"\n    [hBind]=\"ptm('endHandler')\"\n    [attr.data-h]=\"dataP\"\n  ></span>\n}\n" }]
-        }], propDecorators: { animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onSlideEnd: [{ type: i0.Output, args: ["onSlideEnd"] }], sliderHandle: [{ type: i0.ViewChild, args: ['sliderHandle', { isSignal: true }] }], sliderHandleStart: [{ type: i0.ViewChild, args: ['sliderHandleStart', { isSignal: true }] }], sliderHandleEnd: [{ type: i0.ViewChild, args: ['sliderHandleEnd', { isSignal: true }] }] } });
-class SliderModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: SliderModule, imports: [Slider, SharedModule], exports: [Slider, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SliderModule, imports: [Slider, SharedModule, SharedModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SliderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [Slider, SharedModule],
-                    exports: [Slider, SharedModule]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var Slider = class Slider extends BaseEditableHolder {
+	componentName = "Slider";
+	$pcSlider = inject(SLIDER_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	bindDirectiveInstance = inject(Bind, { self: true });
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	animate = input(void 0, {
+		...ngDevMode ? { debugName: "animate" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	min = input(0, {
+		...ngDevMode ? { debugName: "min" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	max = input(100, {
+		...ngDevMode ? { debugName: "max" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : 	/* istanbul ignore next */ []);
+	step = input(void 0, {
+		...ngDevMode ? { debugName: "step" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	range = input(void 0, {
+		...ngDevMode ? { debugName: "range" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	styleClass = input(...ngDevMode ? [void 0, { debugName: "styleClass" }] : 	/* istanbul ignore next */ []);
+	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
+	ariaLabelledBy = input(...ngDevMode ? [void 0, { debugName: "ariaLabelledBy" }] : 	/* istanbul ignore next */ []);
+	tabindex = input(0, {
+		...ngDevMode ? { debugName: "tabindex" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	autofocus = input(void 0, {
+		...ngDevMode ? { debugName: "autofocus" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	onChange = output();
+	onSlideEnd = output();
+	sliderHandle = viewChild("sliderHandle", ...ngDevMode ? [{ debugName: "sliderHandle" }] : 	/* istanbul ignore next */ []);
+	sliderHandleStart = viewChild("sliderHandleStart", ...ngDevMode ? [{ debugName: "sliderHandleStart" }] : 	/* istanbul ignore next */ []);
+	sliderHandleEnd = viewChild("sliderHandleEnd", ...ngDevMode ? [{ debugName: "sliderHandleEnd" }] : 	/* istanbul ignore next */ []);
+	_componentStyle = inject(SliderStyle);
+	value;
+	values;
+	handleValue;
+	handleValues = [];
+	diff;
+	offset;
+	bottom;
+	dragging;
+	dragListener;
+	mouseupListener;
+	initX;
+	initY;
+	barWidth;
+	barHeight;
+	sliderHandleClick;
+	handleIndex = 0;
+	startHandleValue;
+	startx;
+	starty;
+	ngZone = inject(NgZone);
+	onHostClick(event) {
+		this.onBarClick(event);
+	}
+	onMouseDown(event, index) {
+		if (this.$disabled()) return;
+		this.dragging = true;
+		this.updateDomData();
+		this.sliderHandleClick = true;
+		if (this.range() && this.handleValues && this.handleValues[0] === this.max()) this.handleIndex = 0;
+		else this.handleIndex = index;
+		this.bindDragListeners();
+		event.target.focus();
+		event.preventDefault();
+		if (this.animate()) removeClass(this.el.nativeElement, "h-slider-animate");
+	}
+	onDragStart(event, index) {
+		if (this.$disabled()) return;
+		this.el.nativeElement.setAttribute("data-h-sliding", true);
+		var touchobj = event.changedTouches[0];
+		this.startHandleValue = this.range() ? this.handleValues[index] : this.handleValue;
+		this.dragging = true;
+		if (this.range() && this.handleValues && this.handleValues[0] === this.max()) this.handleIndex = 0;
+		else this.handleIndex = index;
+		if (this.orientation() === "horizontal") {
+			this.startx = parseInt(touchobj.clientX, 10);
+			this.barWidth = this.el.nativeElement.offsetWidth;
+		} else {
+			this.starty = parseInt(touchobj.clientY, 10);
+			this.barHeight = this.el.nativeElement.offsetHeight;
+		}
+		if (this.animate()) removeClass(this.el.nativeElement, "h-slider-animate");
+		event.preventDefault();
+	}
+	onDrag(event) {
+		if (this.$disabled()) return;
+		var touchobj = event.changedTouches[0], handleValue = 0;
+		if (this.orientation() === "horizontal") handleValue = Math.floor((parseInt(touchobj.clientX, 10) - this.startx) * 100 / this.barWidth) + this.startHandleValue;
+		else handleValue = Math.floor((this.starty - parseInt(touchobj.clientY, 10)) * 100 / this.barHeight) + this.startHandleValue;
+		this.setValueFromHandle(event, handleValue);
+		event.preventDefault();
+	}
+	onDragEnd(event) {
+		if (this.$disabled()) return;
+		this.dragging = false;
+		this.el.nativeElement.setAttribute("data-h-sliding", false);
+		if (this.range()) this.onSlideEnd.emit({
+			originalEvent: event,
+			values: this.values
+		});
+		else this.onSlideEnd.emit({
+			originalEvent: event,
+			value: this.value
+		});
+		if (this.animate()) addClass(this.el.nativeElement, "h-slider-animate");
+		event.preventDefault();
+	}
+	onBarClick(event) {
+		if (this.$disabled()) return;
+		if (!this.sliderHandleClick) {
+			this.updateDomData();
+			this.handleChange(event);
+			if (this.range()) this.onSlideEnd.emit({
+				originalEvent: event,
+				values: this.values
+			});
+			else this.onSlideEnd.emit({
+				originalEvent: event,
+				value: this.value
+			});
+		}
+		this.sliderHandleClick = false;
+	}
+	onKeyDown(event, index) {
+		this.handleIndex = index;
+		switch (event.code) {
+			case "ArrowDown":
+			case "ArrowLeft":
+				this.decrementValue(event, index);
+				event.preventDefault();
+				break;
+			case "ArrowUp":
+			case "ArrowRight":
+				this.incrementValue(event, index);
+				event.preventDefault();
+				break;
+			case "PageDown":
+				this.decrementValue(event, index, true);
+				event.preventDefault();
+				break;
+			case "PageUp":
+				this.incrementValue(event, index, true);
+				event.preventDefault();
+				break;
+			case "Home":
+				this.updateValue(this.min(), event);
+				event.preventDefault();
+				break;
+			case "End":
+				this.updateValue(this.max(), event);
+				event.preventDefault();
+				break;
+			default: break;
+		}
+	}
+	decrementValue(event, index, pageKey = false) {
+		let newValue;
+		if (this.range()) {
+			const step = this.step();
+			if (step) newValue = (this.values?.[index] ?? 0) - step;
+			else newValue = (this.values?.[index] ?? 0) - 1;
+		} else {
+			const step = this.step();
+			if (step) newValue = this.value - step;
+			else if (!step && pageKey) newValue = this.value - 10;
+			else newValue = this.value - 1;
+		}
+		this.updateValue(newValue, event);
+		event.preventDefault();
+	}
+	incrementValue(event, index, pageKey = false) {
+		let newValue;
+		if (this.range()) {
+			const step = this.step();
+			if (step) newValue = (this.values?.[index] ?? 0) + step;
+			else newValue = (this.values?.[index] ?? 0) + 1;
+		} else {
+			const step = this.step();
+			if (step) newValue = this.value + step;
+			else if (!step && pageKey) newValue = this.value + 10;
+			else newValue = this.value + 1;
+		}
+		this.updateValue(newValue, event);
+		event.preventDefault();
+	}
+	handleChange(event) {
+		let handleValue = this.calculateHandleValue(event);
+		this.setValueFromHandle(event, handleValue);
+	}
+	bindDragListeners() {
+		if (isPlatformBrowser(this.platformId)) this.ngZone.runOutsideAngular(() => {
+			const documentTarget = this.el ? this.el.nativeElement.ownerDocument : this.document;
+			if (!this.dragListener) this.dragListener = this.renderer.listen(documentTarget, "mousemove", (event) => {
+				if (this.dragging) {
+					this.el.nativeElement.setAttribute("data-h-sliding", true);
+					this.ngZone.run(() => {
+						this.handleChange(event);
+					});
+				}
+			});
+			if (!this.mouseupListener) this.mouseupListener = this.renderer.listen(documentTarget, "mouseup", (event) => {
+				if (this.dragging) {
+					this.dragging = false;
+					this.el.nativeElement.setAttribute("data-h-sliding", false);
+					this.ngZone.run(() => {
+						if (this.range()) this.onSlideEnd.emit({
+							originalEvent: event,
+							values: this.values
+						});
+						else this.onSlideEnd.emit({
+							originalEvent: event,
+							value: this.value
+						});
+						if (this.animate()) addClass(this.el.nativeElement, "h-slider-animate");
+					});
+				}
+			});
+		});
+	}
+	unbindDragListeners() {
+		if (this.dragListener) {
+			this.dragListener();
+			this.dragListener = null;
+		}
+		if (this.mouseupListener) {
+			this.mouseupListener();
+			this.mouseupListener = null;
+		}
+	}
+	setValueFromHandle(event, handleValue) {
+		let newValue = this.getValueFromHandle(handleValue);
+		if (this.range()) if (this.step()) this.handleStepChange(newValue, this.values[this.handleIndex]);
+		else {
+			this.handleValues[this.handleIndex] = handleValue;
+			this.updateValue(newValue, event);
+		}
+		else if (this.step()) this.handleStepChange(newValue, this.value);
+		else {
+			this.handleValue = handleValue;
+			this.updateValue(newValue, event);
+		}
+		this.cd.markForCheck();
+	}
+	handleStepChange(newValue, oldValue) {
+		let diff = newValue - oldValue;
+		let val = oldValue;
+		let _step = this.step();
+		if (diff < 0) val = oldValue + Math.ceil(newValue / _step - oldValue / _step) * _step;
+		else if (diff > 0) val = oldValue + Math.floor(newValue / _step - oldValue / _step) * _step;
+		this.updateValue(val);
+		this.updateHandleValue();
+	}
+	get rangeStartLeft() {
+		if (!this.isVertical()) return this.handleValues[0] > 100 ? "100%" : this.handleValues[0] + "%";
+		return null;
+	}
+	get rangeStartBottom() {
+		return this.isVertical() ? this.handleValues[0] + "%" : "auto";
+	}
+	get rangeEndLeft() {
+		return this.isVertical() ? null : this.handleValues[1] + "%";
+	}
+	get rangeEndBottom() {
+		return this.isVertical() ? this.handleValues[1] + "%" : "auto";
+	}
+	isVertical() {
+		return this.orientation() === "vertical";
+	}
+	updateDomData() {
+		let rect = this.el.nativeElement.getBoundingClientRect();
+		this.initX = rect.left + getWindowScrollLeft();
+		this.initY = rect.top + getWindowScrollTop();
+		this.barWidth = this.el.nativeElement.offsetWidth;
+		this.barHeight = this.el.nativeElement.offsetHeight;
+	}
+	calculateHandleValue(event) {
+		if (this.orientation() === "horizontal") if (isRTL(this.el.nativeElement)) return (this.initX + this.barWidth - event.pageX) * 100 / this.barWidth;
+		else return (event.pageX - this.initX) * 100 / this.barWidth;
+		else return (this.initY + this.barHeight - event.pageY) * 100 / this.barHeight;
+	}
+	updateHandleValue() {
+		if (this.range()) {
+			this.handleValues[0] = (this.values[0] < this.min() ? 0 : this.values[0] - this.min()) * 100 / (this.max() - this.min());
+			this.handleValues[1] = (this.values[1] > this.max() ? 100 : this.values[1] - this.min()) * 100 / (this.max() - this.min());
+		} else if (this.value < this.min()) this.handleValue = 0;
+		else if (this.value > this.max()) this.handleValue = 100;
+		else this.handleValue = (this.value - this.min()) * 100 / (this.max() - this.min());
+		if (this.step()) this.updateDiffAndOffset();
+	}
+	updateDiffAndOffset() {
+		this.diff = this.getDiff();
+		this.offset = this.getOffset();
+	}
+	getDiff() {
+		return Math.abs(this.handleValues[0] - this.handleValues[1]);
+	}
+	getOffset() {
+		return Math.min(this.handleValues[0], this.handleValues[1]);
+	}
+	updateValue(val, event) {
+		if (this.range()) {
+			let value = val;
+			if (this.handleIndex == 0) {
+				if (value < this.min()) {
+					value = this.min();
+					this.handleValues[0] = 0;
+				} else if (value > this.values[1]) {
+					if (value > this.max()) {
+						value = this.max();
+						this.handleValues[0] = 100;
+					}
+				}
+				this.sliderHandleStart()?.nativeElement.focus();
+			} else {
+				if (value > this.max()) {
+					value = this.max();
+					this.handleValues[1] = 100;
+					this.offset = this.handleValues[1];
+				} else if (value < this.min()) {
+					value = this.min();
+					this.handleValues[1] = 0;
+				} else if (value < this.values[0]) this.offset = this.handleValues[1];
+				this.sliderHandleEnd()?.nativeElement.focus();
+			}
+			if (this.step()) this.updateHandleValue();
+			else this.updateDiffAndOffset();
+			this.values[this.handleIndex] = this.getNormalizedValue(value);
+			let newValues = [this.minVal, this.maxVal];
+			this.onModelChange(newValues);
+			this.onChange.emit({
+				event,
+				values: this.values
+			});
+		} else {
+			if (val < this.min()) {
+				val = this.min();
+				this.handleValue = 0;
+			} else if (val > this.max()) {
+				val = this.max();
+				this.handleValue = 100;
+			}
+			this.value = this.getNormalizedValue(val);
+			this.onModelChange(this.value);
+			this.onChange.emit({
+				event,
+				value: this.value
+			});
+			this.sliderHandle()?.nativeElement.focus();
+		}
+		this.updateHandleValue();
+	}
+	getValueFromHandle(handleValue) {
+		return (this.max() - this.min()) * (handleValue / 100) + this.min();
+	}
+	getDecimalsCount(value) {
+		if (value && Math.floor(value) !== value) return value.toString().split(".")[1].length || 0;
+		return 0;
+	}
+	getNormalizedValue(val) {
+		let decimalsCount = this.getDecimalsCount(this.step());
+		if (decimalsCount > 0) return +parseFloat(val.toString()).toFixed(decimalsCount);
+		else return Math.floor(val);
+	}
+	onDestroy() {
+		this.unbindDragListeners();
+	}
+	get minVal() {
+		return Math.min(this.values[1], this.values[0]);
+	}
+	get maxVal() {
+		return Math.max(this.values[1], this.values[0]);
+	}
+	writeControlValue(value) {
+		if (this.range()) this.values = value || [0, 0];
+		else this.value = value || 0;
+		this.updateHandleValue();
+		this.updateDiffAndOffset();
+		this.cd.markForCheck();
+	}
+	get dataP() {
+		return this.cn({ [this.orientation()]: this.orientation() });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: Slider,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: Slider,
+		isStandalone: true,
+		selector: "h-slider",
+		inputs: {
+			animate: {
+				classPropertyName: "animate",
+				publicName: "animate",
+				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
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			step: {
+				classPropertyName: "step",
+				publicName: "step",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			range: {
+				classPropertyName: "range",
+				publicName: "range",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			styleClass: {
+				classPropertyName: "styleClass",
+				publicName: "styleClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabelledBy: {
+				classPropertyName: "ariaLabelledBy",
+				publicName: "ariaLabelledBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tabindex: {
+				classPropertyName: "tabindex",
+				publicName: "tabindex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autofocus: {
+				classPropertyName: "autofocus",
+				publicName: "autofocus",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			onChange: "onChange",
+			onSlideEnd: "onSlideEnd"
+		},
+		host: {
+			listeners: { "click": "onHostClick($event)" },
+			properties: {
+				"attr.data-pc-name": "'slider'",
+				"attr.data-pc-section": "'root'",
+				"class": "cn(cx('root'), styleClass())",
+				"attr.data-h": "dataP",
+				"attr.data-h-sliding": "false"
+			}
+		},
+		providers: [
+			SLIDER_VALUE_ACCESSOR,
+			SliderStyle,
+			{
+				provide: SLIDER_INSTANCE,
+				useExisting: Slider
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: Slider
+			}
+		],
+		viewQueries: [
+			{
+				propertyName: "sliderHandle",
+				first: true,
+				predicate: ["sliderHandle"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "sliderHandleStart",
+				first: true,
+				predicate: ["sliderHandleStart"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "sliderHandleEnd",
+				first: true,
+				predicate: ["sliderHandleEnd"],
+				descendants: true,
+				isSignal: true
+			}
+		],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: "@if (range() && orientation() == 'horizontal') {\n  <span\n    [class]=\"cx('range')\"\n    [ngStyle]=\"{\n        'inset-inline-start': offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%',\n        width: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%'\n    }\"\n    [style]=\"sx('range')\"\n    [attr.data-pc-section]=\"'range'\"\n    [attr.data-h]=\"dataP\"\n    [hBind]=\"ptm('range')\"\n  ></span>\n}\n@if (range() && orientation() == 'vertical') {\n  <span\n    [class]=\"cx('range')\"\n    [ngStyle]=\"{\n        bottom: offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%',\n        height: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%'\n    }\"\n    [style]=\"sx('range')\"\n    [attr.data-pc-section]=\"'range'\"\n    [attr.data-h]=\"dataP\"\n    [hBind]=\"ptm('range')\"\n  ></span>\n}\n@if (!range() && orientation() == 'vertical') {\n  <span [class]=\"cx('range')\" [attr.data-pc-section]=\"'range'\" [style]=\"sx('range')\" [ngStyle]=\"{ height: handleValue + '%' }\" [hBind]=\"ptm('range')\"></span>\n}\n@if (!range() && orientation() == 'horizontal') {\n  <span [class]=\"cx('range')\" [attr.data-pc-section]=\"'range'\" [style]=\"sx('range')\" [ngStyle]=\"{ width: handleValue + '%' }\" [hBind]=\"ptm('range')\"></span>\n}\n@if (!range()) {\n  <span\n    #sliderHandle\n    [class]=\"cx('handle')\"\n    [style.transition]=\"dragging ? 'none' : null\"\n    [ngStyle]=\"{\n        'inset-inline-start': orientation() == 'horizontal' ? handleValue + '%' : null,\n        bottom: orientation() == 'vertical' ? handleValue + '%' : null\n    }\"\n    [style]=\"sx('handle')\"\n    (touchstart)=\"onDragStart($event)\"\n    (touchmove)=\"onDrag($event)\"\n    (touchend)=\"onDragEnd($event)\"\n    (mousedown)=\"onMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    [attr.tabindex]=\"$disabled() ? null : tabindex()\"\n    role=\"slider\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuenow]=\"value\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.data-pc-section]=\"'handle'\"\n    [hAutoFocus]=\"autofocus()\"\n    [hBind]=\"ptm('handle')\"\n    [attr.data-h]=\"dataP\"\n  ></span>\n}\n@if (range()) {\n  <span\n    #sliderHandleStart\n    [style.transition]=\"dragging ? 'none' : null\"\n    [class]=\"cn(cx('handle'), handleIndex == 0 && 'h-slider-handle-active')\"\n    [style]=\"sx('handle')\"\n    [ngStyle]=\"{ 'inset-inline-start': rangeStartLeft, bottom: rangeStartBottom }\"\n    (keydown)=\"onKeyDown($event, 0)\"\n    (mousedown)=\"onMouseDown($event, 0)\"\n    (touchstart)=\"onDragStart($event, 0)\"\n    (touchmove)=\"onDrag($event)\"\n    (touchend)=\"onDragEnd($event)\"\n    [attr.tabindex]=\"$disabled() ? null : tabindex()\"\n    role=\"slider\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuenow]=\"value ? value[0] : null\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.data-pc-section]=\"'startHandler'\"\n    [hAutoFocus]=\"autofocus()\"\n    [hBind]=\"ptm('startHandler')\"\n    [attr.data-h]=\"dataP\"\n  ></span>\n}\n@if (range()) {\n  <span\n    #sliderHandleEnd\n    [style.transition]=\"dragging ? 'none' : null\"\n    [class]=\"cn(cx('handle'), handleIndex == 1 && 'h-slider-handle-active')\"\n    [ngStyle]=\"{ 'inset-inline-start': rangeEndLeft, bottom: rangeEndBottom }\"\n    [style]=\"sx('handle')\"\n    (keydown)=\"onKeyDown($event, 1)\"\n    (mousedown)=\"onMouseDown($event, 1)\"\n    (touchstart)=\"onDragStart($event, 1)\"\n    (touchmove)=\"onDrag($event)\"\n    (touchend)=\"onDragEnd($event)\"\n    [attr.tabindex]=\"$disabled() ? null : tabindex()\"\n    role=\"slider\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuenow]=\"value ? value[1] : null\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.data-pc-section]=\"'endHandler'\"\n    [hBind]=\"ptm('endHandler')\"\n    [attr.data-h]=\"dataP\"\n  ></span>\n}\n",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: i2.NgStyle,
+				selector: "[ngStyle]",
+				inputs: ["ngStyle"]
+			},
+			{
+				kind: "directive",
+				type: AutoFocus,
+				selector: "[hAutoFocus]",
+				inputs: ["hAutoFocus"]
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			},
+			{
+				kind: "ngmodule",
+				type: BindModule
+			},
+			{
+				kind: "directive",
+				type: i1.Bind,
+				selector: "[hBind]",
+				inputs: ["hBind"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: Slider,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-slider",
+			standalone: true,
+			imports: [
+				CommonModule,
+				AutoFocus,
+				SharedModule,
+				BindModule
+			],
+			providers: [
+				SLIDER_VALUE_ACCESSOR,
+				SliderStyle,
+				{
+					provide: SLIDER_INSTANCE,
+					useExisting: Slider
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: Slider
+				}
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				"[attr.data-pc-name]": "'slider'",
+				"[attr.data-pc-section]": "'root'",
+				"[class]": "cn(cx('root'), styleClass())",
+				"[attr.data-h]": "dataP",
+				"[attr.data-h-sliding]": "false",
+				"(click)": "onHostClick($event)"
+			},
+			hostDirectives: [Bind],
+			template: "@if (range() && orientation() == 'horizontal') {\n  <span\n    [class]=\"cx('range')\"\n    [ngStyle]=\"{\n        'inset-inline-start': offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%',\n        width: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%'\n    }\"\n    [style]=\"sx('range')\"\n    [attr.data-pc-section]=\"'range'\"\n    [attr.data-h]=\"dataP\"\n    [hBind]=\"ptm('range')\"\n  ></span>\n}\n@if (range() && orientation() == 'vertical') {\n  <span\n    [class]=\"cx('range')\"\n    [ngStyle]=\"{\n        bottom: offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%',\n        height: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%'\n    }\"\n    [style]=\"sx('range')\"\n    [attr.data-pc-section]=\"'range'\"\n    [attr.data-h]=\"dataP\"\n    [hBind]=\"ptm('range')\"\n  ></span>\n}\n@if (!range() && orientation() == 'vertical') {\n  <span [class]=\"cx('range')\" [attr.data-pc-section]=\"'range'\" [style]=\"sx('range')\" [ngStyle]=\"{ height: handleValue + '%' }\" [hBind]=\"ptm('range')\"></span>\n}\n@if (!range() && orientation() == 'horizontal') {\n  <span [class]=\"cx('range')\" [attr.data-pc-section]=\"'range'\" [style]=\"sx('range')\" [ngStyle]=\"{ width: handleValue + '%' }\" [hBind]=\"ptm('range')\"></span>\n}\n@if (!range()) {\n  <span\n    #sliderHandle\n    [class]=\"cx('handle')\"\n    [style.transition]=\"dragging ? 'none' : null\"\n    [ngStyle]=\"{\n        'inset-inline-start': orientation() == 'horizontal' ? handleValue + '%' : null,\n        bottom: orientation() == 'vertical' ? handleValue + '%' : null\n    }\"\n    [style]=\"sx('handle')\"\n    (touchstart)=\"onDragStart($event)\"\n    (touchmove)=\"onDrag($event)\"\n    (touchend)=\"onDragEnd($event)\"\n    (mousedown)=\"onMouseDown($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    [attr.tabindex]=\"$disabled() ? null : tabindex()\"\n    role=\"slider\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuenow]=\"value\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.data-pc-section]=\"'handle'\"\n    [hAutoFocus]=\"autofocus()\"\n    [hBind]=\"ptm('handle')\"\n    [attr.data-h]=\"dataP\"\n  ></span>\n}\n@if (range()) {\n  <span\n    #sliderHandleStart\n    [style.transition]=\"dragging ? 'none' : null\"\n    [class]=\"cn(cx('handle'), handleIndex == 0 && 'h-slider-handle-active')\"\n    [style]=\"sx('handle')\"\n    [ngStyle]=\"{ 'inset-inline-start': rangeStartLeft, bottom: rangeStartBottom }\"\n    (keydown)=\"onKeyDown($event, 0)\"\n    (mousedown)=\"onMouseDown($event, 0)\"\n    (touchstart)=\"onDragStart($event, 0)\"\n    (touchmove)=\"onDrag($event)\"\n    (touchend)=\"onDragEnd($event)\"\n    [attr.tabindex]=\"$disabled() ? null : tabindex()\"\n    role=\"slider\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuenow]=\"value ? value[0] : null\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.data-pc-section]=\"'startHandler'\"\n    [hAutoFocus]=\"autofocus()\"\n    [hBind]=\"ptm('startHandler')\"\n    [attr.data-h]=\"dataP\"\n  ></span>\n}\n@if (range()) {\n  <span\n    #sliderHandleEnd\n    [style.transition]=\"dragging ? 'none' : null\"\n    [class]=\"cn(cx('handle'), handleIndex == 1 && 'h-slider-handle-active')\"\n    [ngStyle]=\"{ 'inset-inline-start': rangeEndLeft, bottom: rangeEndBottom }\"\n    [style]=\"sx('handle')\"\n    (keydown)=\"onKeyDown($event, 1)\"\n    (mousedown)=\"onMouseDown($event, 1)\"\n    (touchstart)=\"onDragStart($event, 1)\"\n    (touchmove)=\"onDrag($event)\"\n    (touchend)=\"onDragEnd($event)\"\n    [attr.tabindex]=\"$disabled() ? null : tabindex()\"\n    role=\"slider\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuenow]=\"value ? value[1] : null\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-orientation]=\"orientation()\"\n    [attr.data-pc-section]=\"'endHandler'\"\n    [hBind]=\"ptm('endHandler')\"\n    [attr.data-h]=\"dataP\"\n  ></span>\n}\n"
+		}]
+	}],
+	propDecorators: {
+		animate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "animate",
+				required: false
+			}]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		step: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "step",
+				required: false
+			}]
+		}],
+		range: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "range",
+				required: false
+			}]
+		}],
+		styleClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "styleClass",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledBy",
+				required: false
+			}]
+		}],
+		tabindex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tabindex",
+				required: false
+			}]
+		}],
+		autofocus: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autofocus",
+				required: false
+			}]
+		}],
+		onChange: [{
+			type: i0.Output,
+			args: ["onChange"]
+		}],
+		onSlideEnd: [{
+			type: i0.Output,
+			args: ["onSlideEnd"]
+		}],
+		sliderHandle: [{
+			type: i0.ViewChild,
+			args: ["sliderHandle", { isSignal: true }]
+		}],
+		sliderHandleStart: [{
+			type: i0.ViewChild,
+			args: ["sliderHandleStart", { isSignal: true }]
+		}],
+		sliderHandleEnd: [{
+			type: i0.ViewChild,
+			args: ["sliderHandleEnd", { isSignal: true }]
+		}]
+	}
+});
+var SliderModule = class SliderModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SliderModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SliderModule,
+		imports: [Slider, SharedModule],
+		exports: [Slider, SharedModule]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SliderModule,
+		imports: [
+			Slider,
+			SharedModule,
+			SharedModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SliderModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [Slider, SharedModule],
+			exports: [Slider, SharedModule]
+		}]
+	}]
+});
 export { SLIDER_VALUE_ACCESSOR, Slider, SliderClasses, SliderModule, SliderStyle };
-//# sourceMappingURL=gravionlabs-helix-core-slider.mjs.map
+
+//# sourceMappingURL=gravionlabs-helix-core-slider.mjs.map