@statistikzh/leu 0.7.0 → 0.8.0

package/src/components/chip/ChipSelectable.js

@@ -43,6 +43,7 @@ export class LeuChipSelectable extends LeuChipBase {
      */
     this.variant = VARIANTS.toggle
     this.checked = false
+    this.value = ""
 
     if (this.variant === VARIANTS.radio && this.size === SIZES.small) {
       console.warn("Small size has no effect on radio variant")
@@ -62,7 +63,10 @@ export class LeuChipSelectable extends LeuChipBase {
       this.checked = nextcheckedState
       this.dispatchEvent(
         new CustomEvent("input", {
-          detail: { checked: this.checked },
+          detail: {
+            checked: this.checked,
+            value: this.getValue(),
+          },
           bubbles: true,
           composed: true,
         })
@@ -70,6 +74,14 @@ export class LeuChipSelectable extends LeuChipBase {
     }
   }
 
+  /**
+   * Returns the value of the chip. If `value` is not set, it will return the text content
+   * @returns {string}
+   */
+  getValue() {
+    return this.value || this.textContent.trim()
+  }
+
   render() {
     return html`<button
       @click=${() => this.handleClick()}

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

@@ -1,4 +1,5 @@
 import { html } from "lit"
+import { action } from "@storybook/addon-actions"
 
 import "../leu-chip-removable.js"
 
@@ -6,7 +7,8 @@ export default {
   title: "Chip/Removable",
   component: "leu-chip-removable",
   args: {
-    label: "Publikationen",
+    label: "Daten",
+    onRemove: action("leu:remove"),
   },
   parameters: {
     design: {
@@ -27,7 +29,9 @@ function Template(args) {
         : "var(--leu-color-black-5)"}; padding: 1rem;"
       data-root
     >
-      <leu-chip-removable ?inverted=${args.inverted}
+      <leu-chip-removable
+        @leu:remove=${args.onRemove}
+        ?inverted=${args.inverted}
         >${args.label}</leu-chip-removable
       >
     </div>

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

@@ -1,11 +1,18 @@
 import { html } from "lit"
 import { fixture, expect, oneEvent } from "@open-wc/testing"
 import { sendKeys } from "@web/test-runner-commands"
+import { ifDefined } from "lit/directives/if-defined.js"
 
 import "../leu-chip-removable.js"
 
-async function defaultFixture() {
-  return fixture(html` <leu-chip-removable>Daten</leu-chip-removable> `)
+async function defaultFixture(args = {}) {
+  return fixture(
+    html`
+      <leu-chip-removable value=${ifDefined(args.value)}
+        >${args.label ?? "Daten"}</leu-chip-removable
+      >
+    `
+  )
 }
 
 describe("LeuChipRemovable", () => {
@@ -70,4 +77,31 @@ describe("LeuChipRemovable", () => {
 
     expect(event).to.exist
   })
+
+  it("sends the value in the remove event", async () => {
+    const el = await defaultFixture({ label: `Daten              ` }) // eslint-disable-line no-irregular-whitespace
+    const button = el.shadowRoot.querySelector("button")
+
+    setTimeout(() => button.click())
+    const event = await oneEvent(el, "leu:remove")
+
+    expect(event.detail.value).to.equal("Daten")
+
+    el.value = "test"
+
+    setTimeout(() => button.click())
+    const event2 = await oneEvent(el, "leu:remove")
+
+    expect(event2.detail.value).to.equal("test")
+  })
+
+  it("returns the value or label when getValue is called", async () => {
+    const el = await defaultFixture({ label: `Daten              ` }) // eslint-disable-line no-irregular-whitespace
+
+    expect(el.getValue()).to.equal("Daten")
+
+    el.value = "daten-01"
+
+    expect(el.getValue()).to.equal("daten-01")
+  })
 })

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

@@ -9,7 +9,7 @@ async function defaultFixture(args = {}) {
   return fixture(
     html`
       <leu-chip-selectable
-        value="Publikationen"
+        value=${ifDefined(args.value)}
         variant=${ifDefined(args.variant)}
         ?checked=${args.checked}
         >Publikationen</leu-chip-selectable
@@ -90,4 +90,14 @@ describe("LeuChipSelectable", () => {
 
     expect(el.checked).to.be.true
   })
+
+  it("returns the value or label when getValue is called", async () => {
+    const el = await defaultFixture()
+
+    expect(el.getValue()).to.equal("Publikationen")
+
+    el.value = "publikationen-01"
+
+    expect(el.getValue()).to.equal("publikationen-01")
+  })
 })

package/src/components/menu/MenuItem.js

@@ -80,7 +80,7 @@ export class LeuMenuItem extends LeuElement {
    * @returns {string}
    */
   getValue() {
-    return this.value || this.innerText
+    return this.value || this.textContent.trim()
   }
 
   _getAria() {

package/src/components/menu/menu-item.css

@@ -6,10 +6,10 @@
 :host {
   --background: var(--leu-color-black-0);
   --background-hover: var(--leu-color-black-10);
-  --background-active: var(--leu-color-accent-blue);
+  --background-active: var(--leu-color-func-cyan);
   --background-disabled: var(--leu-color-black-black-0);
   --color: var(--leu-color-black-transp-60);
-  --color-active: var(--leu-color-black-0);
+  --color-active: var(--leu-color-black-100);
   --color-disabled: var(--leu-color-black-transp-20);
   --font-regular: var(--leu-font-family-regular);
   --font-black: var(--leu-font-family-black);

package/src/components/radio/RadioGroup.js

@@ -19,7 +19,8 @@ export class LeuRadioGroup extends LeuElement {
 
   constructor() {
     super()
-    this.orientation = "HORIZONTAL"
+    /** @type {"horizontal" | "vertical"} */
+    this.orientation = "horizontal"
     this._currentIndex = 0
     this.items = []
   }
@@ -154,7 +155,7 @@ export class LeuRadioGroup extends LeuElement {
   render() {
     const fieldsetClasses = {
       fieldset: "true",
-      "fieldset--vertical": this.orientation === "VERTICAL",
+      "fieldset--vertical": this.orientation === "vertical",
     }
 
     return html`

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

@@ -9,7 +9,7 @@ export default {
   argTypes: {
     label: { control: "text" },
     orientation: {
-      options: ["VERTICAL", "HORIZONTAL"],
+      options: ["vertical", "horizontal"],
       control: { type: "radio" },
     },
   },
@@ -44,11 +44,11 @@ HorizontalLabel.args = {
 
 export const Vertical = Template.bind({})
 Vertical.args = {
-  orientation: "VERTICAL",
+  orientation: "vertical",
 }
 
 export const VerticalLabel = Template.bind({})
 VerticalLabel.args = {
-  orientation: "VERTICAL",
+  orientation: "vertical",
   label: "Anrede",
 }

package/src/lib/LeuElement.js

@@ -1,23 +1,31 @@
 import { LitElement } from "lit"
 
 export class LeuElement extends LitElement {
+  static version = __LEU_VERSION__
+
   static dependencies = {}
 
   static define(name, constructor = this, options = {}) {
-    if (!customElements.get(name)) {
+    Object.entries(this.dependencies).forEach(([n, c]) => c.define(n))
+
+    const currentlyRegisteredConstructor = customElements.get(name)
+
+    if (currentlyRegisteredConstructor === undefined) {
       customElements.define(name, constructor, options)
-    } else {
-      console.info(`${name} is already defined`)
+      return
     }
-  }
 
-  constructor() {
-    super()
+    if (currentlyRegisteredConstructor !== constructor) {
+      console.warn(
+        `The custom element with the name <${name}> is already registered with a different constructor. This can happen when the same element has been loaded from different modules (e.g. multiple CDN requests or bundles).`
+      )
+      return
+    }
 
-    Object.entries(this.constructor.dependencies).forEach(
-      ([name, component]) => {
-        this.constructor.define(name, component)
-      }
-    )
+    if (currentlyRegisteredConstructor.version !== constructor.version) {
+      console.warn(
+        `The custom element with the name <${name}> is already defined with the same constructor but a different version (${currentlyRegisteredConstructor.version}).`
+      )
+    }
   }
 }

package/dist/LeuElement-ba5ea33d.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LeuElement-ba5ea33d.d.ts","sourceRoot":"","sources":["LeuElement-ba5ea33d.js"],"names":[],"mappings":"AA+BA;IACE,8EAMC;CAOF;AA3CD,sEAaC;2BAf0B,KAAK"}