primenglab 22.0.0-beta.1

package/fesm2022/primenglab-slider.mjs

@@ -0,0 +1,776 @@
+export * from 'primenglab/types/slider';
+import * as i0 from '@angular/core';
+import { Injectable, forwardRef, inject, input, booleanAttribute, numberAttribute, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { isRTL } from '@primeuix/utils';
+import { SharedModule } from 'primenglab/api';
+import { AutoFocus } from 'primenglab/autofocus';
+import { PARENT_INSTANCE } from 'primenglab/basecomponent';
+import { BaseEditableHolder } from 'primenglab/baseeditableholder';
+import * as i1 from 'primenglab/bind';
+import { Bind, BindModule } from 'primenglab/bind';
+import { style } from '@primeuix/styles/slider';
+import { BaseStyle } from 'primenglab/base';
+
+const inlineStyles = {
+    root: () => ({
+        display: 'flex',
+        position: 'relative',
+        'touch-action': 'none'
+    }),
+    track: () => ({
+        display: 'block',
+        'flex-grow': 1,
+        position: 'relative'
+    }),
+    range: ({ instance }) => {
+        if (instance.range()) {
+            const vals = instance.values() ?? [0, 0];
+            const startPercent = instance.getValuePercent(Math.min(vals[0], vals[1]));
+            const endPercent = instance.getValuePercent(Math.max(vals[0], vals[1]));
+            const sizePercent = Math.max(endPercent - startPercent, 0);
+            if (instance.isHorizontal()) {
+                return { position: 'absolute', 'inset-inline-start': startPercent + '%', width: sizePercent + '%' };
+            }
+            else {
+                return { position: 'absolute', bottom: startPercent + '%', height: sizePercent + '%' };
+            }
+        }
+        else {
+            const percent = instance.getValuePercent(instance.value() ?? 0);
+            if (instance.isHorizontal()) {
+                return { position: 'absolute', width: percent + '%' };
+            }
+            else {
+                return { position: 'absolute', bottom: '0', height: percent + '%' };
+            }
+        }
+    },
+    handle: ({ instance, index }) => {
+        const i = index ?? 0;
+        const handleValue = instance.getHandleValue(i);
+        const percent = instance.getValuePercent(handleValue);
+        const disabled = instance.isHandleDisabled(i);
+        const base = disabled ? { cursor: 'default', 'pointer-events': 'none' } : {};
+        if (instance.isHorizontal()) {
+            return { ...base, position: 'absolute', 'inset-inline-start': percent + '%', translate: '-50% 0' };
+        }
+        else {
+            return { ...base, position: 'absolute', bottom: percent + '%', translate: '0 50%' };
+        }
+    },
+    startHandler: ({ instance }) => {
+        const handleValue = instance.getHandleValue(0);
+        const percent = instance.getValuePercent(handleValue);
+        const disabled = instance.isHandleDisabled(0);
+        const base = disabled ? { cursor: 'default', 'pointer-events': 'none' } : {};
+        if (instance.isHorizontal()) {
+            return { ...base, position: 'absolute', 'inset-inline-start': percent + '%', translate: '-50% 0' };
+        }
+        else {
+            return { ...base, position: 'absolute', bottom: percent + '%', translate: '0 50%' };
+        }
+    },
+    endHandler: ({ instance }) => {
+        const handleValue = instance.getHandleValue(1);
+        const percent = instance.getValuePercent(handleValue);
+        const disabled = instance.isHandleDisabled(1);
+        const base = disabled ? { cursor: 'default', 'pointer-events': 'none' } : {};
+        if (instance.isHorizontal()) {
+            return { ...base, position: 'absolute', 'inset-inline-start': percent + '%', translate: '-50% 0' };
+        }
+        else {
+            return { ...base, position: 'absolute', bottom: percent + '%', translate: '0 50%' };
+        }
+    }
+};
+const classes = {
+    root: ({ instance }) => [
+        'p-slider p-component',
+        {
+            'p-disabled': instance.$disabled(),
+            'p-slider-horizontal': instance.isHorizontal(),
+            'p-slider-vertical': instance.isVertical()
+        }
+    ],
+    track: 'p-slider-track',
+    range: 'p-slider-range',
+    handle: 'p-slider-handle',
+    input: 'p-slider-input'
+};
+class SliderStyle extends BaseStyle {
+    name = 'slider';
+    style = style;
+    classes = classes;
+    inlineStyles = inlineStyles;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SliderStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SliderStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", 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"] = "p-slider";
+    /**
+     * Class name of the track element
+     */
+    SliderClasses["track"] = "p-slider-track";
+    /**
+     * Class name of the range element
+     */
+    SliderClasses["range"] = "p-slider-range";
+    /**
+     * Class name of the handle element
+     */
+    SliderClasses["handle"] = "p-slider-handle";
+    /**
+     * Class name of the hidden input element
+     */
+    SliderClasses["input"] = "p-slider-input";
+})(SliderClasses || (SliderClasses = {}));
+
+const SLIDER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => Slider),
+    multi: true
+};
+/**
+ * Slider is a component to provide input by dragging a handle along a track.
+ * @group Components
+ */
+class Slider extends BaseEditableHolder {
+    componentName = 'Slider';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    _componentStyle = inject(SliderStyle);
+    /**
+     * When enabled, displays an animation on click of the slider bar.
+     * @group Props
+     * @deprecated This property is no longer functional.
+     */
+    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 });
+    /**
+     * Minimum number of steps between handles in range mode.
+     * @group Props
+     */
+    minStepsBetweenHandles = input(0, { ...(ngDevMode ? { debugName: "minStepsBetweenHandles" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Disables the minimum (start) handle in range mode.
+     * @type boolean
+     * @defaultValue false
+     * @group Props
+     */
+    disabledMinHandle = input(false, { ...(ngDevMode ? { debugName: "disabledMinHandle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Disables the maximum (end) handle in range mode.
+     * @type boolean
+     * @defaultValue false
+     * @group Props
+     */
+    disabledMaxHandle = input(false, { ...(ngDevMode ? { debugName: "disabledMaxHandle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * 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(false, { ...(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();
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    values = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    isDragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    dragging = computed(() => this.isDragging(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    dataDragging = computed(() => (this.isDragging() ? '' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataDragging" }] : /* istanbul ignore next */ []));
+    activeIndex = 0;
+    get handleIndex() {
+        return this.activeIndex;
+    }
+    focusedIndex = null;
+    isHandlePointerDown = false;
+    dragOffsetPx = 0;
+    isHorizontal = computed(() => this.orientation() === 'horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHorizontal" }] : /* istanbul ignore next */ []));
+    isVertical = computed(() => this.orientation() === 'vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
+    $step = computed(() => this.step() || 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$step" }] : /* istanbul ignore next */ []));
+    $tabindex = computed(() => (this.$disabled() ? -1 : this.tabindex()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$tabindex" }] : /* istanbul ignore next */ []));
+    isHandleDisabled(index) {
+        return this.$disabled() || (index === 0 && this.disabledMinHandle()) || (index === 1 && this.disabledMaxHandle());
+    }
+    getDataDisabled(index) {
+        return this.isHandleDisabled(index) ? '' : null;
+    }
+    getHandleTabindex(index) {
+        return this.isHandleDisabled(index) ? -1 : this.$tabindex();
+    }
+    dataP = computed(() => this.cn({
+        [this.orientation()]: this.orientation()
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataP" }] : /* istanbul ignore next */ []));
+    clamp(value, minVal, maxVal) {
+        return Math.min(Math.max(value, minVal), maxVal);
+    }
+    getPrecision(stepValue) {
+        const stepString = stepValue.toString();
+        if (stepString.includes('e-')) {
+            return Number(stepString.split('e-')[1] || 0);
+        }
+        const dotIndex = stepString.indexOf('.');
+        return dotIndex >= 0 ? stepString.length - dotIndex - 1 : 0;
+    }
+    roundToStep(value, stepValue, minValue) {
+        if (!stepValue)
+            return value;
+        const precision = this.getPrecision(stepValue);
+        const rounded = Math.round((value - minValue) / stepValue) * stepValue + minValue;
+        return Number(rounded.toFixed(precision));
+    }
+    normalizeValue(value) {
+        const s = this.step() || 1;
+        return this.clamp(this.roundToStep(value, s, this.min()), this.min(), this.max());
+    }
+    getValuePercent(value) {
+        const rangeValue = this.max() - this.min();
+        if (!rangeValue)
+            return 0;
+        return this.clamp(((value - this.min()) / rangeValue) * 100, 0, 100);
+    }
+    getHandleValue(index) {
+        const values = this.getValues();
+        return values[index] ?? this.min();
+    }
+    getValues() {
+        if (this.range()) {
+            const vals = this.values() ?? [this.min(), this.min()];
+            return vals.map((v) => this.normalizeValue(v));
+        }
+        else {
+            return [this.normalizeValue(this.value() ?? this.min())];
+        }
+    }
+    getValueFromPointer(event, offsetPx = 0) {
+        const rect = this.el.nativeElement.getBoundingClientRect();
+        const size = this.isHorizontal() ? rect.width : rect.height;
+        if (!size)
+            return this.min();
+        const pointerPosition = this.isHorizontal() ? event.clientX - rect.left : event.clientY - rect.top;
+        const position = (pointerPosition - offsetPx) / size;
+        const clampedPosition = this.clamp(position, 0, 1);
+        const isRtl = this.isHorizontal() && isRTL(this.el.nativeElement);
+        const orientedPosition = this.isHorizontal() ? (isRtl ? 1 - clampedPosition : clampedPosition) : 1 - clampedPosition;
+        const value = this.min() + orientedPosition * (this.max() - this.min());
+        return this.normalizeValue(value);
+    }
+    getClosestValueIndex(values, nextValue, event) {
+        const enabledIndices = values.map((_, i) => i).filter((i) => !this.isHandleDisabled(i));
+        if (!enabledIndices.length)
+            return -1;
+        let closestIndex = enabledIndices[0];
+        let smallestDistance = Math.abs(values[closestIndex] - nextValue);
+        const pointerAxis = event ? (this.isHorizontal() ? event.clientX : event.clientY) : null;
+        for (const i of enabledIndices.slice(1)) {
+            const distance = Math.abs(values[i] - nextValue);
+            if (distance < smallestDistance) {
+                closestIndex = i;
+                smallestDistance = distance;
+            }
+            else if (distance === smallestDistance && pointerAxis !== null) {
+                const closestEl = this.getHandleElement(closestIndex);
+                const candidateEl = this.getHandleElement(i);
+                if (closestEl && candidateEl) {
+                    const closestRect = closestEl.getBoundingClientRect();
+                    const candidateRect = candidateEl.getBoundingClientRect();
+                    const closestCenter = this.isHorizontal() ? closestRect.left + closestRect.width / 2 : closestRect.top + closestRect.height / 2;
+                    const candidateCenter = this.isHorizontal() ? candidateRect.left + candidateRect.width / 2 : candidateRect.top + candidateRect.height / 2;
+                    if (closestCenter === candidateCenter) {
+                        closestIndex = pointerAxis < closestCenter ? Math.min(closestIndex, i) : Math.max(closestIndex, i);
+                    }
+                    else {
+                        const closestDelta = Math.abs(pointerAxis - closestCenter);
+                        const candidateDelta = Math.abs(pointerAxis - candidateCenter);
+                        if (candidateDelta < closestDelta) {
+                            closestIndex = i;
+                        }
+                    }
+                }
+            }
+        }
+        return closestIndex;
+    }
+    getHandleElement(index) {
+        return this.el.nativeElement.querySelector(`[data-index="${index}"]`);
+    }
+    updateValueAt(index, nextValue, event) {
+        const values = this.getValues();
+        const clampedValue = this.clamp(this.normalizeValue(nextValue), this.min(), this.max());
+        if (this.range()) {
+            const minDistance = Math.max(this.minStepsBetweenHandles() * (this.step() || 1), 0);
+            const minBound = index > 0 ? values[index - 1] + minDistance : this.min();
+            const maxBound = index < values.length - 1 ? values[index + 1] - minDistance : this.max();
+            const lowerBound = Math.min(minBound, maxBound);
+            const upperBound = Math.max(minBound, maxBound);
+            const boundedValue = this.clamp(clampedValue, lowerBound, upperBound);
+            const newVals = [...values];
+            newVals[index] = boundedValue;
+            this.values.set(newVals);
+            this.onModelChange(newVals);
+            this.onChange.emit({ event, values: newVals });
+        }
+        else {
+            this.value.set(clampedValue);
+            this.onModelChange(clampedValue);
+            this.onChange.emit({ event, value: clampedValue });
+        }
+    }
+    updateValueFromPointer(event) {
+        const nextValue = this.getValueFromPointer(event, this.dragOffsetPx);
+        const values = this.getValues();
+        if (this.range()) {
+            const closestIndex = this.getClosestValueIndex(values, nextValue, event);
+            if (closestIndex === -1)
+                return;
+            this.activeIndex = closestIndex;
+            this.dragOffsetPx = 0;
+            this.updateValueAt(this.activeIndex, nextValue, event);
+        }
+        else {
+            if (this.isHandleDisabled(0))
+                return;
+            this.activeIndex = 0;
+            this.dragOffsetPx = 0;
+            this.updateValueAt(0, nextValue, event);
+        }
+    }
+    // --- Pointer event handlers ---
+    onTrackPointerDown(event) {
+        if (this.$disabled())
+            return;
+        if (event.pointerType === 'mouse' && event.button !== 0)
+            return;
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        this.isDragging.set(true);
+        if (this.isHandlePointerDown) {
+            this.isHandlePointerDown = false;
+            return;
+        }
+        this.dragOffsetPx = 0;
+        this.updateValueFromPointer(event);
+    }
+    onTrackPointerMove(event) {
+        if (this.$disabled())
+            return;
+        if (!this.isDragging())
+            return;
+        if (this.isHandleDisabled(this.activeIndex))
+            return;
+        event.preventDefault();
+        this.updateValueAt(this.activeIndex, this.getValueFromPointer(event, this.dragOffsetPx), event);
+    }
+    onTrackPointerUp(event) {
+        if (this.$disabled())
+            return;
+        event.preventDefault();
+        event.currentTarget.releasePointerCapture(event.pointerId);
+        this.isDragging.set(false);
+        this.isHandlePointerDown = false;
+        this.dragOffsetPx = 0;
+        if (this.range()) {
+            this.onSlideEnd.emit({ originalEvent: event, values: this.values() });
+        }
+        else {
+            this.onSlideEnd.emit({ originalEvent: event, value: this.value() });
+        }
+    }
+    onHandlePointerDown(event, index) {
+        if (this.$disabled())
+            return;
+        if (event.pointerType === 'mouse' && event.button !== 0)
+            return;
+        event.preventDefault();
+        const handle = this.getHandleElement(index);
+        if (handle) {
+            const handleRect = handle.getBoundingClientRect();
+            const handleCenter = this.isHorizontal() ? handleRect.left + handleRect.width / 2 : handleRect.top + handleRect.height / 2;
+            const pointerAxis = this.isHorizontal() ? event.clientX : event.clientY;
+            this.dragOffsetPx = pointerAxis - handleCenter;
+        }
+        else {
+            this.dragOffsetPx = 0;
+        }
+        this.activeIndex = index;
+        this.isHandlePointerDown = true;
+    }
+    // --- Input event handlers ---
+    onInputChange(event, index) {
+        if (this.isHandleDisabled(index))
+            return;
+        this.activeIndex = index;
+        const nextValue = Number(event.target.value);
+        this.updateValueAt(index, nextValue, event);
+        if (this.range()) {
+            this.onSlideEnd.emit({ originalEvent: event, values: this.values() });
+        }
+        else {
+            this.onSlideEnd.emit({ originalEvent: event, value: this.value() });
+        }
+    }
+    onInputFocus(_event, index) {
+        if (this.isHandleDisabled(index))
+            return;
+        this.focusedIndex = index;
+        this.activeIndex = index;
+    }
+    onInputBlur(event, index) {
+        if (this.isHandleDisabled(index))
+            return;
+        this.activeIndex = index;
+        if (this.focusedIndex === index) {
+            this.focusedIndex = null;
+        }
+        if (this.range()) {
+            this.onSlideEnd.emit({ originalEvent: event, values: this.values() });
+        }
+        else {
+            this.onSlideEnd.emit({ originalEvent: event, value: this.value() });
+        }
+        this.onModelTouched();
+    }
+    // --- Keyboard ---
+    onKeyDown(event, index) {
+        if (this.isHandleDisabled(index))
+            return;
+        this.activeIndex = index;
+        const s = this.step() || 1;
+        switch (event.code) {
+            case 'ArrowDown':
+            case 'ArrowLeft':
+                this.decrementValue(event, index, s);
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+            case 'ArrowRight':
+                this.incrementValue(event, index, s);
+                event.preventDefault();
+                break;
+            case 'PageDown':
+                this.decrementValue(event, index, s * 10);
+                event.preventDefault();
+                break;
+            case 'PageUp':
+                this.incrementValue(event, index, s * 10);
+                event.preventDefault();
+                break;
+            case 'Home':
+                this.updateValueAt(index, this.min(), event);
+                event.preventDefault();
+                break;
+            case 'End':
+                this.updateValueAt(index, this.max(), event);
+                event.preventDefault();
+                break;
+            default:
+                break;
+        }
+    }
+    decrementValue(event, index, amount) {
+        const currentVal = this.getHandleValue(index);
+        this.updateValueAt(index, currentVal - amount, event);
+    }
+    incrementValue(event, index, amount) {
+        const currentVal = this.getHandleValue(index);
+        this.updateValueAt(index, currentVal + amount, event);
+    }
+    /**
+     * @override
+     *
+     * @see {@link BaseEditableHolder.writeControlValue}
+     */
+    writeControlValue(value) {
+        if (this.range())
+            this.values.set(value || [0, 0]);
+        else
+            this.value.set(value || 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: Slider, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: Slider, isStandalone: true, selector: "p-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 }, minStepsBetweenHandles: { classPropertyName: "minStepsBetweenHandles", publicName: "minStepsBetweenHandles", isSignal: true, isRequired: false, transformFunction: null }, disabledMinHandle: { classPropertyName: "disabledMinHandle", publicName: "disabledMinHandle", isSignal: true, isRequired: false, transformFunction: null }, disabledMaxHandle: { classPropertyName: "disabledMaxHandle", publicName: "disabledMaxHandle", 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: { "pointerdown": "onTrackPointerDown($event)", "pointermove": "onTrackPointerMove($event)", "pointerup": "onTrackPointerUp($event)" }, properties: { "class": "cx('root')", "style": "sx('root')", "attr.data-orientation": "orientation()", "attr.data-dragging": "dataDragging()" } }, providers: [SLIDER_VALUE_ACCESSOR, SliderStyle, { provide: PARENT_INSTANCE, useExisting: Slider }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <div [class]="cx('track')" [pBind]="ptm('track')" [style]="sx('track')">
+            <span [class]="cx('range')" [style]="sx('range')" [pBind]="ptm('range')"></span>
+        </div>
+        @if (!range()) {
+            <span [class]="cx('handle')" [style]="sx('handle', true, { index: 0 })" (pointerdown)="onHandlePointerDown($event, 0)" [attr.data-index]="0" [attr.data-disabled]="getDataDisabled(0)" [pBind]="ptm('handle')">
+                <input
+                    type="range"
+                    [class]="cx('input')"
+                    [min]="min()"
+                    [max]="max()"
+                    [step]="$step()"
+                    [value]="getHandleValue(0)"
+                    [disabled]="isHandleDisabled(0)"
+                    [attr.aria-valuemin]="min()"
+                    [attr.aria-valuemax]="max()"
+                    [attr.aria-valuenow]="getHandleValue(0)"
+                    [attr.aria-orientation]="orientation()"
+                    [attr.aria-label]="ariaLabel()"
+                    [attr.aria-labelledby]="ariaLabelledBy()"
+                    [attr.tabindex]="getHandleTabindex(0)"
+                    [pAutoFocus]="autofocus()"
+                    (input)="onInputChange($event, 0)"
+                    (change)="onInputChange($event, 0)"
+                    (focus)="onInputFocus($event, 0)"
+                    (blur)="onInputBlur($event, 0)"
+                    (keydown)="onKeyDown($event, 0)"
+                    [pBind]="ptm('input')"
+                />
+            </span>
+        }
+        @if (range()) {
+            <span [class]="cx('handle', { index: 0 })" [style]="sx('startHandler')" (pointerdown)="onHandlePointerDown($event, 0)" [attr.data-index]="0" [attr.data-disabled]="getDataDisabled(0)" [pBind]="ptm('startHandler')">
+                <input
+                    type="range"
+                    [class]="cx('input')"
+                    [min]="min()"
+                    [max]="max()"
+                    [step]="$step()"
+                    [value]="getHandleValue(0)"
+                    [disabled]="isHandleDisabled(0)"
+                    [attr.aria-valuemin]="min()"
+                    [attr.aria-valuemax]="max()"
+                    [attr.aria-valuenow]="getHandleValue(0)"
+                    [attr.aria-orientation]="orientation()"
+                    [attr.aria-label]="ariaLabel()"
+                    [attr.aria-labelledby]="ariaLabelledBy()"
+                    [attr.tabindex]="getHandleTabindex(0)"
+                    [pAutoFocus]="autofocus()"
+                    (input)="onInputChange($event, 0)"
+                    (change)="onInputChange($event, 0)"
+                    (focus)="onInputFocus($event, 0)"
+                    (blur)="onInputBlur($event, 0)"
+                    (keydown)="onKeyDown($event, 0)"
+                    [pBind]="ptm('input')"
+                />
+            </span>
+            <span [class]="cx('handle', { index: 1 })" [style]="sx('endHandler')" (pointerdown)="onHandlePointerDown($event, 1)" [attr.data-index]="1" [attr.data-disabled]="getDataDisabled(1)" [pBind]="ptm('endHandler')">
+                <input
+                    type="range"
+                    [class]="cx('input')"
+                    [min]="min()"
+                    [max]="max()"
+                    [step]="$step()"
+                    [value]="getHandleValue(1)"
+                    [disabled]="isHandleDisabled(1)"
+                    [attr.aria-valuemin]="min()"
+                    [attr.aria-valuemax]="max()"
+                    [attr.aria-valuenow]="getHandleValue(1)"
+                    [attr.aria-orientation]="orientation()"
+                    [attr.aria-label]="ariaLabel()"
+                    [attr.aria-labelledby]="ariaLabelledBy()"
+                    [attr.tabindex]="getHandleTabindex(1)"
+                    (input)="onInputChange($event, 1)"
+                    (change)="onInputChange($event, 1)"
+                    (focus)="onInputFocus($event, 1)"
+                    (blur)="onInputBlur($event, 1)"
+                    (keydown)="onKeyDown($event, 1)"
+                    [pBind]="ptm('input')"
+                />
+            </span>
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: Slider, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-slider',
+                    standalone: true,
+                    imports: [AutoFocus, SharedModule, BindModule],
+                    template: `
+        <div [class]="cx('track')" [pBind]="ptm('track')" [style]="sx('track')">
+            <span [class]="cx('range')" [style]="sx('range')" [pBind]="ptm('range')"></span>
+        </div>
+        @if (!range()) {
+            <span [class]="cx('handle')" [style]="sx('handle', true, { index: 0 })" (pointerdown)="onHandlePointerDown($event, 0)" [attr.data-index]="0" [attr.data-disabled]="getDataDisabled(0)" [pBind]="ptm('handle')">
+                <input
+                    type="range"
+                    [class]="cx('input')"
+                    [min]="min()"
+                    [max]="max()"
+                    [step]="$step()"
+                    [value]="getHandleValue(0)"
+                    [disabled]="isHandleDisabled(0)"
+                    [attr.aria-valuemin]="min()"
+                    [attr.aria-valuemax]="max()"
+                    [attr.aria-valuenow]="getHandleValue(0)"
+                    [attr.aria-orientation]="orientation()"
+                    [attr.aria-label]="ariaLabel()"
+                    [attr.aria-labelledby]="ariaLabelledBy()"
+                    [attr.tabindex]="getHandleTabindex(0)"
+                    [pAutoFocus]="autofocus()"
+                    (input)="onInputChange($event, 0)"
+                    (change)="onInputChange($event, 0)"
+                    (focus)="onInputFocus($event, 0)"
+                    (blur)="onInputBlur($event, 0)"
+                    (keydown)="onKeyDown($event, 0)"
+                    [pBind]="ptm('input')"
+                />
+            </span>
+        }
+        @if (range()) {
+            <span [class]="cx('handle', { index: 0 })" [style]="sx('startHandler')" (pointerdown)="onHandlePointerDown($event, 0)" [attr.data-index]="0" [attr.data-disabled]="getDataDisabled(0)" [pBind]="ptm('startHandler')">
+                <input
+                    type="range"
+                    [class]="cx('input')"
+                    [min]="min()"
+                    [max]="max()"
+                    [step]="$step()"
+                    [value]="getHandleValue(0)"
+                    [disabled]="isHandleDisabled(0)"
+                    [attr.aria-valuemin]="min()"
+                    [attr.aria-valuemax]="max()"
+                    [attr.aria-valuenow]="getHandleValue(0)"
+                    [attr.aria-orientation]="orientation()"
+                    [attr.aria-label]="ariaLabel()"
+                    [attr.aria-labelledby]="ariaLabelledBy()"
+                    [attr.tabindex]="getHandleTabindex(0)"
+                    [pAutoFocus]="autofocus()"
+                    (input)="onInputChange($event, 0)"
+                    (change)="onInputChange($event, 0)"
+                    (focus)="onInputFocus($event, 0)"
+                    (blur)="onInputBlur($event, 0)"
+                    (keydown)="onKeyDown($event, 0)"
+                    [pBind]="ptm('input')"
+                />
+            </span>
+            <span [class]="cx('handle', { index: 1 })" [style]="sx('endHandler')" (pointerdown)="onHandlePointerDown($event, 1)" [attr.data-index]="1" [attr.data-disabled]="getDataDisabled(1)" [pBind]="ptm('endHandler')">
+                <input
+                    type="range"
+                    [class]="cx('input')"
+                    [min]="min()"
+                    [max]="max()"
+                    [step]="$step()"
+                    [value]="getHandleValue(1)"
+                    [disabled]="isHandleDisabled(1)"
+                    [attr.aria-valuemin]="min()"
+                    [attr.aria-valuemax]="max()"
+                    [attr.aria-valuenow]="getHandleValue(1)"
+                    [attr.aria-orientation]="orientation()"
+                    [attr.aria-label]="ariaLabel()"
+                    [attr.aria-labelledby]="ariaLabelledBy()"
+                    [attr.tabindex]="getHandleTabindex(1)"
+                    (input)="onInputChange($event, 1)"
+                    (change)="onInputChange($event, 1)"
+                    (focus)="onInputFocus($event, 1)"
+                    (blur)="onInputBlur($event, 1)"
+                    (keydown)="onKeyDown($event, 1)"
+                    [pBind]="ptm('input')"
+                />
+            </span>
+        }
+    `,
+                    providers: [SLIDER_VALUE_ACCESSOR, SliderStyle, { provide: PARENT_INSTANCE, useExisting: Slider }],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': "cx('root')",
+                        '[style]': "sx('root')",
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-dragging]': 'dataDragging()',
+                        '(pointerdown)': 'onTrackPointerDown($event)',
+                        '(pointermove)': 'onTrackPointerMove($event)',
+                        '(pointerup)': 'onTrackPointerUp($event)'
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], 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 }] }], minStepsBetweenHandles: [{ type: i0.Input, args: [{ isSignal: true, alias: "minStepsBetweenHandles", required: false }] }], disabledMinHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMinHandle", required: false }] }], disabledMaxHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMaxHandle", 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"] }] } });
+class SliderModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.3", ngImport: i0, type: SliderModule, imports: [Slider, SharedModule], exports: [Slider, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: SliderModule, imports: [Slider, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", 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=primenglab-slider.mjs.map