@statistikzh/leu 0.23.0 → 0.24.1

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

@@ -0,0 +1,185 @@
+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"
+
+import "../leu-range.js"
+import type { LeuRange } from "../leu-range.js"
+import "../../input/leu-input.js"
+
+type StoryArgs = LeuRange
+type Story = StoryObj<StoryArgs>
+
+export default {
+  title: "Components/Range",
+  component: "leu-range",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81936&mode=design",
+    },
+  },
+  args: {
+    label: "Bereich",
+    oninput: action("input"),
+  },
+} satisfies Meta<StoryArgs>
+
+const Template: Story = {
+  render: (args) =>
+    html` <leu-range
+      label=${args.label}
+      ?disabled=${args.disabled}
+      ?multiple=${args.multiple}
+      min=${ifDefined(args.min)}
+      max=${ifDefined(args.max)}
+      value=${ifDefined(args.value)}
+      step=${ifDefined(args.step)}
+      prefix=${ifDefined(args.prefix)}
+      suffix=${ifDefined(args.suffix)}
+      .valueFormatter=${args.valueFormatter}
+      ?hide-label=${args["hide-label"]}
+      ?show-ticks=${args["show-ticks"]}
+      ?show-range-labels=${args["show-range-labels"]}
+      @input=${args.oninput}
+    >
+    </leu-range>`,
+}
+
+export const Regular = {
+  ...Template,
+  args: { min: 0, max: 100, value: "15" },
+}
+
+export const Multiple = {
+  ...Template,
+  args: { min: 1965, max: 2022, value: "1965, 2022", multiple: true },
+}
+
+export const Labeled = {
+  ...Template,
+  args: { label: "Wert auswählen", min: 100000, max: 200000 },
+}
+
+export const HiddenLabel = {
+  ...Template,
+  args: {
+    label: "Wert auswählen",
+    min: 100000,
+    max: 200000,
+    "hide-label": true,
+  },
+}
+
+export const Disabled = {
+  ...Template,
+  args: { label: "Wert auswählen", min: 0, max: 100, disabled: true },
+}
+
+export const Step = {
+  ...Template,
+  args: { min: 5, max: 123, step: 13 },
+}
+
+export const Ticks = {
+  ...Template,
+  args: {
+    label: "Jahr auswählen",
+    min: 1962,
+    max: 2022,
+    step: 1,
+    "show-ticks": true,
+    "show-range-labels": true,
+  },
+}
+
+export const Suffix = {
+  ...Template,
+  args: {
+    label: "Betrag auswählen",
+    min: 100,
+    max: 200,
+    step: 1,
+    suffix: " CHF",
+    "show-range-labels": true,
+  },
+}
+
+export const CustomFormatter = {
+  ...Template,
+  args: {
+    label: "Schuljahr",
+    min: 15,
+    max: 24,
+    step: 1,
+    "show-range-labels": true,
+    valueFormatter: (value: number) => `${value}/${value + 1}`,
+  },
+}
+
+function CombinedTemplate(args: StoryArgs) {
+  const values = (args.value ?? "").split(",").map((v) => Number(v.trim()))
+  function handleInputInput() {
+    const inputs = document.querySelectorAll("leu-input")
+    const range = document.querySelector("leu-range")
+    range.value = [inputs[0].value, inputs[1].value]
+  }
+  return html`
+    <leu-range
+      label=${args.label}
+      ?disabled=${args.disabled}
+      ?multiple=${args.multiple}
+      min=${ifDefined(args.min)}
+      max=${ifDefined(args.max)}
+      value=${ifDefined(args.value)}
+      step=${ifDefined(args.step)}
+      prefix=${ifDefined(args.prefix)}
+      suffix=${ifDefined(args.suffix)}
+      ?hide-label=${args["hide-label"]}
+      ?show-ticks=${args["show-ticks"]}
+      ?show-range-labels=${args["show-range-labels"]}
+      @input=${(e) => {
+        const inputs = document.querySelectorAll("leu-input")
+        const valueList = e.target.valueAsArray
+
+        inputs[0].value = valueList[0]
+        inputs[1].value = valueList[1]
+      }}
+    >
+    </leu-range>
+    <div style="display: flex; gap: 1rem; margin-top: 1rem;">
+      <leu-input
+        label="Von"
+        ?disabled=${args.disabled}
+        type="number"
+        min=${ifDefined(args.min)}
+        max=${ifDefined(args.max)}
+        value=${ifDefined(values[0])}
+        step=${ifDefined(args.step)}
+        size="small"
+        @input=${handleInputInput}
+      ></leu-input>
+      <leu-input
+        label="Von"
+        ?disabled=${args.disabled}
+        type="number"
+        min=${ifDefined(args.min)}
+        max=${ifDefined(args.max)}
+        value=${ifDefined(values[1])}
+        step=${ifDefined(args.step)}
+        size="small"
+        @input=${handleInputInput}
+      ></leu-input>
+    </div>
+  `
+}
+
+export const Combined = {
+  render: CombinedTemplate,
+  args: {
+    min: 1965,
+    max: 2022,
+    value: "1965, 2022",
+    multiple: true,
+  },
+}

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

