@statistikzh/leu 0.28.1 → 0.28.3

package/src/components/chip/test/chip-group.test.ts

@@ -1,171 +0,0 @@
-import { html } from "lit"
-import { fixture, expect, oneEvent } from "@open-wc/testing"
-
-import "../leu-chip-selectable.js"
-import "../leu-chip-removable.js"
-import "../leu-chip-group.js"
-import type { LeuChipGroup } from "../leu-chip-group.js"
-
-async function removableFixture() {
-  return fixture(html`
-    <leu-chip-group>
-      <leu-chip-removable>Publikationen</leu-chip-removable>
-      <leu-chip-removable value="2">Daten</leu-chip-removable>
-      <leu-chip-removable value="3">Schnittstellen</leu-chip-removable>
-    </leu-chip-group>
-  `)
-}
-
-async function singleSelectionFixture() {
-  return fixture<LeuChipGroup>(html`
-    <leu-chip-group selection-mode="single">
-      <leu-chip-selectable value="1" variant="radio"
-        >Publikationen</leu-chip-selectable
-      >
-      <leu-chip-selectable value="2" variant="radio">Daten</leu-chip-selectable>
-      <leu-chip-selectable value="3" variant="radio"
-        >Schnittstellen</leu-chip-selectable
-      >
-    </leu-chip-group>
-  `)
-}
-
-async function multipleSelectionFixture() {
-  return fixture<LeuChipGroup>(html`
-    <leu-chip-group selection-mode="multiple">
-      <leu-chip-selectable value="1">Publikationen</leu-chip-selectable>
-      <leu-chip-selectable value="2">Daten</leu-chip-selectable>
-      <leu-chip-selectable value="3">Schnittstellen</leu-chip-selectable>
-    </leu-chip-group>
-  `)
-}
-
-describe("LeuChipGroup", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-chip-selectable")
-
-    await expect(el).not.to.be.undefined
-  })
-
-  it("passes the a11y audit with removable chips", async () => {
-    const el = await removableFixture()
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-
-  it("passes the a11y audit with selectable chips", async () => {
-    const el = await multipleSelectionFixture()
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-
-  it("passes the a11y audit with selectable radio chips", async () => {
-    const el = await singleSelectionFixture()
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-
-  it("updates the value when a chip is selected", async () => {
-    const el = await singleSelectionFixture()
-    const chip = el.querySelector("leu-chip-selectable")
-    const chipButton = chip.shadowRoot.querySelector("button")
-    chipButton.click()
-
-    await expect(el.value).to.deep.equal(["1"])
-  })
-
-  it("updates the value when multiple chips are selected", async () => {
-    const el = await multipleSelectionFixture()
-    const chips = el.querySelectorAll("leu-chip-selectable")
-    const chipButton2 = chips[1].shadowRoot.querySelector("button")
-    const chipButton3 = chips[2].shadowRoot.querySelector("button")
-
-    chipButton2.click()
-    chipButton3.click()
-
-    await expect(el.value).to.deep.equal(["2", "3"])
-  })
-
-  it("fires an input event when a chip is selected", async () => {
-    const el = await singleSelectionFixture()
-    const chip = el.querySelector("leu-chip-selectable")
-    const chipButton = chip.shadowRoot.querySelector("button")
-
-    setTimeout(() => {
-      chipButton.click()
-    }, 0)
-
-    const event = await oneEvent(el, "input")
-
-    await expect(event).to.exist
-  })
-
-  it("checks only chip when the value of the group is set (selection-mode=single)", async () => {
-    const el = await singleSelectionFixture()
-    const items = el.querySelectorAll("leu-chip-selectable")
-
-    expect(items[0].checked).to.be.false
-    expect(items[1].checked).to.be.false
-    expect(items[2].checked).to.be.false
-
-    el.value = ["2"]
-
-    expect(items[0].checked).to.be.false
-    expect(items[1].checked).to.be.true
-    expect(items[2].checked).to.be.false
-
-    // Should check the first item with the given value and not first item of the value list
-    el.value = ["2", "1"]
-
-    expect(items[0].checked).to.be.true
-    expect(items[1].checked).to.be.false
-
-    el.value = []
-
-    expect(items[0].checked).to.be.false
-    expect(items[1].checked).to.be.false
-    expect(items[2].checked).to.be.false
-
-    el.value = ["asdf"]
-
-    expect(items[0].checked).to.be.false
-    expect(items[1].checked).to.be.false
-    expect(items[2].checked).to.be.false
-    expect(el.value).to.deep.equal([])
-  })
-
-  it("checks chips when the value of the group is set (selection-mode=multiple)", async () => {
-    const el = await multipleSelectionFixture()
-    const items = el.querySelectorAll("leu-chip-selectable")
-
-    expect(items[0].checked).to.be.false
-    expect(items[1].checked).to.be.false
-    expect(items[2].checked).to.be.false
-
-    el.value = ["2"]
-
-    expect(items[0].checked).to.be.false
-    expect(items[1].checked).to.be.true
-    expect(items[2].checked).to.be.false
-
-    // Should check the first item with the given value and not first item of the value list
-    el.value = ["2", "1"]
-
-    expect(items[0].checked).to.be.true
-    expect(items[1].checked).to.be.true
-    expect(items[2].checked).to.be.false
-
-    el.value = []
-
-    expect(items[0].checked).to.be.false
-    expect(items[1].checked).to.be.false
-    expect(items[2].checked).to.be.false
-
-    el.value = ["asdf"]
-
-    expect(items[0].checked).to.be.false
-    expect(items[1].checked).to.be.false
-    expect(items[2].checked).to.be.false
-    expect(el.value).to.deep.equal([])
-  })
-})

package/src/components/chip/test/chip-link.test.ts

@@ -1,54 +0,0 @@
-import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
-
-import "../leu-chip-link.js"
-
-async function defaultFixture() {
-  return fixture(html`
-    <leu-chip-link href="https://zh.ch/daten">Daten</leu-chip-link>
-  `)
-}
-
-describe("LeuChipLink", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-chip-link")
-
-    await expect(el).not.to.be.undefined
-  })
-
-  it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-
-  it("renders the label", async () => {
-    const el = await defaultFixture()
-
-    expect(el).to.have.trimmed.text("Daten")
-  })
-
-  it("renders a link element", async () => {
-    const el = await defaultFixture()
-
-    expect(el.shadowRoot.querySelector("a")).to.exist
-  })
-
-  it("passes the href attribute to the link", async () => {
-    const el = await defaultFixture()
-
-    expect(el.shadowRoot.querySelector("a").getAttribute("href")).to.equal(
-      "https://zh.ch/daten",
-    )
-  })
-
-  it("delegates the focus to the a element", async () => {
-    const el = await defaultFixture()
-
-    el.focus()
-
-    expect(el.shadowRoot.querySelector("a")).to.equal(
-      el.shadowRoot.activeElement,
-    )
-  })
-})

package/src/components/chip/test/chip-removable.test.ts

@@ -1,105 +0,0 @@
-import { html } from "lit"
-import { fixture, expect, oneEvent } from "@open-wc/testing"
-import { sendKeys } from "@web/test-runner-commands"
-import { ifDefined } from "lit/directives/if-defined.js"
-
-import "../leu-chip-removable.js"
-
-async function defaultFixture(args = {}) {
-  return fixture(html`
-    <leu-chip-removable value=${ifDefined(args.value)}
-      >${args.label ?? "Daten"}</leu-chip-removable
-    >
-  `)
-}
-
-describe("LeuChipRemovable", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-chip-removable")
-
-    await expect(el).not.to.be.undefined
-  })
-
-  it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-
-  it("renders the label", async () => {
-    const el = await defaultFixture()
-
-    expect(el).to.have.trimmed.text("Daten")
-  })
-
-  it("renders a button element", async () => {
-    const el = await defaultFixture()
-
-    expect(el.shadowRoot.querySelector("button")).to.exist
-  })
-
-  it("renders a remove icon", async () => {
-    const el = await defaultFixture()
-
-    const iconPath = el.shadowRoot.querySelector("leu-icon")
-
-    expect(iconPath.name).to.equal("close")
-  })
-
-  it("delegates the focus to the button element", async () => {
-    const el = await defaultFixture()
-
-    el.focus()
-
-    expect(el.shadowRoot.querySelector("button")).to.equal(
-      el.shadowRoot.activeElement,
-    )
-  })
-
-  it("fires a remove event when the button is clicked", async () => {
-    const el = await defaultFixture()
-    const button = el.shadowRoot.querySelector("button")
-
-    setTimeout(() => button.click())
-    const event = await oneEvent(el, "leu:remove")
-
-    expect(event).to.exist
-  })
-
-  it("fires a remove event when the enter key is pressed", async () => {
-    const el = await defaultFixture()
-
-    el.focus()
-    setTimeout(() => sendKeys({ press: "Enter" }))
-    const event = await oneEvent(el, "leu:remove")
-
-    expect(event).to.exist
-  })
-
-  it("sends the value in the remove event", async () => {
-    const el = await defaultFixture({ label: `Daten              ` })
-    const button = el.shadowRoot.querySelector("button")
-
-    setTimeout(() => button.click())
-    const event = await oneEvent(el, "leu:remove")
-
-    expect(event.detail.value).to.equal("Daten")
-
-    el.value = "test"
-
-    setTimeout(() => button.click())
-    const event2 = await oneEvent(el, "leu:remove")
-
-    expect(event2.detail.value).to.equal("test")
-  })
-
-  it("returns the value or label when getValue is called", async () => {
-    const el = await defaultFixture({ label: `Daten              ` })
-
-    expect(el.getValue()).to.equal("Daten")
-
-    el.value = "daten-01"
-
-    expect(el.getValue()).to.equal("daten-01")
-  })
-})

