@statistikzh/leu 0.13.1 → 0.14.1

package/src/components/checkbox/stories/checkbox.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit"
 import "../leu-checkbox.js"
 
 export default {
-  title: "Checkbox",
+  title: "Components/Checkbox",
   component: "leu-checkbox",
   argTypes: {
     label: {

package/src/components/chip/ChipSelectable.js

@@ -69,7 +69,7 @@ export class LeuChipSelectable extends LeuChipBase {
           },
           bubbles: true,
           composed: true,
-        })
+        }),
       )
     }
   }

package/src/components/chip/stories/chip-group.stories.js

@@ -11,7 +11,7 @@ import { SELECTION_MODES } from "../ChipGroup.js"
 import { VARIANTS as SELECTABLE_VARIANTS } from "../ChipSelectable.js"
 
 export default {
-  title: "Chip/Group",
+  title: "Components/Chip/Group",
   component: "leu-chip-group",
   argTypes: {
     selectionMode: {
@@ -98,7 +98,7 @@ function DefaultTemplate(args) {
         <leu-chip-removable ?inverted=${args.inverted}>
           ${chip}
         </leu-chip-removable>
-      `
+      `,
     )}
   `
 
@@ -116,7 +116,7 @@ function SingleTemplate(args) {
         >
           ${chip}
         </leu-chip-selectable>
-      `
+      `,
     )}
   `
 
@@ -130,7 +130,7 @@ function MultipleTemplate(args) {
         <leu-chip-selectable ?inverted=${args.inverted} value="chip-${chip}">
           ${chip}
         </leu-chip-selectable>
-      `
+      `,
     )}
   `
 
@@ -142,7 +142,7 @@ function LabeledTemplate(args) {
     ${links.map(
       (chip) => html`
         <leu-chip-link ?inverted=${args.inverted}> ${chip} </leu-chip-link>
-      `
+      `,
     )}
   `
 

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

@@ -6,7 +6,7 @@ import "../leu-chip-link.js"
 import { SIZES } from "../ChipLink.js"
 
 export default {
-  title: "Chip/Link",
+  title: "Components/Chip/Link",
   component: "leu-chip-link",
   argTypes: {
     size: { control: "select", options: Object.values(SIZES) },

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

@@ -4,7 +4,7 @@ import { action } from "@storybook/addon-actions"
 import "../leu-chip-removable.js"
 
 export default {
-  title: "Chip/Removable",
+  title: "Components/Chip/Removable",
   component: "leu-chip-removable",
   args: {
     label: "Daten",

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

@@ -6,7 +6,7 @@ import "../leu-chip-selectable.js"
 import { SIZES, VARIANTS } from "../ChipSelectable.js"
 
 export default {
-  title: "Chip/Selectable",
+  title: "Components/Chip/Selectable",
   component: "leu-chip-selectable",
   argTypes: {
     variant: { control: "select", options: Object.values(VARIANTS) },

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

@@ -6,45 +6,37 @@ import "../leu-chip-removable.js"
 import "../leu-chip-group.js"
 
 async function removableFixture() {
-  return fixture(
-    html`
-      <leu-chip-group>
-        <leu-chip-removable>Publikationen</leu-chip-removable>
-        <leu-chip-removable value="2">Daten</leu-chip-removable>
-        <leu-chip-removable value="3">Schnittstellen</leu-chip-removable>
-      </leu-chip-group>
-    `
-  )
+  return fixture(html`
+    <leu-chip-group>
+      <leu-chip-removable>Publikationen</leu-chip-removable>
+      <leu-chip-removable value="2">Daten</leu-chip-removable>
+      <leu-chip-removable value="3">Schnittstellen</leu-chip-removable>
+    </leu-chip-group>
+  `)
 }
 
 async function singleSelectionFixture() {
-  return fixture(
-    html`
-      <leu-chip-group selection-mode="single">
-        <leu-chip-selectable value="1" variant="radio"
-          >Publikationen</leu-chip-selectable
-        >
-        <leu-chip-selectable value="2" variant="radio"
-          >Daten</leu-chip-selectable
-        >
-        <leu-chip-selectable value="3" variant="radio"
-          >Schnittstellen</leu-chip-selectable
-        >
-      </leu-chip-group>
-    `
-  )
+  return fixture(html`
+    <leu-chip-group selection-mode="single">
+      <leu-chip-selectable value="1" variant="radio"
+        >Publikationen</leu-chip-selectable
+      >
+      <leu-chip-selectable value="2" variant="radio">Daten</leu-chip-selectable>
+      <leu-chip-selectable value="3" variant="radio"
+        >Schnittstellen</leu-chip-selectable
+      >
+    </leu-chip-group>
+  `)
 }
 
 async function multipleSelectionFixture() {
-  return fixture(
-    html`
-      <leu-chip-group selection-mode="multiple">
-        <leu-chip-selectable value="1">Publikationen</leu-chip-selectable>
-        <leu-chip-selectable value="2">Daten</leu-chip-selectable>
-        <leu-chip-selectable value="3">Schnittstellen</leu-chip-selectable>
-      </leu-chip-group>
-    `
-  )
+  return fixture(html`
+    <leu-chip-group selection-mode="multiple">
+      <leu-chip-selectable value="1">Publikationen</leu-chip-selectable>
+      <leu-chip-selectable value="2">Daten</leu-chip-selectable>
+      <leu-chip-selectable value="3">Schnittstellen</leu-chip-selectable>
+    </leu-chip-group>
+  `)
 }
 
 describe("LeuChipGroup", () => {

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/stories/dialog.stories.js

@@ -4,7 +4,7 @@ import "../../input/leu-input.js"
 import "../../button/leu-button.js"
 
 export default {
-  title: "Dialog",
+  title: "Components/Dialog",
   component: "leu-dialog",
   parameters: {
     design: {

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/stories/dropdown.stories.js

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

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/icon/stories/icon.stories.js

@@ -4,7 +4,7 @@ import { ifDefined } from "lit/directives/if-defined.js"
 import { paths } from "../paths.js"
 
 export default {
-  title: "Icon",
+  title: "Components/Icon",
   component: "leu-icon",
   argTypes: {
     name: {

package/src/components/input/Input.js

@@ -171,7 +171,7 @@ 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} event
+   * @param {FocusEvent & {target: HTMLInputElement}} event
    * @returns {void}
    */
   handleBlur(event) {
@@ -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/input.css

@@ -95,8 +95,8 @@
 
 .prefix,
 .suffix {
-  padding-block: 2rem 1rem;
-
+  padding-block: calc(2rem - var(--input-border-width))
+    calc(1rem - var(--input-border-width));
   font-size: 1rem;
   line-height: 1.5;
   color: var(--input-affix-color);

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

@@ -7,9 +7,8 @@ import { SIZES } from "../Input.js"
 import { paths as iconPaths } from "../../icon/paths.js"
 
 export default {
-  title: "Input",
+  title: "Components/Input",
   component: "leu-input",
-  tags: ["autodocs"],
   argTypes: {
     size: {
       control: {
@@ -49,8 +48,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

@@ -10,7 +10,7 @@ function isIcon(name) {
 }
 
 export default {
-  title: "Menu/Item",
+  title: "Components/Menu/Item",
   component: "leu-menu-item",
   args: {
     label: "Menu Item",
@@ -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/stories/menu.stories.js

@@ -5,7 +5,7 @@ import "../../icon/leu-icon.js"
 import { ifDefined } from "lit/directives/if-defined.js"
 
 export default {
-  title: "Menu",
+  title: "Components/Menu",
   component: "leu-menu",
   parameters: {
     design: {

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, {
@@ -57,7 +58,7 @@ const items = [
 ]
 
 export default {
-  title: "Pagination",
+  title: "Components/Pagination",
   component: "leu-pagination",
   args: {
     onPageChange: action("leu:pagechange"),
@@ -72,7 +73,7 @@ export default {
 
 function Template(
   { startIndex, endIndex, onPageChange, itemsPerPage, defaultPage },
-  { id }
+  { id },
 ) {
   return html`
     ${items