@statistikzh/leu 0.24.2 → 0.26.0

package/src/components/checkbox/test/checkbox.test.ts

@@ -3,9 +3,10 @@ import { fixture, expect, elementUpdated, oneEvent } from "@open-wc/testing"
 import { sendKeys } from "@web/test-runner-commands"
 
 import "../leu-checkbox.js"
+import type { LeuCheckbox } from "../leu-checkbox.js"
 
 async function defaultFixture() {
-  return fixture(html`
+  return fixture<LeuCheckbox>(html`
     <leu-checkbox value="2">Das ist ein Label</leu-checkbox>
   `)
 }
@@ -86,7 +87,7 @@ describe("LeuCheckbox", () => {
     const checkbox = el.shadowRoot.querySelector("input")
 
     setTimeout(() => checkbox.click())
-    const event = await oneEvent(el, "change")
+    const event = await oneEvent(el, "change", false)
 
     expect(event).to.exist
   })
@@ -96,8 +97,151 @@ describe("LeuCheckbox", () => {
     const checkbox = el.shadowRoot.querySelector("input")
 
     setTimeout(() => checkbox.click())
-    const event = await oneEvent(el, "input")
+    const event = await oneEvent(el, "input", false)
 
     expect(event).to.exist
   })
+
+  it("appends the value to the form data when checked", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <leu-checkbox name="checkbox" value="2" checked></leu-checkbox>
+      </form>
+    `)
+
+    const formData = new FormData(form)
+    expect(formData.get("checkbox")).to.equal("2")
+  })
+
+  it("appends 'on' to the form data when checked and no value is set", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <leu-checkbox name="checkbox" checked></leu-checkbox>
+      </form>
+    `)
+
+    let formData = new FormData(form)
+    expect(formData.get("checkbox")).to.equal("on")
+
+    const checkbox = form.querySelector<LeuCheckbox>("leu-checkbox")
+    checkbox.value = ""
+    await elementUpdated(checkbox)
+
+    formData = new FormData(form)
+    expect(formData.get("checkbox")).to.equal("")
+  })
+
+  it("does not append the value to the form data when unchecked", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <leu-checkbox name="checkbox" value="2"></leu-checkbox>
+      </form>
+    `)
+
+    const formData = new FormData(form)
+    expect(formData.get("checkbox")).to.be.null
+  })
+
+  it("does not append the value to the form data when disabled", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <leu-checkbox name="checkbox" value="2" checked disabled></leu-checkbox>
+      </form>
+    `)
+
+    const formData = new FormData(form)
+    expect(formData.get("checkbox")).to.be.null
+  })
+
+  it("resets to the default checked state when the form is reset", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <leu-checkbox name="checkbox" value="2" checked></leu-checkbox>
+        <button type="reset">Reset</button>
+      </form>
+    `)
+
+    const checkbox = form.querySelector<LeuCheckbox>("leu-checkbox")
+    checkbox.checked = false
+    await elementUpdated(checkbox)
+
+    form.reset()
+    await elementUpdated(checkbox)
+
+    expect(checkbox.checked).to.be.true
+  })
+
+  it("updates the form data when the value and disabled state changes", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <leu-checkbox name="checkbox" value="2"></leu-checkbox>
+      </form>
+    `)
+
+    const checkbox = form.querySelector<LeuCheckbox>("leu-checkbox")
+    checkbox.checked = true
+    await elementUpdated(checkbox)
+
+    let formData = new FormData(form)
+    expect(formData.get("checkbox")).to.equal("2")
+
+    checkbox.value = "another_value"
+    await elementUpdated(checkbox)
+
+    formData = new FormData(form)
+    expect(formData.get("checkbox")).to.be.equal("another_value")
+
+    checkbox.disabled = true
+    await elementUpdated(checkbox)
+
+    formData = new FormData(form)
+    expect(formData.get("checkbox")).to.be.null
+  })
+
+  it("updates the form data when the defaultChecked state changes before any interaction", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <leu-checkbox name="checkbox" value="2" checked></leu-checkbox>
+      </form>
+    `)
+
+    // Reset the default value to unchecked. Should have an effect since the user has not interacted with the checkbox yet.
+    const checkbox = form.querySelector<LeuCheckbox>("leu-checkbox")
+    checkbox.defaultChecked = false
+    await elementUpdated(checkbox)
+
+    let formData = new FormData(form)
+    expect(formData.get("checkbox")).to.be.null
+
+    // Simulate user interaction by clicking the checkbox, which should check it and update the form data.
+    const innerCheckbox =
+      checkbox.shadowRoot.querySelector<HTMLInputElement>("input")
+    innerCheckbox.click()
+
+    await elementUpdated(checkbox)
+
+    formData = new FormData(form)
+    expect(formData.get("checkbox")).to.equal("2")
+
+    // This change of defaultChecked should not have an effect since the user has already interacted with the checkbox.
+    checkbox.defaultChecked = true
+    checkbox.checked = false
+    await elementUpdated(checkbox)
+
+    formData = new FormData(form)
+    expect(formData.get("checkbox")).to.be.null
+  })
+
+  it("should be invalid when the required attribute is set and not checked", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <leu-checkbox name="checkbox" value="2" required></leu-checkbox>
+      </form>
+    `)
+
+    const checkbox = form.querySelector<LeuCheckbox>("leu-checkbox")
+
+    expect(checkbox.validity.valid).to.be.false
+    expect(form.checkValidity()).to.be.false
+  })
 })

package/src/components/chip/Chip.ts

@@ -1,7 +1,7 @@
 import { property } from "lit/decorators.js"
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./chip.css"
+import styles from "./chip.css?inline"
 
 /* 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.ts

@@ -3,7 +3,7 @@ import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./chip-group.css"
+import styles from "./chip-group.css?inline"
 import { LeuChipSelectable } from "./ChipSelectable.js"
 
 /**
@@ -87,7 +87,7 @@ export class LeuChipGroup extends LeuElement {
   protected handleInput = (e: Event & { target: LeuChipSelectable }) => {
     if (this.selectionMode === "single") {
       this.selectableItems.forEach((item) => {
-        item.checked = item === e.target // eslint-disable-line no-param-reassign
+        item.checked = item === e.target
       })
     }
   }

package/src/components/chip/stories/chip-removable.stories.ts

@@ -1,5 +1,5 @@
 import { html } from "lit"
-import { action } from "@storybook/addon-actions"
+import { action } from "storybook/actions"
 
 import "../leu-chip-removable.js"
 

package/src/components/chip/test/chip-removable.test.ts

@@ -77,7 +77,7 @@ describe("LeuChipRemovable", () => {
   })
 
   it("sends the value in the remove event", async () => {
-    const el = await defaultFixture({ label: `Daten              ` }) // eslint-disable-line no-irregular-whitespace
+    const el = await defaultFixture({ label: `Daten              ` })
     const button = el.shadowRoot.querySelector("button")
 
     setTimeout(() => button.click())
@@ -94,7 +94,7 @@ describe("LeuChipRemovable", () => {
   })
 
   it("returns the value or label when getValue is called", async () => {
-    const el = await defaultFixture({ label: `Daten              ` }) // eslint-disable-line no-irregular-whitespace
+    const el = await defaultFixture({ label: `Daten              ` })
 
     expect(el.getValue()).to.equal("Daten")
 

package/src/components/dialog/Dialog.ts

@@ -7,7 +7,7 @@ import { LeuElement } from "../../lib/LeuElement.js"
 import { HasSlotController } from "../../lib/hasSlotController.js"
 import { LeuIcon } from "../icon/Icon.js"
 
-import styles from "./dialog.css"
+import styles from "./dialog.css?inline"
 
 /**
  * @tagname leu-dialog

package/src/components/dialog/stories/dialog.stories.ts

@@ -72,7 +72,6 @@ function ActionButtonsTemplate({ label, sublabel }) {
         <leu-button
           variant="secondary"
           @click=${() => {
-            // eslint-disable-next-line no-alert
             alert("Fenster wird geschlossen")
             closeDialog()
           }}
@@ -81,7 +80,6 @@ function ActionButtonsTemplate({ label, sublabel }) {
         </leu-button>
         <leu-button
           @click=${() => {
-            // eslint-disable-next-line no-alert
             alert("Fenster wird offen gelassen")
           }}
         >

package/src/components/dropdown/Dropdown.ts

@@ -10,7 +10,7 @@ import { LeuMenu } from "../menu/Menu.js"
 import { LeuMenuItem } from "../menu/MenuItem.js"
 import { LeuPopup } from "../popup/Popup.js"
 
-import styles from "./dropdown.css"
+import styles from "./dropdown.css?inline"
 
 /**
  * @tagname leu-dropdown

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

@@ -5,7 +5,7 @@ import "../../icon/leu-icon.js"
 import { paths as iconPaths } from "../../icon/paths.js"
 
 /**
- * @type {import("@storybook/web-components").Meta}
+ * @type {import("@storybook/web-components-vite").Meta}
  */
 export default {
   title: "Components/Dropdown",

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

@@ -5,10 +5,11 @@ import { classMap } from "lit/directives/class-map.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./file-input.css"
+import styles from "./file-input.css?inline"
 import { LeuButton } from "../button/Button.js"
 import { LeuIcon } from "../icon/Icon.js"
 import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
+import { FormAssociatedMixin } from "../../lib/mixins/FormAssociatedMixin.js"
 
 /**
  * @todo Pluralize text when multiple files are allowed
@@ -18,7 +19,7 @@ import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
 /**
  * @tagname leu-file-input
  */
-export class LeuFileInput extends LeuElement {
+export class LeuFileInput extends FormAssociatedMixin(LeuElement) {
   static dependencies = {
     "leu-icon": LeuIcon,
     "leu-button": LeuButton,
@@ -68,27 +69,13 @@ export class LeuFileInput extends LeuElement {
   @query('input[type="file"]')
   input: HTMLInputElement
 
-  constructor() {
-    super()
-    // Initialize the ElementInternals for form association
-    this.internals = this.attachInternals()
-  }
-
-  get form() {
-    return this.internals.form
-  }
-
-  get name() {
-    return this.getAttribute("name")
-  }
-
   updated(changedProperties: PropertyValues<this>) {
     if (
       changedProperties.has("files") ||
       changedProperties.has("disabled") ||
       changedProperties.has("multiple")
     ) {
-      this.updateFormValue()
+      this.setFormValue()
     }
   }
 
@@ -115,7 +102,7 @@ export class LeuFileInput extends LeuElement {
     this.input.value = ""
   }
 
-  protected updateFormValue() {
+  protected setFormValue() {
     const formData = new FormData()
 
     const files = this.multiple ? this.files : this.files.slice(0, 1)
@@ -125,6 +112,17 @@ export class LeuFileInput extends LeuElement {
     })
 
     this.internals.setFormValue(formData)
+
+    if (this.required && files.length < 1) {
+      // @todo i18n and/or custom validation message
+      this.internals.setValidity(
+        { valueMissing: true },
+        "Bitte wählen Sie eine Datei.",
+        this.input,
+      )
+    } else {
+      this.internals.setValidity({})
+    }
   }
 
   protected removeFile(fileToRemove: File) {
@@ -169,7 +167,6 @@ export class LeuFileInput extends LeuElement {
     )
   }
 
-  // eslint-disable-next-line class-methods-use-this
   protected handleDragOver = (event: DragEvent) => {
     if (this.disabled) return
 
@@ -250,8 +247,9 @@ export class LeuFileInput extends LeuElement {
             id="input"
             type="file"
             ?multiple=${this.multiple}
-            accept=${ifDefined(this.accept)}
             ?disabled=${this.disabled}
+            ?required=${this.required}
+            accept=${ifDefined(this.accept)}
             @input=${this.handleInput}
             @change=${this.handleChange}
           />

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

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from "@storybook/web-components"
-import { action } from "@storybook/addon-actions"
+import { Meta, StoryObj } from "@storybook/web-components-vite"
+import { action } from "storybook/actions"
 import { html } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 

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

@@ -2,7 +2,7 @@ import { html } from "lit"
 import { fixture, expect } from "@open-wc/testing"
 
 import "../leu-file-input.js"
-import { type LeuFileInput } from "../FileInput.js"
+import { LeuFileInput } from "../FileInput.js"
 
 async function defaultFixture() {
   return fixture<LeuFileInput>(
@@ -22,4 +22,17 @@ describe("LeuFileInput", () => {
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("is not valid when required and no file is selected", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <leu-file-input label="File upload" required></leu-file-input>
+      </form>
+    `)
+    const fileInput = form.querySelector<LeuFileInput>("leu-file-input")
+
+    expect(fileInput.validity.valid).to.be.false
+    expect(fileInput.validity.valueMissing).to.be.true
+    expect(form.checkValidity()).to.be.false
+  })
 })

