@statistikzh/leu 0.23.0 → 0.24.0

package/src/components/file-input/FileInput.ts

@@ -6,8 +6,8 @@ import { classMap } from "lit/directives/class-map.js"
 import { LeuElement } from "../../lib/LeuElement.js"
 
 import styles from "./file-input.css"
-import { LeuButton } from "../../index.js"
-import { LeuIcon } from "../icon/leu-icon.js"
+import { LeuButton } from "../button/Button.js"
+import { LeuIcon } from "../icon/Icon.js"
 import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
 
 /**

package/src/components/range/Range.ts

@@ -1,4 +1,4 @@
-import { html } from "lit"
+import { html, nothing } from "lit"
 
 import { property } from "lit/decorators.js"
 import styles from "./range.css"
@@ -29,27 +29,87 @@ export class LeuRange extends LeuElement {
   @property({ converter: defaultValueConverter, attribute: "value" })
   defaultValue = [50]
 
+  /**
+   * The minimum value of the range slider.
+   */
   @property({ type: Number, reflect: true })
   min: number = 0
 
+  /**
+   * The maximum value of the range slider.
+   */
   @property({ type: Number, reflect: true })
   max: number = 100
 
+  /**
+   * The step size of the range slider.
+   */
   @property({ type: Number, reflect: true })
   step: number = 1
 
   @property({ type: String, reflect: true })
   name: string = ""
 
+  /**
+   * The label of the range slider.
+   */
   @property({ type: String, reflect: true })
   label: string = ""
 
+  /**
+   * Whether to hide the label of the range slider.
+   * If true, the label will still be available for screen readers
+   * and is only visually hidden.
+   */
+  @property({ type: Boolean, reflect: true, attribute: "hide-label" })
+  hideLabel: boolean = false
+
+  /**
+   * Whether the range slider is disabled.
+   */
   @property({ type: Boolean, reflect: true })
   disabled: boolean = false
 
+  /**
+   * Whether to use a range with two handles.
+   */
   @property({ type: Boolean, reflect: true })
   multiple: boolean = false
 
+  /**
+   * Wheter to show tick marks below the range slider.
+   * One tick mark per step will be rendered.
+   */
+  @property({ type: Boolean, reflect: true, attribute: "show-ticks" })
+  showTicks: boolean = false
+
+  /**
+   * Whether to show the min and max labels below the range slider.
+   */
+  @property({ type: Boolean, reflect: true, attribute: "show-range-labels" })
+  showRangeLabels: boolean = false
+
+  /**
+   * A prefix to display before the value in the output element(s).
+   * Is ignored if a custom valueFormatter is provided.
+   */
+  @property({ type: String, reflect: true })
+  prefix: string = ""
+
+  /**
+   * A suffix to display after the value in the output element(s).
+   * Is ignored if a custom valueFormatter is provided.
+   */
+  @property({ type: String, reflect: true })
+  suffix: string = ""
+
+  /**
+   * A custom function to format the value displayed in the output element(s).
+   * If provided, the prefix and suffix properties will be ignored.
+   */
+  @property({ attribute: false })
+  valueFormatter?: (value: number) => string
+
   updated() {
     this._updateStyles()
   }
@@ -75,7 +135,7 @@ export class LeuRange extends LeuElement {
       )
       const normalizedValue = this._getNormalizedValue(input.valueAsNumber)
       output.style.setProperty("--value", normalizedValue.toString())
-      output.value = input.value
+      output.value = this.formatValue(input.valueAsNumber)
     })
   }
 
@@ -177,6 +237,33 @@ export class LeuRange extends LeuElement {
     }
   }
 
+  protected formatValue(value: number) {
+    if (this.valueFormatter) {
+      return this.valueFormatter(value)
+    }
+
+    return `${this.prefix}${value}${this.suffix}`
+  }
+
+  protected renderTicks() {
+    if (!this.showTicks) {
+      return nothing
+    }
+
+    return html`<div class="ticks">
+      ${Array.from(
+        { length: (this.max - this.min) / this.step + 1 },
+        (_, i) => this.min + i * this.step,
+      ).map(
+        (tick) =>
+          html`<span
+            class="tick"
+            style="left: ${this._getNormalizedValue(tick) * 100}%"
+          ></span>`,
+      )}
+    </div>`
+  }
+
   render() {
     const inputs = this.multiple ? ["base", "ghost"] : ["base"]
 
@@ -184,6 +271,7 @@ export class LeuRange extends LeuElement {
 
     return html`
       <div
+        class="container"
         role=${multiple ? "group" : undefined}
         aria-labelledby=${multiple ? "group-label" : undefined}
       >
@@ -196,7 +284,7 @@ export class LeuRange extends LeuElement {
               html`<output
                 class="output"
                 for="input-${type}"
-                value=${defaultValue[index]}
+                value=${this.formatValue(defaultValue[index])}
               ></output>`,
           )}
         </div>
@@ -221,8 +309,19 @@ export class LeuRange extends LeuElement {
               />
             `,
           )}
+          ${this.renderTicks()}
         </div>
       </div>
+      ${this.showRangeLabels
+        ? html`<div class="tick-labels">
+            <span class="tick-label tick-label--min"
+              >${this.formatValue(this.min)}</span
+            >
+            <span class="tick-label tick-label--max"
+              >${this.formatValue(this.max)}</span
+            >
+          </div>`
+        : nothing}
     `
   }
 }

package/src/components/range/range.css

@@ -35,7 +35,9 @@
   --range-value-color: var(--range-value-color-disabled);
 }
 
-/***************************   */
+.container {
+  position: relative;
+}
 
 .label {
   display: inline-block;
@@ -44,6 +46,17 @@
   font: var(--leu-t-regular-regular-font);
 }
 
+:host([hide-label]) .label {
+  clip: rect(0 0 0 0);
+  border: 0;
+  height: 1px;
+  margin: -1px !important;
+  overflow: hidden;
+  padding: 0 !important;
+  position: absolute;
+  width: 1px;
+}
+
 .outputs {
   position: relative;
   height: 1.5rem;
@@ -68,6 +81,8 @@
 
 .inputs {
   position: relative;
+  z-index: 1;
+  height: var(--range-thumb-diameter);
 }
 
 .range {
@@ -178,3 +193,35 @@
 .range--ghost::-webkit-slider-runnable-track {
   background: transparent;
 }
+
+/* Ticks */
+
+.ticks {
+  position: absolute;
+  inset-block-start: calc(
+    var(--range-thumb-diameter) / 2 + var(--range-track-height)
+  );
+  inset-inline: calc(var(--range-thumb-diameter) / 2);
+}
+
+.tick {
+  z-index: -1;
+  position: absolute;
+  top: 50%;
+  width: 2px;
+  height: 0.5rem;
+  background-color: var(--range-track-background-color);
+  transform: translateY(-50%);
+}
+
+.tick-labels {
+  display: flex;
+  justify-content: space-between;
+  color: var(--leu-color-black-60);
+  font: var(--leu-t-tiny-regular-font);
+  margin-top: 0.25rem;
+}
+
+.tick-label--max {
+  text-align: right;
+}

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

@@ -0,0 +1,182 @@
+import { Meta, StoryObj } from "@storybook/web-components"
+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",
+  },
+} 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"]}
+    >
+    </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,169 @@
 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")
+  })
 })

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"}