package/src/components/chip/test/chip-selectable.test.ts

@@ -1,101 +0,0 @@
-import { html } from "lit"
-import { ifDefined } from "lit/directives/if-defined.js"
-import { fixture, expect, oneEvent } from "@open-wc/testing"
-import { sendKeys } from "@web/test-runner-commands"
-
-import "../leu-chip-selectable.js"
-
-async function defaultFixture(args = {}) {
-  return fixture(html`
-    <leu-chip-selectable
-      value=${ifDefined(args.value)}
-      variant=${ifDefined(args.variant)}
-      ?checked=${args.checked}
-      >Publikationen</leu-chip-selectable
-    >
-  `)
-}
-
-describe("LeuChipSelectable", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-chip-selectable")
-
-    await expect(el).not.to.be.undefined
-  })
-
-  it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-
-  it("renders the label", async () => {
-    const el = await defaultFixture()
-
-    expect(el).to.have.trimmed.text("Publikationen")
-  })
-
-  it("renders a button element", async () => {
-    const el = await defaultFixture()
-
-    expect(el.shadowRoot.querySelector("button")).to.exist
-  })
-
-  it("delegates the focus to the button element", async () => {
-    const el = await defaultFixture()
-
-    el.focus()
-
-    expect(el.shadowRoot.querySelector("button")).to.equal(
-      el.shadowRoot.activeElement,
-    )
-  })
-
-  it("fires a input event when the button is clicked", async () => {
-    const el = await defaultFixture()
-    const button = el.shadowRoot.querySelector("button")
-
-    setTimeout(() => button.click())
-    const event = await oneEvent(el, "input")
-
-    expect(event).to.exist
-  })
-
-  it("fires a input event when the enter key is pressed", async () => {
-    const el = await defaultFixture()
-
-    el.focus()
-    setTimeout(() => sendKeys({ press: "Enter" }))
-    const event = await oneEvent(el, "input")
-
-    expect(event).to.exist
-  })
-
-  it("removes the checked state when the button is clicked", async () => {
-    const el = await defaultFixture({ checked: true })
-    const button = el.shadowRoot.querySelector("button")
-
-    button.click()
-
-    expect(el.checked).to.be.false
-  })
-
-  it("doesn't remove the checked state of a checked radio chip", async () => {
-    const el = await defaultFixture({ variant: "radio", checked: true })
-
-    const button = el.shadowRoot.querySelector("button")
-    button.click()
-
-    expect(el.checked).to.be.true
-  })
-
-  it("returns the value or label when getValue is called", async () => {
-    const el = await defaultFixture()
-
-    expect(el.getValue()).to.equal("Publikationen")
-
-    el.value = "publikationen-01"
-
-    expect(el.getValue()).to.equal("publikationen-01")
-  })
-})