package/src/components/icon/Icon.ts

@@ -3,7 +3,7 @@ import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./icon.css"
+import styles from "./icon.css?inline"
 import { paths, IconPathName } from "./paths.js"
 
 /**

package/src/components/input/Input.ts

@@ -1,4 +1,4 @@
-import { html, nothing } from "lit"
+import { html, nothing, PropertyValues } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { ifDefined } from "lit/directives/if-defined.js"
 import { live } from "lit/directives/live.js"
@@ -8,8 +8,9 @@ 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 styles from "./input.css?inline"
 import { IconPathName } from "../icon/paths.js"
+import { FormAssociatedMixin } from "../../lib/mixins/FormAssociatedMixin.js"
 
 export const SIZES = Object.freeze({
   SMALL: "small",
@@ -58,7 +59,7 @@ const VALIDATION_MESSAGES = {
  *
  * @tagname leu-input
  */
-export class LeuInput extends LeuElement {
+export class LeuInput extends FormAssociatedMixin(LeuElement) {
   static dependencies = {
     "leu-icon": LeuIcon,
   }
@@ -89,10 +90,6 @@ export class LeuInput extends LeuElement {
   @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 = ""
@@ -173,6 +170,20 @@ export class LeuInput extends LeuElement {
     return Number(this.value)
   }
 
+  formResetCallback() {
+    this.value = ""
+  }
+
+  protected setFormValue(): void {
+    this.internals.setFormValue(this.value)
+  }
+
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has("value")) {
+      this.setFormValue()
+    }
+  }
+
   /**
    * Method for handling the click event of the wrapper element.
    * Redirect every click on the wrapper to the input element.

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

@@ -49,27 +49,30 @@ function Template(args) {
   } = args
 
   return html`
-    <leu-input
-      value=${ifDefined(value)}
-      error=${ifDefined(error)}
-      pattern=${ifDefined(pattern)}
-      prefix=${ifDefined(prefix)}
-      suffix=${ifDefined(suffix)}
-      size=${ifDefined(size)}
-      icon=${ifDefined(icon)}
-      type=${ifDefined(type)}
-      min=${ifDefined(min)}
-      max=${ifDefined(max)}
-      minlength=${ifDefined(minlength)}
-      maxlength=${ifDefined(maxlength)}
-      step=${ifDefined(step)}
-      label=${label}
-      ?disabled=${disabled}
-      ?required=${required}
-      ?clearable=${clearable}
-      ?novalidate=${novalidate}
-    >
-    </leu-input>
+    <form>
+      <leu-input
+        name="input-field"
+        value=${ifDefined(value)}
+        error=${ifDefined(error)}
+        pattern=${ifDefined(pattern)}
+        prefix=${ifDefined(prefix)}
+        suffix=${ifDefined(suffix)}
+        size=${ifDefined(size)}
+        icon=${ifDefined(icon)}
+        type=${ifDefined(type)}
+        min=${ifDefined(min)}
+        max=${ifDefined(max)}
+        minlength=${ifDefined(minlength)}
+        maxlength=${ifDefined(maxlength)}
+        step=${ifDefined(step)}
+        label=${label}
+        ?disabled=${disabled}
+        ?required=${required}
+        ?clearable=${clearable}
+        ?novalidate=${novalidate}
+      >
+      </leu-input>
+    </form>
   `
 }
 

package/src/components/menu/Menu.ts

@@ -5,7 +5,7 @@ import { LeuElement } from "../../lib/LeuElement.js"
 
 import { LeuMenuItem } from "./MenuItem.js"
 
-import styles from "./menu.css"
+import styles from "./menu.css?inline"
 
 /**
  * @typedef {'single' | 'multiple' | 'none'} SelectsType
@@ -64,7 +64,7 @@ export class LeuMenu extends LeuElement {
 
     if (menuItemRole) {
       this.getMenuItems().forEach((menuItem) => {
-        menuItem.componentRole = menuItemRole // eslint-disable-line no-param-reassign
+        menuItem.componentRole = menuItemRole
       })
     }
   }
@@ -114,9 +114,9 @@ export class LeuMenu extends LeuElement {
     menuItems.forEach((menuItem, i) => {
       if (i === currentItemIndex) {
         currentItem = menuItem
-        menuItem.tabbable = true // eslint-disable-line no-param-reassign
+        menuItem.tabbable = true
       } else {
-        menuItem.tabbable = false // eslint-disable-line no-param-reassign
+        menuItem.tabbable = false
       }
     })
 

package/src/components/menu/MenuItem.ts

@@ -5,7 +5,7 @@ import { property } from "lit/decorators.js"
 import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuIcon } from "../icon/Icon.js"
 
-import styles from "./menu-item.css"
+import styles from "./menu-item.css?inline"
 
 type MenuItemRole =
   | "menuitem"

package/src/components/menu/stories/menu-item.stories.ts

@@ -23,7 +23,6 @@ export default {
   },
 }
 
-/* eslint-disable no-nested-ternary */
 function Template(args) {
   return html`
     <leu-menu-item
@@ -46,7 +45,6 @@ function Template(args) {
     </leu-menu-item>
   `
 }
-/* eslint-enable no-nested-ternary */
 
 export const Regular = Template.bind({})
 

package/src/components/message/Message.ts

@@ -4,7 +4,7 @@ import { classMap } from "lit/directives/class-map.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./message.css"
+import styles from "./message.css?inline"
 import { LeuIcon } from "../icon/Icon.js"
 import { HasSlotController } from "../../lib/hasSlotController.js"
 

package/src/components/message/stories/message.stories.ts

@@ -1,6 +1,6 @@
-import { Meta, StoryObj } from "@storybook/web-components"
+import { Meta, StoryObj } from "@storybook/web-components-vite"
 import { html, TemplateResult } from "lit"
-import { action } from "@storybook/addon-actions"
+import { action } from "storybook/actions"
 
 import "../leu-message.js"
 import "../../button/leu-button.js"

package/src/components/pagination/Pagination.ts

@@ -7,7 +7,7 @@ import { LeuButton } from "../button/Button.js"
 import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
 import { LeuIcon } from "../icon/Icon.js"
 
-import styles from "./pagination.css"
+import styles from "./pagination.css?inline"
 
 const MIN_PAGE = 1
 

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

@@ -2,9 +2,9 @@ import { html } from "lit"
 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 { action, HandlerFunction } from "@storybook/addon-actions"
-import { Meta, StoryObj } from "@storybook/web-components"
+import { UPDATE_STORY_ARGS } from "storybook/internal/core-events"
+import { action, HandlerFunction } from "storybook/actions"
+import { Meta, StoryObj } from "@storybook/web-components-vite"
 
 import "../leu-pagination.js"
 import { LeuPagination } from "../Pagination.js"

package/src/components/pagination/test/pagination.test.ts

@@ -188,7 +188,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 14,
+      defaultPage: 7,
     })
 
     const eventSpy = spy()

package/src/components/placeholder/Placeholder.ts

@@ -2,7 +2,7 @@ import { html } from "lit"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./placeholder.css"
+import styles from "./placeholder.css?inline"
 
 /**
  * @summary * A placeholder to display when no content is available.

package/src/components/placeholder/stories/placeholder.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/web-components"
+import { Meta, StoryObj } from "@storybook/web-components-vite"
 import { html } from "lit"
 
 import "../../button/leu-button.js"

package/src/components/popup/Popup.ts

@@ -12,7 +12,7 @@ import {
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./popup.css"
+import styles from "./popup.css?inline"
 
 export interface VirtualElement {
   getBoundingClientRect: () => DOMRect