@statistikzh/leu 0.14.4 → 0.15.1

package/src/components/checkbox/CheckboxGroup.ts

@@ -1,38 +1,42 @@
 import { html } from "lit"
 import { classMap } from "lit/directives/class-map.js"
+import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
 import styles from "./checkbox-group.css"
+import { LeuCheckbox } from "./Checkbox.js"
 
 /**
+ *
+ * @slot - Place the checkboxes inside the default slot.
  * @tagname leu-checkbox-group
  */
 export class LeuCheckboxGroup extends LeuElement {
   static styles = [LeuElement.styles, styles]
 
-  static properties = {
-    orientation: { type: String, reflect: true },
-    label: { type: String, reflect: true },
-  }
+  /**
+   * Defines how the checkboxes should be aligned.
+   */
+  @property({ type: String, reflect: true })
+  orientation: "horizontal" | "vertical" = "horizontal"
 
-  constructor() {
-    super()
-    /** @type {"horizontal" | "vertical"} */
-    this.orientation = "horizontal"
-    this.items = []
-  }
+  /**
+   * The label of the checkbox group
+   */
+  @property({ type: String, reflect: true })
+  label?: string
+
+  private items: LeuCheckbox[] = []
 
   get value() {
     return this.items.filter((i) => i.checked).map((i) => i.value)
   }
 
-  handleSlotChange() {
-    this.handleItems()
-  }
-
-  handleItems() {
-    this.items = Array.from(this.querySelectorAll(":scope > *:not([slot])"))
+  private handleSlotChange() {
+    this.items = Array.from(
+      this.querySelectorAll(":scope > *:not([slot])"),
+    ).filter((el) => el instanceof LeuCheckbox)
   }
 
   render() {

package/src/components/icon/stories/icon.stories.ts

@@ -45,3 +45,30 @@ Colored.args = {
   size: 24,
   color: "#d93c1a",
 }
+
+export const Overview = {
+  render: ({ color, size }) => html`
+    <ul
+      style="font-family: var(--leu-font-family-regular); color: var(--leu-color-black-60); list-style: none; margin: 0; padding: 0;"
+    >
+      ${Object.keys(paths).map(
+        (name) =>
+          html`<li
+            style="display: flex; align-items: center; margin-bottom: 1rem; gap: 1rem;"
+          >
+            <leu-icon
+              style="color: ${color}; ${size
+                ? `--leu-icon-size: ${size}px`
+                : ""};"
+              name=${ifDefined(name)}
+            ></leu-icon>
+            ${name}
+          </li>`,
+      )}
+    </ul>
+  `,
+  args: {
+    size: 24,
+    color: "#000000",
+  },
+}

package/src/components/pagination/Pagination.ts

@@ -1,5 +1,6 @@
 import { html } from "lit"
 import { live } from "lit/directives/live.js"
+import { property, state } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuButton } from "../button/Button.js"
@@ -30,32 +31,30 @@ export class LeuPagination extends LeuElement {
     delegatesFocus: true,
   }
 
-  static properties = {
-    defaultPage: { type: Number, reflect: true },
-    itemsPerPage: { type: Number, reflect: true },
-    numOfItems: { type: Number, reflect: true },
-    _page: { state: true },
-  }
-
-  constructor() {
-    super()
+  @property({ type: Number, reflect: true })
+  defaultPage?: number
 
-    /** @type {Number} */
-    this.numOfItems = 1
+  /**
+   * Number of items per page.
+   */
+  @property({ type: Number, reflect: true })
+  itemsPerPage: number = 1
 
-    /** @type {Number} */
-    this.itemsPerPage = 1
+  /**
+   * Total number of items to paginate.
+   */
+  @property({ type: Number, reflect: true })
+  numOfItems: number = 1
 
-    /**
-     * Internal page state that contains an
-     * already clamped page number. Should only
-     * be accessed through the `page` getter and
-     * setter.
-     * @type {Number}
-     * @internal
-     */
-    this._page = 1
-  }
+  /**
+   * Internal page state that contains an
+   * already clamped page number. Should only
+   * be accessed through the `page` getter and
+   * setter.
+   * @internal
+   */
+  @state()
+  private _page: number = 1
 
   attributeChangedCallback(name, oldVal, newVal) {
     super.attributeChangedCallback(name, oldVal, newVal)
@@ -65,6 +64,11 @@ export class LeuPagination extends LeuElement {
     }
   }
 
+  /**
+   * The current page number. This is a 1-based index.
+   * When setting this value, it will be clamped
+   * to the range of valid pages.
+   */
   get page() {
     return this._page
   }
@@ -73,10 +77,19 @@ export class LeuPagination extends LeuElement {
     this._page = this._clampPage(page)
   }
 
+  /**
+   * The index of the first item on the current page.
+   */
   get startIndex() {
     return (this.page - 1) * this.itemsPerPage
   }
 
+  /**
+   * The index of the last item on the current page.
+   * This is exclusive, meaning it is one past the last item.
+   *
+   * @todo This value should be inclusive, meaning it should be the index of the last item on the page.
+   */
   get endIndex() {
     return Math.min(this.startIndex + this.itemsPerPage, this.numOfItems)
   }
@@ -85,19 +98,19 @@ export class LeuPagination extends LeuElement {
     return Math.ceil(this.numOfItems / this.itemsPerPage)
   }
 
-  _isFirstPage() {
+  private _isFirstPage() {
     return this.page === MIN_PAGE
   }
 
-  _isLastPage() {
+  private _isLastPage() {
     return this.page === this._maxPage
   }
 
-  _clampPage(page) {
+  private _clampPage(page: number) {
     return Math.min(Math.max(page, MIN_PAGE), this._maxPage)
   }
 
-  _updatePage(page) {
+  private _updatePage(page) {
     const prevPage = this.page
     this.page = this._clampPage(page)
 
@@ -115,18 +128,18 @@ export class LeuPagination extends LeuElement {
     }
   }
 
-  _handleChange(event) {
+  private _handleChange(event: Event & { target: HTMLInputElement }) {
     this._updatePage(parseInt(event.target.value, 10) || 0)
   }
 
-  _handleInput(event) {
+  private _handleInput(event: InputEvent & { target: HTMLInputElement }) {
     if (event.target.value !== "") {
       event.preventDefault()
       this._handleChange(event)
     }
   }
 
-  _handleKeyDown(event) {
+  private _handleKeyDown(event: KeyboardEvent & { target: HTMLInputElement }) {
     if (event.key === "ArrowUp") {
       event.preventDefault()
       this._updatePage(this.page + 1)
@@ -158,7 +171,7 @@ export class LeuPagination extends LeuElement {
         <leu-button
           variant="secondary"
           label="Vorherige Seite"
-          @click=${(_) => {
+          @click=${() => {
             this._updatePage(this.page - 1)
           }}
           ?disabled=${this._isFirstPage()}
@@ -167,7 +180,7 @@ export class LeuPagination extends LeuElement {
         <leu-button
           variant="secondary"
           label="Nächste Seite"
-          @click=${(_) => {
+          @click=${() => {
             this._updatePage(this.page + 1)
           }}
           ?disabled=${this._isLastPage()}

package/src/components/pagination/stories/pagination.stories.ts

@@ -1,11 +1,20 @@
 import { html } from "lit"
-import { action } from "@storybook/addon-actions"
-
-import "../leu-pagination.js"
+import { ifDefined } from "lit/directives/if-defined.js"
 
 // https://stackoverflow.com/questions/72566428/storybook-angular-how-to-dynamically-update-args-from-the-template
 import { UPDATE_STORY_ARGS } from "@storybook/core-events" // eslint-disable-line
-import { ifDefined } from "lit/directives/if-defined.js"
+import { action, HandlerFunction } from "@storybook/addon-actions"
+import { Meta, StoryObj } from "@storybook/web-components"
+
+import "../leu-pagination.js"
+import { LeuPagination } from "../Pagination.js"
+
+interface ExtraArgs {
+  onPageChange: HandlerFunction
+}
+
+type StoryArgs = LeuPagination & ExtraArgs
+type Story = StoryObj<StoryArgs>
 
 function updateStorybookArgss(id, args) {
   const channel = window.__STORYBOOK_ADDONS_CHANNEL__
@@ -69,13 +78,13 @@ export default {
       url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17341-82468&mode=design&t=lzVrtq8lxYVJU5TB-11",
     },
   },
-}
+} satisfies Meta<StoryArgs>
 
-function Template(
-  { startIndex, endIndex, onPageChange, itemsPerPage, defaultPage },
-  { id },
-) {
-  return html`
+const Template: Story = {
+  render: (
+    { startIndex, endIndex, onPageChange, itemsPerPage, defaultPage },
+    { id },
+  ) => html`
     ${items
       .slice(startIndex, endIndex)
       .map((item) => html`<div>${item.label}</div>`)}
@@ -92,13 +101,15 @@ function Template(
       }}
     >
     </leu-pagination>
-  `
+  `,
 }
 
-export const Regular = Template.bind({})
-Regular.args = {
-  startIndex: 0,
-  endIndex: 5,
-  itemsPerPage: 5,
-  // defaultPage: 2,
+export const Regular: Story = {
+  ...Template,
+  args: {
+    startIndex: 0,
+    endIndex: 5,
+    itemsPerPage: 5,
+    // defaultPage: 2,
+  },
 }

package/src/components/placeholder/Placeholder.ts

@@ -0,0 +1,33 @@
+import { html } from "lit"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+import styles from "./placeholder.css"
+
+/**
+ * @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

@@ -0,0 +1,5 @@
+import { LeuPlaceholder } from "./Placeholder.js"
+
+export { LeuPlaceholder }
+
+LeuPlaceholder.define("leu-placeholder")

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/radio/Radio.ts

@@ -1,4 +1,5 @@
 import { html } from "lit"
+import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
@@ -16,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.ts

@@ -1,28 +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"
 
 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
@@ -42,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
@@ -55,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) {
@@ -93,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) {
@@ -124,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"),
     )
@@ -148,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() {