@statistikzh/leu 0.28.0 → 0.28.2

package/src/components/pagination/test/pagination.test.ts

@@ -1,210 +0,0 @@
-import { html } from "lit"
-import { fixture, expect, elementUpdated } from "@open-wc/testing"
-import { ifDefined } from "lit/directives/if-defined.js"
-import { sendKeys } from "@web/test-runner-commands"
-import { spy } from "sinon"
-
-import "../leu-pagination.js"
-
-async function defaultFixture(args = {}) {
-  return fixture(
-    html`<leu-pagination
-      numOfItems=${ifDefined(args.numOfItems)}
-      itemsPerPage=${ifDefined(args.itemsPerPage)}
-      defaultPage=${ifDefined(args.defaultPage)}
-    >
-    </leu-pagination>`,
-  )
-}
-
-describe("LeuPagination", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-pagination")
-
-    await expect(el).not.to.be.undefined
-  })
-
-  it("passes the a11y audit", async () => {
-    const el = await defaultFixture({
-      numOfItems: 98,
-      itemsPerPage: 7,
-      defaultPage: 1,
-    })
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-
-  it("disables the previous button on the first page", async () => {
-    const el = await defaultFixture({
-      numOfItems: 98,
-      itemsPerPage: 7,
-      defaultPage: 1,
-    })
-
-    const previous = el.shadowRoot.querySelectorAll("leu-button")[0]
-
-    expect(previous).to.have.attribute("disabled")
-  })
-
-  it("disables the next button on the last page", async () => {
-    const el = await defaultFixture({
-      numOfItems: 98,
-      itemsPerPage: 7,
-      defaultPage: 14,
-    })
-
-    const next = el.shadowRoot.querySelectorAll("leu-button")[1]
-
-    expect(next).to.have.attribute("disabled")
-  })
-
-  it("renders the correct number of available pages", async () => {
-    const el = await defaultFixture({
-      numOfItems: 98,
-      itemsPerPage: 7,
-      defaultPage: 1,
-    })
-
-    const label = el.shadowRoot.querySelectorAll(".label")
-
-    expect(label).to.have.trimmed.text("von 14")
-  })
-
-  it("displays the current page", async () => {
-    const el = await defaultFixture({
-      numOfItems: 98,
-      itemsPerPage: 7,
-      defaultPage: 2,
-    })
-
-    const input = el.shadowRoot.querySelector("input")
-
-    expect(input.value).to.equal("2")
-  })
-
-  it("increments the page with a click on the next button", async () => {
-    const el = await defaultFixture({
-      numOfItems: 98,
-      itemsPerPage: 7,
-      defaultPage: 1,
-    })
-
-    const next = el.shadowRoot.querySelectorAll("leu-button")[1]
-
-    next.click()
-    await elementUpdated(el)
-
-    expect(el.page).to.equal(2)
-  })
-
-  it("decrements the page with a click on the prev button", async () => {
-    const el = await defaultFixture({
-      numOfItems: 98,
-      itemsPerPage: 7,
-      defaultPage: 10,
-    })
-
-    const next = el.shadowRoot.querySelectorAll("leu-button")[0]
-
-    next.click()
-    await elementUpdated(el)
-
-    expect(el.page).to.equal(9)
-  })
-
-  it("increments the page with pressing the arrow up key", async () => {
-    const el = await defaultFixture({
-      numOfItems: 98,
-      itemsPerPage: 7,
-      defaultPage: 1,
-    })
-
-    el.focus()
-
-    await sendKeys({
-      press: "ArrowUp",
-    })
-    await elementUpdated(el)
-
-    expect(el.page).to.equal(2)
-  })
-
-  it("decrements the page with pressing the arrow down key", async () => {
-    const el = await defaultFixture({
-      numOfItems: 98,
-      itemsPerPage: 7,
-      defaultPage: 13,
-    })
-
-    el.focus()
-
-    await sendKeys({
-      press: "ArrowDown",
-    })
-    await elementUpdated(el)
-
-    expect(el.page).to.equal(12)
-  })
-
-  it("bounds the page to the max and min values", async () => {
-    const el = await defaultFixture({
-      numOfItems: 50,
-      itemsPerPage: 10,
-      defaultPage: 6,
-    })
-
-    const input = el.shadowRoot.querySelector("input")
-
-    expect(el.page).to.equal(5)
-    expect(input.value).to.equal("5")
-
-    el.page = 0
-    await elementUpdated(el)
-
-    expect(el.page).to.equal(1)
-    expect(input.value).to.equal("1")
-
-    el.focus()
-
-    await sendKeys({
-      press: "ArrowDown",
-    })
-    await elementUpdated(el)
-
-    expect(el.page).to.equal(1)
-    expect(input.value).to.equal("1")
-
-    await sendKeys({ press: "ArrowUp" })
-    await sendKeys({ press: "ArrowUp" })
-    await sendKeys({ press: "ArrowUp" })
-    await sendKeys({ press: "ArrowUp" })
-    await sendKeys({ press: "ArrowUp" })
-
-    expect(el.page).to.equal(5)
-    expect(input.value).to.equal("5")
-  })
-
-  it("fires a leu:pagechange event", async () => {
-    const el = await defaultFixture({
-      numOfItems: 98,
-      itemsPerPage: 7,
-      defaultPage: 7,
-    })
-
-    const eventSpy = spy()
-    el.addEventListener("leu:pagechange", eventSpy)
-
-    const prevButton = el.shadowRoot.querySelectorAll("leu-button")[0]
-    const nextButton = el.shadowRoot.querySelectorAll("leu-button")[1]
-
-    nextButton.click()
-    prevButton.click()
-
-    el.focus()
-
-    await sendKeys({ press: "ArrowUp" })
-    await sendKeys({ press: "ArrowDown" })
-
-    expect(eventSpy).to.have.been.called.callCount(4)
-  })
-})

