@statistikzh/leu 0.26.0 → 0.28.0

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

@@ -5,9 +5,10 @@ import { sendKeys } from "@web/test-runner-commands"
 import { spy } from "sinon"
 
 import "../leu-input.js"
+import { LeuInput } from "../leu-input.js"
 
 async function defaultFixture(args = {}) {
-  return fixture(html`
+  return fixture<LeuInput>(html`
     <leu-input
       value=${ifDefined(args.value)}
       error=${ifDefined(args.error)}
@@ -495,4 +496,108 @@ describe("LeuInput", () => {
       expect(error).to.be.null
     }
   })
+
+  it("returns the defaultValue when no value has been explicitly set", async () => {
+    const el = await defaultFixture({ value: "John" })
+
+    expect(el.defaultValue).to.equal("John")
+    expect(el.value).to.equal("John")
+  })
+
+  it("value property overrides the defaultValue", async () => {
+    const el = await defaultFixture({ value: "John" })
+
+    el.value = "Jane"
+    await elementUpdated(el)
+
+    expect(el.defaultValue).to.equal("John")
+    expect(el.value).to.equal("Jane")
+  })
+
+  it("resets to the defaultValue when the form is reset", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <leu-input name="name" value="John" label="Name"></leu-input>
+      </form>
+    `)
+
+    const input = form.querySelector<LeuInput>("leu-input")
+    input.value = "Jane"
+    await elementUpdated(input)
+
+    expect(input.value).to.equal("Jane")
+
+    form.reset()
+    await elementUpdated(input)
+
+    expect(input.value).to.equal("John")
+  })
+
+  it("updates the form data when the defaultValue changes before any interaction", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <leu-input name="name" value="John" label="Name"></leu-input>
+      </form>
+    `)
+
+    const input = form.querySelector<LeuInput>("leu-input")
+
+    let formData = new FormData(form)
+    expect(formData.get("name")).to.equal("John")
+
+    // Changing defaultValue before interaction should update the value
+    input.defaultValue = "Jane"
+    await elementUpdated(input)
+
+    formData = new FormData(form)
+    expect(formData.get("name")).to.equal("Jane")
+  })
+
+  it("does not update the value when the defaultValue changes after interaction", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <leu-input name="name" label="Name"></leu-input>
+        <div tabindex="0"></div>
+      </form>
+    `)
+
+    const input = form.querySelector<LeuInput>("leu-input")
+    input.focus()
+    await sendKeys({ type: "John" })
+    await elementUpdated(input)
+
+    // User has interacted, changing defaultValue should NOT override the typed value
+    input.defaultValue = "Jane"
+    await elementUpdated(input)
+
+    expect(input.value).to.equal("John")
+
+    const formData = new FormData(form)
+    expect(formData.get("name")).to.equal("John")
+  })
+
+  it("updates the form data when the value or disabled state changes", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <leu-input name="name" value="John" label="Name"></leu-input>
+      </form>
+    `)
+
+    const input = form.querySelector<LeuInput>("leu-input")
+
+    let formData = new FormData(form)
+    expect(formData.get("name")).to.equal("John")
+
+    input.value = "Jane"
+    await elementUpdated(input)
+
+    formData = new FormData(form)
+    expect(formData.get("name")).to.equal("Jane")
+
+    input.disabled = true
+    await elementUpdated(input)
+
+    formData = new FormData(form)
+    expect(formData.get("name")).to.be.null
+  })
 })

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