package/src/components/chip/test/chip.test.ts

@@ -1,22 +0,0 @@
-import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
-
-import "../leu-chip-link.js"
-
-async function defaultFixture() {
-  return fixture(html` <leu-chip /> `)
-}
-
-describe("LeuChipLink", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-chip-link")
-
-    await expect(el).not.to.be.undefined
-  })
-
-  it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-})

package/src/components/dialog/Dialog.ts

@@ -1,86 +0,0 @@
-import { html, nothing } from "lit"
-import { createRef, ref } from "lit/directives/ref.js"
-import { classMap } from "lit/directives/class-map.js"
-import { property } from "lit/decorators.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-import { HasSlotController } from "../../lib/hasSlotController.js"
-import { LeuIcon } from "../icon/Icon.js"
-
-import styles from "./dialog.css?inline"
-
-/**
- * @tagname leu-dialog
- */
-export class LeuDialog extends LeuElement {
-  static dependencies = {
-    "leu-icon": LeuIcon,
-  }
-
-  static styles = [LeuElement.styles, styles]
-
-  static shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-  }
-
-  @property({ type: String })
-  label: string = ""
-
-  @property({ type: String })
-  sublabel: string = ""
-
-  @property({ type: Boolean, reflect: true })
-  open: boolean = false
-
-  protected _dialogRef = createRef<HTMLDialogElement>()
-
-  protected hasSlotController = new HasSlotController(this, ["toolbar"])
-
-  show() {
-    this._dialogRef.value.showModal()
-  }
-
-  close() {
-    this._dialogRef.value.close()
-  }
-
-  render() {
-    const hasActionbar = this.hasSlotController.test("actionbar")
-
-    const closeButtonLabelClasses = {
-      "close-button__label": true,
-      "close-button__label--hidden": hasActionbar,
-    }
-
-    return html`
-      <dialog class="dialog" ref=${ref(this._dialogRef)} ?open=${this.open}>
-        <div class="content">
-          <div class="header">
-            <div class="title-wrapper">
-              <h1 class="title">${this.label}</h1>
-              ${this.sublabel
-                ? html`<p class="subtitle">${this.sublabel}</p>`
-                : nothing}
-            </div>
-            <button
-              class="close-button"
-              @click=${this.close}
-              aria-label="Schliessen"
-            >
-              <span
-                class=${classMap(closeButtonLabelClasses)}
-                aria-hidden="true"
-                >Schliessen</span
-              ><leu-icon name="close"> </leu-icon>
-            </button>
-          </div>
-          <slot></slot>
-        </div>
-        <div class="actionbar">
-          <slot name="actionbar"></slot>
-        </div>
-      </dialog>
-    `
-  }
-}