package/src/components/placeholder/Placeholder.ts

@@ -1,33 +0,0 @@
-import { html } from "lit"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-
-import styles from "./placeholder.css?inline"
-
-/**
- * @summary * A placeholder to display when no content is available.
- * @tagname leu-placeholder
- * @slot title - The placeholders title. Use a heading tag (h1-6) depeneding on your context.
- * @slot description - A description of the placeholder. Content is wrapped in a `<p>` tag by the component.
- * @slot cta - A call to action button like "Reload" or "Create". Add a single `<leu-button>`.
- *
- * @todo Add pending state with a skeleton.
- */
-export class LeuPlaceholder extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  static shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-  }
-
-  render() {
-    return html`
-      <div class="placeholder">
-        <slot class="placeholder__title" name="title"></slot>
-        <p><slot class="placeholder__description" name="description"></slot></p>
-        <slot name="cta"></slot>
-      </div>
-    `
-  }
-}

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

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

package/src/components/placeholder/placeholder.css

@@ -1,59 +0,0 @@
-@import url("../../styles/custom-media.css");
-
-:host {
-  --placeholder-font-regular: var(--leu-font-family-regular);
-  --placeholder-font-black: var(--leu-font-family-black);
-
-  --placeholder-border-color: var(--leu-color-black-20);
-
-  font-family: var(--placeholder-font-regular);
-}
-
-.placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-
-  border: 2px dashed var(--placeholder-border-color);
-  border-radius: 0.25rem;
-
-  padding: 2rem 1.5rem;
-
-  @media (--viewport-regular) {
-    padding: 2.5rem 2rem;
-  }
-
-  @media (--viewport-xlarge) {
-    padding: 3.5rem 2.5rem;
-  }
-}
-
-.placeholder__title {
-  display: block;
-}
-
-.placeholder__title::slotted(:where(h1, h2, h3, h4, h5, h6)) {
-  font: var(--leu-t-curve-regular-black-font);
-  color: var(--leu-color-black-100);
-  margin: 0 0 0.5rem;
-}
-
-.placeholder__description {
-  font: var(--leu-t-curve-small-regular-font);
-  color: var(--leu-color-black-60);
-
-  margin-bottom: 0.75rem;
-
-  @media (--viewport-small) {
-    margin-bottom: 2rem;
-  }
-
-  @media (--viewport-regular) {
-    margin-bottom: 1.25rem;
-  }
-
-  @media (--viewport-xlarge) {
-    margin-bottom: 1.5rem;
-  }
-}

package/src/components/placeholder/stories/placeholder.stories.ts

