@statistikzh/leu 0.14.3 → 0.15.0

package/src/components/placeholder/placeholder.css

@@ -0,0 +1,59 @@
+@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

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

@@ -0,0 +1,31 @@
+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.js → Popup.ts}

@@ -9,7 +9,6 @@ import {
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./popup.css"
 
 /**

package/src/components/popup/{leu-popup.js → leu-popup.ts}

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

package/src/components/radio/{Radio.js → Radio.ts}

@@ -1,8 +1,8 @@
 import { html } from "lit"
+import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./radio.css"
 
 /**
@@ -17,29 +17,26 @@ export class LeuRadio extends LeuElement {
     delegatesFocus: true,
   }
 
-  static properties = {
-    checked: { type: Boolean, reflect: true },
-    disabled: { type: Boolean, reflect: true },
-    value: { type: String, reflect: true },
-    name: { type: String, reflect: true },
-  }
+  @property({ type: Boolean, reflect: true })
+  checked: boolean = false
 
-  constructor() {
-    super()
-    this.checked = false
-    this.disabled = false
-    this.name = ""
-    this.value = ""
-  }
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false
+
+  @property({ type: String, reflect: true })
+  value: string = ""
+
+  @property({ type: String, reflect: true })
+  name: string = ""
 
-  handleChange(event) {
+  private handleChange(event: Event & { target: HTMLInputElement }) {
     this.checked = event.target.checked
 
     const customEvent = new CustomEvent(event.type, event)
     this.dispatchEvent(customEvent)
   }
 
-  handleInput(event) {
+  private handleInput(event: InputEvent & { target: HTMLInputElement }) {
     this.checked = event.target.checked
   }
 

package/src/components/radio/{RadioGroup.js → RadioGroup.ts}

@@ -1,29 +1,39 @@
 import { html } from "lit"
 import { classMap } from "lit/directives/class-map.js"
+import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./radio-group.css"
+import { LeuRadio } from "./Radio.js"
 
 /**
+ * @summary Handles a group of radio buttons, allowing only one to be selected at a time. It provides keyboard navigation and manages focus within the group.
+ * @slot - Place the radio buttons inside the default slot.
  * @tagname leu-radio-group
  */
 export class LeuRadioGroup extends LeuElement {
   static styles = [LeuElement.styles, styles]
 
-  static properties = {
-    orientation: { type: String, reflect: true },
-    label: { type: String, reflect: true },
-  }
+  /**
+   * Defines how the radio buttons should be aligned.
+   */
+  @property({ type: String, reflect: true })
+  orientation: "horizontal" | "vertical" = "horizontal"
 
-  constructor() {
-    super()
-    /** @type {"horizontal" | "vertical"} */
-    this.orientation = "horizontal"
-    this._currentIndex = 0
-    this.items = []
-  }
+  /**
+   * The label of the radio group
+   */
+  @property({ type: String, reflect: true })
+  label?: string
+
+  /**
+   * Index of the radio button that would be focused
+   * when the focus moves into the group.
+   */
+  private currentIndex = 0
+
+  private items: LeuRadio[] = []
 
   get value() {
     const checkedValues = this.items
@@ -43,7 +53,7 @@ export class LeuRadioGroup extends LeuElement {
     this.removeEventListeners()
   }
 
-  addEventListeners() {
+  private addEventListeners() {
     /**
      * It is technically possible to add an event listener to the host element
      * before it is connected to the dom. In that case the outside event listener would
@@ -56,21 +66,21 @@ export class LeuRadioGroup extends LeuElement {
     this.addEventListener("keydown", this.handleKeyDown)
   }
 
-  removeEventListeners() {
+  private removeEventListeners() {
     this.removeEventListener("input", this.handleInput, { capture: true })
     this.removeEventListener("focusin", this.handleFocusIn)
     this.removeEventListener("keydown", this.handleKeyDown)
   }
 
-  handleSlotChange() {
+  private handleSlotChange() {
     this.handleItems()
   }
 
-  handleFocusIn = (e) => {
-    this._currentIndex = this.items.indexOf(e.target)
+  private handleFocusIn = (e: FocusEvent & { target: LeuRadio }) => {
+    this.currentIndex = this.items.indexOf(e.target)
   }
 
-  handleKeyDown = (e) => {
+  private handleKeyDown = (e: KeyboardEvent & { target: LeuRadio }) => {
     const currentIndex = this.items.indexOf(e.target)
 
     switch (e.key) {
@@ -94,19 +104,19 @@ export class LeuRadioGroup extends LeuElement {
     this.setTabIndex()
   }
 
-  handleInput = (e) => {
+  private handleInput = (e: InputEvent & { target: LeuRadio }) => {
     this.items.forEach((item) => {
       item.checked = item === e.target // eslint-disable-line no-param-reassign
     })
   }
 
-  selectItem(selectingItem) {
+  private selectItem(selectingItem: LeuRadio) {
     this.items.forEach((item) => {
       item.checked = item === selectingItem // eslint-disable-line no-param-reassign
     })
   }
 
-  selectNextItem(startingIndex, direction) {
+  private selectNextItem(startingIndex: number, direction: -1 | 1) {
     let selected = false
 
     for (let index = 0; index < this.items.length; index += 1) {
@@ -125,23 +135,26 @@ export class LeuRadioGroup extends LeuElement {
     }
   }
 
-  setTabIndex() {
+  private setTabIndex() {
     this.items.forEach((item, index) => {
-      if (index === this._currentIndex) {
-        item.tabIndex = "0" // eslint-disable-line no-param-reassign
+      if (index === this.currentIndex) {
+        item.tabIndex = 0 // eslint-disable-line no-param-reassign
       } else {
-        item.tabIndex = "-1" // eslint-disable-line no-param-reassign
+        item.tabIndex = -1 // eslint-disable-line no-param-reassign
       }
     })
   }
 
-  handleItems() {
-    this.items = Array.from(this.querySelectorAll(":scope > *:not([slot])"))
+  private handleItems() {
+    this.items = Array.from(
+      this.querySelectorAll(":scope > *:not([slot])"),
+    ).filter((el) => el instanceof LeuRadio)
+
     this.initializeIndex()
     this.setTabIndex()
   }
 
-  initializeIndex() {
+  private initializeIndex() {
     const index = this.items.findIndex(
       (item) => item.hasAttribute("checked") && !item.hasAttribute("disabled"),
     )
@@ -149,7 +162,7 @@ export class LeuRadioGroup extends LeuElement {
       (item) => !item.hasAttribute("disabled"),
     )
 
-    this._currentIndex = index >= 0 ? index : nextEnabledIndex
+    this.currentIndex = index >= 0 ? index : nextEnabledIndex
   }
 
   render() {

package/src/components/radio/{leu-radio-group.js → leu-radio-group.ts}

@@ -3,3 +3,9 @@ import { LeuRadioGroup } from "./RadioGroup.js"
 export { LeuRadioGroup }
 
 LeuRadioGroup.define("leu-radio-group")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-radio-group": LeuRadioGroup
+  }
+}

package/src/components/radio/{leu-radio.js → leu-radio.ts}

@@ -3,3 +3,9 @@ import { LeuRadio } from "./Radio.js"
 export { LeuRadio }
 
 LeuRadio.define("leu-radio")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-radio": LeuRadio
+  }
+}

package/src/components/range/{leu-range.js → leu-range.ts}

@@ -3,3 +3,9 @@ import { LeuRange } from "./Range.js"
 export { LeuRange }
 
 LeuRange.define("leu-range")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-range": LeuRange
+  }
+}

package/src/components/scroll-top/{ScrollTop.js → ScrollTop.ts}

@@ -7,7 +7,6 @@ import { LeuIcon } from "../icon/Icon.js"
 
 import { throttle } from "../../lib/utils.js"
 
-// @ts-ignore
 import styles from "./scroll-top.css"
 
 /**

package/src/components/scroll-top/{leu-scroll-top.js → leu-scroll-top.ts}

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

package/src/components/select/{Select.js → Select.ts}

@@ -13,7 +13,6 @@ import { LeuIcon } from "../icon/Icon.js"
 import { LeuInput } from "../input/Input.js"
 import { LeuPopup } from "../popup/Popup.js"
 
-// @ts-ignore
 import styles from "./select.css"
 
 /**

package/src/components/select/{leu-select.js → leu-select.ts}

@@ -3,3 +3,9 @@ import { LeuSelect } from "./Select.js"
 export { LeuSelect }
 
 LeuSelect.define("leu-select")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-select": LeuSelect
+  }
+}

package/src/components/select/test/{fixtures.js → fixtures.ts}

@@ -159,4 +159,4 @@ export const MUNICIPALITIES = [
   "Illnau-Effretikon",
   "Bauma",
   "Wiesendangen",
-]
+] as const

package/src/components/spinner/{leu-spinner.js → leu-spinner.ts}

@@ -3,3 +3,9 @@ import { LeuSpinner } from "./Spinner.js"
 export { LeuSpinner }
 
 LeuSpinner.define("leu-spinner")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-spinner": LeuSpinner
+  }
+}

package/src/components/table/{Table.js → Table.ts}

@@ -7,7 +7,6 @@ import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuIcon } from "../icon/Icon.js"
 import { LeuPagination } from "../pagination/Pagination.js"
 
-// @ts-ignore
 import styles from "./table.css"
 
 /**

package/src/components/table/{leu-table.js → leu-table.ts}

@@ -3,3 +3,9 @@ import { LeuTable } from "./Table.js"
 export { LeuTable }
 
 LeuTable.define("leu-table")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-table": LeuTable
+  }
+}

package/src/components/visualization/ChartWrapper.ts

@@ -0,0 +1,75 @@
+import { html, nothing } from "lit"
+import { property } from "lit/decorators.js"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+import styles from "./chart-wrapper.css"
+import { HasSlotController } from "../../lib/hasSlotController.js"
+import { LeuSpinner } from "../spinner/Spinner.js"
+
+/**
+ * A wrapper element for charts.
+ * @tagname leu-chart-wrapper
+ * @slot title - The title of the chart. Use a heading tag (h2-4) depending on your context.
+ * @slot description - A description of the chart. Content is wrapped in a `<p>` tag by the component.
+ * @slot chart - The actual chart
+ * @slot caption - A caption for the chart, e.g. a source or explanation of the data.
+ * @slot download - A download button or dropdown to export the chart in different formats.
+ */
+export class LeuChartWrapper extends LeuElement {
+  static styles = [LeuElement.styles, styles]
+
+  static shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static dependencies = {
+    "leu-spinner": LeuSpinner,
+  }
+
+  /**
+   * Whether the chart is currently loading or not.
+   * When set to `true`, a spinner will be shown in the chart container.
+   */
+  @property({ type: Boolean, reflect: true })
+  pending: boolean = false
+
+  hasSlotController = new HasSlotController(this, [
+    "description",
+    "caption",
+    "download",
+  ])
+
+  render() {
+    const hasDescription = this.hasSlotController.test("description")
+    const hasCaption = this.hasSlotController.test("caption")
+    const hasDownload = this.hasSlotController.test("download")
+
+    return html`
+      <figure>
+        <slot name="title" class="title"></slot>
+        ${hasDescription
+          ? html`<slot name="description" class="description"></slot>`
+          : nothing}
+        <div class="chart-container">
+          <slot name="chart" class="chart"></slot>
+          ${this.pending
+            ? html`<div class="spinner-container">
+                <leu-spinner class="spinner"></leu-spinner>
+              </div>`
+            : nothing}
+        </div>
+        ${hasCaption
+          ? html`<figcaption>
+              <slot name="caption" class="caption"></slot>
+            </figcaption>`
+          : nothing}
+        <hr class="ruler" />
+        ${hasDownload
+          ? html`<slot name="download" class="download"></slot>`
+          : nothing}
+      </figure>
+    `
+  }
+}

package/src/components/visualization/chart-wrapper.css

@@ -0,0 +1,78 @@
+@import url("../../styles/custom-media.css");
+
+.title::slotted(h2) {
+  font: var(--leu-t-curve-large-black-font);
+  margin: 0 0 0.75rem;
+
+  @media (--viewport-medium) {
+    margin: 0 0 1.25rem;
+  }
+
+  @media (--viewport-xlarge) {
+    margin: 0 0 1.5rem;
+  }
+}
+
+.title::slotted(h3) {
+  font: var(--leu-t-curve-medium-black-font);
+  margin: 0 0 0.5rem;
+}
+
+.title::slotted(h4) {
+  font: var(--leu-t-curve-regular-black-font);
+  margin: 0 0 0.5rem;
+}
+
+.description,
+.chart {
+  display: block;
+  margin-bottom: 0.75rem;
+
+  @media (--viewport-medium) {
+    margin-bottom: 1.25rem;
+  }
+
+  @media (--viewport-xlarge) {
+    margin-bottom: 1.5rem;
+  }
+}
+
+.description {
+  font: var(--leu-t-curve-small-regular-font);
+  color: var(--leu-color-black-60);
+}
+
+.caption {
+  font: var(--leu-t-curve-tiny-regular-font);
+  color: var(--leu-color-black-60);
+}
+
+.ruler {
+  display: block;
+  border: none;
+  border-top: 1px solid var(--leu-color-black-transp-20);
+  margin: 0.75rem 0;
+
+  @media (--viewport-xlarge) {
+    margin-block: 1rem;
+  }
+}
+
+.download {
+  display: block;
+  margin-left: -0.5rem;
+}
+
+.chart-container {
+  position: relative;
+}
+
+.spinner-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-content: center;
+}

package/src/components/visualization/leu-chart-wrapper.ts

@@ -0,0 +1,5 @@
+import { LeuChartWrapper } from "./ChartWrapper.js"
+
+export { LeuChartWrapper }
+
+LeuChartWrapper.define("leu-chart-wrapper")

package/src/components/visualization/stories/chart-wrapper.stories.ts

@@ -0,0 +1,52 @@
+import { Meta, StoryObj } from "@storybook/web-components"
+import { html } from "lit"
+
+import "../../dropdown/leu-dropdown.js"
+import "../leu-chart-wrapper.js"
+import { LeuChartWrapper } from "../ChartWrapper.js"
+
+type StoryArgs = LeuChartWrapper
+type Story = StoryObj<StoryArgs>
+
+export default {
+  title: "Components/ChartWrapper",
+  component: "leu-chart-wrapper",
+} satisfies Meta<StoryArgs>
+
+const Template: Story = {
+  render: ({ pending }) =>
+    html`<leu-chart-wrapper ?pending=${pending}>
+      <h2 slot="title">Entwicklung der Leerwohnungsziffer seit 1984</h2>
+      <span slot="description">Leerwohnungsziffer, in Prozent</span>
+      <img
+        style="display: block; width: 100%; height: auto;"
+        slot="chart"
+        src="https://placehold.co/1200x400"
+        alt="A placeholder to indicate where a chart would appear"
+      />
+      <span slot="caption">Quelle: Statistisches Amt des Kantons Zürich</span>
+      <leu-dropdown slot="download" label="Download">
+        <leu-icon name="download" slot="icon"></leu-icon>
+        <leu-menu>
+          <leu-menu-item
+            href="https://www.web.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00001120_00002165.csv"
+            >OGD Ressource</leu-menu-item
+          >
+          <leu-menu-item>Als CSV Tabelle</leu-menu-item>
+          <leu-menu-item>Als XLS Tabelle</leu-menu-item>
+          <hr />
+          <leu-menu-item>Als PNG exportieren</leu-menu-item>
+          <leu-menu-item>Als SVG exportieren</leu-menu-item>
+          <leu-menu-item disabled>Als PDF exportieren</leu-menu-item>
+        </leu-menu>
+      </leu-dropdown>
+    </leu-chart-wrapper>`,
+}
+
+export const Regular = {
+  ...Template,
+  args: {
+    // Add default args here
+    pending: false,
+  },
+}