@statistikzh/leu 0.6.0 → 0.7.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.3",
-    "lit": "^3.0.2"
+    "lit": "^3.1.4"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.23.3",
@@ -66,7 +66,7 @@
     "@storybook/web-components": "^7.6.17",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-rollup": "^0.6.4",
-    "@web/storybook-builder": "^0.1.16",
+    "@web/storybook-builder": "^0.1.6",
     "@web/storybook-framework-web-components": "^0.1.2",
     "@web/test-runner": "^0.18.2",
     "@web/test-runner-commands": "^0.9.0",

package/src/components/chip/ChipGroup.js

@@ -45,17 +45,41 @@ export class LeuChipGroup extends LeuElement {
   connectedCallback() {
     super.connectedCallback()
 
-    this.addEventListener("input", this.handleInput)
+    /**
+     * It is technically possible to add an event listener to the host element
+     * before it is connected to the dom. In that case the outside event listener would
+     * be called before the following event listener. But at this point multiple
+     * radio chips could be selected at the same time because `handleInput` hasn't been
+     * called yet. That's why we use the capture phase.
+     */
+    this.addEventListener("input", this.handleInput, { capture: true })
   }
 
   disconnectedCallback() {
     super.disconnectedCallback()
 
-    this.removeEventListener("input", this.handleInput)
+    this.removeEventListener("input", this.handleInput, { capture: true })
   }
 
   get value() {
-    return this.items.filter((i) => i.selected).map((i) => i.value)
+    return this.items.filter((i) => i.checked).map((i) => i.value)
+  }
+
+  /**
+   * Checks the items with the given values.
+   * If the selectionMode is single, only the first item with the given value is checked.
+   * @param {string[]} valueList
+   */
+  set value(valueList) {
+    let hasChanged = false
+
+    for (const item of this.items) {
+      item.checked = hasChanged ? false : valueList.includes(item.value)
+
+      if (this.selectionMode === SELECTION_MODES.single && item.checked) {
+        hasChanged = true
+      }
+    }
   }
 
   /**
@@ -78,7 +102,7 @@ export class LeuChipGroup extends LeuElement {
   handleInput = (e) => {
     if (this.selectionMode === SELECTION_MODES.single) {
       this.items.forEach((item) => {
-        item.selected = item === e.target // eslint-disable-line no-param-reassign
+        item.checked = item === e.target // eslint-disable-line no-param-reassign
       })
     }
   }

package/src/components/chip/ChipSelectable.js

@@ -18,6 +18,8 @@ export const VARIANTS = {
  * @slot - The content of the chip
  * @prop {keyof typeof SIZES} size - The size of the chip. Not supported for radio variant.
  * @prop {keyof typeof VARIANTS} variant - `toggle` or `radio`. Determines if only one or multiple chips can be selected.
+ * @prop {boolean} checked - Whether the chip is selected.
+ * @prop {string} value - The value of the chip.
  */
 export class LeuChipSelectable extends LeuChipBase {
   static properties = {
@@ -25,7 +27,7 @@ export class LeuChipSelectable extends LeuChipBase {
     size: { type: String, reflect: true },
     variant: { type: String, reflect: true },
 
-    selected: { type: Boolean, reflect: true },
+    checked: { type: Boolean, reflect: true },
     value: { type: String, reflect: true },
   }
 
@@ -40,7 +42,7 @@ export class LeuChipSelectable extends LeuChipBase {
      * @default "toggle"
      */
     this.variant = VARIANTS.toggle
-    this.selected = false
+    this.checked = false
 
     if (this.variant === VARIANTS.radio && this.size === SIZES.small) {
       console.warn("Small size has no effect on radio variant")
@@ -48,19 +50,19 @@ export class LeuChipSelectable extends LeuChipBase {
   }
 
   handleClick() {
-    let nextSelectedState = this.selected
+    let nextcheckedState = this.checked
 
     if (this.variant === VARIANTS.radio) {
-      nextSelectedState = true
+      nextcheckedState = true
     } else {
-      nextSelectedState = !this.selected
+      nextcheckedState = !this.checked
     }
 
-    if (nextSelectedState !== this.selected) {
-      this.selected = nextSelectedState
+    if (nextcheckedState !== this.checked) {
+      this.checked = nextcheckedState
       this.dispatchEvent(
         new CustomEvent("input", {
-          detail: { selected: this.selected },
+          detail: { checked: this.checked },
           bubbles: true,
           composed: true,
         })
@@ -70,9 +72,9 @@ export class LeuChipSelectable extends LeuChipBase {
 
   render() {
     return html`<button
-      @click=${(e) => this.handleClick(e)}
+      @click=${() => this.handleClick()}
       class="button"
-      aria-pressed=${this.selected ? "true" : "false"}
+      aria-pressed=${this.checked ? "true" : "false"}
     >
       <span class="label"><slot></slot></span>
     </button>`

package/src/components/chip/chip.css

@@ -8,17 +8,17 @@
 :host {
   --chip-background-color-default: var(--leu-color-black-transp-10);
   --chip-background-color-hover: var(--leu-color-black-transp-20);
-  --chip-background-color-selected: var(--leu-color-black-100);
-  --chip-background-color-selected-hover: var(--leu-color-black-transp-80);
+  --chip-background-color-checked: var(--leu-color-black-100);
+  --chip-background-color-checked-hover: var(--leu-color-black-transp-80);
 
   --chip-color-default: var(--leu-color-black-transp-60);
   --chip-color-hover: var(--leu-color-black-100);
-  --chip-color-selected: var(--leu-color-black-0);
+  --chip-color-checked: var(--leu-color-black-0);
 
   --chip-radio-border-default: var(--leu-color-black-transp-40);
-  --chip-radio-border-selected: var(--leu-color-black-0);
+  --chip-radio-border-checked: var(--leu-color-black-0);
   --chip-radio-background-default: var(--leu-color-black-0);
-  --chip-radio-background-selected: var(--leu-color-func-cyan);
+  --chip-radio-background-checked: var(--leu-color-func-cyan);
 
   --chip-font-regular: var(--leu-font-family-regular);
   --chip-font-black: var(--leu-font-family-black);
@@ -42,14 +42,14 @@
 
   --chip-color-default: var(--leu-color-black-0);
   --chip-color-hover: var(--leu-color-black-0);
-  --chip-color-selected: var(--leu-color-black-0);
+  --chip-color-checked: var(--leu-color-black-0);
 }
 
-:host([selected]) {
-  --chip-background-color: var(--chip-background-color-selected);
-  --chip-color: var(--chip-color-selected);
-  --chip-radio-border: var(--chip-radio-border-selected);
-  --chip-radio-background: var(--chip-radio-background-selected);
+:host([checked]) {
+  --chip-background-color: var(--chip-background-color-checked);
+  --chip-color: var(--chip-color-checked);
+  --chip-radio-border: var(--chip-radio-border-checked);
+  --chip-radio-background: var(--chip-radio-background-checked);
 }
 
 .button {
@@ -95,10 +95,10 @@
   text-decoration: none;
 }
 
-:host([selected]) .button:hover,
-:host([selected]) .button:focus-visible {
-  --chip-background-color: var(--chip-background-color-selected-hover);
-  --chip-color: var(--chip-color-selected);
+:host([checked]) .button:hover,
+:host([checked]) .button:focus-visible {
+  --chip-background-color: var(--chip-background-color-checked-hover);
+  --chip-color: var(--chip-color-checked);
 }
 
 :host([href][size="large"]) .button {
@@ -126,7 +126,7 @@
   border-radius: 50%;
 }
 
-:host([variant="radio"][selected]) .button::before {
+:host([variant="radio"][checked]) .button::before {
   border-width: 3px;
 }
 

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

@@ -95,7 +95,8 @@ function DefaultTemplate(args) {
   const content = html`
     ${chips.map(
       (chip) => html`
-        <leu-chip-removable ?inverted=${args.inverted} label=${chip}>
+        <leu-chip-removable ?inverted=${args.inverted}>
+          ${chip}
         </leu-chip-removable>
       `
     )}
@@ -112,8 +113,8 @@ function SingleTemplate(args) {
           ?inverted=${args.inverted}
           variant=${SELECTABLE_VARIANTS.radio}
           value="chip-${chip}"
-          label=${chip}
         >
+          ${chip}
         </leu-chip-selectable>
       `
     )}
@@ -126,11 +127,8 @@ function MultipleTemplate(args) {
   const content = html`
     ${chips.map(
       (chip) => html`
-        <leu-chip-selectable
-          ?inverted=${args.inverted}
-          value="chip-${chip}"
-          label=${chip}
-        >
+        <leu-chip-selectable ?inverted=${args.inverted} value="chip-${chip}">
+          ${chip}
         </leu-chip-selectable>
       `
     )}
@@ -143,8 +141,7 @@ function LabeledTemplate(args) {
   const content = html`
     ${links.map(
       (chip) => html`
-        <leu-chip-link ?inverted=${args.inverted} label=${chip}>
-        </leu-chip-link>
+        <leu-chip-link ?inverted=${args.inverted}> ${chip} </leu-chip-link>
       `
     )}
   `

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

@@ -38,7 +38,7 @@ function Template(args) {
       <leu-chip-selectable
         size=${ifDefined(args.size)}
         variant=${ifDefined(args.variant)}
-        ?selected=${args.selected}
+        ?checked=${args.checked}
         ?inverted=${args.inverted}
         >${args.label}</leu-chip-selectable
       >

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

@@ -106,4 +106,71 @@ describe("LeuChipGroup", () => {
 
     await expect(event).to.exist
   })
+
+  it("checks only chip when the value of the group is set (selection-mode=single)", async () => {
+    const el = await singleSelectionFixture()
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+
+    el.value = ["2"]
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.true
+    expect(el.items[2].checked).to.be.false
+
+    // Should check the first item with the given value and not first item of the value list
+    el.value = ["2", "1"]
+
+    expect(el.items[0].checked).to.be.true
+    expect(el.items[1].checked).to.be.false
+
+    el.value = []
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+
+    el.value = ["asdf"]
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+    expect(el.value).to.deep.equal([])
+  })
+
+  it("checks chips when the value of the group is set (selection-mode=multiple)", async () => {
+    const el = await multipleSelectionFixture()
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+
+    el.value = ["2"]
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.true
+    expect(el.items[2].checked).to.be.false
+
+    // Should check the first item with the given value and not first item of the value list
+    el.value = ["2", "1"]
+
+    expect(el.items[0].checked).to.be.true
+    expect(el.items[1].checked).to.be.true
+    expect(el.items[2].checked).to.be.false
+
+    el.value = []
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+
+    el.value = ["asdf"]
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+    expect(el.value).to.deep.equal([])
+  })
 })

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

@@ -11,7 +11,7 @@ async function defaultFixture(args = {}) {
       <leu-chip-selectable
         value="Publikationen"
         variant=${ifDefined(args.variant)}
-        ?selected=${args.selected}
+        ?checked=${args.checked}
         >Publikationen</leu-chip-selectable
       >
     `
@@ -73,21 +73,21 @@ describe("LeuChipSelectable", () => {
     expect(event).to.exist
   })
 
-  it("removes the selected state when the button is clicked", async () => {
-    const el = await defaultFixture({ selected: true })
+  it("removes the checked state when the button is clicked", async () => {
+    const el = await defaultFixture({ checked: true })
     const button = el.shadowRoot.querySelector("button")
 
     button.click()
 
-    expect(el.selected).to.be.false
+    expect(el.checked).to.be.false
   })
 
-  it("doesn't remove the selected state of a selected radio chip", async () => {
-    const el = await defaultFixture({ variant: "radio", selected: true })
+  it("doesn't remove the checked state of a checked radio chip", async () => {
+    const el = await defaultFixture({ variant: "radio", checked: true })
 
     const button = el.shadowRoot.querySelector("button")
     button.click()
 
-    expect(el.selected).to.be.true
+    expect(el.checked).to.be.true
   })
 })

package/src/components/input/Input.js

@@ -10,6 +10,11 @@ import { LeuIcon } from "../icon/Icon.js"
 // @ts-ignore
 import styles from "./input.css"
 
+export const SIZES = Object.freeze({
+  SMALL: "small",
+  REGULAR: "regular",
+})
+
 /**
  * TODO:
  * - Add section to docs about how to mark up suffix and prefix for screenreaders
@@ -120,12 +125,13 @@ export class LeuInput extends LeuElement {
     this.clearable = false
 
     /** @type {"small" | "regular"} */
-    this.size = "regular"
+    this.size = SIZES.REGULAR
 
     this.type = "text"
     this._validity = null
     this.validationMessages = {}
     this.novalidate = false
+    this.value = ""
 
     /** @internal */
     this._identifier = ""
@@ -137,6 +143,13 @@ export class LeuInput extends LeuElement {
     this._inputRef = createRef()
   }
 
+  get valueAsNumber() {
+    if (this.value === "") {
+      return NaN
+    }
+    return Number(this.value)
+  }
+
   /**
    * Method for handling the click event of the wrapper element.
    * Redirect every click on the wrapper to the input element.

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

@@ -3,7 +3,7 @@ import { ifDefined } from "lit/directives/if-defined.js"
 
 import "../leu-input.js"
 
-import { SIZE_TYPES } from "../Input.js"
+import { SIZES } from "../Input.js"
 import { paths as iconPaths } from "../../icon/paths.js"
 
 export default {
@@ -15,7 +15,7 @@ export default {
       control: {
         type: "select",
       },
-      options: Object.values(SIZE_TYPES),
+      options: Object.values(SIZES),
     },
     icon: { control: "select", options: Object.keys(iconPaths) },
   },
@@ -165,7 +165,7 @@ export const Search = Template.bind({})
 Search.args = {
   label: "Suchen",
   clearable: true,
-  size: SIZE_TYPES.SMALL,
+  size: SIZES.SMALL,
   icon: "search",
   novalidate: true,
 }

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

@@ -449,4 +449,24 @@ describe("LeuInput", () => {
     expect(getClearButton()).to.be.null
     expect(getIcon()).to.be.null
   })
+
+  it("returns the value as a number when it is possible", async () => {
+    const el = await defaultFixture({ label: "Länge", type: "number" })
+
+    expect(el.valueAsNumber).to.be.NaN
+
+    el.focus()
+
+    await sendKeys({ type: "123" })
+
+    expect(el.valueAsNumber).to.equal(123)
+
+    el.type = "text"
+    await elementUpdated(el)
+
+    el.focus()
+    await sendKeys({ type: "abc" })
+
+    expect(el.valueAsNumber).to.be.NaN
+  })
 })

package/src/components/radio/RadioGroup.js

@@ -43,13 +43,20 @@ export class LeuRadioGroup extends LeuElement {
   }
 
   addEventListeners() {
-    this.addEventListener("input", this.handleInput)
+    /**
+     * It is technically possible to add an event listener to the host element
+     * before it is connected to the dom. In that case the outside event listener would
+     * be called before the following event listener. But at this point multiple
+     * radio buttons could be selected at the same time because `handleInput` hasn't been
+     * called yet. That's why we use the capture phase.
+     */
+    this.addEventListener("input", this.handleInput, { capture: true })
     this.addEventListener("focusin", this.handleFocusIn)
     this.addEventListener("keydown", this.handleKeyDown)
   }
 
   removeEventListeners() {
-    this.removeEventListener("input", this.handleInput)
+    this.removeEventListener("input", this.handleInput, { capture: true })
     this.removeEventListener("focusin", this.handleFocusIn)
     this.removeEventListener("keydown", this.handleKeyDown)
   }
@@ -87,13 +94,9 @@ export class LeuRadioGroup extends LeuElement {
   }
 
   handleInput = (e) => {
-    if (e.target.checked) {
-      this.items
-        .filter((item) => item !== e.target)
-        .forEach((item) => {
-          item.checked = false // eslint-disable-line no-param-reassign
-        })
-    }
+    this.items.forEach((item) => {
+      item.checked = item === e.target // eslint-disable-line no-param-reassign
+    })
   }
 
   selectItem(selectingItem) {

package/dist/Button-9692e403.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button-9692e403.d.ts","sourceRoot":"","sources":["Button-9692e403.js"],"names":[],"mappings":";;;iCAaa,OAAO,KAAK,EAAE,kBAAkB;AAyW7C,wCAA0D;AAhX1D;;;GAGG;AAEH;;;;GAIG;AACH,2CAFgB,kBAAkB;IAGhC,uCAcC;IAHC,UAAgB;IAEhB,eAA0B;IAG5B;;;OAGG;IACH,uBAeC;IAED;;;;OAIG;IACH,qBAEC;IAED;;;OAGG;IACH,gCAEC;IACD,sBAEC;IACD,yBAEC;CACF;AAmTD;;;;;GAKG;AACH;IAQI,WAAiB;IACjB,qBAAqB;IACrB,MADW,MAAM,CACI;IACrB,qBAAqB;IACrB,SADW,MAAM,CACO;IACxB,4CAA4C;IAC5C,MADW,QAAQ,GAAG,QAAQ,GAAG,OAAO,CACpB;IAEpB,qBAAqB;IACrB,eADW,MAAM,CACa;IAE9B,sBAAsB;IACtB,UADW,OAAO,CACG;IACrB,+EAA+E;IAC/E,OADW,OAAO,CACA;IAClB,sBAAsB;IACtB,QADW,OAAO,CACC;IACnB,wDAAwD;IACxD,UADW,OAAO,CACG;IAErB,gGAAgG;IAChG,OADW,OAAO,CACA;IAElB;;;OAGG;IACH,UAFU,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAEf;IAE3B,6EAOC;IACD;;;MAaC;IACD,0BAEC;IACD,+CAiCC;CACF;AA7GD,qCAA0C;AAE1C,qCAAmD;AAEnD,gDAAkD;gCA5XI,0BAA0B;wBAC7C,KAAK"}

package/dist/LeuElement-6de6f209.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LeuElement-6de6f209.d.ts","sourceRoot":"","sources":["LeuElement-6de6f209.js"],"names":[],"mappings":"AAyBA;IACE,8EAMC;CAOF;AArCD,8DAOC;2BAT0B,KAAK"}

package/dist/LeuElement-6de6f209.js

@@ -1,43 +0,0 @@
-import { LitElement } from 'lit';
-
-function _defineProperty(e, r, t) {
-  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
-  }) : e[r] = t, e;
-}
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-
-class LeuElement extends LitElement {
-  static define(name, constructor = this, options = {}) {
-    if (!customElements.get(name)) {
-      customElements.define(name, constructor, options);
-    } else {
-      console.info(`${name} is already defined`);
-    }
-  }
-  constructor() {
-    super();
-    Object.entries(this.constructor.dependencies).forEach(([name, component]) => {
-      this.constructor.define(name, component);
-    });
-  }
-}
-_defineProperty(LeuElement, "dependencies", {});
-
-export { LeuElement as L, _defineProperty as _ };