@@ -1,34 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components-vite"
-import { html } from "lit"
-
-import "../../button/leu-button.js"
-import "../../icon/leu-icon.js"
-import "../leu-placeholder.js"
-import { LeuPlaceholder } from "../Placeholder.js"
-
-type StoryArgs = LeuPlaceholder
-type Story = StoryObj<StoryArgs>
-
-export default {
-  title: "Components/Placeholder",
-  component: "leu-placeholder",
-} satisfies Meta<StoryArgs>
-
-const Template: Story = {
-  render: (_args) =>
-    html` <leu-placeholder>
-      <h2 slot="title">Keine Ergebnisse zu «Regoin Zürich» gefunden.</h2>
-      <p slot="description">
-        Überprüfen Sie die Schreibweise der eingegebenen Wörter. Versuchen Sie
-        andere Stichwörter. Versuchen Sie allgemeinere Stichwörter.
-      </p>
-      <leu-button slot="cta"> Suche zurücksetzen </leu-button>
-    </leu-placeholder>`,
-}
-
-export const Regular = {
-  ...Template,
-  args: {
-    // Add default args here
-  },
-}

package/src/components/placeholder/test/placeholder.test.ts

@@ -1,31 +0,0 @@
-import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
-
-import "../leu-placeholder.js"
-
-async function defaultFixture() {
-  return fixture(
-    html`<leu-placeholder>
-      <h2 slot="title">Keine Ergebnisse zu «Regoin Zürich» gefunden.</h2>
-      <p slot="description">
-        Überprüfen Sie die Schreibweise der eingegebenen Wörter. Versuchen Sie
-        andere Stichwörter. Versuchen Sie allgemeinere Stichwörter.
-      </p>
-      <leu-button slot="cta"> Suche zurücksetzen </leu-button>
-    </leu-placeholder>`,
-  )
-}
-
-describe("LeuPlaceholder", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-placeholder")
-
-    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/popup/Popup.ts

@@ -1,264 +0,0 @@
-import { html, PropertyValues } from "lit"
-import { property } from "lit/decorators.js"
-import {
-  autoUpdate,
-  computePosition,
-  flip,
-  Placement,
-  shift,
-  size,
-  offset,
-} from "@floating-ui/dom"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-
-import styles from "./popup.css?inline"
-
-export interface VirtualElement {
-  getBoundingClientRect: () => DOMRect
-  contextElement?: Element
-}
-
-function isVirtualElement(el: unknown): el is VirtualElement {
-  return (
-    el !== null &&
-    typeof el === "object" &&
-    "getBoundingClientRect" in el &&
-    ("contextElement" in el ? el instanceof Element : true)
-  )
-}
-
-/**
- * @tagname leu-popup
- */
-export class LeuPopup extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  static shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-  }
-
-  @property() anchor: Element | string | VirtualElement
-
-  @property({ type: Boolean, reflect: true })
-  active: boolean = false
-
-  @property({ type: String, reflect: true })
-  placement?: Placement
-
-  @property({ type: Boolean, reflect: true })
-  flip: boolean = false
-
-  @property({ type: Boolean, reflect: true })
-  shift: boolean = false
-
-  @property({ type: Number, reflect: true })
-  shiftPadding: number = 0
-
-  @property({ type: String, reflect: true })
-  matchSize?: "width" | "height" | "both"
-
-  /**
-   * Offsets the popup along the main axis.
-   * @link https://floating-ui.com/docs/offset#mainaxis
-   */
-  @property({ type: Number, reflect: true, attribute: "offset-main-axis" })
-  offsetMainAxis?: number
-
-  /**
-   * Offsets the popup along the cross axis.
-   * @link https://floating-ui.com/docs/offset#crossaxis
-   */
-  @property({ type: Number, reflect: true, attribute: "offset-cross-axis" })
-  offsetCrossAxis?: number
-
-  /**
-   * Offsets the popup along the alignment axis.
-   * Overrides the `offsetCrossAxis` value.
-   * @link https://floating-ui.com/docs/offset#alignmentaxis
-   */
-  @property({ type: Number, reflect: true, attribute: "offset-alignment-axis" })
-  offsetAlignmentAxis?: number
-
-  @property({ type: String, reflect: true }) autoSize?:
-    | "width"
-    | "height"
-    | "both"
-
-  @property({ type: Number, reflect: true }) autoSizePadding: number = 0
-
-  private anchorEl: Element | null
-
-  private cleanup: ReturnType<typeof autoUpdate> | undefined
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    this.stop()
-  }
-
-  updated(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has("active")) {
-      if (this.active) {
-        this.start()
-      } else {
-        this.stop()
-      }
-    }
-
-    if (changedProperties.has("anchor")) {
-      this.handleAnchorChange()
-    }
-
-    if (this.active) {
-      this.reposition()
-    }
-  }
-
-  protected get popupEl() {
-    return this.renderRoot?.querySelector<HTMLDivElement>(".popup") ?? null
-  }
-
-  protected start() {
-    if (!this.anchorEl || !this.active) return
-
-    this.cleanup = autoUpdate(this.anchorEl, this.popupEl, () => {
-      this.reposition()
-    })
-  }
-
-  protected stop() {
-    this.cleanup?.()
-
-    this.style.removeProperty("--auto-size-available-width")
-    this.style.removeProperty("--auto-size-available-height")
-  }
-
-  public reposition() {
-    if (!this.anchorEl || !this.popupEl || !this.active) return
-
-    const middleware = []
-
-    if (
-      this.offsetAlignmentAxis ||
-      this.offsetMainAxis ||
-      this.offsetCrossAxis
-    ) {
-      middleware.push(
-        offset({
-          mainAxis: this.offsetMainAxis,
-          crossAxis: this.offsetCrossAxis,
-          alignmentAxis: this.offsetAlignmentAxis,
-        }),
-      )
-    }
-
-    if (this.matchSize) {
-      middleware.push(
-        size({
-          apply: ({ rects }) => {
-            const matchWidth =
-              this.matchSize === "width" || this.matchSize === "both"
-            const matchHeight =
-              this.matchSize === "height" || this.matchSize === "both"
-            this.popupEl.style.width = matchWidth
-              ? `${rects.reference.width}px`
-              : ""
-            this.popupEl.style.height = matchHeight
-              ? `${rects.reference.height}px`
-              : ""
-          },
-        }),
-      )
-    } else {
-      // Cleanup styles if we're not matching width/height
-      this.popupEl.style.width = ""
-      this.popupEl.style.height = ""
-    }
-
-    if (this.flip) {
-      middleware.push(flip())
-    }
-
-    if (this.shift) {
-      middleware.push(shift({ padding: this.shiftPadding }))
-    }
-
-    if (this.autoSize) {
-      middleware.push(
-        size({
-          padding: this.autoSizePadding,
-          apply: ({ availableWidth, availableHeight }) => {
-            const setMaxWidth =
-              this.autoSize === "width" || this.autoSize === "both"
-            const setMaxHeight =
-              this.autoSize === "height" || this.autoSize === "both"
-
-            if (setMaxHeight) {
-              this.style.setProperty(
-                "--auto-size-available-height",
-                `${availableHeight}px`,
-              )
-            } else {
-              this.style.removeProperty("--auto-size-available-height")
-            }
-
-            if (setMaxWidth) {
-              this.style.setProperty(
-                "--auto-size-available-width",
-                `${availableWidth}px`,
-              )
-            } else {
-              this.style.removeProperty("--auto-size-available-width")
-            }
-          },
-        }),
-      )
-    } else {
-      // Cleanup styles if we're not auto-sizing
-      this.style.removeProperty("--auto-size-available-width")
-      this.style.removeProperty("--auto-size-available-height")
-    }
-
-    computePosition(this.anchorEl, this.popupEl, {
-      placement: this.placement,
-      middleware,
-    }).then(({ x, y }) => {
-      Object.assign(this.popupEl.style, {
-        left: `${x}px`,
-        top: `${y}px`,
-      })
-    })
-  }
-
-  handleAnchorChange() {
-    if (this.anchor && typeof this.anchor === "string") {
-      const root = this.getRootNode() as Document | ShadowRoot
-      this.anchorEl = root.getElementById(this.anchor)
-    } else if (
-      this.anchor instanceof HTMLElement ||
-      isVirtualElement(this.anchor)
-    ) {
-      this.anchorEl = this.anchor
-    } else {
-      this.anchorEl = this.querySelector("[slot=anchor]")
-    }
-
-    if (this.anchorEl instanceof HTMLSlotElement) {
-      ;[this.anchorEl] = this.anchorEl.assignedElements({ flatten: true })
-    }
-
-    if (this.anchorEl) {
-      this.start()
-    }
-  }
-
-  render() {
-    return html`
-      <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
-      <div class="popup">
-        <slot> </slot>
-      </div>
-    `
-  }
-}

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

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

package/src/components/popup/popup.css

@@ -1,24 +0,0 @@
-:host {
-  --popup-font-regular: var(--leu-font-family-regular);
-  --popup-font-black: var(--leu-font-family-black);
-
-  font-family: var(--popup-font-regular);
-  display: contents;
-}
-
-.popup {
-  display: none;
-
-  max-width: var(--auto-size-available-width, none);
-  max-height: var(--auto-size-available-height, none);
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: var(--leu-z-index-popup);
-}
-
-/* TODO: Should visibility be a matter of the popup component? */
-:host([active]) .popup {
-  display: block;
-}