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

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fieldslider.js","sourceRoot":"","sources":["../../../src/components/nv-fieldslider/nv-fieldslider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  State,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport {\n  clamp,\n  valueToPercent,\n  snapToStep,\n  generateTicks,\n  snapToTicks,\n} from './nv-fieldslider.utils';\n\nimport { SingleThumb } from './partials/single-thumb';\nimport { RangeThumb } from './partials/range-thumb';\nimport { TickMarks } from './partials/tick-marks';\nimport { FieldInput } from './partials/field-input';\n\n/**\n * @deprecated [EXPERIMENTAL]\n * @experimental This component is still in development and subject to change in future releases.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldslider',\n  styleUrl: 'styles/nv-fieldslider.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldslider {\n  @Element() el: HTMLNvFieldsliderElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the start input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated.\n   */\n  @Prop({ reflect: true })\n  readonly startInputId: string = uuidv4();\n\n  /**\n   * Sets the ID for the end input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated.\n   */\n  @Prop({ reflect: true })\n  readonly endInputId: string = uuidv4();\n\n  /**\n   * Provides a textual description of the slider's function, helping users\n   * understand what the control adjusts. It also supports accessibility by\n   * serving as the accessible name for the component.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Keeps the interface clean by removing visible labels, but still announces\n   * the label to screen readers so users relying on assistive tech aren't left\n   * guessing.\n   */\n  @Prop({ reflect: true })\n  readonly hideLabel: boolean = false;\n\n  /**\n   * Add helpful hints or extra information under the slider. This is where you\n   * can clarify what users should enter or provide additional instructions,\n   * making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true })\n  readonly description: string;\n\n  /**\n   * Enables an optional numeric input field alongside the slider, allowing\n   * users to type a value directly instead of—or in addition to—using the\n   * slider handle.\n   */\n  @Prop({ reflect: true })\n  readonly hasField: boolean = false;\n\n  /**\n   * Allows the slider to display two thumbs, enabling users to select a\n   * continuous range between a minimum and maximum value. Ideal for use cases\n   * like filtering by price or time.\n   */\n  @Prop({ reflect: true })\n  readonly range: boolean = false;\n\n  /**\n   * Disables user interaction with the slider and its associated input fields.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Makes the slider and input non-editable while keeping them focusable and\n   * included in form submissions.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Alters the slider's appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the slider.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Changes the slider's appearance to indicate successful input or validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Numeric value of the slider as a string, if range mode is on, the values\n   * will be a comma-separated string.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string = '0';\n\n  /**\n   * Defines the interval between selectable values on the slider. Controls how\n   * much the value increases or decreases with each keyboard interaction, drag\n   * movement, or direct input.\n   */\n  @Prop({ reflect: true })\n  readonly step: number = 1;\n\n  /**\n   * Controls whether the slider handle should visually snap to step values\n   * during dragging. When false, the handle can be positioned at any point\n   * along the track while dragging, but the actual value will still snap to the\n   * nearest step value. When true, the handle will visually snap to the nearest\n   * step value during dragging.\n   */\n  @Prop({ reflect: true })\n  readonly snap: boolean = false;\n\n  /**\n   * When true and custom ticks are provided, the slider will snap to the nearest\n   * tick value during dragging, instead of using the step value. This is useful\n   * when you have custom ticks at specific values that don't align with regular step intervals.\n   */\n  @Prop({ reflect: true })\n  readonly snapTicks: boolean = false;\n\n  /**\n   * Name attribute for the form input element. Required for form submission.\n   * For range sliders, this will be used for the start value input and add -end\n   * to the end input name.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Name attribute for the end value input when using range mode.\n   * If not provided, the name attribute will be used with '-end' appended.\n   */\n  @Prop({ reflect: true })\n  readonly endName: string;\n\n  /**\n   * Defines the minimum allowed value for the slider. The thumb cannot move\n   * below this value, and manual input is also constrained accordingly.\n   */\n  @Prop({ reflect: true })\n  readonly min: number = 0;\n\n  /**\n   * Defines the maximum allowed value for the slider. The thumb cannot move\n   * above this value, and manual input is also constrained accordingly.\n   */\n  @Prop({ reflect: true })\n  readonly max: number = 100;\n\n  /**\n   * Controls the visibility of tick marks on the slider. When enabled, all\n   * visual ticks that indicate step points along the track are shown. If custom\n   * ticks are provided, they are always shown regardless of this setting.\n   */\n  @Prop({ reflect: true })\n  readonly showTicks: boolean = false;\n\n  /**\n   * Allows you to specify custom tick marks at specific values along the\n   * slider. Each tick can optionally display a label to provide additional\n   * context or guidance for users.\n   */\n  @Prop({ reflect: false })\n  readonly ticks: {\n    /** The numeric value of the tick */\n    value: number;\n    /** The label of the tick */\n    label?: string;\n  }[];\n\n  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  /**\n   * Use this to automatically show a label, like “~” for approximate values,\n   * before the slider’s value in the tooltip or input, giving users quick\n   * context about the number.\n   */\n  @Prop({ reflect: true })\n  readonly labelBeforeValue: string;\n\n  /**\n   * Use this to automatically show a label, like “$” or “kg,” after the value\n   * on the slider’s tooltip or input, helping users better understand the\n   * number.\n   */\n  @Prop({ reflect: true })\n  readonly labelAfterValue: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n\n  @State()\n  isDragging = false;\n\n  @State()\n  activeDragThumb: 'left' | 'right' | 'single' = 'single';\n\n  @State()\n  internalTicks: typeof this.ticks = [];\n\n  // These track the raw slider positions for visual display\n  @State()\n  rawPosition = 0;\n\n  @State()\n  rawRangePosition: [number, number] = [0, 0];\n\n  @State()\n  valueInternal: number = 0;\n\n  @State()\n  rangeValueInternal: [number, number] = [0, 0];\n\n  //#endregion STATE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Ensures value is valid and within bounds.\n   * @param {number} val - The value to validate\n   * @returns {number} The validated and snapped value\n   */\n  private validateValue(val: number): number {\n    // First ensure the value is within bounds\n    const clampedValue = clamp(val, this.min, this.max);\n\n    // If snapTicks is true and we have custom ticks, snap to the nearest tick\n    if (this.snapTicks && this.internalTicks && this.internalTicks.length > 0) {\n      return snapToTicks(clampedValue, this.internalTicks);\n    }\n\n    // Otherwise snap to step values\n    return snapToStep(clampedValue, this.min, this.max, this.step);\n  }\n\n  /**\n   * Parses the value string into a number or array of numbers for internal use.\n   */\n  private parseValue = (): void => {\n    const values = this.value.replace(/\\s/g, '').split(',');\n    if (values.length === 1) {\n      this.valueInternal = parseFloat(values[0]);\n    } else if (values.length === 2) {\n      values.forEach((value, index) => {\n        this.valueInternal = parseFloat(value);\n        this.rangeValueInternal[index] = this.valueInternal;\n      });\n    }\n  };\n\n  /**\n   * Handles value changes from slider interaction.\n   * @param {number | number[]} newValue - The new value or range values\n   */\n  private handleValueChange(newValue: number | number[]): void {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (this.range) {\n      // Handle range values\n      if (Array.isArray(newValue) && newValue.length === 2) {\n        // Ensure values are in order (left ≤ right)\n        const orderedValues = [\n          Math.min(newValue[0], newValue[1]),\n          Math.max(newValue[0], newValue[1]),\n        ];\n\n        // Snap to steps and clamp\n        const validatedValues: [number, number] = [\n          this.validateValue(orderedValues[0]),\n          this.validateValue(orderedValues[1]),\n        ];\n\n        if (\n          validatedValues[0] !== this.rangeValueInternal[0] ||\n          validatedValues[1] !== this.rangeValueInternal[1]\n        ) {\n          this.rangeValueInternal = validatedValues;\n          this.value = this.rangeValueInternal.join(',');\n          this.valueChanged.emit(this.rangeValueInternal.join(','));\n        }\n      }\n    } else {\n      // Handle single value\n      if (typeof newValue === 'number') {\n        const validatedValue = this.validateValue(newValue);\n\n        if (validatedValue !== this.valueInternal) {\n          this.valueInternal = validatedValue;\n          this.value = String(this.valueInternal);\n          this.valueChanged.emit(String(this.valueInternal));\n        }\n      }\n    }\n  }\n\n  /**\n   * Generates the ticks to display based on props and state.\n   */\n  private generateDisplayTicks(): void {\n    // If custom ticks are provided, always use them regardless of showTicks setting\n    if (this.ticks && this.ticks.length > 0) {\n      this.internalTicks = [...this.ticks].sort((a, b) => a.value - b.value);\n      return;\n    }\n\n    // If showTicks is false and there are no custom ticks, hide all ticks\n    if (!this.showTicks) {\n      this.internalTicks = [];\n      return;\n    }\n\n    // Generate all ticks at each step point\n    const autoTicks = generateTicks(this.min, this.max, this.step);\n    this.internalTicks = autoTicks.map(value => ({ value }));\n  }\n\n  /**\n   * Handles pointer events on the track.\n   * @param {PointerEvent} event - The pointer event\n   */\n  private onTrackInteraction = (event: PointerEvent): void => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const trackRect = (\n      event.currentTarget as HTMLElement\n    ).getBoundingClientRect();\n    const percentage = clamp(\n      ((event.clientX - trackRect.left) / trackRect.width) * 100,\n      0,\n      100,\n    );\n\n    const newValue = this.min + (percentage / 100) * (this.max - this.min);\n\n    // Store raw position for visual display\n    this.rawPosition = newValue;\n\n    if (this.range) {\n      // In range mode, determine which thumb to move based on proximity\n      const leftPct = valueToPercent(\n        this.rangeValueInternal[0],\n        this.min,\n        this.max,\n      );\n      const rightPct = valueToPercent(\n        this.rangeValueInternal[1],\n        this.min,\n        this.max,\n      );\n\n      const distanceToLeft = Math.abs(percentage - leftPct);\n      const distanceToRight = Math.abs(percentage - rightPct);\n\n      if (distanceToLeft <= distanceToRight) {\n        this.activeDragThumb = 'left';\n        this.rawRangePosition = [newValue, this.rawRangePosition[1]];\n        this.handleValueChange([newValue, this.rangeValueInternal[1]]);\n      } else {\n        this.activeDragThumb = 'right';\n        this.rawRangePosition = [this.rawRangePosition[0], newValue];\n        this.handleValueChange([this.rangeValueInternal[0], newValue]);\n      }\n    } else {\n      this.activeDragThumb = 'single';\n      this.rawPosition = newValue;\n      this.handleValueChange(newValue);\n    }\n\n    this.isDragging = true;\n    this.registerGlobalEvents();\n  };\n\n  /**\n   * Handles pointer move events during drag.\n   * @param {PointerEvent} event - The pointer event\n   */\n  private onPointerMove = (event: PointerEvent): void => {\n    if (!this.isDragging || this.disabled || this.readonly) {\n      return;\n    }\n\n    const trackElement = this.el.querySelector('.track') as HTMLElement;\n    if (!trackElement) return;\n\n    const trackRect = trackElement.getBoundingClientRect();\n    const percentage = clamp(\n      ((event.clientX - trackRect.left) / trackRect.width) * 100,\n      0,\n      100,\n    );\n\n    const newValue = this.min + (percentage / 100) * (this.max - this.min);\n\n    // Update visual position\n    if (this.range) {\n      if (this.activeDragThumb === 'left') {\n        this.rawRangePosition = [newValue, this.rawRangePosition[1]];\n        this.handleValueChange([newValue, this.rangeValueInternal[1]]);\n      } else {\n        this.rawRangePosition = [this.rawRangePosition[0], newValue];\n        this.handleValueChange([this.rangeValueInternal[0], newValue]);\n      }\n    } else {\n      this.rawPosition = newValue;\n      this.handleValueChange(newValue);\n    }\n  };\n\n  /**\n   * Handles the end of a drag operation.\n   */\n  private onPointerUp = (): void => {\n    this.isDragging = false;\n    this.removeGlobalEvents();\n  };\n\n  /**\n   * Registers global events for tracking pointer movement.\n   */\n  private registerGlobalEvents(): void {\n    document.addEventListener('pointermove', this.onPointerMove);\n    document.addEventListener('pointerup', this.onPointerUp);\n    document.addEventListener('pointercancel', this.onPointerUp);\n  }\n\n  /**\n   * Removes global events when tracking ends.\n   */\n  private removeGlobalEvents(): void {\n    document.removeEventListener('pointermove', this.onPointerMove);\n    document.removeEventListener('pointerup', this.onPointerUp);\n    document.removeEventListener('pointercancel', this.onPointerUp);\n  }\n\n  /**\n   * Handles keydown events for keyboard accessibility.\n   * @param {KeyboardEvent} event - The keyboard event\n   */\n  private onKeyDown = (event: KeyboardEvent): void => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    let newValue: number | number[];\n    const stepMultiplier = event.shiftKey ? 10 : 1;\n    const singleStep = this.step * stepMultiplier;\n\n    if (this.range) {\n      const focusedThumb = (event.target as HTMLElement).getAttribute(\n        'data-thumb',\n      );\n      const idx = focusedThumb === 'left' ? 0 : 1;\n      const currentValue = [...this.rangeValueInternal];\n\n      switch (event.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n          currentValue[idx] += singleStep;\n          break;\n        case 'ArrowLeft':\n        case 'ArrowDown':\n          currentValue[idx] -= singleStep;\n          break;\n        case 'Home':\n          currentValue[idx] = this.min;\n          break;\n        case 'End':\n          currentValue[idx] = this.max;\n          break;\n        case 'PageUp':\n          currentValue[idx] += singleStep * 10;\n          break;\n        case 'PageDown':\n          currentValue[idx] -= singleStep * 10;\n          break;\n        default:\n          return;\n      }\n\n      newValue = currentValue;\n    } else {\n      switch (event.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n          newValue = this.valueInternal + singleStep;\n          break;\n        case 'ArrowLeft':\n        case 'ArrowDown':\n          newValue = this.valueInternal - singleStep;\n          break;\n        case 'Home':\n          newValue = this.min;\n          break;\n        case 'End':\n          newValue = this.max;\n          break;\n        case 'PageUp':\n          newValue = this.valueInternal + singleStep * 10;\n          break;\n        case 'PageDown':\n          newValue = this.valueInternal - singleStep * 10;\n          break;\n        default:\n          return;\n      }\n    }\n\n    event.preventDefault();\n    this.handleValueChange(newValue);\n  };\n\n  /**\n   * Handles field input value changes.\n   * @param {Event} event - The input event\n   */\n  private handleFieldChange = (event: Event): void => {\n    const input = event.target as HTMLInputElement;\n    const newValue = parseFloat(input.value);\n\n    if (isNaN(newValue)) {\n      return;\n    }\n\n    if (this.range) {\n      const fieldIndex = input.getAttribute('data-index') === '0' ? 0 : 1;\n      const updatedRange = [...this.rangeValueInternal];\n      updatedRange[fieldIndex] = newValue;\n      this.handleValueChange(updatedRange);\n    } else {\n      this.handleValueChange(newValue);\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('value')\n  onValueChange() {\n    this.parseValue();\n  }\n\n  @Watch('min')\n  @Watch('max')\n  @Watch('step')\n  @Watch('ticks')\n  @Watch('showTicks')\n  @Watch('snap')\n  @Watch('snapTicks')\n  onConfigChange() {\n    this.generateDisplayTicks();\n\n    if (this.range) {\n      this.handleValueChange(this.rangeValueInternal);\n    } else {\n      this.handleValueChange(this.valueInternal);\n    }\n  }\n\n  @Watch('range')\n  onRangeChange(newValue: boolean) {\n    if (newValue) {\n      // Switching to range mode\n      this.rangeValueInternal = [this.min, this.valueInternal];\n    } else {\n      // Switching to single mode, take the higher value\n      this.valueInternal = this.rangeValueInternal[1];\n    }\n  }\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n  connectedCallback() {\n    this.parseValue();\n    this.generateDisplayTicks();\n\n    // Initialize values and make sure they're valid\n    if (this.range) {\n      if (\n        !Array.isArray(this.rangeValueInternal) ||\n        this.rangeValueInternal.length !== 2\n      ) {\n        this.rangeValueInternal = [this.min, this.max];\n      }\n      this.handleValueChange(this.rangeValueInternal);\n      // Initialize raw range position to match actual values\n      this.rawRangePosition = [\n        this.rangeValueInternal[0],\n        this.rangeValueInternal[1],\n      ];\n    } else {\n      this.handleValueChange(this.valueInternal);\n      // Initialize raw position to match actual value\n      this.rawPosition = this.valueInternal;\n    }\n  }\n\n  disconnectedCallback() {\n    this.removeGlobalEvents();\n  }\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the slider values change.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.startInputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"slider-container\">\n          {/* First input (always render for the start value, but may be hidden) */}\n          {this.range ? (\n            <FieldInput\n              range={this.range}\n              hasField={this.hasField}\n              value={this.valueInternal}\n              rangeValue={this.rangeValueInternal}\n              index={0}\n              inputId={this.startInputId}\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              onInput={this.handleFieldChange}\n              labelBeforeValue={this.labelBeforeValue}\n              labelAfterValue={this.labelAfterValue}\n              name={this.name}\n              endName={this.endName}\n            />\n          ) : null}\n\n          <div class=\"track-container\">\n            <div class=\"track\" onPointerDown={this.onTrackInteraction}>\n              {this.range ? (\n                <RangeThumb\n                  rangeValue={this.rangeValueInternal}\n                  rawRangePosition={this.rawRangePosition}\n                  activeDragThumb={this.activeDragThumb}\n                  isDragging={this.isDragging}\n                  snap={this.snap}\n                  min={this.min}\n                  max={this.max}\n                  disabled={this.disabled}\n                  readonly={this.readonly}\n                  onKeyDown={this.onKeyDown}\n                  labelBeforeValue={this.labelBeforeValue}\n                  labelAfterValue={this.labelAfterValue}\n                />\n              ) : (\n                <SingleThumb\n                  value={this.valueInternal}\n                  min={this.min}\n                  max={this.max}\n                  rawPosition={this.rawPosition}\n                  isDragging={this.isDragging}\n                  snap={this.snap}\n                  disabled={this.disabled}\n                  readonly={this.readonly}\n                  onKeyDown={this.onKeyDown}\n                  labelBeforeValue={this.labelBeforeValue}\n                  labelAfterValue={this.labelAfterValue}\n                />\n              )}\n            </div>\n\n            <TickMarks\n              ticks={this.internalTicks}\n              min={this.min}\n              max={this.max}\n            />\n          </div>\n\n          {/* Second input (for range mode, or for single value if not already rendered) */}\n          {this.range ? (\n            <FieldInput\n              range={this.range}\n              hasField={this.hasField}\n              value={this.valueInternal}\n              rangeValue={this.rangeValueInternal}\n              index={1}\n              inputId={this.endInputId}\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              onInput={this.handleFieldChange}\n              labelBeforeValue={this.labelBeforeValue}\n              labelAfterValue={this.labelAfterValue}\n              name={this.name}\n              endName={this.endName}\n            />\n          ) : (\n            <FieldInput\n              range={this.range}\n              hasField={this.hasField}\n              value={this.valueInternal}\n              rangeValue={this.rangeValueInternal}\n              inputId={this.startInputId}\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              onInput={this.handleFieldChange}\n              labelBeforeValue={this.labelBeforeValue}\n              labelAfterValue={this.labelAfterValue}\n              name={this.name}\n            />\n          )}\n        </div>\n\n        {(this.success ||\n          this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            {this.success && (\n              <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n            )}\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.error ||\n          this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div class=\"error-description\" hidden={!this.error}>\n            {this.error && (\n              <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n            )}\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"]}

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

