@statistikzh/leu 0.13.1 → 0.14.0

package/src/components/chip/test/chip-link.test.js

@@ -4,9 +4,9 @@ import { fixture, expect } from "@open-wc/testing"
 import "../leu-chip-link.js"
 
 async function defaultFixture() {
-  return fixture(
-    html` <leu-chip-link href="https://zh.ch/daten">Daten</leu-chip-link> `
-  )
+  return fixture(html`
+    <leu-chip-link href="https://zh.ch/daten">Daten</leu-chip-link>
+  `)
 }
 
 describe("LeuChipLink", () => {
@@ -38,7 +38,7 @@ describe("LeuChipLink", () => {
     const el = await defaultFixture()
 
     expect(el.shadowRoot.querySelector("a").getAttribute("href")).to.equal(
-      "https://zh.ch/daten"
+      "https://zh.ch/daten",
     )
   })
 
@@ -48,7 +48,7 @@ describe("LeuChipLink", () => {
     el.focus()
 
     expect(el.shadowRoot.querySelector("a")).to.equal(
-      el.shadowRoot.activeElement
+      el.shadowRoot.activeElement,
     )
   })
 })

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

@@ -6,13 +6,11 @@ import { ifDefined } from "lit/directives/if-defined.js"
 import "../leu-chip-removable.js"
 
 async function defaultFixture(args = {}) {
-  return fixture(
-    html`
-      <leu-chip-removable value=${ifDefined(args.value)}
-        >${args.label ?? "Daten"}</leu-chip-removable
-      >
-    `
-  )
+  return fixture(html`
+    <leu-chip-removable value=${ifDefined(args.value)}
+      >${args.label ?? "Daten"}</leu-chip-removable
+    >
+  `)
 }
 
 describe("LeuChipRemovable", () => {
@@ -54,7 +52,7 @@ describe("LeuChipRemovable", () => {
     el.focus()
 
     expect(el.shadowRoot.querySelector("button")).to.equal(
-      el.shadowRoot.activeElement
+      el.shadowRoot.activeElement,
     )
   })
 

package/src/components/chip/test/chip-selectable.test.js

@@ -6,16 +6,14 @@ import { sendKeys } from "@web/test-runner-commands"
 import "../leu-chip-selectable.js"
 
 async function defaultFixture(args = {}) {
-  return fixture(
-    html`
-      <leu-chip-selectable
-        value=${ifDefined(args.value)}
-        variant=${ifDefined(args.variant)}
-        ?checked=${args.checked}
-        >Publikationen</leu-chip-selectable
-      >
-    `
-  )
+  return fixture(html`
+    <leu-chip-selectable
+      value=${ifDefined(args.value)}
+      variant=${ifDefined(args.variant)}
+      ?checked=${args.checked}
+      >Publikationen</leu-chip-selectable
+    >
+  `)
 }
 
 describe("LeuChipSelectable", () => {
@@ -49,7 +47,7 @@ describe("LeuChipSelectable", () => {
     el.focus()
 
     expect(el.shadowRoot.querySelector("button")).to.equal(
-      el.shadowRoot.activeElement
+      el.shadowRoot.activeElement,
     )
   })
 

package/src/components/dialog/test/dialog.test.js

@@ -7,7 +7,7 @@ async function defaultFixture() {
   return fixture(
     html`<leu-dialog label="Title" sublabel="Category">
       This is the content of the dialog.
-    </leu-dialog>`
+    </leu-dialog>`,
   )
 }
 

package/src/components/dropdown/test/dropdown.test.js

@@ -4,19 +4,18 @@ import { fixture, expect, elementUpdated } from "@open-wc/testing"
 import "../leu-dropdown.js"
 
 async function defaultFixture(args = { expanded: false }) {
-  return fixture(html` <leu-dropdown
-    label="Download"
-    ?expanded=${args.expanded}
-  >
-    <leu-menu>
-      <leu-menu-item>Als CSV Tabelle</leu-menu-item>
-      <leu-menu-item>Als XLS Tabelle</leu-menu-item>
-      <hr />
-      <leu-menu-item>Als PNG exportieren</leu-menu-item>
-      <leu-menu-item>Als SVG exportieren</leu-menu-item>
-      <leu-menu-item>Als PDF exportieren</leu-menu-item>
-    </leu-menu>
-  </leu-dropdown>`)
+  return fixture(
+    html` <leu-dropdown label="Download" ?expanded=${args.expanded}>
+      <leu-menu>
+        <leu-menu-item>Als CSV Tabelle</leu-menu-item>
+        <leu-menu-item>Als XLS Tabelle</leu-menu-item>
+        <hr />
+        <leu-menu-item>Als PNG exportieren</leu-menu-item>
+        <leu-menu-item>Als SVG exportieren</leu-menu-item>
+        <leu-menu-item>Als PDF exportieren</leu-menu-item>
+      </leu-menu>
+    </leu-dropdown>`,
+  )
 }
 
 describe("LeuDropdown", () => {

package/src/components/input/Input.js

@@ -244,10 +244,10 @@ export class LeuInput extends LeuElement {
     this._inputRef.value.focus()
 
     this.dispatchEvent(
-      new CustomEvent("input", { bubbles: true, composed: true })
+      new CustomEvent("input", { bubbles: true, composed: true }),
     )
     this.dispatchEvent(
-      new CustomEvent("change", { bubbles: true, composed: true })
+      new CustomEvent("change", { bubbles: true, composed: true }),
     )
   }
 
@@ -296,24 +296,42 @@ export class LeuInput extends LeuElement {
 
     validationMessages.tooLong = LeuInput.resolveErrorMessage(
       tooLong,
-      this.maxlength
+      this.maxlength,
     )
     validationMessages.tooShort = LeuInput.resolveErrorMessage(
       tooShort,
-      this.minlength
+      this.minlength,
     )
     validationMessages.rangeOverflow = LeuInput.resolveErrorMessage(
       rangeOverflow,
-      this.max
+      this.max,
     )
     validationMessages.rangeUnderflow = LeuInput.resolveErrorMessage(
       rangeUnderflow,
-      this.min
+      this.min,
     )
 
     return validationMessages
   }
 
+  isInvalid() {
+    if (this.error) {
+      return true
+    }
+
+    return this._validity === null || this.novalidate
+      ? false
+      : !this._validity.valid
+  }
+
+  /**
+   * Check input validation
+   * @returns {boolean} if valid or not
+   */
+  checkValidity() {
+    return this._inputRef.value?.checkValidity() ?? false
+  }
+
   /**
    * Creates an error list with an item for the given validity state.
    * @returns {import("lit").TemplateResult | nothing}
@@ -337,7 +355,7 @@ export class LeuInput extends LeuElement {
     return html`
       <ul class="error" aria-errormessage=${`input-${this.getId()}`}>
         ${errorMessages.map(
-          (message) => html`<li class="error-message">${message}</li>`
+          (message) => html`<li class="error-message">${message}</li>`,
         )}
       </ul>
     `
@@ -377,16 +395,6 @@ export class LeuInput extends LeuElement {
     return nothing
   }
 
-  isInvalid() {
-    if (this.error) {
-      return true
-    }
-
-    return this._validity === null || this.novalidate
-      ? false
-      : !this._validity.valid
-  }
-
   render() {
     const isInvalid = this.isInvalid()
 

package/src/components/input/stories/input.stories.js

@@ -49,8 +49,6 @@ function Template(args) {
     novalidate = false,
   } = args
 
-  console.log(min, max)
-
   return html`
     <leu-input
       value=${ifDefined(value)}

package/src/components/input/test/input.test.js

@@ -469,4 +469,30 @@ describe("LeuInput", () => {
 
     expect(el.valueAsNumber).to.be.NaN
   })
+
+  it("check input is valid", async () => {
+    {
+      const el = await defaultFixture({ label: "Länge", type: "number" })
+      el.focus()
+
+      await sendKeys({ type: "text" })
+      expect(el.checkValidity()).to.be.false
+
+      await elementUpdated(el)
+      const error = el.shadowRoot.querySelector(".error")
+      expect(error).not.to.be.null
+    }
+
+    {
+      const el = await defaultFixture({ label: "Länge", type: "number" })
+      el.focus()
+
+      await sendKeys({ type: "123" })
+      expect(el.checkValidity()).to.be.true
+
+      await elementUpdated(el)
+      const error = el.shadowRoot.querySelector(".error")
+      expect(error).to.be.null
+    }
+  })
 })

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

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

package/src/components/menu/test/menu-item.test.js

@@ -185,7 +185,7 @@ describe("LeuMenuItem", () => {
     expect(el.getValue()).to.equal("download-01")
   })
 
-  it("renders a palceholder icon when the menu item is part of multiple selection but not active", async () => {
+  it("renders a placeholder icon when the menu item is part of multiple selection but not active", async () => {
     const el = await defaultFixture({
       label: "Download",
       multipleSelection: true,
@@ -193,13 +193,14 @@ describe("LeuMenuItem", () => {
 
     const icon = el.shadowRoot.querySelector("leu-icon")
     expect(icon).to.exist
-    expect(icon).to.have.attribute("name", "EMPTY")
+    expect(icon).to.have.attribute("name", "")
   })
 
   it("renders a check icon when the menu item is part of multiple selection and is active", async () => {
     const el = await defaultFixture({
       label: "Download",
       multipleSelection: true,
+      active: true,
     })
 
     const icon = el.shadowRoot.querySelector("leu-icon")

package/src/components/menu/test/menu.test.js

@@ -8,29 +8,31 @@ import "../leu-menu-item.js"
 import "../../icon/leu-icon.js"
 
 async function defaultFixture(args = {}) {
-  return fixture(html` <leu-menu
-    role=${ifDefined(args.role)}
-    selects=${ifDefined(args.selects)}
-  >
-    <leu-menu-item
-      ><leu-icon slot="before"></leu-icon>Menu Item 1</leu-menu-item
+  return fixture(
+    html` <leu-menu
+      role=${ifDefined(args.role)}
+      selects=${ifDefined(args.selects)}
     >
-    <leu-menu-item active
-      ><leu-icon slot="before" name="check"></leu-icon>Menu Item
-      2</leu-menu-item
-    >
-    <leu-menu-item
-      ><leu-icon slot="before"></leu-icon>Menu Item 3</leu-menu-item
-    >
-    <hr />
-    <leu-menu-item
-      ><leu-icon name="pin" slot="before"></leu-icon>Menu Item 3<slot
-        name="after"
-        >CH</slot
-      ></leu-menu-item
-    >
-    <leu-menu-item>Menu Item 4</leu-menu-item>
-  </leu-menu>`)
+      <leu-menu-item
+        ><leu-icon slot="before"></leu-icon>Menu Item 1</leu-menu-item
+      >
+      <leu-menu-item active
+        ><leu-icon slot="before" name="check"></leu-icon>Menu Item
+        2</leu-menu-item
+      >
+      <leu-menu-item
+        ><leu-icon slot="before"></leu-icon>Menu Item 3</leu-menu-item
+      >
+      <hr />
+      <leu-menu-item
+        ><leu-icon name="pin" slot="before"></leu-icon>Menu Item 3<slot
+          name="after"
+          >CH</slot
+        ></leu-menu-item
+      >
+      <leu-menu-item>Menu Item 4</leu-menu-item>
+    </leu-menu>`,
+  )
 }
 
 describe("LeuMenu", () => {

package/src/components/pagination/Pagination.js

@@ -111,7 +111,7 @@ export class LeuPagination extends LeuElement {
             page: this.page,
           },
           bubbles: false,
-        })
+        }),
       )
     }
   }

package/src/components/pagination/pagination.css

@@ -1,7 +1,7 @@
 :host {
   margin-top: 16px;
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
   font-family: var(--leu-font-family-regular);
 }
 

package/src/components/pagination/stories/pagination.stories.js

@@ -6,6 +6,7 @@ import "../leu-pagination.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 { ifDefined } from "lit/directives/if-defined.js"
+
 function updateStorybookArgss(id, args) {
   const channel = window.__STORYBOOK_ADDONS_CHANNEL__
   channel.emit(UPDATE_STORY_ARGS, {
@@ -72,7 +73,7 @@ export default {
 
 function Template(
   { startIndex, endIndex, onPageChange, itemsPerPage, defaultPage },
-  { id }
+  { id },
 ) {
   return html`
     ${items

package/src/components/pagination/test/pagination.test.js

@@ -7,12 +7,14 @@ import { spy } from "sinon"
 import "../leu-pagination.js"
 
 async function defaultFixture(args = {}) {
-  return fixture(html`<leu-pagination
-    numOfItems=${ifDefined(args.numOfItems)}
-    itemsPerPage=${ifDefined(args.itemsPerPage)}
-    defaultPage=${ifDefined(args.defaultPage)}
-  >
-  </leu-pagination>`)
+  return fixture(
+    html`<leu-pagination
+      numOfItems=${ifDefined(args.numOfItems)}
+      itemsPerPage=${ifDefined(args.itemsPerPage)}
+      defaultPage=${ifDefined(args.defaultPage)}
+    >
+    </leu-pagination>`,
+  )
 }
 
 describe("LeuPagination", () => {

package/src/components/popup/Popup.js

@@ -130,7 +130,7 @@ export class LeuPopup extends LeuElement {
               ? `${rects.reference.height}px`
               : ""
           },
-        })
+        }),
       )
     } else {
       // Cleanup styles if we're not matching width/height
@@ -159,7 +159,7 @@ export class LeuPopup extends LeuElement {
             if (setMaxHeight) {
               this.style.setProperty(
                 "--auto-size-available-height",
-                `${availableHeight}px`
+                `${availableHeight}px`,
               )
             } else {
               this.style.removeProperty("--auto-size-available-height")
@@ -168,13 +168,13 @@ export class LeuPopup extends LeuElement {
             if (setMaxWidth) {
               this.style.setProperty(
                 "--auto-size-available-width",
-                `${availableWidth}px`
+                `${availableWidth}px`,
               )
             } else {
               this.style.removeProperty("--auto-size-available-width")
             }
           },
-        })
+        }),
       )
     } else {
       // Cleanup styles if we're not auto-sizing

package/src/components/popup/test/popup.test.js

@@ -4,14 +4,12 @@ import { fixture, expect } from "@open-wc/testing"
 import "../leu-popup.js"
 
 async function defaultFixture() {
-  return fixture(
-    html`
-      <leu-popup
-        ><div slot="anchor"></div>
-        <p>Popup content</p></leu-popup
-      >
-    `
-  )
+  return fixture(html`
+    <leu-popup
+      ><div slot="anchor"></div>
+      <p>Popup content</p></leu-popup
+    >
+  `)
 }
 
 describe("LeuPopup", () => {

package/src/components/radio/RadioGroup.js

@@ -143,10 +143,10 @@ export class LeuRadioGroup extends LeuElement {
 
   initializeIndex() {
     const index = this.items.findIndex(
-      (item) => item.hasAttribute("checked") && !item.hasAttribute("disabled")
+      (item) => item.hasAttribute("checked") && !item.hasAttribute("disabled"),
     )
     const nextEnabledIndex = this.items.findIndex(
-      (item) => !item.hasAttribute("disabled")
+      (item) => !item.hasAttribute("disabled"),
     )
 
     this._currentIndex = index >= 0 ? index : nextEnabledIndex

package/src/components/range/Range.js

@@ -96,7 +96,7 @@ export class LeuRange extends LeuElement {
 
   get valueAsArray() {
     return Array.from(this.shadowRoot.querySelectorAll("input")).map(
-      (input) => input.valueAsNumber
+      (input) => input.valueAsNumber,
     )
   }
 
@@ -205,30 +205,29 @@ export class LeuRange extends LeuElement {
                 class="output"
                 for="input-${type}"
                 value=${defaultValue[index]}
-              ></output>`
+              ></output>`,
           )}
         </div>
         <div class="inputs">
           ${inputs.map(
-            (type, index) =>
-              html`
-                <input
-                  @input=${(e) => this._handleInput(index, e)}
-                  @pointerdown=${multiple && !disabled && index === 0
-                    ? this._handlePointerDown
-                    : undefined}
-                  type="range"
-                  class="range range--${type}"
-                  id="input-${type}"
-                  name=${this.name}
-                  min=${this.min}
-                  max=${this.max}
-                  step=${this.step}
-                  aria-label=${multiple ? RANGE_LABELS[index] : undefined}
-                  ?disabled=${disabled}
-                  .value=${defaultValue[index].toString()}
-                />
-              `
+            (type, index) => html`
+              <input
+                @input=${(e) => this._handleInput(index, e)}
+                @pointerdown=${multiple && !disabled && index === 0
+                  ? this._handlePointerDown
+                  : undefined}
+                type="range"
+                class="range range--${type}"
+                id="input-${type}"
+                name=${this.name}
+                min=${this.min}
+                max=${this.max}
+                step=${this.step}
+                aria-label=${multiple ? RANGE_LABELS[index] : undefined}
+                ?disabled=${disabled}
+                .value=${defaultValue[index].toString()}
+              />
+            `,
           )}
         </div>
       </div>

package/src/components/select/Select.js

@@ -171,6 +171,10 @@ export class LeuSelect extends LeuElement {
     const menuItems = menu.getMenuItems()
     let hasFilterResults = false
 
+    if (changed.value && this.value.length === 0) {
+      this._displayValue = ""
+    }
+
     /* eslint-disable no-param-reassign */
     menuItems.forEach((menuItem) => {
       if (changed.multiple) {
@@ -474,10 +478,11 @@ export class LeuSelect extends LeuElement {
               ref=${ref(this._menuRef)}
               role="listbox"
               aria-multiselectable=${ifDefined(
-                this.multiple ? "true" : undefined
+                this.multiple ? "true" : undefined,
               )}
               class="menu"
               @click=${this._handleMenuItemClick}
+              aria-labelledby="select-label"
             >
               <slot></slot>
             </leu-menu>

package/src/components/select/stories/select.stories.js

@@ -59,7 +59,7 @@ function Template({
           >
             ${LeuSelect.getOptionLabel(option)}
           </leu-menu-item>
-        `
+        `,
       )}
     </leu-select>
     <div style="margin-top: 50vh"></div>

package/src/components/select/test/select.test.js

@@ -8,16 +8,18 @@ import "../../menu/leu-menu-item.js"
 import { MUNICIPALITIES } from "./fixtures.js"
 
 async function defaultFixture(args = {}) {
-  return fixture(html`<leu-select
-    label=${ifDefined(args.label)}
-    .value=${args.value ?? []}
-    ?clearable=${args.clearable}
-    ?disabled=${args.disabled}
-    ?filterable=${args.filterable}
-    ?multiple=${args.multiple}
-  >
-    ${args.options.map((o) => html`<leu-menu-item>${o}</leu-menu-item>`)}
-  </leu-select> `)
+  return fixture(
+    html`<leu-select
+      label=${ifDefined(args.label)}
+      .value=${args.value ?? []}
+      ?clearable=${args.clearable}
+      ?disabled=${args.disabled}
+      ?filterable=${args.filterable}
+      ?multiple=${args.multiple}
+    >
+      ${args.options.map((o) => html`<leu-menu-item>${o}</leu-menu-item>`)}
+    </leu-select> `,
+  )
 }
 
 describe("LeuSelect", () => {
@@ -114,7 +116,7 @@ describe("LeuSelect", () => {
     const menuItems = Array.from(el.querySelectorAll("leu-menu-item"))
 
     const menuItem = menuItems.find(
-      (item) => item.textContent === "Affoltern am Albis"
+      (item) => item.textContent === "Affoltern am Albis",
     )
 
     expect(menuItem).to.have.attribute("active")
@@ -204,7 +206,7 @@ describe("LeuSelect", () => {
 
     const menuItems = el.querySelectorAll("leu-menu-item")
     const visibleMenuItems = Array.from(menuItems).filter(
-      (menuItem) => !menuItem.hidden
+      (menuItem) => !menuItem.hidden,
     )
     expect(visibleMenuItems.length).to.equal(6)
   })
@@ -231,7 +233,7 @@ describe("LeuSelect", () => {
 
     const menuItems = el.querySelectorAll("leu-menu-item")
     const visibleMenuItems = Array.from(menuItems).filter(
-      (menuItem) => !menuItem.hidden
+      (menuItem) => !menuItem.hidden,
     )
 
     expect(visibleMenuItems.length).to.equal(MUNICIPALITIES.length)
@@ -296,7 +298,7 @@ describe("LeuSelect", () => {
     toggleButton.click()
 
     const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
-      (item) => item.textContent === "Maur"
+      (item) => item.textContent === "Maur",
     )
     menuItem.click()
 
@@ -331,7 +333,7 @@ describe("LeuSelect", () => {
     toggleButton.click()
 
     const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
-      (item) => item.textContent === "Hedingen"
+      (item) => item.textContent === "Hedingen",
     )
     menuItem.click()
 
@@ -350,7 +352,7 @@ describe("LeuSelect", () => {
     toggleButton.click()
 
     const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
-      (item) => item.textContent === "Hedingen"
+      (item) => item.textContent === "Hedingen",
     )
     menuItem.click()