@statistikzh/leu 0.21.1 → 0.22.1

package/src/components/dropdown/Dropdown.ts

@@ -1,5 +1,6 @@
 import { html, nothing } from "lit"
 import { createRef, ref } from "lit/directives/ref.js"
+import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 import { HasSlotController } from "../../lib/hasSlotController.js"
@@ -24,22 +25,18 @@ export class LeuDropdown extends LeuElement {
 
   static styles = [LeuElement.styles, styles]
 
-  static properties = {
-    label: { type: String, reflect: true },
-    expanded: { type: Boolean, reflect: true },
-  }
+  @property({ type: String, reflect: true })
+  label: string = ""
 
-  hasSlotController = new HasSlotController(this, ["icon"])
+  @property({ type: Boolean, reflect: true })
+  expanded: boolean = false
 
-  constructor() {
-    super()
+  @property({ type: Boolean, reflect: true })
+  inverted: boolean = false
 
-    this.label = ""
-    this.expanded = false
+  protected hasSlotController = new HasSlotController(this, ["icon"])
 
-    /** @type {import("lit/directives/ref").Ref<HTMLButtonElement>} */
-    this._toggleRef = createRef()
-  }
+  protected _toggleRef = createRef<HTMLButtonElement>()
 
   connectedCallback() {
     super.connectedCallback()
@@ -63,19 +60,19 @@ export class LeuDropdown extends LeuElement {
     menu.removeEventListener("click", this._menuItemClickHandler)
   }
 
-  _documentClickHandler = (event) => {
+  protected _documentClickHandler = (event: MouseEvent) => {
     if (!event.composedPath().includes(this)) {
       this.expanded = false
     }
   }
 
-  _keyUpHandler(event) {
+  protected _keyUpHandler = (event: KeyboardEvent) => {
     if (event.key === "Escape") {
       this.expanded = false
     }
   }
 
-  async _keyDownToggleHandler(event) {
+  protected async _keyDownToggleHandler(event: KeyboardEvent) {
     if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
       event.preventDefault()
       const menu = this._getMenu()
@@ -92,7 +89,9 @@ export class LeuDropdown extends LeuElement {
     }
   }
 
-  _menuItemClickHandler = (e) => {
+  protected _menuItemClickHandler = (
+    e: MouseEvent & { target: HTMLElement },
+  ) => {
     if (e.target.tagName.toLowerCase() === "leu-menu-item") {
       this.expanded = false
       this._toggleRef.value.focus()
@@ -102,9 +101,8 @@ export class LeuDropdown extends LeuElement {
   /**
    * Close the dropdown when the user presses the Escape or the Tab key.
    * Navigating the menu with the arrow keys is handled by the menu itself.
-   * @param {KeyboardEvent} e
    */
-  _keyDownMenuHandler = (e) => {
+  protected _keyDownMenuHandler = (e: KeyboardEvent) => {
     if (e.key === "Escape" || e.key === "Tab") {
       e.preventDefault()
       this.expanded = false
@@ -112,15 +110,12 @@ export class LeuDropdown extends LeuElement {
     }
   }
 
-  _handleToggleClick() {
+  protected _handleToggleClick() {
     this.expanded = !this.expanded
   }
 
-  /**
-   * @returns {import("../menu/Menu").LeuMenu}
-   */
-  _getMenu() {
-    return this.querySelector("leu-menu")
+  protected _getMenu() {
+    return this.querySelector<LeuMenu>("leu-menu")
   }
 
   render() {
@@ -141,6 +136,7 @@ export class LeuDropdown extends LeuElement {
           variant="ghost"
           expanded=${this.expanded ? "true" : "false"}
           ?active=${this.expanded}
+          ?inverted=${this.inverted}
           @click=${this._handleToggleClick}
           @keydown=${this._keyDownToggleHandler}
         >

package/src/components/dropdown/stories/dropdown.stories.ts

@@ -24,8 +24,12 @@ export default {
   },
 }
 
-function Template({ label, expanded, icon }) {
-  return html` <leu-dropdown label=${label} ?expanded=${expanded}>
+function Template({ label, expanded, icon, inverted }) {
+  return html` <leu-dropdown
+    label=${label}
+    ?expanded=${expanded}
+    ?inverted=${inverted}
+  >
     ${icon ? html`<leu-icon name=${icon} slot="icon"></leu-icon>` : nothing}
     <leu-menu>
       <leu-menu-item

package/src/components/dropdown/test/dropdown.test.ts

@@ -3,9 +3,13 @@ import { fixture, expect, elementUpdated } from "@open-wc/testing"
 
 import "../leu-dropdown.js"
 
-async function defaultFixture(args = { expanded: false }) {
+async function defaultFixture(args = { expanded: false, inverted: false }) {
   return fixture(
-    html` <leu-dropdown label="Download" ?expanded=${args.expanded}>
+    html` <leu-dropdown
+      label="Download"
+      ?expanded=${args.expanded}
+      ?inverted=${args.inverted}
+    >
       <leu-menu>
         <leu-menu-item>Als CSV Tabelle</leu-menu-item>
         <leu-menu-item>Als XLS Tabelle</leu-menu-item>
@@ -44,4 +48,12 @@ describe("LeuDropdown", () => {
 
     expect(el.expanded).to.be.false
   })
+
+  it("reflects the inverted property to the internal button", async () => {
+    const el = await defaultFixture({ inverted: true })
+    await elementUpdated(el)
+
+    const toggleButton = el.shadowRoot.querySelector("leu-button")
+    expect(toggleButton.inverted).to.be.true
+  })
 })

package/src/components/file-input/FileInput.ts

@@ -129,6 +129,10 @@ export class LeuFileInput extends LeuElement {
 
   protected removeFile(fileToRemove: File) {
     this.files = this.files.filter((file) => file !== fileToRemove)
+    this.dispatchChangeAndInputEvents()
+  }
+
+  protected dispatchChangeAndInputEvents() {
     this.dispatchEvent(
       new CustomEvent("input", {
         composed: true,
@@ -182,6 +186,8 @@ export class LeuFileInput extends LeuElement {
   }
 
   protected handleDrop = (event: DragEvent) => {
+    this.isDragging = false
+
     if (this.disabled) return
 
     event.preventDefault()
@@ -191,10 +197,15 @@ export class LeuFileInput extends LeuElement {
     const files = dt.files
     const acceptedFiles = [...files].filter((file) => this.isAcceptedFile(file))
 
+    if (acceptedFiles.length < 1) {
+      return
+    }
+
     this.files = this.multiple
       ? this.files.concat(acceptedFiles)
       : acceptedFiles.slice(0, 1)
-    this.isDragging = false
+
+    this.dispatchChangeAndInputEvents()
   }
 
   isAcceptedFile(file: File): boolean {

package/src/components/file-input/leu-file-input.ts

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

package/src/components/file-input/stories/file-input.stories.ts

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/web-components"
+import { action } from "@storybook/addon-actions"
 import { html } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 
@@ -11,6 +12,10 @@ type Story = StoryObj<StoryArgs>
 export default {
   title: "Components/FileInput",
   component: "leu-file-input",
+  args: {
+    oninput: action("input"),
+    onchange: action("change"),
+  },
 } satisfies Meta<StoryArgs>
 
 const Template: Story = {
@@ -22,6 +27,8 @@ const Template: Story = {
       ?disabled=${args.disabled}
       ?multiple=${args.multiple}
       ?required=${args.required}
+      @input=${args.oninput}
+      @change=${args.onchange}
     ></leu-file-input>
   `,
 }

package/src/components/icon/Icon.ts

@@ -18,10 +18,6 @@ import { paths, IconPathName } from "./paths.js"
 export class LeuIcon extends LeuElement {
   static styles = [LeuElement.styles, styles]
 
-  static properties = {
-    name: { type: String, reflect: true },
-  }
-
   /**
    * The name of the icon to display.
    */

package/src/components/input/Input.ts

@@ -3,17 +3,32 @@ import { classMap } from "lit/directives/class-map.js"
 import { ifDefined } from "lit/directives/if-defined.js"
 import { live } from "lit/directives/live.js"
 import { createRef, ref } from "lit/directives/ref.js"
+import { property, state } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuIcon } from "../icon/Icon.js"
 
 import styles from "./input.css"
+import { IconPathName } from "../icon/paths.js"
 
 export const SIZES = Object.freeze({
   SMALL: "small",
   REGULAR: "regular",
 })
 
+type InputType =
+  | "date"
+  | "datetime-local"
+  | "email"
+  | "month"
+  | "number"
+  | "password"
+  | "search"
+  | "tel"
+  | "text"
+  | "time"
+  | "week"
+
 /**
  * TODO:
  * - Add section to docs about how to mark up suffix and prefix for screenreaders
@@ -38,27 +53,6 @@ const VALIDATION_MESSAGES = {
 /**
  * A text input element.
  *
- * @prop {boolean} disabled - Disables the input element.
- * @prop {boolean} required - Marks the input element as required.
- * @prop {boolean} clearable - Adds a button to clear the input element.
- * @prop {string} value - The value of the input element.
- * @prop {string} name - The name of the input element.
- * @prop {string} label - The label of the input element.
- * @prop {string} error - A custom error that is completely independent of the validity state. Useful for displaying server side errors.
- * @prop {string} size - The size of the input element.
- * @prop {string} icon - The icon that is displayed at the end of the input element.
- * @prop {string} prefix - A prefix that relates to the value of the input (e.g. CHF).
- * @prop {string} suffix - A suffix that relates to the value of the input (e.g. mm).
- * @prop {string} pattern - A regular expression that the value is checked against.
- * @prop {string} type - The type of the input element.
- * @prop {string} min - The minimum value of the input element.
- * @prop {string} max - The maximum value of the input element.
- * @prop {string} minlength - The minimum length of the input element.
- * @prop {string} maxlength - The maximum length of the input element.
- * @prop {object} validationMessages - Custom validation messages. The key is the name of the validity state and the value is the message.
- * @prop {boolean} novalidate - Disables the browser's validation.
- * @prop {string} step - The step value of the input element.
- *
  * @fires {CustomEvent} input - Dispatched when the value of the input element changes.
  * @fires {CustomEvent} change - Dispatched when the value of the input element changes and the input element loses focus.
  *
@@ -79,34 +73,88 @@ export class LeuInput extends LeuElement {
     delegatesFocus: true,
   }
 
-  static properties = {
-    disabled: { type: Boolean, reflect: true },
-    required: { type: Boolean, reflect: true },
-    clearable: { type: Boolean, reflect: true },
-
-    value: { type: String, reflect: true },
-    name: { type: String, reflect: true },
-    error: { type: String, reflect: true },
-
-    label: { type: String, reflect: true },
-    prefix: { type: String, reflect: true },
-    suffix: { type: String, reflect: true },
-    size: { type: String, reflect: true },
-    icon: { type: String, reflect: true },
-
-    /* Validation attributes */
-    pattern: { type: String, reflect: true },
-    type: { type: String, reflect: true },
-    min: { type: String, reflect: true },
-    max: { type: String, reflect: true },
-    maxlength: { type: String, reflect: true },
-    minlength: { type: String, reflect: true },
-    validationMessages: { type: Object },
-    novalidate: { type: Boolean, reflect: true },
-    step: { type: String, reflect: true },
-
-    _validity: { state: true },
-  }
+  /** Disables the input element. */
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false
+
+  /** Marks the input element as required */
+  @property({ type: Boolean, reflect: true })
+  required: boolean = false
+
+  /** Adds a button to clear the input element */
+  @property({ type: Boolean, reflect: true })
+  clearable: boolean = false
+
+  /** The value of the input element. */
+  @property({ type: String, reflect: true })
+  value: string = ""
+
+  /** The name of the input element. */
+  @property({ type: String, reflect: true })
+  name: string = ""
+
+  /** A custom error that is completely independent of the validity state. Useful for displaying server side errors. */
+  @property({ type: String, reflect: true })
+  error: string = ""
+
+  /** The label of the input element */
+  @property({ type: String, reflect: true })
+  label: string = ""
+
+  /** A prefix that relates to the value of the input (e.g. CHF)  */
+  @property({ type: String, reflect: true })
+  prefix: string
+
+  /** A suffix that relates to the value of the input (e.g. mm). */
+  @property({ type: String, reflect: true })
+  suffix: string
+
+  /** The size of the input element */
+  @property({ type: String, reflect: true })
+  size: "small" | "regular" = "regular"
+
+  /** The icon that is displayed at the end of the input element */
+  @property({ type: String, reflect: true })
+  icon: IconPathName
+
+  /** A regular expression that the value is checked against. */
+  @property({ type: String, reflect: true })
+  pattern: string
+
+  /** The type of the input element. */
+  @property({ type: String, reflect: true })
+  type: InputType = "text"
+
+  /** The minimum value of the input element. */
+  @property({ type: Number, reflect: true })
+  min: number
+
+  /** The maximum value of the input element. */
+  @property({ type: Number, reflect: true })
+  max: number
+
+  /** The step value of the input element. */
+  @property({ type: Number, reflect: true })
+  step: number
+
+  /** The maximum length of the input element. */
+  @property({ type: Number, reflect: true })
+  maxlength: number
+
+  /** The minimum length of the input element. */
+  @property({ type: Number, reflect: true })
+  minlength: number
+
+  /** Custom validation messages. The key is the name of the validity state and the value is the message. */
+  @property({ type: Object })
+  validationMessages: Record<string, string> = {}
+
+  /** Disables the browser's validation. */
+  @property({ type: Boolean, reflect: true })
+  novalidate: boolean = false
+
+  @state()
+  _validity: ValidityState | null = null
 
   static resolveErrorMessage(message, refernceValue) {
     if (typeof message === "function") {
@@ -116,28 +164,7 @@ export class LeuInput extends LeuElement {
     return message
   }
 
-  constructor() {
-    super()
-
-    this.disabled = false
-    this.required = false
-    this.clearable = false
-
-    /** @type {"small" | "regular"} */
-    this.size = SIZES.REGULAR
-
-    this.type = "text"
-    this._validity = null
-    this.validationMessages = {}
-    this.novalidate = false
-    this.value = ""
-
-    /**
-     * @internal
-     * @type {import("lit/directives/ref.js").Ref<HTMLInputElement>}
-     */
-    this._inputRef = createRef()
-  }
+  protected _inputRef = createRef<HTMLInputElement>()
 
   get valueAsNumber() {
     if (this.value === "") {
@@ -153,11 +180,8 @@ export class LeuInput extends LeuElement {
    * looks like the input element. But the actual input field does not
    * completely fill the wrapper element. Keyboard events don't need to be
    * handled because the actual input element is focusable.
-   * @private
-   * @param {MouseEvent|PointerEvent} event
-   * @returns {void}
    */
-  handleWrapperClick(event) {
+  protected handleWrapperClick(event: MouseEvent | PointerEvent) {
     if (event.target === event.currentTarget) {
       this._inputRef.value.focus()
     }
@@ -166,11 +190,8 @@ export class LeuInput extends LeuElement {
   /**
    * Method for handling the blur event of the input element.
    * Checks validity of the input element and sets the validity state.
-   * @private
-   * @param {FocusEvent & {target: HTMLInputElement}} event
-   * @returns {void}
    */
-  handleBlur(event) {
+  protected handleBlur(event: FocusEvent & { target: HTMLInputElement }) {
     this._validity = null
 
     if (!this.novalidate) {
@@ -181,11 +202,8 @@ export class LeuInput extends LeuElement {
   /**
    * Method for handling the invalid event of the input element.
    * Sets the validity state.
-   * @private
-   * @param {Event} event
-   * @returns {void}
    */
-  handleInvalid(event) {
+  protected handleInvalid(event: Event & { target: HTMLInputElement }) {
     this._validity = event.target.validity
   }
 
@@ -193,12 +211,9 @@ export class LeuInput extends LeuElement {
    * Method for handling the change event of the input element.
    * Sets the value property and dispatches a change event so that
    * the event can be handled outside the shadow DOM.
-   * @private
-   * @param {Event} event
    * @fires {CustomEvent} change
-   * @returns {void}
    */
-  handleChange(event) {
+  protected handleChange(event: Event & { target: HTMLInputElement }) {
     if (event.target.validity.valid) {
       this.value = event.target.value
     }
@@ -211,11 +226,8 @@ export class LeuInput extends LeuElement {
    * Method for handling the input event of the input element.
    * Sets the value property and dispatches an input event so that
    * the event can be handled outside the shadow DOM.
-   * @private
-   * @param {Event} event
-   * @returns {void}
    */
-  handleInput(event) {
+  protected handleInput(event: Event & { target: HTMLInputElement }) {
     this.value = event.target.value
 
     const customEvent = new CustomEvent("input", {
@@ -229,12 +241,10 @@ export class LeuInput extends LeuElement {
    * Method for clearing the input element.
    * Sets the value property to an empty string and dispatches
    * an input and a change event.
-   * @private
-   * @returns {void}
    * @fires {CustomEvent} input
    * @fires {CustomEvent} change
    */
-  clear() {
+  protected clear() {
     this.value = ""
 
     this._inputRef.value.focus()
@@ -255,10 +265,8 @@ export class LeuInput extends LeuElement {
    * e.g.
    * `tooLong(this.maxlength)`
    * This way the framework user can create reasonable validation messages
-   *
-   * @returns {Object} validationMessages
    */
-  getValidationMessages() {
+  protected getValidationMessages() {
     const validationMessages = {
       ...VALIDATION_MESSAGES,
       ...this.validationMessages,
@@ -299,7 +307,6 @@ export class LeuInput extends LeuElement {
 
   /**
    * Check input validation
-   * @returns {boolean} if valid or not
    */
   checkValidity() {
     return this._inputRef.value?.checkValidity() ?? false
@@ -307,9 +314,8 @@ export class LeuInput extends LeuElement {
 
   /**
    * Creates an error list with an item for the given validity state.
-   * @returns {import("lit").TemplateResult | nothing}
    */
-  renderErrorMessages() {
+  protected renderErrorMessages() {
     if (!this.isInvalid()) {
       return nothing
     }
@@ -317,7 +323,7 @@ export class LeuInput extends LeuElement {
     const validationMessages = this.getValidationMessages()
     let errorMessages = this._validity
       ? Object.entries(validationMessages)
-          .filter(([property]) => this._validity[property])
+          .filter(([prop]) => this._validity[prop])
           .map(([_, message]) => message)
       : []
 
@@ -337,11 +343,8 @@ export class LeuInput extends LeuElement {
   /**
    * Determines the content that is displayed after the input element.
    * This can be either an icon, a clear button or an error indicator icon.
-   *
-   * @private
-   * @returns {import("lit").TemplateResult | nothing}
    */
-  renderAfterContent() {
+  protected renderAfterContent() {
     if (this.isInvalid()) {
       return html`<div class="error-icon">
         <leu-icon name="caution"></leu-icon>

package/src/components/menu/Menu.ts

@@ -1,4 +1,5 @@
 import { html, PropertyValues } from "lit"
+import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
@@ -22,18 +23,8 @@ export class LeuMenu extends LeuElement {
     delegatesFocus: true,
   }
 
-  static properties = {
-    selects: { type: String, reflect: true },
-  }
-
-  constructor() {
-    super()
-
-    /** @type {SelectsType} */
-    this.selects = "none"
-
-    this.value = undefined
-  }
+  @property({ type: String, reflect: true })
+  selects: "single" | "multiple" | "none" = "none"
 
   connectedCallback() {
     super.connectedCallback()