@@ -0,0 +1,77 @@
+/**
+ * Utility functions for nv-fieldslider.
+ */
+/**
+ * Clamp a value between min and max.
+ * @param {number} value - The value to clamp
+ * @param {number} min - The minimum boundary
+ * @param {number} max - The maximum boundary
+ * @returns {number} The clamped value
+ */
+export function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+/**
+ * Calculate the percentage position of a value within a range.
+ * @param {number} value - The value to convert to percentage
+ * @param {number} min - The minimum value of the range
+ * @param {number} max - The maximum value of the range
+ * @returns {number} The percentage (0-100)
+ */
+export function valueToPercent(value, min, max) {
+    if (max === min)
+        return 0;
+    return ((value - min) / (max - min)) * 100;
+}
+/**
+ * Snap a value to the nearest step.
+ * @param {number} value - The value to snap
+ * @param {number} min - The minimum boundary
+ * @param {number} max - The maximum boundary
+ * @param {number} step - The step size
+ * @returns {number} The snapped value
+ */
+export function snapToStep(value, min, max, step) {
+    const clamped = clamp(value, min, max);
+    const snapped = Math.round((clamped - min) / step) * step + min;
+    return clamp(snapped, min, max);
+}
+/**
+ * Generate tick values for the slider.
+ * @param {number} min - The minimum value
+ * @param {number} max - The maximum value
+ * @param {number} step - The step size
+ * @returns {number[]} Array of tick values
+ */
+export function generateTicks(min, max, step) {
+    const ticks = [];
+    for (let v = min; v <= max; v += step) {
+        ticks.push(Number(v.toFixed(10))); // avoid floating point issues
+    }
+    if (ticks[ticks.length - 1] !== max) {
+        ticks.push(max);
+    }
+    return ticks;
+}
+/**
+ * Snap a value to the nearest tick mark.
+ * @param {number} value - The value to snap
+ * @param {object[]} ticks - Array of tick objects
+ * @returns {number} The value of the closest tick
+ */
+export function snapToTicks(value, ticks) {
+    if (!ticks || ticks.length === 0)
+        return value;
+    // Find the closest tick
+    let closestTick = ticks[0].value;
+    let minDistance = Math.abs(value - closestTick);
+    for (const tick of ticks) {
+        const distance = Math.abs(value - tick.value);
+        if (distance < minDistance) {
+            minDistance = distance;
+            closestTick = tick.value;
+        }
+    }
+    return closestTick;
+}
+//# sourceMappingURL=nv-fieldslider.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fieldslider.utils.js","sourceRoot":"","sources":["../../../src/components/nv-fieldslider/nv-fieldslider.utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;;;GAMG;AACH,MAAM,UAAU,KAAK,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;IAC3D,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;AAC7C,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAC5B,KAAa,EACb,GAAW,EACX,GAAW;IAEX,IAAI,GAAG,KAAK,GAAG;QAAE,OAAO,CAAC,CAAC;IAC1B,OAAO,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;AAC7C,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,UAAU,CACxB,KAAa,EACb,GAAW,EACX,GAAW,EACX,IAAY;IAEZ,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IACvC,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,GAAG,CAAC;IAChE,OAAO,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;AAClC,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAC3B,GAAW,EACX,GAAW,EACX,IAAY;IAEZ,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,KAAK,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC;QACtC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,8BAA8B;IACnE,CAAC;IACD,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;QACpC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAClB,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CACzB,KAAa,EACb,KAGG;IAEH,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC;IAE/C,wBAAwB;IACxB,IAAI,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACjC,IAAI,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,WAAW,CAAC,CAAC;IAEhD,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,QAAQ,GAAG,WAAW,EAAE,CAAC;YAC3B,WAAW,GAAG,QAAQ,CAAC;YACvB,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,OAAO,WAAW,CAAC;AACrB,CAAC","sourcesContent":["/**\n * Utility functions for nv-fieldslider.\n */\n\n/**\n * Clamp a value between min and max.\n * @param {number} value - The value to clamp\n * @param {number} min - The minimum boundary\n * @param {number} max - The maximum boundary\n * @returns {number} The clamped value\n */\nexport function clamp(value: number, min: number, max: number): number {\n  return Math.max(min, Math.min(max, value));\n}\n\n/**\n * Calculate the percentage position of a value within a range.\n * @param {number} value - The value to convert to percentage\n * @param {number} min - The minimum value of the range\n * @param {number} max - The maximum value of the range\n * @returns {number} The percentage (0-100)\n */\nexport function valueToPercent(\n  value: number,\n  min: number,\n  max: number,\n): number {\n  if (max === min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n\n/**\n * Snap a value to the nearest step.\n * @param {number} value - The value to snap\n * @param {number} min - The minimum boundary\n * @param {number} max - The maximum boundary\n * @param {number} step - The step size\n * @returns {number} The snapped value\n */\nexport function snapToStep(\n  value: number,\n  min: number,\n  max: number,\n  step: number,\n): number {\n  const clamped = clamp(value, min, max);\n  const snapped = Math.round((clamped - min) / step) * step + min;\n  return clamp(snapped, min, max);\n}\n\n/**\n * Generate tick values for the slider.\n * @param {number} min - The minimum value\n * @param {number} max - The maximum value\n * @param {number} step - The step size\n * @returns {number[]} Array of tick values\n */\nexport function generateTicks(\n  min: number,\n  max: number,\n  step: number,\n): number[] {\n  const ticks: number[] = [];\n  for (let v = min; v <= max; v += step) {\n    ticks.push(Number(v.toFixed(10))); // avoid floating point issues\n  }\n  if (ticks[ticks.length - 1] !== max) {\n    ticks.push(max);\n  }\n  return ticks;\n}\n\n/**\n * Snap a value to the nearest tick mark.\n * @param {number} value - The value to snap\n * @param {object[]} ticks - Array of tick objects\n * @returns {number} The value of the closest tick\n */\nexport function snapToTicks(\n  value: number,\n  ticks: {\n    /** The value of the tick */\n    value: number;\n  }[],\n) {\n  if (!ticks || ticks.length === 0) return value;\n\n  // Find the closest tick\n  let closestTick = ticks[0].value;\n  let minDistance = Math.abs(value - closestTick);\n\n  for (const tick of ticks) {\n    const distance = Math.abs(value - tick.value);\n    if (distance < minDistance) {\n      minDistance = distance;\n      closestTick = tick.value;\n    }\n  }\n\n  return closestTick;\n}\n"]}

