@statistikzh/leu 0.0.2 → 0.1.0

package/dist/RadioGroup.js

@@ -1,140 +1,84 @@
-import { LitElement, css, html } from 'lit';
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { css, LitElement, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { d as defineElement } from './defineElement-47d4f665.js';
 
 /**
  * @tagname leu-radio-group
  */
 class LeuRadioGroup extends LitElement {
-  static styles = css`
-    :host {
-      --group-font-regular: var(--leu-font-regular);
-      --group-font-black: var(--leu-font-black);
-
-      font-family: var(--group-font-regular);
-    }
-
-    .fieldset {
-      display: flex;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      gap: 0.5rem 1rem;
-
-      border: none;
-      padding: 0;
-    }
-
-    .fieldset--vertical {
-      flex-direction: column;
-      gap: 1rem;
-    }
-
-    .legend {
-      font-family: var(--group-font-black);
-      font-size: 1.125rem;
-      line-height: 1.5;
-
-      margin-bottom: 0.5rem;
-    }
-  `
-
-  static properties = {
-    orientation: { type: String },
-  }
-
   constructor() {
     super();
+    _defineProperty(this, "handleFocusIn", e => {
+      this._currentIndex = this.items.indexOf(e.target);
+    });
+    _defineProperty(this, "handleKeyDown", e => {
+      const currentIndex = this.items.indexOf(e.target);
+      switch (e.key) {
+        case "ArrowUp":
+        case "ArrowLeft":
+          this.selectNextItem(currentIndex, -1);
+          break;
+        case "ArrowDown":
+        case "ArrowRight":
+          this.selectNextItem(currentIndex, 1);
+          break;
+        case "Home":
+          this.selectItem(this.items.find(item => !item.disabled));
+          break;
+        case "End":
+          this.selectItem(this.items.findLast(item => !item.disabled));
+          break;
+      }
+      this.setTabIndex();
+    });
+    _defineProperty(this, "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.orientation = "HORIZONTAL";
     this._currentIndex = 0;
     this.items = [];
   }
-
   get value() {
-    const checkedValues = this.items
-      .filter((i) => i.checked)
-      .map((i) => i.value);
-    return checkedValues.length > 0 ? checkedValues[0] : ""
+    const checkedValues = this.items.filter(i => i.checked).map(i => i.value);
+    return checkedValues.length > 0 ? checkedValues[0] : "";
   }
-
   connectedCallback() {
     super.connectedCallback();
     this.handleItems();
     this.addEventListeners();
   }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListeners();
   }
-
   addEventListeners() {
     this.addEventListener("input", this.handleInput);
     this.addEventListener("focusin", this.handleFocusIn);
     this.addEventListener("keydown", this.handleKeyDown);
   }
-
   removeEventListeners() {
     this.removeEventListener("input", this.handleInput);
     this.removeEventListener("focusin", this.handleFocusIn);
     this.removeEventListener("keydown", this.handleKeyDown);
   }
-
   handleSlotChange() {
     this.handleItems();
   }
-
-  handleFocusIn = (e) => {
-    this._currentIndex = this.items.indexOf(e.target);
-  }
-
-  handleKeyDown = (e) => {
-    const currentIndex = this.items.indexOf(e.target);
-
-    switch (e.key) {
-      case "ArrowUp":
-      case "ArrowLeft":
-        this.selectNextItem(currentIndex, -1);
-        break
-      case "ArrowDown":
-      case "ArrowRight":
-        this.selectNextItem(currentIndex, 1);
-        break
-      case "Home":
-        this.selectItem(this.items.find((item) => !item.disabled));
-        break
-      case "End":
-        this.selectItem(this.items.findLast((item) => !item.disabled));
-        break
-    }
-
-    this.setTabIndex();
-  }
-
-  handleInput = (e) => {
-    if (e.target.checked) {
-      this.items
-        .filter((item) => item !== e.target)
-        .forEach((item) => {
-          item.checked = false; // eslint-disable-line no-param-reassign
-        });
-    }
-  }
-
   selectItem(selectingItem) {
-    this.items.forEach((item) => {
+    this.items.forEach(item => {
       item.checked = item === selectingItem; // eslint-disable-line no-param-reassign
     });
   }
 
   selectNextItem(startingIndex, direction) {
     let selected = false;
-
     for (let index = 0; index < this.items.length; index += 1) {
-      const currentIndex =
-        (this.items.length + index * direction + startingIndex + direction) %
-        this.items.length;
+      const currentIndex = (this.items.length + index * direction + startingIndex + direction) % this.items.length;
       const currentItem = this.items[currentIndex];
-
       if (!selected && !currentItem.disabled) {
         currentItem.checked = true;
         currentItem.focus();
@@ -144,7 +88,6 @@ class LeuRadioGroup extends LitElement {
       }
     }
   }
-
   setTabIndex() {
     this.items.forEach((item, index) => {
       if (index === this._currentIndex) {
@@ -160,33 +103,60 @@ class LeuRadioGroup extends LitElement {
     this.initializeIndex();
     this.setTabIndex();
   }
-
   initializeIndex() {
-    const index = this.items.findIndex(
-      (item) => item.hasAttribute("checked") && !item.hasAttribute("disabled")
-    );
-    const nextEnabledIndex = this.items.findIndex(
-      (item) => !item.hasAttribute("disabled")
-    );
-
+    const index = this.items.findIndex(item => item.hasAttribute("checked") && !item.hasAttribute("disabled"));
+    const nextEnabledIndex = this.items.findIndex(item => !item.hasAttribute("disabled"));
     this._currentIndex = index >= 0 ? index : nextEnabledIndex;
   }
-
   render() {
     const fieldsetClasses = {
       fieldset: "true",
-      "fieldset--vertical": this.orientation === "VERTICAL",
+      "fieldset--vertical": this.orientation === "VERTICAL"
     };
-
     return html`
       <fieldset class=${classMap(fieldsetClasses)}>
         <legend class="legend"><slot name="legend"></slot></legend>
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
-    `
+    `;
   }
 }
+_defineProperty(LeuRadioGroup, "styles", css`
+    :host {
+      --group-font-regular: var(--leu-font-regular);
+      --group-font-black: var(--leu-font-black);
+
+      font-family: var(--group-font-regular);
+    }
 
+    .fieldset {
+      display: flex;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      gap: 0.5rem 1rem;
+
+      border: none;
+      padding: 0;
+    }
+
+    .fieldset--vertical {
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .legend {
+      font-family: var(--group-font-black);
+      font-size: 1.125rem;
+      line-height: 1.5;
+
+      margin-bottom: 0.5rem;
+    }
+  `);
+_defineProperty(LeuRadioGroup, "properties", {
+  orientation: {
+    type: String
+  }
+});
 function defineRadioGroupElements() {
   defineElement("radio-group", LeuRadioGroup);
 }