@statistikzh/leu 0.6.0 → 0.8.0

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 = []
   }
@@ -43,13 +44,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 +95,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) {
@@ -151,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/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 _ };