@statistikzh/leu 0.14.4 → 0.15.0

package/src/components/button/Button.ts

@@ -1,6 +1,7 @@
 import { html, nothing } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { ifDefined } from "lit/directives/if-defined.js"
+import { property } from "lit/decorators.js"
 
 import { LeuIcon } from "../icon/Icon.js"
 import { LeuElement } from "../../lib/LeuElement.js"
@@ -9,31 +10,12 @@ import { ARIA_CHECKED_ROLES, ARIA_SELECTED_ROLES } from "../../lib/a11y.js"
 
 import styles from "./button.css"
 
-/*
-Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
-Live Demo: zh.ch
-*/
-
-const BUTTON_VARIANTS = ["primary", "secondary", "ghost"]
-Object.freeze(BUTTON_VARIANTS)
-export { BUTTON_VARIANTS }
-
-const BUTTON_SIZES = ["regular", "small"]
-Object.freeze(BUTTON_SIZES)
-export { BUTTON_SIZES }
-
-const BUTTON_TYPES = ["button", "submit", "reset"]
-Object.freeze(BUTTON_TYPES)
-export { BUTTON_TYPES }
-
-export const BUTTON_EXPANDED_OPTIONS = ["true", "false"]
-Object.freeze(BUTTON_EXPANDED_OPTIONS)
-
 /**
  * @tagname leu-button
  * @slot before - The icon to display before the label
  * @slot after - The icon to display after the label
  * @slot - The label of the button or the icon if no label is set
+ * @see https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
  */
 export class LeuButton extends LeuElement {
   static dependencies = {
@@ -42,72 +24,92 @@ export class LeuButton extends LeuElement {
 
   static styles = [LeuElement.styles, styles]
 
-  /**
-   * @internal
-   */
   static shadowRootOptions = {
     ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
-  /**
-   * @internal
-   */
-  hasSlotController = new HasSlotController(this, [
+  private hasSlotController = new HasSlotController(this, [
     "before",
     "after",
     "[default]",
   ])
 
-  static properties = {
-    label: { type: String, reflect: true },
-    size: { type: String, reflect: true },
-    variant: { type: String, reflect: true },
-    type: { type: String, reflect: true },
-    componentRole: { type: String, reflect: true },
-
-    disabled: { type: Boolean, reflect: true },
-    round: { type: Boolean, reflect: true },
-    active: { type: Boolean, reflect: true },
-    inverted: { type: Boolean, reflect: true },
-    expanded: { type: String, reflect: true },
-    fluid: { type: Boolean, reflect: true },
-  }
+  /**
+   * `aria-label` of the underlying button elements.
+   * Use it to provide a label when only an icon is visible.
+   */
+  @property({ type: String, reflect: true })
+  label: null | string = null
 
-  constructor() {
-    super()
-    /** @type {string} */
-    this.label = null
-    /** @type {string} */
-    this.size = "regular"
-    /** @type {string} */
-    this.variant = "primary"
-    /** @type {"button" | "submit" | "reset"} */
-    this.type = "button"
-
-    /** @type {string} */
-    this.componentRole = undefined
-
-    /** @type {boolean} */
-    this.disabled = false
-    /** @type {boolean} - Only taken into account if no Label and an Icon is set */
-    this.round = false
-    /** @type {boolean} */
-    this.active = false
-    /** @type {boolean} - will be used on dark Background */
-    this.inverted = false
-
-    /** @type {boolean} - Alters the shape of the button to be full width of its parent container */
-    this.fluid = false
-
-    /**
-     * Only taken into account if variant is "ghost"
-     * @type {("true" | "false" | undefined)}
-     */
-    this.expanded = undefined
-  }
+  /**
+   * The size of the button.
+   */
+  @property({ type: String, reflect: true })
+  size: "regular" | "small" = "regular"
+
+  /**
+   * The visual variant of the button.
+   */
+  @property({ type: String, reflect: true })
+  variant: "primary" | "secondary" | "ghost" = "primary"
+
+  /**
+   * The `type` of the underlying button element.
+   */
+  @property({ type: String, reflect: true })
+  type: "button" | "submit" | "reset" = "button"
+
+  /**
+   * The `role` of the underlying button element.
+   */
+  @property({ type: String, reflect: true })
+  componentRole?: string
+
+  /**
+   * Whether the button is disabled or not.
+   * @type {boolean}
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false
+
+  /**
+   * Whether the button should be round.
+   * Can only be applied when the button contains an icon without a visible label.
+   * @type {boolean}
+   */
+  @property({ type: Boolean, reflect: true })
+  round: boolean = false
+
+  /**
+   * Whether the button is active or not.
+   * Depending on the `componentRole`, it applies `aria-checked` or `aria-selected` to the underlying button element.
+   */
+  @property({ type: Boolean, reflect: true })
+  active: boolean = false
+
+  /**
+   * Wheter the colors should be inverted. For use on dark backgrounds.
+   */
+  @property({ type: Boolean, reflect: true })
+  inverted: boolean = false
+
+  /**
+   * Whether the button is expanded or not.
+   * Only has an effect on the variant `ghost` to show an expanding icon.
+   * If the property is not set, the icon will not be shown.
+   * If it is set, the icon will either show an expanded or collapsed state.
+   */
+  @property({ type: String, reflect: true })
+  expanded?: "true" | "false"
+
+  /**
+   * Alters the shape of the button to be full width of its parent container
+   */
+  @property({ type: Boolean, reflect: true })
+  fluid: boolean = false
 
-  renderExpandingIcon() {
+  private renderExpandingIcon() {
     if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
       return html`<div class="icon-expanded">
         <leu-icon name="angleDropDown" size="24"></leu-icon>
@@ -117,16 +119,30 @@ export class LeuButton extends LeuElement {
     return nothing
   }
 
-  getAriaAttributes() {
-    const attributes = {
+  private getAriaAttributes() {
+    const attributes: {
+      role: string
+      label: string
+      checked?: "true" | "false"
+      selected?: "true" | "false"
+    } = {
       role: this.componentRole,
       label: this.label,
     }
 
+    // TODO: checked and selected roles are not mutually exclusive
     if (this.componentRole) {
-      if (ARIA_CHECKED_ROLES.includes(this.componentRole)) {
+      if (
+        (ARIA_CHECKED_ROLES as ReadonlyArray<string>).includes(
+          this.componentRole,
+        )
+      ) {
         attributes.checked = this.active ? "true" : "false"
-      } else if (ARIA_SELECTED_ROLES.includes(this.componentRole)) {
+      } else if (
+        (ARIA_SELECTED_ROLES as ReadonlyArray<string>).includes(
+          this.componentRole,
+        )
+      ) {
         attributes.selected = this.active ? "true" : "false"
       }
     }
@@ -134,7 +150,7 @@ export class LeuButton extends LeuElement {
     return attributes
   }
 
-  hasTextContent() {
+  private hasTextContent() {
     return Array.from(this.childNodes).some(
       (node) =>
         node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "",

package/src/components/button/stories/button.stories.ts

@@ -4,12 +4,11 @@ import { classMap } from "lit/directives/class-map.js"
 import "../leu-button.js"
 import "../../icon/leu-icon.js"
 import { paths as iconPaths } from "../../icon/paths.js"
-import {
-  BUTTON_VARIANTS,
-  BUTTON_TYPES,
-  BUTTON_SIZES,
-  BUTTON_EXPANDED_OPTIONS,
-} from "../Button.js"
+
+const BUTTON_VARIANTS = ["primary", "secondary", "ghost"] as const
+const BUTTON_SIZES = ["regular", "small"] as const
+const BUTTON_TYPES = ["button", "submit", "reset"] as const
+const BUTTON_EXPANDED_OPTIONS = ["true", "false"] as const
 
 function copyContent(e) {
   navigator.clipboard.writeText(e.target.outerHTML.replace(/<!--.*?-->/g, ""))

package/src/components/button-group/ButtonGroup.ts

@@ -1,13 +1,15 @@
 import { html } from "lit"
+
 import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuButton } from "../button/Button.js"
 
 import styles from "./button-group.css"
-import { LeuButton } from "../button/Button.js"
 
 /**
+ * A radio input-like button group component.
+ * It allows only one button to be active at a time.
  * @tagname leu-button-group
  * @slot - Slot for the buttons
- * @prop {string} value - The value of the currenty selected (active) button
  * @fires input - When the value of the group changes by clicking a button
  */
 export class LeuButtonGroup extends LeuElement {
@@ -16,13 +18,15 @@ export class LeuButtonGroup extends LeuElement {
   private _items: LeuButton[] = []
 
   /**
-   * @param {import("../button/Button.js").LeuButton} button
-   * @returns {string}
+   * Retrieves the value or the text content of a given LeuButton element.
    */
-  static getButtonValue(button) {
-    return button.getAttribute("value") ?? button.innerText.trim()
+  private static getButtonValue(button: LeuButton) {
+    return button.getAttribute("value") ?? button.textContent.trim()
   }
 
+  /**
+   * The value of the currently selected (active) button
+   */
   get value() {
     const activeButton = this._items.find((item) => item.active)
     return activeButton ? LeuButtonGroup.getButtonValue(activeButton) : null
@@ -36,7 +40,7 @@ export class LeuButtonGroup extends LeuElement {
     })
   }
 
-  _handleSlotChange() {
+  private _handleSlotChange() {
     /**
      * Remove all event listeners that were added before.
      * Just because a slotchange event was fired, it doesn't mean that all of the
@@ -47,13 +51,15 @@ export class LeuButtonGroup extends LeuElement {
     })
 
     const slot = this.shadowRoot.querySelector("slot")
-    this._items = slot.assignedElements({ flatten: true })
+    this._items = slot
+      .assignedElements({ flatten: true })
+      .filter((el) => el instanceof LeuButton)
 
     let foundActiveButtonBefore = false
 
     this._items.forEach((item) => {
       /* eslint-disable no-param-reassign */
-      item.addEventListener("click", () => this._handleButtonClick(item))
+      item.addEventListener("click", this._handleButtonClick)
       item.componentRole = "menuitemradio"
 
       /**
@@ -70,10 +76,9 @@ export class LeuButtonGroup extends LeuElement {
     })
   }
 
-  /**
-   * @param {import("../button/Button.js").LeuButton} button
-   */
-  _handleButtonClick(button) {
+  private _handleButtonClick = (event: MouseEvent) => {
+    const button = event.currentTarget as LeuButton
+
     if (!button.active) {
       this.value = LeuButtonGroup.getButtonValue(button)
 

package/src/components/checkbox/Checkbox.ts

@@ -1,4 +1,5 @@
 import { html } from "lit"
+import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuIcon } from "../icon/Icon.js"
@@ -21,29 +22,26 @@ export class LeuCheckbox 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/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()}