@nova-design-system/nova-webcomponents 3.1.0 → 3.3.0

package/dist/collection/components/nv-fieldslider/nv-fieldslider.js

@@ -0,0 +1,1036 @@
+import { Host, h, } from "@stencil/core";
+import { v4 as uuidv4 } from "uuid";
+import { clamp, valueToPercent, snapToStep, generateTicks, snapToTicks, } from "./nv-fieldslider.utils";
+import { SingleThumb } from "./partials/single-thumb";
+import { RangeThumb } from "./partials/range-thumb";
+import { TickMarks } from "./partials/tick-marks";
+import { FieldInput } from "./partials/field-input";
+/**
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
+ */
+export class NvFieldslider {
+    constructor() {
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the start input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated.
+         */
+        this.startInputId = uuidv4();
+        /**
+         * Sets the ID for the end input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated.
+         */
+        this.endInputId = uuidv4();
+        /**
+         * Keeps the interface clean by removing visible labels, but still announces
+         * the label to screen readers so users relying on assistive tech aren't left
+         * guessing.
+         */
+        this.hideLabel = false;
+        /**
+         * Enables an optional numeric input field alongside the slider, allowing
+         * users to type a value directly instead of—or in addition to—using the
+         * slider handle.
+         */
+        this.hasField = false;
+        /**
+         * Allows the slider to display two thumbs, enabling users to select a
+         * continuous range between a minimum and maximum value. Ideal for use cases
+         * like filtering by price or time.
+         */
+        this.range = false;
+        /**
+         * Disables user interaction with the slider and its associated input fields.
+         */
+        this.disabled = false;
+        /**
+         * Makes the slider and input non-editable while keeping them focusable and
+         * included in form submissions.
+         */
+        this.readonly = false;
+        /**
+         * Alters the slider's appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Changes the slider's appearance to indicate successful input or validation.
+         */
+        this.success = false;
+        /**
+         * Numeric value of the slider as an array of numbers. When in single mode,
+         * the value should be a an array of one number. When in range mode, the value
+         * should be an array of two numbers.
+         */
+        this.value = [0, 0];
+        /**
+         * Defines the interval between selectable values on the slider. Controls how
+         * much the value increases or decreases with each keyboard interaction, drag
+         * movement, or direct input.
+         */
+        this.step = 1;
+        /**
+         * Controls whether the slider handle should visually snap to step values
+         * during dragging. When false, the handle can be positioned at any point
+         * along the track while dragging, but the actual value will still snap to the
+         * nearest step value. When true, the handle will visually snap to the nearest
+         * step value during dragging.
+         */
+        this.snap = false;
+        /**
+         * When true and custom ticks are provided, the slider will snap to the nearest
+         * tick value during dragging, instead of using the step value. This is useful
+         * when you have custom ticks at specific values that don't align with regular step intervals.
+         */
+        this.snapTicks = false;
+        /**
+         * Defines the minimum allowed value for the slider. The thumb cannot move
+         * below this value, and manual input is also constrained accordingly.
+         */
+        this.min = 0;
+        /**
+         * Defines the maximum allowed value for the slider. The thumb cannot move
+         * above this value, and manual input is also constrained accordingly.
+         */
+        this.max = 100;
+        /**
+         * Controls the visibility of tick marks on the slider. When enabled, all
+         * visual ticks that indicate step points along the track are shown. If custom
+         * ticks are provided, they are always shown regardless of this setting.
+         */
+        this.showTicks = false;
+        /**
+         * Allows the field to stretch and fill the entire width of its container.
+         */
+        this.fluid = false;
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region STATE
+        this.isDragging = false;
+        this.activeDragThumb = 'single';
+        this.internalTicks = [];
+        // These track the raw slider positions for visual display
+        this.rawPosition = 0;
+        this.rawRangePosition = [0, 0];
+        this.valueInternal = 0;
+        this.rangeValueInternal = [0, 0];
+        /**
+         * Parses the value string into a number or array of numbers for internal use.
+         */
+        this.parseValue = () => {
+            if (typeof this.value === 'string') {
+                console.error('Sliders require a number or array of numbers to be passed in the value prop.');
+                return;
+            }
+            if (this.range && this.value.length !== 2) {
+                console.error('Range sliders require an array of two values to be passed in the value prop.');
+                return;
+            }
+            if (!this.range && this.value.length !== 1) {
+                console.error('Single sliders require a single value as an array to be passed in the value prop.');
+                return;
+            }
+            this.valueInternal = this.value[0];
+            this.rangeValueInternal = [this.value[0], this.value[1]];
+        };
+        /**
+         * Handles pointer events on the track.
+         * @param {PointerEvent} event - The pointer event
+         */
+        this.onTrackInteraction = (event) => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const trackRect = event.currentTarget.getBoundingClientRect();
+            const percentage = clamp(((event.clientX - trackRect.left) / trackRect.width) * 100, 0, 100);
+            const newValue = this.min + (percentage / 100) * (this.max - this.min);
+            // Store raw position for visual display
+            this.rawPosition = newValue;
+            if (this.range) {
+                // In range mode, determine which thumb to move based on proximity
+                const leftPct = valueToPercent(this.rangeValueInternal[0], this.min, this.max);
+                const rightPct = valueToPercent(this.rangeValueInternal[1], this.min, this.max);
+                const distanceToLeft = Math.abs(percentage - leftPct);
+                const distanceToRight = Math.abs(percentage - rightPct);
+                if (distanceToLeft <= distanceToRight) {
+                    this.activeDragThumb = 'left';
+                    this.rawRangePosition = [newValue, this.rawRangePosition[1]];
+                    this.handleValueChange([newValue, this.rangeValueInternal[1]]);
+                }
+                else {
+                    this.activeDragThumb = 'right';
+                    this.rawRangePosition = [this.rawRangePosition[0], newValue];
+                    this.handleValueChange([this.rangeValueInternal[0], newValue]);
+                }
+            }
+            else {
+                this.activeDragThumb = 'single';
+                this.rawPosition = newValue;
+                this.handleValueChange(newValue);
+            }
+            this.isDragging = true;
+            this.registerGlobalEvents();
+        };
+        /**
+         * Handles pointer move events during drag.
+         * @param {PointerEvent} event - The pointer event
+         */
+        this.onPointerMove = (event) => {
+            if (!this.isDragging || this.disabled || this.readonly) {
+                return;
+            }
+            const trackElement = this.el.querySelector('.track');
+            if (!trackElement)
+                return;
+            const trackRect = trackElement.getBoundingClientRect();
+            const percentage = clamp(((event.clientX - trackRect.left) / trackRect.width) * 100, 0, 100);
+            const newValue = this.min + (percentage / 100) * (this.max - this.min);
+            // Update visual position
+            if (this.range) {
+                if (this.activeDragThumb === 'left') {
+                    this.rawRangePosition = [newValue, this.rawRangePosition[1]];
+                    this.handleValueChange([newValue, this.rangeValueInternal[1]]);
+                }
+                else {
+                    this.rawRangePosition = [this.rawRangePosition[0], newValue];
+                    this.handleValueChange([this.rangeValueInternal[0], newValue]);
+                }
+            }
+            else {
+                this.rawPosition = newValue;
+                this.handleValueChange(newValue);
+            }
+        };
+        /**
+         * Handles the end of a drag operation.
+         */
+        this.onPointerUp = () => {
+            this.isDragging = false;
+            this.removeGlobalEvents();
+        };
+        /**
+         * Handles keydown events for keyboard accessibility.
+         * @param {KeyboardEvent} event - The keyboard event
+         */
+        this.onKeyDown = (event) => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            let newValue;
+            const stepMultiplier = event.shiftKey ? 10 : 1;
+            const singleStep = this.step * stepMultiplier;
+            if (this.range) {
+                const focusedThumb = event.target.getAttribute('data-thumb');
+                const idx = focusedThumb === 'left' ? 0 : 1;
+                const currentValue = [...this.rangeValueInternal];
+                switch (event.key) {
+                    case 'ArrowRight':
+                    case 'ArrowUp':
+                        currentValue[idx] += singleStep;
+                        break;
+                    case 'ArrowLeft':
+                    case 'ArrowDown':
+                        currentValue[idx] -= singleStep;
+                        break;
+                    case 'Home':
+                        currentValue[idx] = this.min;
+                        break;
+                    case 'End':
+                        currentValue[idx] = this.max;
+                        break;
+                    case 'PageUp':
+                        currentValue[idx] += singleStep * 10;
+                        break;
+                    case 'PageDown':
+                        currentValue[idx] -= singleStep * 10;
+                        break;
+                    default:
+                        return;
+                }
+                newValue = currentValue;
+            }
+            else {
+                switch (event.key) {
+                    case 'ArrowRight':
+                    case 'ArrowUp':
+                        newValue = this.valueInternal + singleStep;
+                        break;
+                    case 'ArrowLeft':
+                    case 'ArrowDown':
+                        newValue = this.valueInternal - singleStep;
+                        break;
+                    case 'Home':
+                        newValue = this.min;
+                        break;
+                    case 'End':
+                        newValue = this.max;
+                        break;
+                    case 'PageUp':
+                        newValue = this.valueInternal + singleStep * 10;
+                        break;
+                    case 'PageDown':
+                        newValue = this.valueInternal - singleStep * 10;
+                        break;
+                    default:
+                        return;
+                }
+            }
+            event.preventDefault();
+            this.handleValueChange(newValue);
+        };
+        /**
+         * Handles field input value changes.
+         * @param {Event} event - The input event
+         */
+        this.handleFieldChange = (event) => {
+            const input = event.target;
+            const newValue = parseFloat(input.value);
+            if (isNaN(newValue)) {
+                return;
+            }
+            if (this.range) {
+                const fieldIndex = input.getAttribute('data-index') === '0' ? 0 : 1;
+                const updatedRange = [...this.rangeValueInternal];
+                updatedRange[fieldIndex] = newValue;
+                this.handleValueChange(updatedRange);
+            }
+            else {
+                this.handleValueChange(newValue);
+            }
+        };
+    }
+    //#endregion STATE
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Ensures value is valid and within bounds.
+     * @param {number} val - The value to validate
+     * @returns {number} The validated and snapped value
+     */
+    validateValue(val) {
+        // First ensure the value is within bounds
+        const clampedValue = clamp(val, this.min, this.max);
+        // If snapTicks is true and we have custom ticks, snap to the nearest tick
+        if (this.snapTicks && this.internalTicks && this.internalTicks.length > 0) {
+            return snapToTicks(clampedValue, this.internalTicks);
+        }
+        // Otherwise snap to step values
+        return snapToStep(clampedValue, this.min, this.max, this.step);
+    }
+    /**
+     * Handles value changes from slider interaction.
+     * @param {number | number[]} newValue - The new value or range values
+     */
+    handleValueChange(newValue) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        if (this.range) {
+            // Handle range values
+            if (Array.isArray(newValue) && newValue.length === 2) {
+                // Ensure values are in order (left ≤ right)
+                const orderedValues = [
+                    Math.min(newValue[0], newValue[1]),
+                    Math.max(newValue[0], newValue[1]),
+                ];
+                // Snap to steps and clamp
+                const validatedValues = [
+                    this.validateValue(orderedValues[0]),
+                    this.validateValue(orderedValues[1]),
+                ];
+                if (validatedValues[0] !== this.rangeValueInternal[0] ||
+                    validatedValues[1] !== this.rangeValueInternal[1]) {
+                    this.rangeValueInternal = validatedValues;
+                    this.value = this.rangeValueInternal;
+                    this.valueChanged.emit(this.rangeValueInternal);
+                }
+            }
+        }
+        else {
+            // Handle single value
+            if (typeof newValue === 'number') {
+                const validatedValue = this.validateValue(newValue);
+                if (validatedValue !== this.valueInternal) {
+                    this.valueInternal = validatedValue;
+                    this.value = [this.valueInternal];
+                    this.valueChanged.emit([this.valueInternal]);
+                }
+            }
+        }
+    }
+    /**
+     * Generates the ticks to display based on props and state.
+     */
+    generateDisplayTicks() {
+        // If custom ticks are provided, always use them regardless of showTicks setting
+        if (this.ticks && this.ticks.length > 0) {
+            this.internalTicks = [...this.ticks].sort((a, b) => a.value - b.value);
+            return;
+        }
+        // If showTicks is false and there are no custom ticks, hide all ticks
+        if (!this.showTicks) {
+            this.internalTicks = [];
+            return;
+        }
+        // Generate all ticks at each step point
+        const autoTicks = generateTicks(this.min, this.max, this.step);
+        this.internalTicks = autoTicks.map(value => ({ value }));
+    }
+    /**
+     * Registers global events for tracking pointer movement.
+     */
+    registerGlobalEvents() {
+        document.addEventListener('pointermove', this.onPointerMove);
+        document.addEventListener('pointerup', this.onPointerUp);
+        document.addEventListener('pointercancel', this.onPointerUp);
+    }
+    /**
+     * Removes global events when tracking ends.
+     */
+    removeGlobalEvents() {
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp);
+        document.removeEventListener('pointercancel', this.onPointerUp);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    onValueChange() {
+        this.parseValue();
+    }
+    onConfigChange() {
+        this.generateDisplayTicks();
+        if (this.range) {
+            this.handleValueChange(this.rangeValueInternal);
+        }
+        else {
+            this.handleValueChange(this.valueInternal);
+        }
+    }
+    onRangeChange(newValue) {
+        if (newValue) {
+            // Switching to range mode
+            this.rangeValueInternal = [this.min, this.valueInternal];
+        }
+        else {
+            // Switching to single mode, take the higher value
+            this.valueInternal = this.rangeValueInternal[1];
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    connectedCallback() {
+        this.parseValue();
+        this.generateDisplayTicks();
+        // Initialize values and make sure they're valid
+        if (this.range) {
+            if (!Array.isArray(this.rangeValueInternal) ||
+                this.rangeValueInternal.length !== 2) {
+                this.rangeValueInternal = [this.min, this.max];
+            }
+            this.handleValueChange(this.rangeValueInternal);
+            // Initialize raw range position to match actual values
+            this.rawRangePosition = [
+                this.rangeValueInternal[0],
+                this.rangeValueInternal[1],
+            ];
+        }
+        else {
+            this.handleValueChange(this.valueInternal);
+            // Initialize raw position to match actual value
+            this.rawPosition = this.valueInternal;
+        }
+    }
+    disconnectedCallback() {
+        this.removeGlobalEvents();
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '5625de672648fc737a3c463241621c96e3f5678c' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'c9bb829857daf1f38a07ba8d851a126b8e1014d0', htmlFor: this.startInputId }, h("slot", { key: '86daceb63a9467395bd576ee8e2a1fd335dab8a9', name: "label" }, this.label))), h("div", { key: 'a2f9fcfd6f201926d59b1542cfb6aecb9995bfe6', class: "slider-container" }, this.range ? (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, h("div", { key: 'c217e21c05160391608196c689a506332cdd2c6a', class: "track-container" }, h("div", { key: 'eff5a66ed65ca210e66138dfcf345843e4947fe9', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), h(TickMarks, { key: 'a1168d80e444702014631c51770f81bc66c42c7e', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
+            this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'f92bc3bba0d12897563532d18873ed00cd01107c', class: "description" }, this.success && (h("nv-icon", { key: 'bbe9253cf1a560d1e5e398cece3bdc1dc65c5edc', name: "circle-check", class: "validation", size: "md" })), h("slot", { key: '52396d459eca326fd6e0e1587e79c5b1ab0f8e74', name: "description" }, this.description))), (this.error ||
+            this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '2da1fec9cf6c1c5a2f5c0aa16c18d4b45f0758d9', class: "error-description", hidden: !this.error }, this.error && (h("nv-icon", { key: '9b97a3cc6d56971b6dda8263316f83ea4e35d257', name: "alert-circle", class: "validation", size: "md" })), h("slot", { key: 'f2a96d286c53529ebee99606bee0c43f9ff21b74', name: "error-description" }, this.errorDescription)))));
+    }
+    static get is() { return "nv-fieldslider"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles/nv-fieldslider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles/nv-fieldslider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "startInputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the ID for the start input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "start-input-id",
+                "reflect": true,
+                "defaultValue": "uuidv4()"
+            },
+            "endInputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the ID for the end input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "end-input-id",
+                "reflect": true,
+                "defaultValue": "uuidv4()"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Provides a textual description of the slider's function, helping users\nunderstand what the control adjusts. It also supports accessibility by\nserving as the accessible name for the component."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": true
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Keeps the interface clean by removing visible labels, but still announces\nthe label to screen readers so users relying on assistive tech aren't left\nguessing."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-label",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add helpful hints or extra information under the slider. This is where you\ncan clarify what users should enter or provide additional instructions,\nmaking the form easier to fill out correctly."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "description",
+                "reflect": true
+            },
+            "hasField": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables an optional numeric input field alongside the slider, allowing\nusers to type a value directly instead of\u2014or in addition to\u2014using the\nslider handle."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "has-field",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "range": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows the slider to display two thumbs, enabling users to select a\ncontinuous range between a minimum and maximum value. Ideal for use cases\nlike filtering by price or time."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "range",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables user interaction with the slider and its associated input fields."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the slider and input non-editable while keeping them focusable and\nincluded in form submissions."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "readonly",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "validator",
+                            "text": "error"
+                        }],
+                    "text": "Alters the slider's appearance to indicate an error, helping users\nidentify fields that need correction."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "errorDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "validator",
+                            "text": "message"
+                        }],
+                    "text": "A description that appears when there is an error related to the slider."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error-description",
+                "reflect": true
+            },
+            "success": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Changes the slider's appearance to indicate successful input or validation."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "success",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Numeric value of the slider as an array of numbers. When in single mode,\nthe value should be a an array of one number. When in range mode, the value\nshould be an array of two numbers."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[0, 0]"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the interval between selectable values on the slider. Controls how\nmuch the value increases or decreases with each keyboard interaction, drag\nmovement, or direct input."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "step",
+                "reflect": true,
+                "defaultValue": "1"
+            },
+            "snap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether the slider handle should visually snap to step values\nduring dragging. When false, the handle can be positioned at any point\nalong the track while dragging, but the actual value will still snap to the\nnearest step value. When true, the handle will visually snap to the nearest\nstep value during dragging."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "snap",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "snapTicks": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true and custom ticks are provided, the slider will snap to the nearest\ntick value during dragging, instead of using the step value. This is useful\nwhen you have custom ticks at specific values that don't align with regular step intervals."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "snap-ticks",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for the form input element. Required for form submission.\nFor range sliders, this will be used for the start value input and add -end\nto the end input name."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": true
+            },
+            "endName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for the end value input when using range mode.\nIf not provided, the name attribute will be used with '-end' appended."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "end-name",
+                "reflect": true
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the minimum allowed value for the slider. The thumb cannot move\nbelow this value, and manual input is also constrained accordingly."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min",
+                "reflect": true,
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the maximum allowed value for the slider. The thumb cannot move\nabove this value, and manual input is also constrained accordingly."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max",
+                "reflect": true,
+                "defaultValue": "100"
+            },
+            "showTicks": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the visibility of tick marks on the slider. When enabled, all\nvisual ticks that indicate step points along the track are shown. If custom\nticks are provided, they are always shown regardless of this setting."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-ticks",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "ticks": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\n    /** The numeric value of the tick */\n    value: number;\n    /** The label of the tick */\n    label?: string;\n  }[]",
+                    "resolved": "{ value: number; label?: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows you to specify custom tick marks at specific values along the\nslider. Each tick can optionally display a label to provide additional\ncontext or guidance for users."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "fluid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows the field to stretch and fill the entire width of its container."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "fluid",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "labelBeforeValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this to automatically show a label, like \u201C~\u201D for approximate values,\nbefore the slider\u2019s value in the tooltip or input, giving users quick\ncontext about the number."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-before-value",
+                "reflect": true
+            },
+            "labelAfterValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this to automatically show a label, like \u201C$\u201D or \u201Ckg,\u201D after the value\non the slider\u2019s tooltip or input, helping users better understand the\nnumber."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-after-value",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDragging": {},
+            "activeDragThumb": {},
+            "internalTicks": {},
+            "rawPosition": {},
+            "rawRangePosition": {},
+            "valueInternal": {},
+            "rangeValueInternal": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "value"
+                        }],
+                    "text": "Emitted when the slider values change."
+                },
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "min",
+                "methodName": "onConfigChange"
+            }, {
+                "propName": "max",
+                "methodName": "onConfigChange"
+            }, {
+                "propName": "step",
+                "methodName": "onConfigChange"
+            }, {
+                "propName": "ticks",
+                "methodName": "onConfigChange"
+            }, {
+                "propName": "showTicks",
+                "methodName": "onConfigChange"
+            }, {
+                "propName": "snap",
+                "methodName": "onConfigChange"
+            }, {
+                "propName": "snapTicks",
+                "methodName": "onConfigChange"
+            }, {
+                "propName": "range",
+                "methodName": "onRangeChange"
+            }];
+    }
+}
+//# sourceMappingURL=nv-fieldslider.js.map