@statistikzh/leu 0.22.0 → 0.23.0

package/src/components/menu/MenuItem.ts

@@ -1,25 +1,22 @@
-import { html, nothing } from "lit"
+import { html, nothing, TemplateResult } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
+import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuIcon } from "../icon/Icon.js"
 
 import styles from "./menu-item.css"
 
-/**
- * @typedef {'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'none'} MenuItemRole
- */
+type MenuItemRole =
+  | "menuitem"
+  | "menuitemcheckbox"
+  | "menuitemradio"
+  | "option"
+  | "none"
 
 /**
  * @tagname leu-menu-item
  * @slot - The label of the menu item
- * @property {boolean} active - Defines if the item is selected or checked
- * @property {boolean} multipleSelection - If the item is part of a multiple selection. Renders a checkmark before the label when active
- * @property {boolean} disabled - Disables the underlying button or link
- * @property {string} value - The value of the item. It must not contain commas. See `getValue()`
- * @property {string} href - The href of the underlying link
- * @property {boolean} tabbable - If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link
- * @property {MenuItemRole} componentRole - The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.`
  */
 export class LeuMenuItem extends LeuElement {
   static dependencies = {
@@ -36,33 +33,33 @@ export class LeuMenuItem extends LeuElement {
     delegatesFocus: true,
   }
 
-  static properties = {
-    active: { type: Boolean, reflect: true },
-    multipleSelection: {
-      type: Boolean,
-      reflect: true,
-      attr: "multiple-selection",
-    },
-    disabled: { type: Boolean, reflect: true },
-    tabbable: { type: Boolean, reflect: true },
-    href: { type: String, reflect: true },
-    value: { type: String, reflect: true },
-    componentRole: { type: String, reflect: true },
-  }
+  /** Defines if the item is selected or checked */
+  @property({ type: Boolean, reflect: true })
+  active: boolean = false
 
-  constructor() {
-    super()
+  /** If the item is part of a multiple selection. Renders a checkmark before the label when active */
+  @property({ type: Boolean, reflect: true })
+  multipleSelection: boolean = false
 
-    this.active = false
-    this.disabled = false
-    this.multipleSelection = false
-    this.value = undefined
-    this.href = undefined
-    this.tabbable = undefined
+  /** Disables the underlying button or link */
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false
 
-    /** @type {MenuItemRole} */
-    this.componentRole = "menuitem"
-  }
+  /** If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link */
+  @property({ type: Boolean, reflect: true })
+  tabbable: boolean
+
+  /** The href of the underlying link */
+  @property({ type: String, reflect: true })
+  href: string
+
+  /** The value of the item. It must not contain commas. See `getValue()` */
+  @property({ type: String, reflect: true })
+  value: string
+
+  /** The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.` */
+  @property({ type: String, reflect: true })
+  componentRole: MenuItemRole = "menuitem"
 
   connectedCallback() {
     super.connectedCallback()
@@ -74,7 +71,7 @@ export class LeuMenuItem extends LeuElement {
     this.removeEventListener("click", this._handleClick, true)
   }
 
-  _handleClick(event) {
+  protected _handleClick(event: MouseEvent) {
     if (this.disabled) {
       event.stopPropagation()
       event.preventDefault()
@@ -83,13 +80,12 @@ export class LeuMenuItem extends LeuElement {
 
   /**
    * Returns the value of the item. If `value` is not set, it will return the inner text
-   * @returns {string}
    */
   getValue() {
     return this.value || this.textContent.trim()
   }
 
-  _getAria() {
+  protected _getAria() {
     const commonAttributes = {
       disabled: this.disabled,
     }
@@ -110,7 +106,7 @@ export class LeuMenuItem extends LeuElement {
     }
   }
 
-  _getTabIndex() {
+  protected _getTabIndex() {
     if (typeof this.tabbable === "boolean") {
       return this.tabbable ? 0 : -1
     }
@@ -118,7 +114,7 @@ export class LeuMenuItem extends LeuElement {
     return undefined
   }
 
-  _renderLink(content) {
+  protected _renderLink(content: TemplateResult) {
     const aria = this._getAria()
 
     return html`<a
@@ -133,7 +129,7 @@ export class LeuMenuItem extends LeuElement {
     >`
   }
 
-  _renderButton(content) {
+  protected _renderButton(content: TemplateResult) {
     const aria = this._getAria()
 
     return html`<button

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

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

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

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

package/src/components/popup/Popup.ts

@@ -7,6 +7,7 @@ import {
   Placement,
   shift,
   size,
+  offset,
 } from "@floating-ui/dom"
 
 import { LeuElement } from "../../lib/LeuElement.js"
@@ -58,6 +59,28 @@ export class LeuPopup extends LeuElement {
   @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"
@@ -116,6 +139,20 @@ export class LeuPopup extends LeuElement {
 
     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({

package/src/components/popup/stories/popup.stories.ts

@@ -43,6 +43,9 @@ function Template(args = {}) {
     ?flip=${args.flip}
     ?shift=${args.shift}
     placement=${ifDefined(args.placement)}
+    offset-main-axis=${ifDefined(args.offsetMainAxis)}
+    offset-cross-axis=${ifDefined(args.offsetCrossAxis)}
+    offset-alignment-axis=${ifDefined(args.offsetAlignmentAxis)}
   >
     <leu-button slot="anchor">Open popup</leu-button>
     <div style=${styleMap(popupStyles)}>Popup content</div>
@@ -55,6 +58,8 @@ Regular.args = {
   placement: "bottom-start",
   flip: true,
   shift: true,
+  offsetMainAxis: 0,
+  offsetAlignmentAxis: 0,
 }
 
 export const VirtualElement = {
@@ -64,6 +69,9 @@ export const VirtualElement = {
       ?flip=${args.flip}
       ?shift=${args.shift}
       placement=${ifDefined(args.placement)}
+      offset-main-axis=${ifDefined(args.offsetMainAxis)}
+      offset-cross-axis=${ifDefined(args.offsetCrossAxis)}
+      offset-alignment-axis=${ifDefined(args.offsetAlignmentAxis)}
     >
       <div style=${styleMap(popupStyles)}>Popup content</div>
     </leu-popup>
@@ -103,5 +111,7 @@ export const VirtualElement = {
     placement: "bottom-start",
     flip: true,
     shift: true,
+    offsetMainAxis: 8,
+    offsetAlignmentAxis: 8,
   },
 }

package/src/components/popup/test/popup.test.ts

@@ -60,4 +60,31 @@ describe("LeuPopup", () => {
     expect(popupContent.style.left).to.equal("32px")
     expect(popupContent.style.top).to.equal("125px")
   })
+
+  it("applies offset properties correctly", async () => {
+    const popup = await fixture<LeuPopup>(
+      html`<leu-popup
+        ?active=${true}
+        placement="bottom-start"
+        offset-main-axis="12"
+        offset-cross-axis="9"
+      >
+        <div
+          slot="anchor"
+          style="width: 16px; height: 16px; position: absolute; top: 0; left: 0;"
+        ></div>
+        <div style="background: white; padding: 0.5rem">Popup content</div>
+      </leu-popup>`,
+    )
+
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => resolve())
+    })
+
+    const popupContent =
+      popup.shadowRoot!.querySelector<HTMLDivElement>(".popup")
+
+    expect(popupContent.style.left).to.equal("9px") // offset-cross-axis
+    expect(popupContent.style.top).to.equal("28px") // offset-main-axis + anchor height
+  })
 })

package/src/components/progress-bar/leu-progress-bar.ts

@@ -3,3 +3,9 @@ import { LeuProgressBar } from "./ProgressBar.js"
 export { LeuProgressBar }
 
 LeuProgressBar.define("leu-progress-bar")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-progress-bar": LeuProgressBar
+  }
+}

package/src/components/range/Range.ts

@@ -1,5 +1,6 @@
 import { html } from "lit"
 
+import { property } from "lit/decorators.js"
 import styles from "./range.css"
 import { LeuElement } from "../../lib/LeuElement.js"
 
@@ -25,34 +26,41 @@ export class LeuRange extends LeuElement {
     delegatesFocus: true,
   }
 
-  static properties = {
-    defaultValue: { converter: defaultValueConverter, attribute: "value" },
-    min: { type: Number, reflect: true },
-    max: { type: Number, reflect: true },
-    step: { type: Number, reflect: true },
-    name: { type: String, reflect: true },
-    label: { type: String, reflect: true },
-    disabled: { type: Boolean, reflect: true },
-    multiple: { type: Boolean, reflect: true },
-  }
+  @property({ converter: defaultValueConverter, attribute: "value" })
+  defaultValue = [50]
 
-  constructor() {
-    super()
-    this.defaultValue = [50]
-    this.min = 0
-    this.max = 100
-    this.step = 1
-    this.name = ""
-    this.label = ""
-    this.disabled = false
-    this.multiple = false
-  }
+  @property({ type: Number, reflect: true })
+  min: number = 0
+
+  @property({ type: Number, reflect: true })
+  max: number = 100
+
+  @property({ type: Number, reflect: true })
+  step: number = 1
+
+  @property({ type: String, reflect: true })
+  name: string = ""
+
+  @property({ type: String, reflect: true })
+  label: string = ""
+
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false
+
+  @property({ type: Boolean, reflect: true })
+  multiple: boolean = false
 
   updated() {
     this._updateStyles()
   }
 
-  _updateStyles() {
+  protected get _inputs() {
+    return Array.from(
+      this.shadowRoot.querySelectorAll<HTMLInputElement>("input"),
+    )
+  }
+
+  protected _updateStyles() {
     const normalizedRange = this._getNormalizedRange()
     this.style.setProperty("--low", normalizedRange[0].toString())
     this.style.setProperty("--high", normalizedRange[1].toString())
@@ -62,8 +70,9 @@ export class LeuRange extends LeuElement {
       : [this._getBaseInput()]
 
     inputs.forEach((input) => {
-      /** @type {HTMLOutputElement} */
-      const output = this.shadowRoot.querySelector(`.output[for=${input.id}]`)
+      const output = this.shadowRoot.querySelector<HTMLOutputElement>(
+        `.output[for=${input.id}]`,
+      )
       const normalizedValue = this._getNormalizedValue(input.valueAsNumber)
       output.style.setProperty("--value", normalizedValue.toString())
       output.value = input.value
@@ -71,19 +80,18 @@ export class LeuRange extends LeuElement {
   }
 
   get value() {
-    const inputs = Array.from(this.shadowRoot.querySelectorAll("input"))
-    return inputs.map((input) => input.value).join(",")
+    return this._inputs.map((input) => input.value).join(",")
   }
 
   /**
    * Sets the value of the underlying input element(s).
    * The value has to be an array if "multiple" range is used.
    * Otherwise it has to be a string.
-   * @param {string | Array} value
    */
-  set value(value) {
+  set value(value: string | Array<string>) {
     if (this.multiple && Array.isArray(value)) {
-      const inputs = Array.from(this.shadowRoot.querySelectorAll("input"))
+      const inputs = this._inputs
+
       value.forEach((v, i) => {
         inputs[i].value = v
       })
@@ -95,13 +103,11 @@ export class LeuRange extends LeuElement {
   }
 
   get valueAsArray() {
-    return Array.from(this.shadowRoot.querySelectorAll("input")).map(
-      (input) => input.valueAsNumber,
-    )
+    return this._inputs.map((input) => input.valueAsNumber)
   }
 
   get valueLow() {
-    const inputs = Array.from(this.shadowRoot.querySelectorAll("input"))
+    const inputs = this._inputs
 
     if (this.multiple) {
       return inputs.map((input) => input.valueAsNumber).sort((a, b) => a - b)[0]
@@ -111,7 +117,7 @@ export class LeuRange extends LeuElement {
   }
 
   get valueHigh() {
-    const inputs = Array.from(this.shadowRoot.querySelectorAll("input"))
+    const inputs = this._inputs
 
     if (this.multiple) {
       return inputs.map((input) => input.valueAsNumber).sort((a, b) => a - b)[1]
@@ -120,39 +126,26 @@ export class LeuRange extends LeuElement {
     return inputs[0].value
   }
 
-  /**
-   * @returns {HTMLInputElement | null}
-   */
-  _getBaseInput() {
-    return this.shadowRoot.querySelector(".range--base")
+  protected _getBaseInput() {
+    return this.shadowRoot.querySelector<HTMLInputElement>(".range--base")
   }
 
-  /**
-   * @returns {HTMLInputElement | null}
-   */
-  _getGhostInput() {
-    return this.shadowRoot.querySelector(".range--ghost")
+  protected _getGhostInput() {
+    return this.shadowRoot.querySelector<HTMLInputElement>(".range--ghost")
   }
 
-  /**
-   *
-   * @param {number} _index
-   * @param {InputEvent & {target: HTMLInputElement}} _e
-   */
-  _handleInput(_index, _e) {
+  protected _handleInput(
+    _index: number,
+    _e: InputEvent & { target: HTMLInputElement },
+  ) {
     this._updateStyles()
   }
 
-  /**
-   *
-   * @param {number} value
-   * @returns {number}
-   */
-  _getNormalizedValue(value) {
+  protected _getNormalizedValue(value: number) {
     return (value - this.min) / (this.max - this.min)
   }
 
-  _getNormalizedRange() {
+  protected _getNormalizedRange() {
     if (this.multiple) {
       return this.valueAsArray
         .map((value) => this._getNormalizedValue(value))
@@ -165,9 +158,8 @@ export class LeuRange extends LeuElement {
   /**
    * Determine if the "click" (pointer event) is closer the
    * the value of the other input element. Swap the values if this is the case.
-   * @param {PointerEvent & {target: HTMLInputElement}} e
    */
-  _handlePointerDown(e) {
+  protected _handlePointerDown(e: PointerEvent & { target: HTMLInputElement }) {
     const clickValue =
       this.min + ((this.max - this.min) * e.offsetX) / this.offsetWidth
     const middleValue = (this.valueAsArray[0] + this.valueAsArray[1]) / 2

package/src/components/scroll-top/ScrollTop.ts

@@ -1,5 +1,6 @@
 import { html } from "lit"
 import { classMap } from "lit/directives/class-map.js"
+import { state } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuButton } from "../button/Button.js"
@@ -20,22 +21,14 @@ export class LeuScrollTop extends LeuElement {
 
   static styles = [LeuElement.styles, styles]
 
-  static properties = {
-    _showButton: { state: true },
-  }
+  @state()
+  protected _showButton: boolean = false
 
-  constructor() {
-    super()
-    /** @internal */
-    this._prevYPos = 0
-    /** @internal */
-    this._showButton = false
-    /** @internal */
-    this._scrollDown = false
-
-    /** @internal */
-    this._scrollListener = undefined
-  }
+  protected _prevYPos: number = 0
+
+  protected _scrollDown: boolean = false
+
+  protected _scrollListener: EventListener
 
   scroll = () => {
     const delta = window.scrollY - this._prevYPos

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

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

package/src/index.ts

@@ -5,14 +5,25 @@ export * from "./components/chart-wrapper/ChartWrapper.js"
 export * from "./components/checkbox/Checkbox.js"
 export * from "./components/checkbox/CheckboxGroup.js"
 export * from "./components/chip/exports.js"
+export * from "./components/dialog/Dialog.js"
 export * from "./components/dropdown/Dropdown.js"
+export * from "./components/file-input/FileInput.js"
+export * from "./components/icon/Icon.js"
 export * from "./components/input/Input.js"
 export * from "./components/menu/Menu.js"
 export * from "./components/menu/MenuItem.js"
+export * from "./components/message/Message.js"
 export * from "./components/pagination/Pagination.js"
+export * from "./components/placeholder/Placeholder.js"
 export * from "./components/popup/Popup.js"
+export * from "./components/progress-bar/ProgressBar.js"
 export * from "./components/radio/Radio.js"
 export * from "./components/radio/RadioGroup.js"
+export * from "./components/range/Range.js"
+export * from "./components/scroll-top/ScrollTop.js"
 export * from "./components/select/Select.js"
+export * from "./components/spinner/Spinner.js"
 export * from "./components/table/Table.js"
+export * from "./components/tag/Tag.js"
+export * from "./components/visually-hidden/VisuallyHidden.js"
 export * from "./lib/LeuElement.js"

package/web-test-runner.config.mjs

@@ -64,6 +64,16 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="dist/theme.css" />
         <link rel="stylesheet" href="https://www.web.statistik.zh.ch/leu/styles/fonts.css" />
+        <style>
+          *, *::before, *::after {
+            box-sizing: border-box;
+          }
+
+          *:not(dialog) {
+            margin: 0;
+          }
+        </style>
+
       </head>
       <body>
         <script type="module" src="${testFramework}"></script>