@statistikzh/leu 0.13.0 → 0.14.0

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

@@ -36,10 +36,10 @@ function Template({ items, value }, { id }) {
         (i) =>
           html`<leu-button
             variant="secondary"
-            ?active=${value === i}
+            ?active=${value === i || value === `${i}-attr`}
             value=${`${i}-attr`}
             >${i}
-          </leu-button>`
+          </leu-button>`,
       )}
     </leu-button-group>
     <br />

package/src/components/checkbox/checkbox.css

@@ -69,6 +69,7 @@
 
 .icon {
   position: absolute;
+  display: block;
   top: 0;
   left: 0;
   color: var(--checkbox-tick-color);

package/src/components/chip/ChipSelectable.js

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

package/src/components/chip/chip.css

@@ -55,7 +55,7 @@
   border: none;
   border-radius: 1rem;
   background-color: var(--chip-background-color);
-  padding: 0.5rem 1rem;
+  padding: 8px 1rem;
 
   color: var(--chip-color);
   font-family: inherit;
@@ -66,6 +66,7 @@
 
   display: inline-flex;
   gap: 0.5rem;
+  align-items: center;
 
   /* Allow shrinking to achieve text truncation (ellipsis) */
   min-width: 0;
@@ -108,10 +109,10 @@
 }
 
 :host([size="small"]:not([variant="radio"])) .button {
-  padding: 0.5625rem 0.75rem 0.4375rem;
+  padding: 0.3125rem 0.75rem;
 
   font-size: 0.75rem;
-  line-height: 1;
+  line-height: 1.25rem;
 }
 
 :host([variant="radio"]) .button::before {

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

@@ -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-selectable.stories.js

@@ -50,7 +50,7 @@ export const Default = Template.bind({})
 Default.args = {}
 
 export const Small = Template.bind({})
-Small.args = { size: SIZES.small }
+Small.args = { size: SIZES.small, label: "Publikationen Region" }
 
 export const Radio = Template.bind({})
 Radio.args = { variant: VARIANTS.radio }

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/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/dropdown.css

@@ -1,5 +1,6 @@
 :host {
   position: relative;
+  display: contents;
 }
 
 .content {

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/icon.css

@@ -1,3 +1,7 @@
+:host {
+  display: contents;
+}
+
 svg,
 .placeholder {
   display: block;

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/popup.css

@@ -3,6 +3,7 @@
   --popup-font-black: var(--leu-font-family-black);
 
   font-family: var(--popup-font-regular);
+  display: contents;
 }
 
 .popup {