@statistikzh/leu 0.5.1 → 0.7.0

package/src/components/radio/Radio.js

@@ -1,30 +1,35 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+// @ts-ignore
 import styles from "./radio.css"
 
 /**
  * @tagname leu-radio
  */
-export class LeuRadio extends LitElement {
+export class LeuRadio extends LeuElement {
   static styles = styles
 
+  /** @internal */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
   static properties = {
     checked: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
-    identifier: { type: String, reflect: true },
     value: { type: String, reflect: true },
     name: { type: String, reflect: true },
-    label: { type: String, reflect: true },
   }
 
   constructor() {
     super()
     this.checked = false
     this.disabled = false
+    this.name = ""
+    this.value = ""
   }
 
   handleChange(event) {
@@ -41,7 +46,7 @@ export class LeuRadio extends LitElement {
   render() {
     return html`
       <input
-        id=${this.identifier}
+        id=${`radio-${this.name}`}
         class="radio"
         type="radio"
         name="${this.name}"
@@ -51,7 +56,7 @@ export class LeuRadio extends LitElement {
         ?disabled=${this.disabled}
         .value=${this.value}
       />
-      <label for=${this.identifier} class="label">${this.label}</label>
+      <label for=${`radio-${this.name}`} class="label"><slot></slot></label>
     `
   }
 }

package/src/components/radio/RadioGroup.js

@@ -1,12 +1,15 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 
+import { LeuElement } from "../../lib/LeuElement.js"
+
+// @ts-ignore
 import styles from "./radio-group.css"
 
 /**
  * @tagname leu-radio-group
  */
-export class LeuRadioGroup extends LitElement {
+export class LeuRadioGroup extends LeuElement {
   static styles = styles
 
   static properties = {
@@ -40,13 +43,20 @@ export class LeuRadioGroup extends LitElement {
   }
 
   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)
   }
@@ -84,13 +94,9 @@ export class LeuRadioGroup extends LitElement {
   }
 
   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) {
@@ -129,7 +135,7 @@ export class LeuRadioGroup extends LitElement {
   }
 
   handleItems() {
-    this.items = [...this.querySelectorAll(":scope > *:not([slot])")]
+    this.items = Array.from(this.querySelectorAll(":scope > *:not([slot])"))
     this.initializeIndex()
     this.setTabIndex()
   }

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

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuRadioGroup } from "./RadioGroup.js"
 
 export { LeuRadioGroup }
 
-defineElement("radio-group", LeuRadioGroup)
+LeuRadioGroup.define("leu-radio-group")

package/src/components/radio/leu-radio.js

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuRadio } from "./Radio.js"
 
 export { LeuRadio }
 
-defineElement("radio", LeuRadio)
+LeuRadio.define("leu-radio")

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

@@ -27,25 +27,11 @@ function Template({ label, orientation }) {
       orientation=${ifDefined(orientation)}
       label=${ifDefined(label)}
     >
-      <leu-radio
-        identifier="1"
-        value="1"
-        name="radio-button"
-        label="Kurz"
-        disabled
-      ></leu-radio>
-      <leu-radio
-        identifier="2"
-        value="2"
-        name="radio-button"
-        label="Etwas Länger"
-      ></leu-radio>
-      <leu-radio
-        identifier="3"
-        value="3"
-        name="radio-button"
-        label="Ein langes Label um sicher ein umbruch zu erzwingen"
-      ></leu-radio>
+      <leu-radio value="1" name="radio-button" disabled>Kurz</leu-radio>
+      <leu-radio value="2" name="radio-button">Etwas Länger</leu-radio>
+      <leu-radio value="3" name="radio-button"
+        >Ein langes Label um sicher ein umbruch zu erzwingen</leu-radio
+      >
     </leu-radio-group>
   `
 }

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

@@ -24,13 +24,8 @@ function Template({
   disabled = false,
 }) {
   return html`
-    <leu-radio
-      .value=${value}
-      ?checked=${checked}
-      ?disabled=${disabled}
-      identifier=${"radio-1"}
-      label=${label}
-    >
+    <leu-radio .value=${value} ?checked=${checked} ?disabled=${disabled}>
+      ${label}
     </leu-radio>
   `
 }

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

@@ -9,27 +9,24 @@ async function defaultFixture(args = {}) {
     <leu-radio-group>
       <span slot="legend">Legende</span>
       <leu-radio
-        identifier="1"
         value="1"
         name="radio-button"
         disabled
-        label="Kurz"
         ?checked=${args.checkedValue === "1"}
-      ></leu-radio>
+        >Kurz</leu-radio
+      >
       <leu-radio
-        identifier="2"
         value="2"
         name="radio-button"
-        label="Etwas Länger"
         ?checked=${args.checkedValue === "2"}
-      ></leu-radio>
+        >Etwas Länger</leu-radio
+      >
       <leu-radio
-        identifier="3"
         value="3"
         name="radio-button"
-        label="Ein langes Label um sicher ein umbruch zu erzwingen"
         ?checked=${args.checkedValue === "3"}
-      ></leu-radio>
+        >Ein langes Label um sicher ein umbruch zu erzwingen</leu-radio
+      >
     </leu-radio-group>
   `)
 }

package/src/components/radio/test/radio.test.js

@@ -6,12 +6,9 @@ import "../leu-radio.js"
 
 async function defaultFixture() {
   return fixture(html`
-    <leu-radio
-      identifier="b"
-      value="3"
-      name="radio-button"
-      label="Ein langes Label um sicher ein umbruch zu erzwingen"
-    ></leu-radio>
+    <leu-radio identifier="b" value="3" name="radio-button"
+      >Ein langes Label um sicher ein umbruch zu erzwingen</leu-radio
+    >
   `)
 }
 
@@ -119,11 +116,4 @@ describe("LeuRadio", () => {
 
     expect(event).to.exist
   })
-
-  it("applies the identifier to the input and the label", async () => {
-    const el = await defaultFixture()
-
-    expect(el.shadowRoot.querySelector("input").id).to.equal("b")
-    expect(el.shadowRoot.querySelector("label").htmlFor).to.equal("b")
-  })
 })

package/src/components/scroll-top/ScrollTop.js

@@ -1,14 +1,24 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 
-import styles from "./scroll-top.css"
-import "../button/leu-button.js"
+import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuButton } from "../button/Button.js"
+import { LeuIcon } from "../icon/Icon.js"
+
 import { throttle } from "../../lib/utils.js"
 
+// @ts-ignore
+import styles from "./scroll-top.css"
+
 /**
  * @tagname leu-scroll-top
  */
-export class LeuScrollTop extends LitElement {
+export class LeuScrollTop extends LeuElement {
+  static dependencies = {
+    "leu-button": LeuButton,
+    "leu-icon": LeuIcon,
+  }
+
   static styles = styles
 
   static properties = {
@@ -75,11 +85,11 @@ export class LeuScrollTop extends LitElement {
     return html`
       <div class=${classMap(cssClasses)}>
         <leu-button
-          icon="arrowUp"
           label="Zum Seitenanfang"
           round
           @click="${() => LeuScrollTop.scrollToTop()}"
         >
+          <leu-icon name="arrowUp"></leu-icon>
         </leu-button>
       </div>
     `

package/src/components/scroll-top/leu-scroll-top.js

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuScrollTop } from "./ScrollTop.js"
 
 export { LeuScrollTop }
 
-defineElement("scroll-top", LeuScrollTop)
+LeuScrollTop.define("leu-scroll-top")