package/dist/collection/components/nv-fieldslider/partials/field-input.js

@@ -0,0 +1,33 @@
+import { h } from "@stencil/core";
+/**
+ * Renders field input for direct value entry
+ * @param {FieldInputProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the field input
+ */
+export const FieldInput = props => {
+    const { range, hasField, value, rangeValue, index, inputId, min, max, step, disabled, readonly, onInput, labelBeforeValue, labelAfterValue, name, endName, } = props;
+    // Determine the appropriate value based on mode and index
+    const fieldValue = range ? rangeValue[index] : value;
+    // In range mode, we need data-index for event handling
+    const dataAttrs = range ? { 'data-index': index.toString() } : {};
+    // Determine the appropriate name based on mode and index
+    let inputName;
+    if (range) {
+        if (index === 0) {
+            inputName = name || '';
+        }
+        else {
+            // Use endName if provided, otherwise append "-end" to the name
+            inputName = endName || (name ? `${name}-end` : '');
+        }
+    }
+    else {
+        inputName = name || '';
+    }
+    // If hasField is false, only the containers are visible, not the input fields
+    const containerClass = hasField
+        ? 'input-container'
+        : 'input-container hidden-input';
+    return hasField ? (h("div", { class: containerClass }, labelBeforeValue && h("span", { class: "label-before" }, labelBeforeValue), h("input", Object.assign({ id: inputId, type: "number", value: fieldValue, min: min, max: max, step: step, disabled: disabled, readonly: readonly, name: inputName }, dataAttrs, { onInput: onInput })), labelAfterValue && h("span", { class: "label-after" }, labelAfterValue))) : (h("input", { id: inputId, type: "hidden", value: fieldValue, disabled: disabled, readonly: readonly, name: inputName }));
+};
+//# sourceMappingURL=field-input.js.map

