@statistikzh/leu 0.14.3 → 0.15.0

package/src/components/checkbox/{Checkbox.js → Checkbox.ts}

@@ -1,9 +1,9 @@
 import { html } from "lit"
+import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuIcon } from "../icon/Icon.js"
 
-// @ts-ignore
 import styles from "./checkbox.css"
 
 /**
@@ -22,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.js → CheckboxGroup.ts}

@@ -1,39 +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"
 
-// @ts-ignore
 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/checkbox/{leu-checkbox-group.js → leu-checkbox-group.ts}

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

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

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

package/src/components/chip/{Chip.js → Chip.ts}

@@ -1,6 +1,5 @@
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./chip.css"
 
 /* Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=21161-184433&mode=design&t=Kjo5VDiqivihn8dh-11 */

package/src/components/chip/{ChipGroup.js → ChipGroup.ts}

@@ -2,7 +2,6 @@ import { html, unsafeStatic } from "lit/static-html.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./chip-group.css"
 
 /* Figma https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=131766-248643&mode=design&t=Kjo5VDiqivihn8dh-11 */

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

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

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

@@ -3,3 +3,9 @@ import { LeuChipLink } from "./ChipLink.js"
 export { LeuChipLink }
 
 LeuChipLink.define("leu-chip-link")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-chip-link": LeuChipLink
+  }
+}

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

@@ -3,3 +3,9 @@ import { LeuChipRemovable } from "./ChipRemovable.js"
 export { LeuChipRemovable }
 
 LeuChipRemovable.define("leu-chip-removable")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-chip-removable": LeuChipRemovable
+  }
+}

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

@@ -3,3 +3,9 @@ import { LeuChipSelectable } from "./ChipSelectable.js"
 export { LeuChipSelectable }
 
 LeuChipSelectable.define("leu-chip-selectable")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-chip-selectable": LeuChipSelectable
+  }
+}

package/src/components/dialog/{Dialog.js → Dialog.ts}

@@ -8,7 +8,6 @@ import { LeuIcon } from "../icon/Icon.js"
 
 // design: https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-186812&node-type=FRAME
 
-// @ts-ignore
 import styles from "./dialog.css"
 
 /**

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

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

package/src/components/dropdown/{Dropdown.js → Dropdown.ts}

@@ -9,7 +9,6 @@ import { LeuMenu } from "../menu/Menu.js"
 import { LeuMenuItem } from "../menu/MenuItem.js"
 import { LeuPopup } from "../popup/Popup.js"
 
-// @ts-ignore
 import styles from "./dropdown.css"
 
 /**

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

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

package/src/components/icon/{Icon.js → Icon.ts}

@@ -2,7 +2,6 @@ import { html, svg } from "lit"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-// @ts-ignore
 import styles from "./icon.css"
 import { paths } from "./paths.js"
 

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

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

package/src/components/icon/stories/{icon.stories.js → 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/input/{Input.js → Input.ts}

@@ -7,7 +7,6 @@ import { createRef, ref } from "lit/directives/ref.js"
 import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuIcon } from "../icon/Icon.js"
 
-// @ts-ignore
 import styles from "./input.css"
 
 export const SIZES = Object.freeze({

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

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

package/src/components/menu/{Menu.js → Menu.ts}

@@ -4,7 +4,6 @@ import { LeuElement } from "../../lib/LeuElement.js"
 
 import { LeuMenuItem } from "./MenuItem.js"
 
-// @ts-ignore
 import styles from "./menu.css"
 
 /**

package/src/components/menu/{MenuItem.js → MenuItem.ts}

@@ -4,7 +4,6 @@ import { ifDefined } from "lit/directives/if-defined.js"
 import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuIcon } from "../icon/Icon.js"
 
-// @ts-ignore
 import styles from "./menu-item.css"
 
 /**

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

@@ -3,3 +3,9 @@ import { LeuMenuItem } from "./MenuItem.js"
 export { LeuMenuItem }
 
 LeuMenuItem.define("leu-menu-item")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-menu-item": LeuMenuItem
+  }
+}

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

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

package/src/components/pagination/{Pagination.js → Pagination.ts}

@@ -1,12 +1,12 @@
 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"
 import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
 import { LeuIcon } from "../icon/Icon.js"
 
-// @ts-ignore
 import styles from "./pagination.css"
 
 const MIN_PAGE = 1
@@ -31,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)
@@ -66,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
   }
@@ -74,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)
   }
@@ -86,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)
 
@@ -116,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)
@@ -159,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()}
@@ -168,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/{leu-pagination.js → leu-pagination.ts}

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

package/src/components/pagination/stories/{pagination.stories.js → 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")