@@ -1,24 +1,228 @@
 import { html } from "lit"
 import { fixture, expect } from "@open-wc/testing"
+import { ifDefined } from "lit/directives/if-defined.js"
 
 import "../leu-range.js"
+import type { LeuRange } from "../leu-range.js"
 
-async function defaultFixture() {
-  return fixture(html`
-    <leu-range label="Test Label" min="0" max="100"> </leu-range>
+async function defaultFixture(args = {}) {
+  return fixture<LeuRange>(html`
+    <leu-range
+      label=${args.label}
+      ?disabled=${args.disabled}
+      ?multiple=${args.multiple}
+      min=${ifDefined(args.min)}
+      max=${ifDefined(args.max)}
+      value=${ifDefined(args.value)}
+      step=${ifDefined(args.step)}
+      prefix=${ifDefined(args.prefix)}
+      suffix=${ifDefined(args.suffix)}
+      .valueFormatter=${args.valueFormatter}
+      ?hide-label=${args["hide-label"]}
+      ?show-ticks=${args["show-ticks"]}
+      ?show-range-labels=${args["show-range-labels"]}
+    >
+    </leu-range>
   `)
 }
 
 describe("LeuRange", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-range")
+    const el = customElements.get("leu-range")
 
-    await expect(el).not.to.be.undefined
+    expect(el).not.to.be.undefined
   })
 
   it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
+    const el = await defaultFixture({
+      label: "Test Label",
+      min: 0,
+      max: 100,
+      value: 50,
+    })
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("renders the label", async () => {
+    const el = await defaultFixture({ label: "Test Label" })
+
+    const label = el.shadowRoot?.querySelector(".label")
+
+    expect(label).to.exist
+    expect(label).to.contain.text("Test Label")
+  })
+
+  it("renders the label visually hidden when 'hide-label' is set", async () => {
+    const el = await defaultFixture({ label: "Test Label", "hide-label": true })
+
+    const label = el.shadowRoot?.querySelector(".label")
+
+    expect(label).to.exist
+    expect(label).to.contain.text("Test Label")
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("renders the range labels", async () => {
+    const el = await defaultFixture({
+      min: 23,
+      max: 87,
+      "show-range-labels": true,
+    })
+
+    const minLabel = el.shadowRoot?.querySelector(".tick-label--min")
+    const maxLabel = el.shadowRoot?.querySelector(".tick-label--max")
+
+    expect(minLabel).to.exist
+    expect(maxLabel).to.exist
+
+    expect(minLabel).to.contain.text("23")
+    expect(maxLabel).to.contain.text("87")
+  })
+
+  it("renders tick marks when 'show-ticks' is set", async () => {
+    const el = await defaultFixture({
+      min: 0,
+      max: 10,
+      step: 3,
+      "show-ticks": true,
+    })
+
+    const ticksContainer = el.shadowRoot?.querySelector(".ticks")
+    expect(ticksContainer).to.exist
+
+    const ticks = ticksContainer?.querySelectorAll(".tick")
+    expect(ticks?.length).to.equal(4)
+  })
+
+  it("renders prefix and suffix", async () => {
+    const el = await defaultFixture({
+      prefix: "$",
+      suffix: " CHF",
+      min: 25,
+      max: 75,
+      value: 50,
+      "show-range-labels": true,
+    })
+
+    const minLabel = el.shadowRoot?.querySelector(".tick-label--min")
+    const maxLabel = el.shadowRoot?.querySelector(".tick-label--max")
+    const valueLabel = el.shadowRoot?.querySelector("output")
+
+    expect(minLabel).to.exist
+    expect(maxLabel).to.exist
+    expect(valueLabel).to.exist
+
+    expect(minLabel).to.contain.text("$25 CHF")
+    expect(maxLabel).to.contain.text("$75 CHF")
+    expect(valueLabel).to.contain.text("$50 CHF")
+  })
+
+  it("uses custom valueFormatter if provided", async () => {
+    const el = await defaultFixture({
+      valueFormatter: (value: number) => `Value: ${value}`,
+      min: 10,
+      max: 90,
+      value: 50,
+      "show-range-labels": true,
+    })
+
+    const minLabel = el.shadowRoot?.querySelector(".tick-label--min")
+    const maxLabel = el.shadowRoot?.querySelector(".tick-label--max")
+    const valueLabel = el.shadowRoot?.querySelector("output")
+
+    expect(minLabel).to.exist
+    expect(maxLabel).to.exist
+    expect(valueLabel).to.exist
+
+    expect(minLabel).to.contain.text("Value: 10")
+    expect(maxLabel).to.contain.text("Value: 90")
+    expect(valueLabel).to.contain.text("Value: 50")
+  })
+
+  it("prefix and suffix are ignored when valueFormatter is provided", async () => {
+    const el = await defaultFixture({
+      prefix: "$",
+      suffix: " CHF",
+      valueFormatter: (value: number) => `${value}/${value + 1}`,
+      min: 10,
+      max: 15,
+      value: 12,
+      "show-range-labels": true,
+    })
+
+    const minLabel = el.shadowRoot?.querySelector(".tick-label--min")
+    const maxLabel = el.shadowRoot?.querySelector(".tick-label--max")
+    const valueLabel = el.shadowRoot?.querySelector("output")
+
+    expect(minLabel).to.contain.text("10/11")
+    expect(maxLabel).to.contain.text("15/16")
+    expect(valueLabel).to.contain.text("12/13")
+  })
+
+  it("disables the range slider", async () => {
+    const el = await defaultFixture({ disabled: true })
+
+    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)

package/dist/components/range/stories/range-slider.stories.d.ts

@@ -1,26 +0,0 @@
-import "../leu-range.js";
-import "../../input/leu-input.js";
-/**
- * @type {import("@storybook/web-components").Meta}
- */
-declare const _default: {
-    title: string;
-    component: string;
-    parameters: {
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-    args: {
-        label: string;
-    };
-};
-export default _default;
-export declare const Regular: any;
-export declare const Multiple: any;
-export declare const Labeled: any;
-export declare const Disabled: any;
-export declare const Step: any;
-export declare const Combined: any;
-//# sourceMappingURL=range-slider.stories.d.ts.map

package/dist/components/range/stories/range-slider.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"range-slider.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/range/stories/range-slider.stories.ts"],"names":[],"mappings":"AAGA,OAAO,iBAAiB,CAAA;AACxB,OAAO,0BAA0B,CAAA;AAEjC;;GAEG;;;;;;;;;;;;;;AACH,wBAYC;AAiBD,eAAO,MAAM,OAAO,KAAoB,CAAA;AAOxC,eAAO,MAAM,QAAQ,KAAoB,CAAA;AAQzC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAOxC,eAAO,MAAM,QAAQ,KAAoB,CAAA;AAQzC,eAAO,MAAM,IAAI,KAAoB,CAAA;AAmErC,eAAO,MAAM,QAAQ,KAA4B,CAAA"}

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

@@ -1,142 +0,0 @@
-import { html } from "lit"
-import { ifDefined } from "lit/directives/if-defined.js"
-
-import "../leu-range.js"
-import "../../input/leu-input.js"
-
-/**
- * @type {import("@storybook/web-components").Meta}
- */
-export default {
-  title: "Components/Range",
-  component: "leu-range",
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81936&mode=design",
-    },
-  },
-  args: {
-    label: "Bereich",
-  },
-}
-
-function Template({ label, disabled, value, min, max, step, multiple }) {
-  return html`
-    <leu-range
-      label=${label}
-      ?disabled=${disabled}
-      ?multiple=${multiple}
-      min=${ifDefined(min)}
-      max=${ifDefined(max)}
-      value=${ifDefined(value)}
-      step=${ifDefined(step)}
-    >
-    </leu-range>
-  `
-}
-
-export const Regular = Template.bind({})
-Regular.args = {
-  min: 0,
-  max: 100,
-  value: "15",
-}
-
-export const Multiple = Template.bind({})
-Multiple.args = {
-  min: 1965,
-  max: 2022,
-  value: "1965, 2022",
-  multiple: true,
-}
-
-export const Labeled = Template.bind({})
-Labeled.args = {
-  label: "Wert auswählen",
-  min: 100000,
-  max: 200000,
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  label: "Wert auswählen",
-  min: 0,
-  max: 100,
-  disabled: true,
-}
-
-export const Step = Template.bind({})
-Step.args = {
-  min: 5,
-  max: 123,
-  step: 13,
-}
-
-function CombinedTemplate({
-  label,
-  disabled,
-  value = "",
-  min,
-  max,
-  step,
-  multiple,
-}) {
-  const values = value.split(",").map((v) => Number(v.trim()))
-  function handleInputInput() {
-    const inputs = document.querySelectorAll("leu-input")
-    const range = document.querySelector("leu-range")
-    range.value = [inputs[0].value, inputs[1].value]
-  }
-  return html`
-    <leu-range
-      label=${label}
-      ?disabled=${disabled}
-      ?multiple=${multiple}
-      min=${ifDefined(min)}
-      max=${ifDefined(max)}
-      value=${ifDefined(value)}
-      step=${ifDefined(step)}
-      @input=${(e) => {
-        const inputs = document.querySelectorAll("leu-input")
-        const valueList = e.target.valueAsArray
-
-        inputs[0].value = valueList[0]
-        inputs[1].value = valueList[1]
-      }}
-    >
-    </leu-range>
-    <div style="display: flex; gap: 1rem;">
-      <leu-input
-        label="Von"
-        ?disabled=${disabled}
-        type="number"
-        min=${ifDefined(min)}
-        max=${ifDefined(max)}
-        value=${ifDefined(values[0])}
-        step=${ifDefined(step)}
-        size="small"
-        @input=${handleInputInput}
-      ></leu-input>
-      <leu-input
-        label="Von"
-        ?disabled=${disabled}
-        type="number"
-        min=${ifDefined(min)}
-        max=${ifDefined(max)}
-        value=${ifDefined(values[1])}
-        step=${ifDefined(step)}
-        size="small"
-        @input=${handleInputInput}
-      ></leu-input>
-    </div>
-  `
-}
-
-export const Combined = CombinedTemplate.bind({})
-Combined.args = {
-  min: 1965,
-  max: 2022,
-  value: "1965, 2022",
-  multiple: true,
-}