@statistikzh/leu 0.24.1 → 0.25.0

package/src/components/checkbox/Checkbox.ts

@@ -1,15 +1,16 @@
-import { html } from "lit"
+import { html, PropertyValues } from "lit"
 import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
+import { FormAssociatedMixin } from "../../lib/mixins/FormAssociatedMixin.js"
 import { LeuIcon } from "../icon/Icon.js"
 
-import styles from "./checkbox.css"
+import styles from "./checkbox.css?inline"
 
 /**
  * @tagname leu-checkbox
  */
-export class LeuCheckbox extends LeuElement {
+export class LeuCheckbox extends FormAssociatedMixin(LeuElement) {
   static dependencies = {
     "leu-icon": LeuIcon,
   }
@@ -23,18 +24,58 @@ export class LeuCheckbox extends LeuElement {
   }
 
   @property({ type: Boolean, reflect: true })
-  checked: boolean = false
+  required: boolean = false
 
-  @property({ type: Boolean, reflect: true })
-  disabled: boolean = false
+  @property({ type: Boolean, reflect: true, attribute: "checked" })
+  defaultChecked: boolean = false
 
-  @property({ type: String, reflect: true })
-  value: string = ""
+  protected _checked: boolean
+
+  @property({ type: Boolean, attribute: false })
+  set checked(isChecked: boolean) {
+    this._checked = isChecked
+  }
+
+  get checked(): boolean {
+    if (typeof this._checked === "boolean") {
+      return this._checked
+    }
+
+    return this.defaultChecked
+  }
 
   @property({ type: String, reflect: true })
-  name: string = ""
+  value: string
+
+  willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties)
+    let checkedChanged = false
+
+    // Match the bevavior of native checkboxes.
+    // Changes to the defaultChecked property only hav an effect
+    // if the user has not interacted with the checkbox yet.
+    if (
+      changedProperties.has("defaultChecked") &&
+      !changedProperties.has("checked") &&
+      !this.hasInteracted
+    ) {
+      this.checked = this.defaultChecked
+      checkedChanged = true
+    }
+
+    if (
+      checkedChanged ||
+      changedProperties.has("checked") ||
+      changedProperties.has("value") ||
+      changedProperties.has("name") ||
+      changedProperties.has("disabled")
+    ) {
+      this.setFormValue()
+    }
+  }
 
   private handleChange(event: Event & { target: HTMLInputElement }) {
+    this.hasInteracted = true
     this.checked = event.target.checked
 
     const customEvent = new CustomEvent(event.type, event)
@@ -42,13 +83,35 @@ export class LeuCheckbox extends LeuElement {
   }
 
   private handleInput(event: InputEvent & { target: HTMLInputElement }) {
+    this.hasInteracted = true
     this.checked = event.target.checked
   }
 
+  public formResetCallback() {
+    this.checked = this.defaultChecked
+    super.formResetCallback()
+  }
+
+  setFormValue() {
+    this.internals.setFormValue(
+      this.checked && !this.disabled ? (this.value ?? "on") : null,
+    )
+
+    if (this.required && !this.checked) {
+      // @todo i18n and/or custom validation message
+      this.internals.setValidity(
+        { valueMissing: true },
+        "Bitte klicken Sie dieses Kästchen an, um fortfahren zu können.",
+      )
+    } else {
+      this.internals.setValidity({})
+    }
+  }
+
   render() {
     return html`
       <input
-        id=${`checkbox-${this.name}`}
+        id="checkbox"
         class="checkbox"
         type="checkbox"
         name="${this.name}"
@@ -56,9 +119,10 @@ export class LeuCheckbox extends LeuElement {
         @input=${this.handleInput}
         .checked=${this.checked}
         ?disabled=${this.disabled}
-        .value=${this.value ?? ""}
+        .value=${this.value}
+        ?required=${this.required}
       />
-      <label for=${`checkbox-${this.name}`} class="label"><slot></slot></label>
+      <label for="checkbox" class="label"><slot></slot></label>
       <leu-icon class="icon" name="check"></leu-icon>
     `
   }

package/src/components/checkbox/CheckboxGroup.ts

@@ -4,7 +4,7 @@ import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./checkbox-group.css"
+import styles from "./checkbox-group.css?inline"
 import { LeuCheckbox } from "./Checkbox.js"
 
 /**

package/src/components/checkbox/checkbox.css

@@ -67,6 +67,10 @@
   cursor: not-allowed;
 }
 
+.checkbox:required + .label::after {
+  content: "*";
+}
+
 .icon {
   position: absolute;
   display: block;

package/src/components/checkbox/stories/checkbox.stories.ts

@@ -8,6 +8,9 @@ export default {
     label: {
       control: "text",
     },
+    defaultChecked: {
+      control: "boolean",
+    },
   },
   parameters: {
     design: {
@@ -17,13 +20,23 @@ export default {
   },
 }
 
-function Template({ label = "Label", value, checked, disabled, name = "" }) {
+function Template({
+  label = "Label",
+  value,
+  checked,
+  defaultChecked,
+  disabled,
+  name = "",
+  required,
+}) {
   return html`
     <leu-checkbox
-      .value=${value}
-      ?checked=${checked}
+      value=${value}
+      .checked=${checked}
+      ?checked=${defaultChecked}
       ?disabled=${disabled}
       name=${name}
+      ?required=${required}
     >
       ${label}
     </leu-checkbox>
@@ -37,6 +50,11 @@ Checked.args = {
   checked: true,
 }
 
+export const DefaultChecked = Template.bind({})
+DefaultChecked.args = {
+  defaultChecked: true,
+}
+
 export const Disabled = Template.bind({})
 Disabled.args = {
   disabled: true,
@@ -47,3 +65,8 @@ CheckedDisabled.args = {
   checked: true,
   disabled: true,
 }
+
+export const Required = Template.bind({})
+Required.args = {
+  required: true,
+}

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.