@@ -22,23 +22,23 @@ export class LeuScrollTop extends LeuElement {
   static styles = [LeuElement.styles, styles]
 
   @state()
-  protected _showButton: boolean = false
+  protected showButton: boolean = false
 
-  protected _prevYPos: number = 0
+  protected prevYPos: number = 0
 
-  protected _scrollDown: boolean = false
+  protected hasScrolledDown: boolean = false
 
-  protected _scrollListener: EventListener
+  protected scrollListener: EventListener
 
   scroll = () => {
-    const delta = window.scrollY - this._prevYPos
+    const delta = window.scrollY - this.prevYPos
 
-    if (this._scrollDown) {
+    if (this.hasScrolledDown) {
       if (delta < 0) {
-        this._scrollDown = false
+        this.hasScrolledDown = false
       }
     } else if (delta > 0) {
-      this._scrollDown = true
+      this.hasScrolledDown = true
     }
 
     /**
@@ -46,22 +46,24 @@ export class LeuScrollTop extends LeuElement {
      * ... the current scroll position is greater than the window height (below-the-fold) and when
      * ... scrolling up
      */
-    this._showButton = window.scrollY > window.innerHeight && !this._scrollDown
-    this._prevYPos = window.scrollY
+    this.showButton =
+      window.scrollY > window.innerHeight && !this.hasScrolledDown
+    this.prevYPos = window.scrollY
   }
 
   connectedCallback() {
     super.connectedCallback()
-    this._scrollListener = throttle(this.scroll, 100)
-    document.addEventListener("scroll", this._scrollListener, true)
+    this.scrollListener = throttle(this.scroll, 100)
+    document.addEventListener("scroll", this.scrollListener, true)
   }
 
   disconnectedCallback() {
-    document.removeEventListener("scroll", this._scrollListener, true)
+    document.removeEventListener("scroll", this.scrollListener, true)
     super.disconnectedCallback()
   }
 
-  static scrollToTop() {
+  // eslint-disable-next-line class-methods-use-this
+  scrollToTop() {
     window.scrollTo({
       top: 0,
       left: 0,
@@ -72,14 +74,14 @@ export class LeuScrollTop extends LeuElement {
   render() {
     const cssClasses = {
       "scroll-top": true,
-      hide: !this._showButton,
+      hide: !this.showButton,
     }
     return html`
       <div class=${classMap(cssClasses)}>
         <leu-button
           label="Zum Seitenanfang"
           round
-          @click="${() => LeuScrollTop.scrollToTop()}"
+          @click="${() => this.scrollToTop()}"
         >
           <leu-icon name="arrowUp"></leu-icon>
         </leu-button>

package/src/components/select/Select.ts

@@ -1,10 +1,12 @@
 import { html, nothing, PropertyValues } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { createRef, ref } from "lit/directives/ref.js"
+import { property, state } from "lit/decorators.js"
 
 import { ifDefined } from "lit/directives/if-defined.js"
 import { LeuElement } from "../../lib/LeuElement.js"
 import { HasSlotController } from "../../lib/hasSlotController.js"
+import { FormAssociatedMixin } from "../../lib/mixins/FormAssociatedMixin.js"
 
 import { LeuButton } from "../button/Button.js"
 import { LeuMenu } from "../menu/Menu.js"
@@ -19,17 +21,9 @@ import styles from "./select.css?inline"
  * @tagname leu-select
  * @slot before - Optional content the appears before the option list
  * @slot after - Optional content the appears after the option list
- * @property {string} name - Reflects to the name attribute of the hidden input field that would be used in a form
- * @property {boolean} open - The expanded state of the popup
- * @property {string} label - The label of the select
- * @property {array} value - List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them.
- * @property {boolean} clearable - Show a clearable button to reset the value
- * @property {boolean} disabled - If the select should be disabled
- * @property {boolean} filterable - Show an input field to filter the options inside the popup
- * @property {boolean} multiple - Allow multiple selections
  * @attribute {string} value - The selected values separated by commas.
  */
-export class LeuSelect extends LeuElement {
+export class LeuSelect extends FormAssociatedMixin(LeuElement) {
   static dependencies = {
     "leu-button": LeuButton,
     "leu-menu": LeuMenu,
@@ -41,32 +35,96 @@ export class LeuSelect extends LeuElement {
 
   static styles = [LeuElement.styles, styles]
 
-  static get properties() {
-    return {
-      name: { type: String, reflect: true },
-      open: { type: Boolean, reflect: true },
-      label: { type: String, reflect: true },
-      value: {
-        type: Array,
-        converter: {
-          fromAttribute(value) {
-            if (value) {
-              return value.split(",").map((v) => v.trim())
-            }
-            return value
-          },
-        },
+  /**
+   * @internal
+   */
+  static shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  /**
+   * The label of the select
+   */
+  @property({ type: String, reflect: true })
+  label: string = ""
+
+  /**
+   * The default value of the select. Corresponds to the `value` HTML attribute.
+   */
+  @property({
+    reflect: true,
+    attribute: "value",
+    converter: {
+      fromAttribute(value) {
+        if (value) {
+          return value.split(",").map((v) => v.trim())
+        }
+        return []
       },
-      clearable: { type: Boolean, reflect: true },
-      disabled: { type: Boolean, reflect: true },
-      filterable: { type: Boolean, reflect: true },
-      multiple: { type: Boolean, reflect: true },
-      _optionFilter: { state: true },
-      _hasFilterResults: { state: true },
-      _displayValue: { state: true },
-    }
+      toAttribute(value: Array<string>) {
+        return value.length > 0 ? value.join(",") : null
+      },
+    },
+  })
+  defaultValue: Array<string> = []
+
+  /** @internal */
+  protected _value: Array<string> | undefined
+
+  /**
+   * List of selected values. If they're set from outside the component, the select element
+   * finds all the options that match the given values and selects them.
+   */
+  @property({ type: Array, attribute: false })
+  set value(value: Array<string>) {
+    /**
+     * @todo Check if all of the value items are actually present in the options
+     */
+    this._value = value
+  }
+
+  get value(): Array<string> {
+    return this._value ?? this.defaultValue
   }
 
+  /**
+   * Show a clearable button to reset the value
+   */
+  @property({ type: Boolean, reflect: true })
+  clearable: boolean = false
+
+  /**
+   * Show an input field to filter the options inside the popup
+   */
+  @property({ type: Boolean, reflect: true })
+  filterable: boolean = false
+
+  /**
+   * Allow multiple selections
+   */
+  @property({ type: Boolean, reflect: true })
+  multiple: boolean = false
+
+  /** Marks the input element as required */
+  @property({ type: Boolean, reflect: true })
+  required: boolean = false
+
+  /**
+   * The expanded state of the popup
+   */
+  @state()
+  protected open: boolean = false
+
+  @state()
+  protected _optionFilter: string = ""
+
+  @state()
+  protected _hasFilterResults: boolean = true
+
+  @state()
+  protected _displayValue: string = ""
+
   static getOptionLabel(option) {
     if (typeof option === "object" && option !== null) {
       return option.label
@@ -74,48 +132,72 @@ export class LeuSelect extends LeuElement {
     return option
   }
 
+  /** @internal */
+  protected _deferedChangeEvent = false
+
+  /** @internal */
+  protected _optionFilterRef = createRef<LeuInput>()
+
+  /** @internal */
+  protected _toggleButtonRef = createRef<HTMLButtonElement>()
+
+  /** @internal */
+  protected _menuRef = createRef<LeuMenu>()
+
   /**
    * @internal
    */
   hasSlotController = new HasSlotController(this, ["before", "after"])
 
-  constructor() {
-    super()
-    this.open = false
-    this.disabled = false
-    this.open = false
-    this.multiple = false
-    this.clearable = false
-    this.filterable = false
-    this.value = []
-    this.label = ""
-    this.name = ""
-
-    /** @internal */
-    this._optionFilter = ""
-
-    /** @internal */
-    this._hasFilterResults = true
+  protected setFormValue(): void {
+    const isEmpty = this.value.length === 0 || !this.value.some((v) => v !== "") // At least one value is not an empty string
+
+    if (isEmpty || this.disabled) {
+      this.internals.setFormValue(null)
+    } else if (this.multiple) {
+      const formData = new FormData()
+      this.value.forEach((v) => formData.append(this.name ?? "", v))
+      this.internals.setFormValue(formData)
+    } else {
+      this.internals.setFormValue(this.value[0])
+    }
 
-    /** @internal */
-    this._deferedChangeEvent = false
+    if (this.required && isEmpty) {
+      this.internals.setValidity(
+        { valueMissing: true },
+        "Bitte wählen Sie eine Option aus.",
+      )
+    } else {
+      this.internals.setValidity({})
+    }
+  }
 
-    /** @internal */
+  public formResetCallback() {
+    super.formResetCallback()
+    this.value = this.defaultValue
     this._displayValue = ""
+  }
 
-    /**
-     * @type {import("lit/directives/ref").Ref<import("../input/Input").LeuInput>}
-     */
-    this._optionFilterRef = createRef()
-    /**
-     * @type {import("lit/directives/ref").Ref<HTMLButtonElement>}
-     */
-    this._toggleButtonRef = createRef()
+  protected willUpdate(changedProperties: PropertyValues<this>) {
+    super.willUpdate(changedProperties)
 
-    /**
-     * @type {import("lit/directives/ref").Ref<import("../menu/Menu").LeuMenu>}
-     */
-    this._menuRef = createRef()
+    if (
+      changedProperties.has("defaultValue") &&
+      !changedProperties.has("value") &&
+      !this.hasInteracted
+    ) {
+      this.value = this.defaultValue
+    }
+
+    if (
+      changedProperties.has("value") ||
+      changedProperties.has("defaultValue") ||
+      changedProperties.has("name") ||
+      changedProperties.has("disabled") ||
+      changedProperties.has("required")
+    ) {
+      this.setFormValue()
+    }
   }
 
   connectedCallback() {
@@ -156,13 +238,16 @@ export class LeuSelect extends LeuElement {
     }
   }
 
+  public click() {
+    this._toggleButtonRef.value?.click()
+  }
+
   /**
    * Apply the current state to the menu items.
    * - Set the active property when the value property has changed.
    * - Hide menu items that do not match the filter.
    */
   async _updateMenuItems(changed) {
-    /** @type {LeuMenu} */
     const menu = this._menuRef.value
 
     await menu.updateComplete
@@ -221,9 +306,8 @@ export class LeuSelect extends LeuElement {
   /**
    * Handles clicks outside of the component to close the dropdown.
    * @internal
-   * @param {MouseEvent} event
    */
-  _handleDocumentClick = (event) => {
+  _handleDocumentClick = (event: MouseEvent) => {
     if (!event.composedPath().includes(this) && this.open) {
       this._closeDropdown()
     }
@@ -231,9 +315,8 @@ export class LeuSelect extends LeuElement {
 
   /**
    * @internal
-   * @param {KeyboardEvent} event
    */
-  _handleKeyDown = (event) => {
+  _handleKeyDown = (event: KeyboardEvent) => {
     if (event.key === "Escape") {
       this._closeDropdown()
     }
@@ -241,9 +324,8 @@ export class LeuSelect extends LeuElement {
 
   /**
    * @internal
-   * @param {KeyboardEvent} event
    */
-  async _handleToggleKeyDown(event) {
+  async _handleToggleKeyDown(event: KeyboardEvent) {
     if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
       event.preventDefault()
 
@@ -262,9 +344,8 @@ export class LeuSelect extends LeuElement {
 
   /**
    * @internal
-   * @param {KeyboardEvent} event
    */
-  _handleFilterInputKeyDown(event) {
+  _handleFilterInputKeyDown(event: KeyboardEvent) {
     if (event.key === "ArrowDown") {
       this._menuRef.value.focusItem(0)
     } else if (event.key === "ArrowUp") {
@@ -274,7 +355,6 @@ export class LeuSelect extends LeuElement {
 
   /**
    * Determines the value or label that should be displayed inside the toggle button.
-   * @returns {String | nothing}
    */
   _getDisplayValue() {
     if (this.multiple) {
@@ -300,9 +380,10 @@ export class LeuSelect extends LeuElement {
     this.dispatchEvent(changeevent)
   }
 
-  _clearValue(event) {
+  _clearValue(event: MouseEvent) {
     if (!this.disabled) {
       event.stopPropagation()
+      this.hasInteracted = true
       this.value = []
     }
 
@@ -325,30 +406,29 @@ export class LeuSelect extends LeuElement {
     }
   }
 
-  _handleFilterInput(event) {
-    this._optionFilter = event.target.value
+  _handleFilterInput(event: InputEvent) {
+    this._optionFilter = (event.target as HTMLInputElement).value
   }
 
   /**
    * Checks if the given value is selected.
-   * @param {String} menuItemValue
-   * @returns {Boolean}
    */
-  _isSelected(menuItemValue) {
+  _isSelected(menuItemValue: string) {
     return this.value.includes(menuItemValue)
   }
 
-  _handleMenuItemClick(event) {
+  _handleMenuItemClick(event: MouseEvent) {
     if (!(event.target instanceof LeuMenuItem) || event.target.disabled) {
       return
     }
 
-    /** @type {LeuMenuItem} */
     const menuItem = event.target
 
     const value = menuItem.getValue()
     const isSelected = this._isSelected(value)
 
+    this.hasInteracted = true
+
     if (this.multiple) {
       this.value = isSelected
         ? this.value.filter((v) => v !== value)
@@ -392,7 +472,6 @@ export class LeuSelect extends LeuElement {
             type="button"
             class="apply-button"
             @click=${this._closeDropdown}
-            fluid
             >Anwenden</leu-button
           >
         </div>
@@ -449,49 +528,43 @@ export class LeuSelect extends LeuElement {
       "select--has-after": this.hasSlotController.test("after"),
     }
 
-    /*
-     * We use the click event listener with the event delegation pattern
-     * so this is not a violation of the rule.
-     */
-
     return html`<div
-        class=${classMap(selectClasses)}
-        @keydown=${this._handleKeyDown}
+      class=${classMap(selectClasses)}
+      @keydown=${this._handleKeyDown}
+    >
+      <leu-popup
+        ?active=${this.open}
+        placement="bottom-start"
+        flip
+        matchSize="width"
+        autoSize="height"
+        autoSizePadding="8"
       >
-        <leu-popup
-          ?active=${this.open}
-          placement="bottom-start"
-          flip
-          matchSize="width"
-          autoSize="height"
-          autoSizePadding="8"
-        >
-          ${this._renderToggleButton()}
-          <div id="select-popup" class="select-menu-container">
-            <slot name="before" class="before"></slot>
-            ${this._renderFilterInput()}
-            <leu-menu
-              ref=${ref(this._menuRef)}
-              role="listbox"
-              aria-multiselectable=${ifDefined(
-                this.multiple ? "true" : undefined,
-              )}
-              class="menu"
-              @click=${this._handleMenuItemClick}
-              aria-labelledby="select-label"
-            >
-              <slot @slotchange=${this._handleItemSlotChange}> </slot>
-            </leu-menu>
-            ${this._hasFilterResults || this._optionFilter === ""
-              ? nothing
-              : html` <p class="filter-message-empty" aria-live="polite">
-                  Keine Resultate
-                </p>`}
-            ${this._renderApplyButton()}
-            <slot name="after" class="after"></slot>
-          </div>
-        </leu-popup>
-      </div>
-      <input type="hidden" name=${this.name} .value=${this.value.join(",")} />`
+        ${this._renderToggleButton()}
+        <div id="select-popup" class="select-menu-container">
+          <slot name="before" class="before"></slot>
+          ${this._renderFilterInput()}
+          <leu-menu
+            ref=${ref(this._menuRef)}
+            role="listbox"
+            aria-multiselectable=${ifDefined(
+              this.multiple ? "true" : undefined,
+            )}
+            class="menu"
+            @click=${this._handleMenuItemClick}
+            aria-labelledby="select-label"
+          >
+            <slot @slotchange=${this._handleItemSlotChange}> </slot>
+          </leu-menu>
+          ${this._hasFilterResults || this._optionFilter === ""
+            ? nothing
+            : html` <p class="filter-message-empty" aria-live="polite">
+                Keine Resultate
+              </p>`}
+          ${this._renderApplyButton()}
+          <slot name="after" class="after"></slot>
+        </div>
+      </leu-popup>
+    </div>`
   }
 }

package/src/components/select/select.css

@@ -90,6 +90,10 @@
   font-family: var(--select-font-regular);
 }
 
+:host([required]) .label::after {
+  content: "*";
+}
+
 .clear-button {
   --_length: 1.5rem;