@statistikzh/leu 0.0.2

package/dist/Radio.js

@@ -0,0 +1,156 @@
+import { css, LitElement, html } from 'lit';
+import { d as defineElement } from './defineElement-47d4f665.js';
+
+var css_248z = css`:host {
+  --radio-color: var(--leu-color-black-40);
+  --radio-color-disabled: var(--leu-color-black-20);
+  --radio-color-focus: var(--leu-color-func-cyan);
+
+  --radio-label-color: var(--leu-color-black-100);
+  --radio-label-color-disabled: var(--radio-color-disabled);
+
+  --radio-font-regular: var(--leu-font-regular);
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+
+  font-family: var(--leu-font-regular);
+
+  font-family: var(--radio-font-regular);
+}
+
+.radio {
+  --_length: 1.5rem;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+
+  width: 1.5rem;
+
+  width: var(--_length);
+  height: 1.5rem;
+  height: var(--_length);
+  margin: 0;
+
+  border: 2px solid var(--radio-color);
+  border-radius: 50%;
+
+  flex: 1 0 1.5rem;
+
+  flex: 1 0 var(--_length);
+
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  place-items: center;
+}
+
+.radio::before {
+  content: "";
+  width: 0.75rem;
+  height: 0.75rem;
+
+  border-radius: 50%;
+  background-color: var(--radio-color);
+
+  transform: scale(0);
+}
+
+.radio:checked::before {
+  transform: scale(1);
+}
+
+.radio:checked {
+  --radio-color: var(--radio-color-focus);
+}
+
+.radio:hover, .radio:focus {
+  --radio-color: var(--radio-color-focus);
+}
+
+.radio:focus-visible {
+  outline: 2px solid var(--radio-color-focus);
+  outline-offset: 2px;
+}
+
+.radio:disabled {
+  --radio-color: var(--radio-color-disabled);
+  cursor: not-allowed;
+}
+
+.label {
+  cursor: pointer;
+
+  color: var(--radio-label-color);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.radio:disabled + .label {
+  --radio-label-color: var(--radio-label-color-disabled);
+  cursor: not-allowed;
+}
+`;
+
+/**
+ * @tagname leu-radio
+ */
+class LeuRadio extends LitElement {
+  static styles = css_248z
+
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    checked: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    identifier: { type: String },
+    value: { type: String },
+    name: { type: String },
+  }
+
+  constructor() {
+    super();
+    this.checked = false;
+    this.disabled = false;
+    this.tabIndex = 0;
+  }
+
+  handleChange(event) {
+    this.checked = event.target.checked;
+
+    const customEvent = new CustomEvent(event.type, event);
+    this.dispatchEvent(customEvent);
+  }
+
+  handleInput(event) {
+    this.checked = event.target.checked;
+  }
+
+  render() {
+    return html`
+      <input
+        id=${this.identifier}
+        class="radio"
+        type="radio"
+        name="${this.name}"
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+        .checked=${this.checked}
+        ?disabled=${this.disabled}
+        .value=${this.value}
+      />
+      <label for=${this.identifier} class="label"><slot></slot></label>
+    `
+  }
+}
+
+function defineRadioElements() {
+  defineElement("radio", LeuRadio);
+}
+
+export { LeuRadio, defineRadioElements };

package/dist/RadioGroup.js

@@ -0,0 +1,194 @@
+import { LitElement, css, 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();
+    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] : ""
+  }
+
+  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) => {
+      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 currentItem = this.items[currentIndex];
+
+      if (!selected && !currentItem.disabled) {
+        currentItem.checked = true;
+        currentItem.focus();
+        selected = true;
+      } else if (selected) {
+        currentItem.checked = false;
+      }
+    }
+  }
+
+  setTabIndex() {
+    this.items.forEach((item, index) => {
+      if (index === this._currentIndex) {
+        item.tabIndex = "0"; // eslint-disable-line no-param-reassign
+      } else {
+        item.tabIndex = "-1"; // eslint-disable-line no-param-reassign
+      }
+    });
+  }
+
+  handleItems() {
+    this.items = [...this.querySelectorAll(":scope > *:not([slot])")];
+    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")
+    );
+
+    this._currentIndex = index >= 0 ? index : nextEnabledIndex;
+  }
+
+  render() {
+    const fieldsetClasses = {
+      fieldset: "true",
+      "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>
+    `
+  }
+}
+
+function defineRadioGroupElements() {
+  defineElement("radio-group", LeuRadioGroup);
+}
+
+export { LeuRadioGroup, defineRadioGroupElements };