@statistikzh/leu 0.0.2 → 0.2.0

package/dist/Pagination.js

@@ -0,0 +1,193 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { css, LitElement, html } from 'lit';
+import { defineButtonElements } from './Button.js';
+import 'lit/directives/class-map.js';
+import './icon-03e86700.js';
+
+var css_248z = css`:host {
+  margin-top: 16px;
+  display: flex;
+  justify-content: end;
+  font-family: var(--leu-font-regular);
+}
+
+.input {
+  width: 50px;
+  padding: 0;
+  border: 2px solid var(--leu-color-black-40);
+  border-radius: 2px;
+  color: var(--leu-color-black-transp-60);
+  text-align: center;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  outline-offset: 2px;
+}
+
+/* no arrows: Chrome, Safari, Edge, Opera */
+
+.input::-webkit-outer-spin-button,
+.input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+          appearance: none;
+  margin: 0;
+}
+
+/* no arrows: Firefox */
+
+.input[type="number"] {
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
+}
+
+.input:focus,
+.input:hover {
+  border-color: var(--leu-color-func-cyan);
+  outline: none;
+}
+
+.input:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+}
+
+.label {
+  margin: 0 16px;
+  line-height: 50px;
+  color: var(--leu-color-black-transp-60);
+  white-space: nowrap;
+}
+`;
+
+const MIN_PAGE = 1;
+
+/**
+ * @tagname leu-pagination
+ */
+class LeuPagination extends LitElement {
+  constructor() {
+    super();
+    /** @type {number} */
+    this.page = 1;
+    /** @type {number} */
+    this.dataLength = 0;
+    /** @type {number} */
+    this.itemsOnAPage = 30;
+  }
+  get maxPage() {
+    return Math.ceil(this.dataLength / this.itemsOnAPage);
+  }
+  get firstPage() {
+    return this.page === MIN_PAGE;
+  }
+  get lastPage() {
+    return this.page === this.maxPage;
+  }
+  holdInRange(value) {
+    return Math.min(Math.max(value, MIN_PAGE), this.maxPage);
+  }
+  numberUpdate(number) {
+    this.page = this.holdInRange(number);
+    const min = (this.page - 1) * this.itemsOnAPage;
+    const max = Math.min(min + this.itemsOnAPage, this.dataLength);
+    this.dispatchEvent(new CustomEvent("range-updated", {
+      detail: {
+        min,
+        max
+      },
+      bubbles: false
+    }));
+  }
+  change(event) {
+    // target.value = this.page // eslint-disable-line
+    this.numberUpdate(parseInt(event.target.value, 10) || 0);
+  }
+  input(event) {
+    if (event.target.value !== "") {
+      event.preventDefault();
+      this.change(event);
+    }
+  }
+  keydown(event) {
+    const specialKeys = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Backspace", "Enter", "Tab"];
+    const numberKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+    if (!numberKeys.includes(event.key) && !specialKeys.includes(event.key)) {
+      event.preventDefault();
+    } else {
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        this.numberUpdate(this.page + 1);
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        this.numberUpdate(this.page - 1);
+      }
+    }
+  }
+  firstUpdated() {
+    this.numberUpdate(this.page);
+  }
+  requestUpdate(name, oldValue, newValue) {
+    if (name === "itemsOnAPage") {
+      this.numberUpdate(this.page);
+    }
+    return super.requestUpdate(name, oldValue, newValue);
+  }
+  render() {
+    return html`
+      <input
+        class="input"
+        .value=${this.page}
+        @input=${this.input}
+        @change=${this.change}
+        @keydown=${this.keydown}
+        type="number"
+      />
+      <div class="label">von ${this.maxPage}</div>
+      <leu-button
+        icon="angleLeft"
+        variant="secondary"
+        @click=${_ => {
+      this.numberUpdate(this.page - 1);
+    }}
+        ?disabled=${this.firstPage}
+      ></leu-button>
+      <leu-button
+        icon="angleRight"
+        variant="secondary"
+        @click=${_ => {
+      this.numberUpdate(this.page + 1);
+    }}
+        ?disabled=${this.lastPage}
+        style="margin-left:4px;"
+      ></leu-button>
+    `;
+  }
+}
+_defineProperty(LeuPagination, "styles", css_248z);
+_defineProperty(LeuPagination, "events", {
+  range: {}
+});
+_defineProperty(LeuPagination, "properties", {
+  page: {
+    type: Number,
+    reflect: true
+  },
+  itemsOnAPage: {
+    type: Number
+  },
+  dataLength: {
+    type: Number
+  },
+  _minPage: {
+    type: Number,
+    state: true
+  }
+});
+function definePaginationElements() {
+  defineButtonElements();
+  defineElement("pagination", LeuPagination);
+}
+
+export { LeuPagination, definePaginationElements };

package/dist/Radio.js

@@ -1,5 +1,5 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
 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);
@@ -98,39 +98,20 @@ var css_248z = css`:host {
  * @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
@@ -145,10 +126,33 @@ class LeuRadio extends LitElement {
         .value=${this.value}
       />
       <label for=${this.identifier} class="label"><slot></slot></label>
-    `
+    `;
   }
 }
-
+_defineProperty(LeuRadio, "styles", css_248z);
+_defineProperty(LeuRadio, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_defineProperty(LeuRadio, "properties", {
+  checked: {
+    type: Boolean,
+    reflect: true
+  },
+  disabled: {
+    type: Boolean,
+    reflect: true
+  },
+  identifier: {
+    type: String
+  },
+  value: {
+    type: String
+  },
+  name: {
+    type: String
+  }
+});
 function defineRadioElements() {
   defineElement("radio", LeuRadio);
 }

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);
 }