@statistikzh/leu 0.28.0 → 0.28.2

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

@@ -1,185 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components-vite"
-import { action } from "storybook/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,228 +0,0 @@
-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(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 = customElements.get("leu-range")
-
-    expect(el).not.to.be.undefined
-  })
-
-  it("passes the a11y audit", async () => {
-    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/components/scroll-top/ScrollTop.ts

@@ -1,91 +0,0 @@
-import { html } from "lit"
-import { classMap } from "lit/directives/class-map.js"
-import { state } from "lit/decorators.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-import { LeuButton } from "../button/Button.js"
-import { LeuIcon } from "../icon/Icon.js"
-
-import { throttle } from "../../lib/utils.js"
-
-import styles from "./scroll-top.css?inline"
-
-/**
- * @tagname leu-scroll-top
- */
-export class LeuScrollTop extends LeuElement {
-  static dependencies = {
-    "leu-button": LeuButton,
-    "leu-icon": LeuIcon,
-  }
-
-  static styles = [LeuElement.styles, styles]
-
-  @state()
-  protected showButton: boolean = false
-
-  protected prevYPos: number = 0
-
-  protected hasScrolledDown: boolean = false
-
-  protected scrollListener: EventListener
-
-  scroll = () => {
-    const delta = window.scrollY - this.prevYPos
-
-    if (this.hasScrolledDown) {
-      if (delta < 0) {
-        this.hasScrolledDown = false
-      }
-    } else if (delta > 0) {
-      this.hasScrolledDown = true
-    }
-
-    /**
-     * Only show the button when
-     * ... the current scroll position is greater than the window height (below-the-fold) and when
-     * ... scrolling up
-     */
-    this.showButton =
-      window.scrollY > window.innerHeight && !this.hasScrolledDown
-    this.prevYPos = window.scrollY
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-    this.scrollListener = throttle(this.scroll, 100)
-    document.addEventListener("scroll", this.scrollListener, true)
-  }
-
-  disconnectedCallback() {
-    document.removeEventListener("scroll", this.scrollListener, true)
-    super.disconnectedCallback()
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  scrollToTop() {
-    window.scrollTo({
-      top: 0,
-      left: 0,
-      behavior: "smooth",
-    })
-  }
-
-  render() {
-    const cssClasses = {
-      "scroll-top": true,
-      hide: !this.showButton,
-    }
-    return html`
-      <div class=${classMap(cssClasses)}>
-        <leu-button
-          label="Zum Seitenanfang"
-          round
-          @click="${() => this.scrollToTop()}"
-        >
-          <leu-icon name="arrowUp"></leu-icon>
-        </leu-button>
-      </div>
-    `
-  }
-}

package/src/components/scroll-top/leu-scroll-top.ts

@@ -1,11 +0,0 @@
-import { LeuScrollTop } from "./ScrollTop.js"
-
-export { LeuScrollTop }
-
-LeuScrollTop.define("leu-scroll-top")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-scroll-top": LeuScrollTop
-  }
-}

package/src/components/scroll-top/scroll-top.css

@@ -1,50 +0,0 @@
-@import url("../../styles/custom-media.css");
-
-.scroll-top {
-  overflow: hidden;
-  position: fixed;
-  z-index: var(--leu-z-index-scroll-top);
-
-  --_space: 1.5rem;
-  right: var(--_space);
-  bottom: var(--_space);
-
-  /* show */
-  height: 3rem;
-  pointer-events: auto;
-  transition: height, bottom 0.9s, 0.6s ease;
-
-  @media (--viewport-regular) {
-    --_space: 2rem;
-  }
-
-  @media (--viewport-large) {
-    --_space: 2.5rem;
-  }
-
-  @media (--viewport-xlarge) {
-    --_space: 3rem;
-  }
-}
-
-.hide {
-  height: 0;
-  pointer-events: none;
-  transition: height, top 0.9s, 0.6s ease;
-}
-
-@keyframes hide-animation {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(90deg);
-  }
-}
-
-.hide leu-button {
-  animation-name: hide-animation;
-  animation-duration: 0.45s;
-  animation-timing-function: ease;
-}