package/src/components/dialog/dialog.css

@@ -1,157 +0,0 @@
-@import url("../../styles/custom-media.css");
-
-/* figma https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-186812&t=8VgDy9avMRG5aL7s-0 */
-
-:host {
-  --dialog-font-regular: var(--leu-font-family-regular);
-  --dialog-font-black: var(--leu-font-family-black);
-
-  font-family: var(--dialog-font-regular);
-}
-
-.dialog {
-  background: #fff;
-  border: 0;
-  padding: 0;
-
-  overflow: hidden;
-  background-color: var(--leu-color-black-0);
-
-  flex-direction: column;
-
-  margin: 0 auto;
-  height: 100vh;
-  width: 100vw;
-  max-height: 100vh;
-  max-width: 100vw;
-
-  @media (--viewport-regular) {
-    margin: 80px auto;
-    height: fit-content;
-    width: fit-content;
-    max-width: min(100% - 4.5rem, 60.5rem);
-    max-height: calc(100vh - 5rem);
-  }
-}
-
-.dialog[open] {
-  display: flex;
-}
-
-.dialog::backdrop {
-  background-color: var(--leu-color-black-transp-40);
-}
-
-.content {
-  --padding: 2rem;
-  padding: var(--padding);
-  padding-bottom: 0;
-  margin-bottom: 1.5rem;
-  overflow-y: auto;
-
-  @media (--viewport-regular) {
-    --padding: 2.5rem;
-  }
-
-  @media (--viewport-medium) {
-    margin-bottom: 2rem;
-  }
-
-  @media (--viewport-large) {
-    --padding: 3.5rem;
-  }
-
-  @media (--viewport-xlarge) {
-    margin-bottom: 2.5rem;
-  }
-}
-
-.title-wrapper {
-  display: flex;
-  flex-flow: column wrap;
-}
-
-.header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-
-.title {
-  font: var(--leu-t-curve-big-black-font);
-  margin: 0 0 0.75rem;
-  order: 2;
-
-  @media (--viewport-regular) {
-    margin-bottom: 1rem;
-  }
-
-  @media (--viewport-medium) {
-    margin-bottom: 1.25rem;
-  }
-
-  @media (--viewport-xlarge) {
-    margin-bottom: 1.5rem;
-    font: var(--leu-t-bigger-big-black-font);
-  }
-}
-
-.subtitle {
-  color: var(--leu-color-black-transp-60);
-  font-size: var(--leu-t-tiny-regular-font-size);
-  line-height: var(--leu-t-tiny-regular-line-height);
-
-  order: 1;
-
-  margin: 0 0 4px;
-}
-
-.close-button {
-  cursor: pointer;
-  display: flex;
-  gap: 0.5rem;
-
-  padding: 0.25rem 0;
-  margin-left: 0.75rem;
-  border: 0;
-  border-radius: 0.125rem;
-
-  color: var(--leu-color-black-transp-60);
-  background: transparent;
-
-  @media (--viewport-regular) {
-    margin-left: 1rem;
-  }
-
-  @media (--viewport-medium) {
-    margin-left: 1.25rem;
-  }
-
-  @media (--viewport-xlarge) {
-    margin-left: 1.5rem;
-  }
-}
-
-.close-button:focus-visible {
-  outline: 2px solid var(--leu-color-func-cyan);
-  outline-offset: 2px;
-}
-
-.close-button__label {
-  display: none;
-  font: var(--leu-t-regular-regular-font);
-
-  @media (--viewport-medium) {
-    display: inline;
-  }
-}
-
-.close-button__label--hidden {
-  display: none;
-}
-
-.actionbar {
-  display: flex;
-  justify-content: flex-end;
-  min-height: 3rem;
-}

package/src/components/dialog/leu-dialog.ts

@@ -1,11 +0,0 @@
-import { LeuDialog } from "./Dialog.js"
-
-export { LeuDialog }
-
-LeuDialog.define("leu-dialog")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-dialog": LeuDialog
-  }
-}