package/dist/collection/components/nv-fieldslider/partials/field-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-input.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldslider/partials/field-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAwCvD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAyC,KAAK,CAAC,EAAE;IACtE,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,OAAO,EACP,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,eAAe,EACf,IAAI,EACJ,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,0DAA0D;IAC1D,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAErD,uDAAuD;IACvD,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAElE,yDAAyD;IACzD,IAAI,SAAiB,CAAC;IACtB,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAChB,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,+DAA+D;YAC/D,SAAS,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;SAAM,CAAC;QACN,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,8EAA8E;IAC9E,MAAM,cAAc,GAAG,QAAQ;QAC7B,CAAC,CAAC,iBAAiB;QACnB,CAAC,CAAC,8BAA8B,CAAC;IAEnC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,WAAK,KAAK,EAAE,cAAc;QACvB,gBAAgB,IAAI,YAAM,KAAK,EAAC,cAAc,IAAE,gBAAgB,CAAQ;QACzE,2BACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,UAAU,EACjB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,SAAS,IACX,SAAS,IACb,OAAO,EAAE,OAAO,IAChB;QACD,eAAe,IAAI,YAAM,KAAK,EAAC,aAAa,IAAE,eAAe,CAAQ,CAClE,CACP,CAAC,CAAC,CAAC,CACF,aACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,SAAS,GACf,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Props for the FieldInput component\n */\ninterface FieldInputProps {\n  /** Whether this is a range slider */\n  range: boolean;\n  /** Whether to show the input field */\n  hasField: boolean;\n  /** The value for single mode */\n  value: number;\n  /** The values for range mode [min, max] */\n  rangeValue: number[];\n  /** Index (0 or 1) for range mode, ignored in single mode */\n  index?: number;\n  /** ID for the input field */\n  inputId: string;\n  /** Minimum allowed value */\n  min: number;\n  /** Maximum allowed value */\n  max: number;\n  /** Step size */\n  step: number;\n  /** Whether the slider is disabled */\n  disabled: boolean;\n  /** Whether the slider is readonly */\n  readonly: boolean;\n  /** Handler for input changes */\n  onInput: (event: Event) => void;\n  /** Label to display before the value */\n  labelBeforeValue?: string;\n  /** Label to display after the value */\n  labelAfterValue?: string;\n  /** Name attribute for the input field (for form submission) */\n  name?: string;\n  /** Name attribute for the end input field (when in range mode) */\n  endName?: string;\n}\n\n/**\n * Renders field input for direct value entry\n * @param {FieldInputProps} props - Component properties\n * @returns {JSX.Element} JSX element representing the field input\n */\nexport const FieldInput: FunctionalComponent<FieldInputProps> = props => {\n  const {\n    range,\n    hasField,\n    value,\n    rangeValue,\n    index,\n    inputId,\n    min,\n    max,\n    step,\n    disabled,\n    readonly,\n    onInput,\n    labelBeforeValue,\n    labelAfterValue,\n    name,\n    endName,\n  } = props;\n\n  // Determine the appropriate value based on mode and index\n  const fieldValue = range ? rangeValue[index] : value;\n\n  // In range mode, we need data-index for event handling\n  const dataAttrs = range ? { 'data-index': index.toString() } : {};\n\n  // Determine the appropriate name based on mode and index\n  let inputName: string;\n  if (range) {\n    if (index === 0) {\n      inputName = name || '';\n    } else {\n      // Use endName if provided, otherwise append \"-end\" to the name\n      inputName = endName || (name ? `${name}-end` : '');\n    }\n  } else {\n    inputName = name || '';\n  }\n\n  // If hasField is false, only the containers are visible, not the input fields\n  const containerClass = hasField\n    ? 'input-container'\n    : 'input-container hidden-input';\n\n  return hasField ? (\n    <div class={containerClass}>\n      {labelBeforeValue && <span class=\"label-before\">{labelBeforeValue}</span>}\n      <input\n        id={inputId}\n        type=\"number\"\n        value={fieldValue}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        readonly={readonly}\n        name={inputName}\n        {...dataAttrs}\n        onInput={onInput}\n      />\n      {labelAfterValue && <span class=\"label-after\">{labelAfterValue}</span>}\n    </div>\n  ) : (\n    <input\n      id={inputId}\n      type=\"hidden\"\n      value={fieldValue}\n      disabled={disabled}\n      readonly={readonly}\n      name={inputName}\n    />\n  );\n};\n"]}

package/dist/collection/components/nv-fieldslider/partials/range-thumb.js

@@ -0,0 +1,34 @@
+import { h } from "@stencil/core";
+import { valueToPercent, clamp } from "../nv-fieldslider.utils";
+/**
+ * Renders dual thumbs in range mode.
+ * @param {RangeThumbProps} props - Component properties
+ * @returns {JSX.Element[]} Array of JSX elements representing the range slider thumbs
+ */
+export const RangeThumb = props => {
+    const { rangeValue, rawRangePosition, activeDragThumb, isDragging, snap, min, max, disabled, readonly, onKeyDown, labelBeforeValue, labelAfterValue, } = props;
+    const [leftValue, rightValue] = rangeValue;
+    // Use raw positions for visual display during dragging, but the snapped values otherwise
+    let displayLeftPosition = leftValue;
+    let displayRightPosition = rightValue;
+    if (isDragging && !snap) {
+        const [rawLeft, rawRight] = rawRangePosition;
+        if (activeDragThumb === 'left') {
+            displayLeftPosition = clamp(rawLeft, min, Math.min(rightValue, max));
+        }
+        else if (activeDragThumb === 'right') {
+            displayRightPosition = clamp(rawRight, Math.max(leftValue, min), max);
+        }
+    }
+    const leftPercent = valueToPercent(displayLeftPosition, min, max);
+    const rightPercent = valueToPercent(displayRightPosition, min, max);
+    return [
+        h("div", { class: "track-range", style: {
+                left: `${leftPercent}%`,
+                width: `${rightPercent - leftPercent}%`,
+            } }),
+        h("div", { class: "thumb thumb-left", style: { left: `${leftPercent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": leftValue, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, "data-thumb": "left", tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown }, h("div", { class: "thumb-tooltip" }, labelBeforeValue && (h("span", { class: "label-before" }, labelBeforeValue)), String(leftValue), labelAfterValue && h("span", { class: "label-after" }, labelAfterValue))),
+        h("div", { class: "thumb thumb-right", style: { left: `${rightPercent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": rightValue, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, "data-thumb": "right", tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown }, h("div", { class: "thumb-tooltip" }, labelBeforeValue && (h("span", { class: "label-before" }, labelBeforeValue)), String(rightValue), labelAfterValue && h("span", { class: "label-after" }, labelAfterValue))),
+    ];
+};
+//# sourceMappingURL=range-thumb.js.map

package/dist/collection/components/nv-fieldslider/partials/range-thumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-thumb.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldslider/partials/range-thumb.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { valueToPercent, clamp } from '../nv-fieldslider.utils';\n\n/**\n * Props for the RangeThumb component\n */\ninterface RangeThumbProps {\n  /** Range values [left, right] */\n  rangeValue: number[];\n  /** Raw positions during dragging [left, right] */\n  rawRangePosition: [number, number];\n  /** Currently active thumb while dragging */\n  activeDragThumb: 'left' | 'right' | 'single';\n  /** Whether the thumb is currently being dragged */\n  isDragging: boolean;\n  /** Whether the thumb should visually snap to steps */\n  snap: boolean;\n  /** Minimum allowed value */\n  min: number;\n  /** Maximum allowed value */\n  max: number;\n  /** Whether the slider is disabled */\n  disabled: boolean;\n  /** Whether the slider is readonly */\n  readonly: boolean;\n  /** Key down event handler */\n  onKeyDown: (event: KeyboardEvent) => void;\n  /** Label to display before the value */\n  labelBeforeValue?: string;\n  /** Label to display after the value */\n  labelAfterValue?: string;\n}\n\n/**\n * Renders dual thumbs in range mode.\n * @param {RangeThumbProps} props - Component properties\n * @returns {JSX.Element[]} Array of JSX elements representing the range slider thumbs\n */\nexport const RangeThumb: FunctionalComponent<RangeThumbProps> = props => {\n  const {\n    rangeValue,\n    rawRangePosition,\n    activeDragThumb,\n    isDragging,\n    snap,\n    min,\n    max,\n    disabled,\n    readonly,\n    onKeyDown,\n    labelBeforeValue,\n    labelAfterValue,\n  } = props;\n\n  const [leftValue, rightValue] = rangeValue;\n\n  // Use raw positions for visual display during dragging, but the snapped values otherwise\n  let displayLeftPosition = leftValue;\n  let displayRightPosition = rightValue;\n\n  if (isDragging && !snap) {\n    const [rawLeft, rawRight] = rawRangePosition;\n    if (activeDragThumb === 'left') {\n      displayLeftPosition = clamp(rawLeft, min, Math.min(rightValue, max));\n    } else if (activeDragThumb === 'right') {\n      displayRightPosition = clamp(rawRight, Math.max(leftValue, min), max);\n    }\n  }\n\n  const leftPercent = valueToPercent(displayLeftPosition, min, max);\n  const rightPercent = valueToPercent(displayRightPosition, min, max);\n\n  return [\n    <div\n      class=\"track-range\"\n      style={{\n        left: `${leftPercent}%`,\n        width: `${rightPercent - leftPercent}%`,\n      }}\n    />,\n    <div\n      class=\"thumb thumb-left\"\n      style={{ left: `${leftPercent}%` }}\n      role=\"slider\"\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={leftValue} // Always use the snapped value for ARIA\n      aria-disabled={disabled ? 'true' : undefined}\n      aria-readonly={readonly ? 'true' : undefined}\n      data-thumb=\"left\"\n      tabindex={disabled ? -1 : 0}\n      onKeyDown={onKeyDown}\n    >\n      <div class=\"thumb-tooltip\">\n        {labelBeforeValue && (\n          <span class=\"label-before\">{labelBeforeValue}</span>\n        )}\n        {String(leftValue)}\n        {labelAfterValue && <span class=\"label-after\">{labelAfterValue}</span>}\n      </div>\n    </div>,\n    <div\n      class=\"thumb thumb-right\"\n      style={{ left: `${rightPercent}%` }}\n      role=\"slider\"\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={rightValue} // Always use the snapped value for ARIA\n      aria-disabled={disabled ? 'true' : undefined}\n      aria-readonly={readonly ? 'true' : undefined}\n      data-thumb=\"right\"\n      tabindex={disabled ? -1 : 0}\n      onKeyDown={onKeyDown}\n    >\n      <div class=\"thumb-tooltip\">\n        {labelBeforeValue && (\n          <span class=\"label-before\">{labelBeforeValue}</span>\n        )}\n        {String(rightValue)}\n        {labelAfterValue && <span class=\"label-after\">{labelAfterValue}</span>}\n      </div>\n    </div>,\n  ];\n};\n"]}

package/dist/collection/components/nv-fieldslider/partials/single-thumb.js

@@ -0,0 +1,18 @@
+import { h } from "@stencil/core";
+import { valueToPercent, clamp } from "../nv-fieldslider.utils";
+/**
+ * Renders single thumb in standard mode.
+ * @param {SingleThumbProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the thumb
+ */
+export const SingleThumb = props => {
+    const { value, min, max, rawPosition, isDragging, snap, disabled, readonly, onKeyDown, labelBeforeValue, labelAfterValue, } = props;
+    // Use raw position for visual display during dragging, but the snapped value otherwise
+    let displayPosition = value;
+    if (isDragging && !snap) {
+        displayPosition = clamp(rawPosition, min, max);
+    }
+    const percent = valueToPercent(displayPosition, min, max);
+    return (h("div", { class: "thumb", style: { left: `${percent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown }, h("div", { class: "thumb-tooltip" }, labelBeforeValue && (h("span", { class: "label-before" }, labelBeforeValue)), String(value), labelAfterValue && h("span", { class: "label-after" }, labelAfterValue))));
+};
+//# sourceMappingURL=single-thumb.js.map

package/dist/collection/components/nv-fieldslider/partials/single-thumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"single-thumb.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldslider/partials/single-thumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AA8BhE;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAA0C,KAAK,CAAC,EAAE;IACxE,MAAM,EACJ,KAAK,EACL,GAAG,EACH,GAAG,EACH,WAAW,EACX,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,eAAe,GAChB,GAAG,KAAK,CAAC;IAEV,uFAAuF;IACvF,IAAI,eAAe,GAAG,KAAK,CAAC;IAC5B,IAAI,UAAU,IAAI,CAAC,IAAI,EAAE,CAAC;QACxB,eAAe,GAAG,KAAK,CAAC,WAAW,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IACjD,CAAC;IAED,MAAM,OAAO,GAAG,cAAc,CAAC,eAAe,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAE1D,OAAO,CACL,WACE,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,OAAO,GAAG,EAAE,EAC9B,IAAI,EAAC,QAAQ,mBACE,GAAG,mBACH,GAAG,mBACH,KAAK,mBACL,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBAC7B,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,SAAS,EAAE,SAAS;QAEpB,WAAK,KAAK,EAAC,eAAe;YACvB,gBAAgB,IAAI,CACnB,YAAM,KAAK,EAAC,cAAc,IAAE,gBAAgB,CAAQ,CACrD;YACA,MAAM,CAAC,KAAK,CAAC;YACb,eAAe,IAAI,YAAM,KAAK,EAAC,aAAa,IAAE,eAAe,CAAQ,CAClE,CACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { valueToPercent, clamp } from '../nv-fieldslider.utils';\n\n/**\n * Props for the SingleThumb component\n */\ninterface SingleThumbProps {\n  /** Current value of the slider */\n  value: number;\n  /** Minimum allowed value */\n  min: number;\n  /** Maximum allowed value */\n  max: number;\n  /** Raw position during dragging */\n  rawPosition: number;\n  /** Whether the thumb is currently being dragged */\n  isDragging: boolean;\n  /** Whether the thumb should visually snap to steps */\n  snap: boolean;\n  /** Whether the slider is disabled */\n  disabled: boolean;\n  /** Whether the slider is readonly */\n  readonly: boolean;\n  /** Key down event handler */\n  onKeyDown: (event: KeyboardEvent) => void;\n  /** Label to display before the value */\n  labelBeforeValue?: string;\n  /** Label to display after the value */\n  labelAfterValue?: string;\n}\n\n/**\n * Renders single thumb in standard mode.\n * @param {SingleThumbProps} props - Component properties\n * @returns {JSX.Element} JSX element representing the thumb\n */\nexport const SingleThumb: FunctionalComponent<SingleThumbProps> = props => {\n  const {\n    value,\n    min,\n    max,\n    rawPosition,\n    isDragging,\n    snap,\n    disabled,\n    readonly,\n    onKeyDown,\n    labelBeforeValue,\n    labelAfterValue,\n  } = props;\n\n  // Use raw position for visual display during dragging, but the snapped value otherwise\n  let displayPosition = value;\n  if (isDragging && !snap) {\n    displayPosition = clamp(rawPosition, min, max);\n  }\n\n  const percent = valueToPercent(displayPosition, min, max);\n\n  return (\n    <div\n      class=\"thumb\"\n      style={{ left: `${percent}%` }}\n      role=\"slider\"\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={value}\n      aria-disabled={disabled ? 'true' : undefined}\n      aria-readonly={readonly ? 'true' : undefined}\n      tabindex={disabled ? -1 : 0}\n      onKeyDown={onKeyDown}\n    >\n      <div class=\"thumb-tooltip\">\n        {labelBeforeValue && (\n          <span class=\"label-before\">{labelBeforeValue}</span>\n        )}\n        {String(value)}\n        {labelAfterValue && <span class=\"label-after\">{labelAfterValue}</span>}\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/collection/components/nv-fieldslider/partials/tick-marks.js

@@ -0,0 +1,18 @@
+import { h } from "@stencil/core";
+import { valueToPercent } from "../nv-fieldslider.utils";
+/**
+ * Renders tick marks along the slider track.
+ * @param {TickMarksProps} props - Component properties
+ * @returns {JSX.Element | null} JSX element representing the tick marks or null if no ticks
+ */
+export const TickMarks = props => {
+    const { ticks, min, max } = props;
+    if (ticks.length === 0) {
+        return null;
+    }
+    return (h("div", { class: "track-ticks" }, ticks.map(tick => {
+        const percent = valueToPercent(tick.value, min, max);
+        return (h("div", { class: "track-tick", style: { left: `${percent}%` } }, tick.label && h("div", { class: "tick-label" }, tick.label)));
+    })));
+};
+//# sourceMappingURL=tick-marks.js.map

package/dist/collection/components/nv-fieldslider/partials/tick-marks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tick-marks.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldslider/partials/tick-marks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAwBzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAwC,KAAK,CAAC,EAAE;IACpE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IAElC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,WAAK,KAAK,EAAC,aAAa,IACrB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QAChB,MAAM,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QACrD,OAAO,CACL,WAAK,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,OAAO,GAAG,EAAE,IACnD,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAO,CACrD,CACP,CAAC;IACJ,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { valueToPercent } from '../nv-fieldslider.utils';\n\n/**\n * Represents a tick mark on the slider\n */\ninterface Tick {\n  /** The numeric value of the tick */\n  value: number;\n  /** Optional label for the tick */\n  label?: string;\n}\n\n/**\n * Props for the TickMarks component\n */\ninterface TickMarksProps {\n  /** Array of tick definitions */\n  ticks: Tick[];\n  /** Minimum allowed value */\n  min: number;\n  /** Maximum allowed value */\n  max: number;\n}\n\n/**\n * Renders tick marks along the slider track.\n * @param {TickMarksProps} props - Component properties\n * @returns {JSX.Element | null} JSX element representing the tick marks or null if no ticks\n */\nexport const TickMarks: FunctionalComponent<TickMarksProps> = props => {\n  const { ticks, min, max } = props;\n\n  if (ticks.length === 0) {\n    return null;\n  }\n\n  return (\n    <div class=\"track-ticks\">\n      {ticks.map(tick => {\n        const percent = valueToPercent(tick.value, min, max);\n        return (\n          <div class=\"track-tick\" style={{ left: `${percent}%` }}>\n            {tick.label && <div class=\"tick-label\">{tick.label}</div>}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"]}

package/dist/collection/components/nv-fieldslider/styles/nv-fieldslider.css

@@ -0,0 +1,267 @@
+nv-fieldslider {
+  --nv-field-border-default: var(--components-form-field-border-default);
+  --nv-field-border-hover: var(--components-form-field-border-hover);
+  --nv-field-border-focus: var(--components-form-field-border-focus);
+  --nv-field-border-disabled: var(--components-form-field-border-default);
+  --nv-field-border-readonly: var(--components-form-field-border-default);
+  --nv-field-focus-box-shadow: var(--color-focus-brand);
+  --nv-field-background: var(--components-form-field-background-default);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--form-gap-y);
+  box-sizing: border-box;
+  max-width: 480px;
+}
+nv-fieldslider .slider-container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--form-gap-x);
+}
+nv-fieldslider .slider-container .track-container {
+  position: relative;
+  flex: 1;
+  height: calc(16px + 0.25rem);
+  padding: calc(16px / 2) 0;
+}
+nv-fieldslider .slider-container .track-container .track {
+  position: relative;
+  height: 4px;
+  background: #e5e7eb;
+  border-radius: 4px;
+  cursor: pointer;
+}
+nv-fieldslider .slider-container .track-container .track .track-range {
+  position: absolute;
+  top: 0;
+  height: 4px;
+  background: var(--nv-field-border-focus);
+  border-radius: 4px;
+  pointer-events: none;
+}
+nv-fieldslider .slider-container .track-container .track .thumb {
+  position: absolute;
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  background: #ffffff;
+  border: 2px solid var(--nv-field-border-focus);
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  cursor: grab;
+  transition: box-shadow 0.2s, background-color 0.2s;
+}
+nv-fieldslider .slider-container .track-container .track .thumb:focus {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
+  outline: 6px solid color-mix(in srgb, var(--nv-field-border-focus) 50%, transparent);
+  transition: outline;
+}
+nv-fieldslider .slider-container .track-container .track .thumb:active {
+  cursor: grabbing;
+  background-color: #e6f7ff;
+}
+nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip {
+  position: absolute;
+  top: 25px;
+  left: 50%;
+  background-color: var(--components-tooltip-background);
+  color: var(--components-tooltip-text);
+  padding: 5px;
+  border-radius: var(--tooltip-radius);
+  font-size: var(--tooltip-font-size);
+  z-index: 10;
+  pointer-events: none;
+  user-select: none;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  transform: translateX(-50%);
+}
+nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip:after {
+  content: "";
+  background: var(--components-tooltip-background);
+  box-shadow: none;
+  border: none;
+  position: absolute;
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+  width: 6px;
+  height: 6px;
+  transform: rotate(45deg);
+  border-radius: 1px;
+  top: -3px;
+  left: 50%;
+  margin-left: -3px;
+}
+nv-fieldslider .slider-container .track-container .track .thumb:hover .thumb-tooltip, nv-fieldslider .slider-container .track-container .track .thumb:active .thumb-tooltip, nv-fieldslider .slider-container .track-container .track .thumb:focus .thumb-tooltip {
+  opacity: 1;
+}
+nv-fieldslider .slider-container .track-container .track-ticks {
+  position: relative;
+  height: 1rem;
+  margin-top: 0.25rem;
+}
+nv-fieldslider .slider-container .track-container .track-ticks .track-tick {
+  position: absolute;
+  top: 0;
+  width: 6px;
+  height: 6px;
+  background: var(--components-form-field-border-default);
+  border-radius: 50%;
+  transform: translate(-50%, 0);
+  pointer-events: none;
+}
+nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label {
+  position: absolute;
+  top: calc(6px + 0.25rem);
+  left: 50%;
+  color: var(--components-form-field-border-default);
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+nv-fieldslider .slider-container .input-container {
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  border-radius: var(--form-field-radius);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--nv-field-border-default);
+  opacity: var(--components-form-opacity-default, 1);
+  background: var(--nv-field-background);
+  transition: all 150ms ease-out;
+  width: 64px;
+  flex-grow: unset;
+}
+nv-fieldslider .slider-container .input-container:hover {
+  border-color: var(--nv-field-border-hover);
+}
+nv-fieldslider .slider-container .input-container:focus-within, nv-fieldslider .slider-container .input-container:focus-within:hover, nv-fieldslider .slider-container .input-container:focus, nv-fieldslider .slider-container .input-container:focus:hover {
+  border-color: var(--nv-field-border-focus);
+  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
+}
+nv-fieldslider .slider-container .input-container:has(input:read-only) {
+  opacity: 0.5;
+  background-color: var(--components-form-field-background-readonly);
+  border-color: var(--nv-field-border-readonly);
+}
+nv-fieldslider .slider-container .input-container:has(input:disabled) {
+  opacity: 0.5;
+  background-color: var(--components-form-field-background-disabled);
+  border-color: var(--nv-field-border-disabled);
+}
+nv-fieldslider .slider-container .input-container input {
+  display: flex;
+  align-items: center;
+  flex: 1 0 0;
+  overflow: hidden;
+  background-color: transparent;
+  color: var(--components-form-field-content-text);
+  padding: var(--form-field-padding-y) var(--form-field-padding-x);
+  font-size: var(--form-field-font-size);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--form-field-line-height);
+  width: 100%;
+}
+nv-fieldslider .slider-container .input-container input:focus {
+  outline: none;
+}
+nv-fieldslider .slider-container .input-container input::placeholder {
+  overflow: hidden;
+  color: var(--components-form-field-content-placeholder);
+  text-overflow: ellipsis;
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-field-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--form-field-line-height);
+}
+nv-fieldslider[fluid]:not([fluid=false]) {
+  max-width: unset;
+}
+nv-fieldslider[error]:not([error=false]) {
+  --nv-field-border-default: var(--components-form-field-border-error);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--nv-field-border-default);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-focus-box-shadow: var(--color-focus-destructive-in-field);
+}
+nv-fieldslider[success]:not([success=false]) {
+  --nv-field-border-default: var(--components-form-field-border-success);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--nv-field-border-default);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-focus-box-shadow: var(--color-focus-success);
+}
+nv-fieldslider[readonly]:not([readonly=false]) {
+  --nv-field-border-default: var(--components-form-field-border-readonly);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--components-form-field-border-focus);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-background: var(--components-form-field-background-readonly);
+}
+nv-fieldslider[readonly]:not([readonly=false]) .track,
+nv-fieldslider[readonly]:not([readonly=false]) .thumb {
+  cursor: default;
+}
+nv-fieldslider label {
+  display: flex;
+  align-items: center;
+  gap: var(--form-label-gap);
+  align-self: stretch;
+  color: var(--components-form-text-label-default);
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-label-font-size);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--form-label-line-height);
+}
+nv-fieldslider[hide-label]:not([hide-label=false]) label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+nv-fieldslider[has-field]:not([has-field=false]) .thumb-tooltip {
+  display: none;
+}
+nv-fieldslider > .description {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  gap: var(--spacing-1);
+  color: var(--components-form-text-description-default);
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-description-font-size);
+  font-style: normal;
+  line-height: var(--form-description-line-height);
+}
+nv-fieldslider > .error-description {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  gap: var(--spacing-1);
+  color: var(--components-form-text-description-default);
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-description-font-size);
+  font-style: normal;
+  line-height: var(--form-description-line-height);
+  color: var(--components-form-text-description-error);
+}
+nv-fieldslider > .error-description[hidden] {
+  display: none;
+}