@gravionlabs/helix-core 22.0.0

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

@@ -0,0 +1,730 @@
+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*/ `
+    .h-slider {
+        display: block;
+        position: relative;
+        background: dt('slider.track.background');
+        border-radius: dt('slider.track.border.radius');
+    }
+
+    .h-slider-handle {
+        cursor: grab;
+        touch-action: none;
+        user-select: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: dt('slider.handle.height');
+        width: dt('slider.handle.width');
+        background: dt('slider.handle.background');
+        border-radius: dt('slider.handle.border.radius');
+        transition:
+            background dt('slider.transition.duration'),
+            color dt('slider.transition.duration'),
+            border-color dt('slider.transition.duration'),
+            box-shadow dt('slider.transition.duration'),
+            outline-color dt('slider.transition.duration');
+        outline-color: transparent;
+    }
+
+    .h-slider-handle::before {
+        content: '';
+        width: dt('slider.handle.content.width');
+        height: dt('slider.handle.content.height');
+        display: block;
+        background: dt('slider.handle.content.background');
+        border-radius: dt('slider.handle.content.border.radius');
+        box-shadow: dt('slider.handle.content.shadow');
+        transition: background dt('slider.transition.duration');
+    }
+
+    .h-slider:not(.h-disabled) .h-slider-handle:hover {
+        background: dt('slider.handle.hover.background');
+    }
+
+    .h-slider:not(.h-disabled) .h-slider-handle:hover::before {
+        background: dt('slider.handle.content.hover.background');
+    }
+
+    .h-slider-handle:focus-visible {
+        box-shadow: dt('slider.handle.focus.ring.shadow');
+        outline: dt('slider.handle.focus.ring.width') dt('slider.handle.focus.ring.style') dt('slider.handle.focus.ring.color');
+        outline-offset: dt('slider.handle.focus.ring.offset');
+    }
+
+    .h-slider-range {
+        display: block;
+        background: dt('slider.range.background');
+        border-radius: dt('slider.track.border.radius');
+    }
+
+    .h-slider.h-slider-horizontal {
+        height: dt('slider.track.size');
+    }
+
+    .h-slider-horizontal .h-slider-range {
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        height: 100%;
+    }
+
+    .h-slider-horizontal .h-slider-handle {
+        inset-block-start: 50%;
+        margin-block-start: calc(-1 * calc(dt('slider.handle.height') / 2));
+        margin-inline-start: calc(-1 * calc(dt('slider.handle.width') / 2));
+    }
+
+    .h-slider-vertical {
+        min-height: 100px;
+        width: dt('slider.track.size');
+    }
+
+    .h-slider-vertical .h-slider-handle {
+        inset-inline-start: 50%;
+        margin-inline-start: calc(-1 * calc(dt('slider.handle.width') / 2));
+        margin-block-end: calc(-1 * calc(dt('slider.handle.height') / 2));
+    }
+
+    .h-slider-vertical .h-slider-range {
+        inset-block-end: 0;
+        inset-inline-start: 0;
+        width: 100%;
+    }
+`;
+
+const inlineStyles = {
+    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'
+};
+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
+ *
+ */
+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";
+})(SliderClasses || (SliderClasses = {}));
+
+const SLIDER_INSTANCE = new InjectionToken('SLIDER_INSTANCE');
+const SLIDER_VALUE_ACCESSOR = {
+    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.
+ */
+
+export { SLIDER_VALUE_ACCESSOR, Slider, SliderClasses, SliderModule, SliderStyle };
+//# sourceMappingURL=gravionlabs-helix-core-slider.mjs.map