@statistikzh/leu 0.24.0 → 0.24.1

package/src/components/range/Range.ts

@@ -1,14 +1,18 @@
-import { html, nothing } from "lit"
+import { html, nothing, PropertyValues } from "lit"
+import { property, query } from "lit/decorators.js"
+import { ifDefined } from "lit/directives/if-defined.js"
 
-import { property } from "lit/decorators.js"
 import styles from "./range.css"
 import { LeuElement } from "../../lib/LeuElement.js"
+import { clamp, isNumber } from "../../lib/utils.js"
+
+type InternalRangeValue = [number, number] | [number]
 
 const defaultValueConverter = {
-  fromAttribute(value) {
+  fromAttribute(value: string) {
     return value.split(",").map((v) => Number(v.trim()))
   },
-  toAttribute(value) {
+  toAttribute(value: number[]) {
     return value.join(",")
   },
 }
@@ -26,7 +30,15 @@ export class LeuRange extends LeuElement {
     delegatesFocus: true,
   }
 
-  @property({ converter: defaultValueConverter, attribute: "value" })
+  /**
+   * The default value of the range slider.
+   * String input is parsed as a comma-separated list of numbers.
+   */
+  @property({
+    converter: defaultValueConverter,
+    attribute: "value",
+    reflect: true,
+  })
   defaultValue = [50]
 
   /**
@@ -110,116 +122,175 @@ export class LeuRange extends LeuElement {
   @property({ attribute: false })
   valueFormatter?: (value: number) => string
 
-  updated() {
-    this._updateStyles()
-  }
+  protected _value: InternalRangeValue = this.defaultValue.map((v) =>
+    this.clampAndRoundValue(v),
+  ) as InternalRangeValue
 
-  protected get _inputs() {
-    return Array.from(
-      this.shadowRoot.querySelectorAll<HTMLInputElement>("input"),
-    )
-  }
+  /**
+   * The value of the range slider.
+   * String input is parsed as a comma-separated list of numbers.
+   * In multiple mode, if only a single value is provided, the second handle will be set to the minimum value.
+   * In single mode, only the first value will be used.
+   */
+  @property({ attribute: false })
+  set value(value: string | number | Array<string | number>) {
+    let nextValue: Array<number> = []
+
+    if (typeof value === "string") {
+      nextValue = value
+        .split(",")
+        .map((v) => Number(v.trim()))
+        .filter(isNumber)
+    } else if (isNumber(value)) {
+      nextValue = [value]
+    } else if (Array.isArray(value)) {
+      nextValue = value.map((v: unknown) => Number(v)).filter(isNumber)
+    }
 
-  protected _updateStyles() {
-    const normalizedRange = this._getNormalizedRange()
-    this.style.setProperty("--low", normalizedRange[0].toString())
-    this.style.setProperty("--high", normalizedRange[1].toString())
+    if (nextValue.length === 0) {
+      return
+    }
 
-    const inputs = this.multiple
-      ? [this._getBaseInput(), this._getGhostInput()]
-      : [this._getBaseInput()]
+    // In multiple mode, we need to ensure that we always have two values.
+    // `min` is a fallback for the second value.
+    if (this.multiple && nextValue.length === 1) {
+      nextValue.unshift(this.min)
+    }
 
-    inputs.forEach((input) => {
-      const output = this.shadowRoot.querySelector<HTMLOutputElement>(
-        `.output[for=${input.id}]`,
-      )
-      const normalizedValue = this._getNormalizedValue(input.valueAsNumber)
-      output.style.setProperty("--value", normalizedValue.toString())
-      output.value = this.formatValue(input.valueAsNumber)
-    })
+    this._value = nextValue
+      .slice(0, this.multiple ? 2 : 1)
+      .map((v) => this.clampAndRoundValue(v)) as InternalRangeValue
   }
 
-  get value() {
-    return this._inputs.map((input) => input.value).join(",")
+  get value(): string {
+    return this._value.join(",")
   }
 
-  /**
-   * Sets the value of the underlying input element(s).
-   * The value has to be an array if "multiple" range is used.
-   * Otherwise it has to be a string.
-   */
-  set value(value: string | Array<string>) {
-    if (this.multiple && Array.isArray(value)) {
-      const inputs = this._inputs
-
-      value.forEach((v, i) => {
-        inputs[i].value = v
-      })
-      this._updateStyles()
-    } else if (!this.multiple) {
-      this._getBaseInput().value = value
-      this._updateStyles()
-    }
+  get valueAsArray(): InternalRangeValue {
+    return this._value.slice() as InternalRangeValue
   }
 
-  get valueAsArray() {
-    return this._inputs.map((input) => input.valueAsNumber)
+  get valueLow(): number {
+    return Math.min(...this._value)
   }
 
-  get valueLow() {
-    const inputs = this._inputs
+  get valueHigh(): number {
+    return Math.max(...this._value)
+  }
 
-    if (this.multiple) {
-      return inputs.map((input) => input.valueAsNumber).sort((a, b) => a - b)[0]
-    }
+  @query("#container")
+  protected container: HTMLDivElement
 
-    return inputs[0].value
+  @query("#input-base")
+  protected inputBase: HTMLInputElement
+
+  @query("#input-ghost")
+  protected inputGhost: HTMLInputElement | null
+
+  @query("output[for=input-base]")
+  protected outputBase: HTMLOutputElement
+
+  @query("output[for=input-ghost]")
+  protected outputGhost: HTMLOutputElement | null
+
+  updated() {
+    this.updateStyles()
   }
 
-  get valueHigh() {
-    const inputs = this._inputs
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    // Reflect defaultValue changes to the value property
+    // to ensure backwards compatibility with previous versions
+    if (changedProperties.has("defaultValue")) {
+      this.value = this.defaultValue.map((v) =>
+        this.clampAndRoundValue(v),
+      ) as InternalRangeValue
+    }
 
-    if (this.multiple) {
-      return inputs.map((input) => input.valueAsNumber).sort((a, b) => a - b)[1]
+    if (
+      changedProperties.has("min") ||
+      changedProperties.has("max") ||
+      changedProperties.has("step")
+    ) {
+      this._value = this._value.map((v) =>
+        this.clampAndRoundValue(v),
+      ) as InternalRangeValue
     }
 
-    return inputs[0].value
+    if (changedProperties.has("multiple") && this.multiple) {
+      // When switching to multiple mode, ensure that we have two values
+      if (this._value.length === 1) {
+        this._value = [this.min, this._value[0]]
+      }
+    } else if (changedProperties.has("multiple") && !this.multiple) {
+      // When switching to single mode, keep only the lower value
+      this._value = [this.valueLow]
+    }
   }
 
-  protected _getBaseInput() {
-    return this.shadowRoot.querySelector<HTMLInputElement>(".range--base")
+  protected updateStyles() {
+    const normalizedRange = this.getNormalizedRange()
+    this.container?.style.setProperty("--low", normalizedRange[0].toString())
+    this.container?.style.setProperty("--high", normalizedRange[1].toString())
+
+    const inputs = this.multiple
+      ? [this.inputBase, this.inputGhost]
+      : [this.inputBase]
+
+    inputs.forEach((input) => {
+      const output =
+        input.id === "input-base" ? this.outputBase : this.outputGhost
+      const normalizedValue = this.getNormalizedValue(input.valueAsNumber)
+      output.style.setProperty("--value", normalizedValue.toString())
+      output.value = this.formatValue(input.valueAsNumber)
+    })
   }
 
-  protected _getGhostInput() {
-    return this.shadowRoot.querySelector<HTMLInputElement>(".range--ghost")
+  protected clampAndRoundValue(value: number) {
+    const clampedValue = clamp(value, this.min, this.max)
+    const roundedValue =
+      Math.round((clampedValue - this.min) / this.step) * this.step + this.min
+
+    return roundedValue
   }
 
-  protected _handleInput(
-    _index: number,
-    _e: InputEvent & { target: HTMLInputElement },
-  ) {
-    this._updateStyles()
+  protected handleInput(e: Event & { target: HTMLInputElement }) {
+    e.stopPropagation()
+
+    if (this.multiple) {
+      this.value = [this.inputBase.valueAsNumber, this.inputGhost.valueAsNumber]
+    } else {
+      this.value = [this.inputBase.valueAsNumber]
+    }
+
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        composed: true,
+        bubbles: true,
+        detail: { value: this.value, valueAsArray: this.valueAsArray },
+      }),
+    )
   }
 
-  protected _getNormalizedValue(value: number) {
+  protected getNormalizedValue(value: number) {
     return (value - this.min) / (this.max - this.min)
   }
 
-  protected _getNormalizedRange() {
+  protected getNormalizedRange() {
     if (this.multiple) {
       return this.valueAsArray
-        .map((value) => this._getNormalizedValue(value))
+        .map((value) => this.getNormalizedValue(value))
         .sort((a, b) => a - b)
     }
 
-    return [0, this._getNormalizedValue(this.valueAsArray[0])]
+    return [0, this.getNormalizedValue(this.valueAsArray[0])]
   }
 
   /**
-   * Determine if the "click" (pointer event) is closer the
-   * the value of the other input element. Swap the values if this is the case.
+   * This event handler is only applied to the "base" input element and only when in "multiple" mode.
+   * It handles pointer events on the *track* and the thumb.
+   * This method determines if the interaction was closer to the base or the ghost input.
    */
-  protected _handlePointerDown(e: PointerEvent & { target: HTMLInputElement }) {
+  protected handlePointerDown(e: PointerEvent & { target: HTMLInputElement }) {
     const clickValue =
       this.min + ((this.max - this.min) * e.offsetX) / this.offsetWidth
     const middleValue = (this.valueAsArray[0] + this.valueAsArray[1]) / 2
@@ -232,8 +303,7 @@ export class LeuRange extends LeuElement {
        * As the pointerdown event is fired before the input event, we first overwrite the value
        * of the input element that was not clicked on. The active input element will update itself.
        */
-      // this._value = [e.target.valueAsNumber, e.target.valueAsNumber]
-      this._getGhostInput().value = e.target.value
+      this.inputGhost.value = e.target.value
     }
   }
 
@@ -258,7 +328,7 @@ export class LeuRange extends LeuElement {
         (tick) =>
           html`<span
             class="tick"
-            style="left: ${this._getNormalizedValue(tick) * 100}%"
+            style="left: ${this.getNormalizedValue(tick) * 100}%"
           ></span>`,
       )}
     </div>`
@@ -267,13 +337,14 @@ export class LeuRange extends LeuElement {
   render() {
     const inputs = this.multiple ? ["base", "ghost"] : ["base"]
 
-    const { multiple, disabled, label, defaultValue } = this
+    const { multiple, disabled, label, valueAsArray } = this
 
     return html`
       <div
+        id="container"
         class="container"
-        role=${multiple ? "group" : undefined}
-        aria-labelledby=${multiple ? "group-label" : undefined}
+        role=${ifDefined(multiple ? "group" : undefined)}
+        aria-labelledby=${ifDefined(multiple ? "group-label" : undefined)}
       >
         ${multiple
           ? html`<span id="group-label" class="label">${label}</span>`
@@ -284,7 +355,7 @@ export class LeuRange extends LeuElement {
               html`<output
                 class="output"
                 for="input-${type}"
-                value=${this.formatValue(defaultValue[index])}
+                value=${this.formatValue(valueAsArray[index])}
               ></output>`,
           )}
         </div>
@@ -292,9 +363,9 @@ export class LeuRange extends LeuElement {
           ${inputs.map(
             (type, index) => html`
               <input
-                @input=${(e) => this._handleInput(index, e)}
+                @input=${this.handleInput}
                 @pointerdown=${multiple && !disabled && index === 0
-                  ? this._handlePointerDown
+                  ? this.handlePointerDown
                   : undefined}
                 type="range"
                 class="range range--${type}"
@@ -303,9 +374,11 @@ export class LeuRange extends LeuElement {
                 min=${this.min}
                 max=${this.max}
                 step=${this.step}
-                aria-label=${multiple ? RANGE_LABELS[index] : undefined}
+                aria-label=${ifDefined(
+                  multiple ? RANGE_LABELS[index] : undefined,
+                )}
                 ?disabled=${disabled}
-                .value=${defaultValue[index].toString()}
+                .value=${valueAsArray[index].toString()}
               />
             `,
           )}

package/src/components/range/stories/range.stories.ts

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/web-components"
+import { action } from "@storybook/addon-actions"
 import { html } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 
@@ -20,6 +21,7 @@ export default {
   },
   args: {
     label: "Bereich",
+    oninput: action("input"),
   },
 } satisfies Meta<StoryArgs>
 
@@ -39,6 +41,7 @@ const Template: Story = {
       ?hide-label=${args["hide-label"]}
       ?show-ticks=${args["show-ticks"]}
       ?show-range-labels=${args["show-range-labels"]}
+      @input=${args.oninput}
     >
     </leu-range>`,
 }

package/src/components/range/test/range.test.ts

@@ -166,4 +166,63 @@ describe("LeuRange", () => {
     const input = el.shadowRoot?.querySelector("input")
     expect(input).to.have.attribute("disabled")
   })
+
+  it("clamps and rounds when value is set", async () => {
+    const el = await defaultFixture({ min: 0, max: 10, step: 3 })
+
+    el.value = "8"
+    await el.updateComplete
+
+    expect(el.value).to.equal("9")
+  })
+
+  it("re-normalizes when min/max/step changes", async () => {
+    const el = await defaultFixture({ min: 0, max: 10, step: 2 })
+
+    el.value = "9"
+    await el.updateComplete
+
+    expect(el.value).to.equal("10")
+
+    el.max = 6
+    await el.updateComplete
+
+    expect(el.value).to.equal("6")
+  })
+
+  it("sets the second handle to min when multiple and a single value is provided", async () => {
+    const el = await defaultFixture({
+      multiple: true,
+      min: 10,
+      max: 100,
+      value: 20,
+    })
+
+    expect(el.value).to.equal("10,20")
+
+    el.value = "30"
+    await el.updateComplete
+    expect(el.value).to.equal("10,30")
+
+    el.value = "30, 40"
+    await el.updateComplete
+    expect(el.value).to.equal("30,40")
+  })
+
+  it("re-normalizes both values when multiple and min/max/step changes", async () => {
+    const el = await defaultFixture({
+      multiple: true,
+      min: 0,
+      max: 10,
+      step: 2,
+      value: "3,7",
+    })
+
+    expect(el.value).to.equal("4,8")
+
+    el.max = 6
+    await el.updateComplete
+
+    expect(el.value).to.equal("4,6")
+  })
 })

package/src/lib/utils.ts

@@ -4,7 +4,7 @@
  * @param {Number} timeout - Default is 500 ms
  * @returns {Function} - Your function wrapped in a timeout function
  */
-const debounce = function debounce(func, timeout = 500) {
+export const debounce = function debounce(func, timeout = 500) {
   let timer = null
   return (...args) => {
     clearTimeout(timer)
@@ -20,7 +20,7 @@ const debounce = function debounce(func, timeout = 500) {
  * @param {Number} timeout - Default is 500 ms
  * @returns {Function} - Your function wrapped in a timeout function
  */
-const throttle = function throttle(func, timeout = 500) {
+export const throttle = function throttle(func, timeout = 500) {
   let timer = null
   return (...args) => {
     if (timer === null) {
@@ -32,4 +32,14 @@ const throttle = function throttle(func, timeout = 500) {
   }
 }
 
-export { debounce, throttle }
+/**
+ * Clamp a number between a minimum and maximum value.
+ */
+export const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max)
+
+/**
+ * Check if a value is a finite number.
+ */
+export const isNumber = (value: unknown): value is number =>
+  typeof value === "number" && Number.isFinite(value)