@statistikzh/leu 0.0.2

package/dist/Table-72d305d7.js

@@ -0,0 +1,506 @@
+import { css, LitElement, html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { I as Icon } from './icon-b68c7e1e.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { d as defineButtonElements } from './Button-83c6df93.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 {
+  static styles = css_248z
+
+  static events = {
+    range: {},
+  }
+
+  static properties = {
+    page: { type: Number, reflect: true },
+    itemsOnAPage: { type: Number },
+    dataLength: { type: Number },
+
+    _minPage: { type: Number, state: true },
+  }
+
+  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>
+    `
+  }
+}
+
+function definePaginationElements() {
+  defineButtonElements();
+  defineElement("pagination", LeuPagination);
+}
+
+/**
+ * @tagname leu-table
+ */
+class LeuTable extends LitElement {
+  static styles = css`
+    :host {
+      position: relative;
+      display: block;
+    }
+    div.scroll {
+      display: inline-block;
+      width: 100%;
+      overflow: auto;
+    }
+    div.shadow {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 1;
+    }
+    div.pagination {
+      height: calc(100% - 66px);
+    }
+    table {
+      width: 100%;
+      border-spacing: 0;
+      color: rgb(0 0 0 / 60%);
+      font-size: 16px;
+      font-family: var(--leu-font-regular);
+      line-height: 1.5;
+    }
+    td {
+      padding: 12px;
+    }
+    th {
+      padding: 16px 16px 8px;
+      text-align: left;
+      font-size: 12px;
+      font-weight: normal;
+      font-family: var(--leu-font-black);
+      background: var(--table-even-row-bg);
+    }
+    td:first-child,
+    th:first-child {
+      left: 0;
+      background: inherit;
+      z-index: 1;
+    }
+    tr {
+      background: #fff;
+    }
+    tbody tr:nth-child(odd) {
+      background: var(--leu-color-black-5);
+    }
+    button {
+      background: none;
+      cursor: pointer;
+      line-height: 1.5;
+      padding: 0;
+      border: 0;
+      width: 100%;
+      display: flex;
+      align-items: flex-center;
+      font-size: inherit;
+      font-family: inherit;
+    }
+    thead svg {
+      display: inline-block;
+      color: var(--leu-color-accent-blue);
+      padding: 0;
+    }
+
+    table.sticky td:first-child,
+    table.sticky th:first-child {
+      position: sticky;
+    }
+    div.shadow-left table.sticky td:first-child,
+    div.shadow-left table.sticky th:first-child {
+      box-shadow: 0 0 5px rgb(0 0 0 / 50%);
+      clip-path: inset(0 -15px 0 0);
+    }
+    div.shadow-left {
+      box-shadow: inset 5px 0 5px -5px rgb(0 0 0 / 50%);
+    }
+    div.shadow-right {
+      box-shadow: inset -5px 0 5px -5px rgb(0 0 0 / 50%);
+    }
+  `
+
+  static properties = {
+    columns: { type: Array },
+    data: { type: Array },
+    firstColumnSticky: { type: Boolean },
+    itemsOnAPage: { type: Number },
+    sortIndex: { type: Number },
+    sortOrderAsc: { type: Boolean },
+    width: { type: Number },
+
+    _shadowLeft: { type: Boolean, state: true },
+    _shadowRight: { type: Boolean, state: true },
+    _min: { type: Number, state: true },
+    _max: { type: Number, state: true },
+  }
+
+  constructor() {
+    super();
+    /** @type {array} */
+    this.columns = [];
+    /** @type {array} */
+    this.data = [];
+    /** @type {boolean} */
+    this.firstColumnSticky = false;
+    /** @type {number} */
+    this.itemsOnAPage = null;
+    /** @type {number} */
+    this.sortIndex = null;
+    /** @type {boolean} */
+    this.sortOrderAsc = false;
+    /** @type {number} */
+    this.width = null;
+
+    /** @internal */
+    this._sortArrowDown = Icon("arrowDown", 20);
+    /** @internal */
+    this._sortArrowUp = Icon("arrowUp", 20);
+    /** @internal */
+    this._shadowLeft = false;
+    /** @internal */
+    this._shadowRight = false;
+    /** @internal */
+    this._scrollRef = createRef();
+    /** @internal */
+    this._min = 0;
+    /** @internal */
+    this._max = null;
+  }
+
+  firstUpdated() {
+    this.shadowToggle(this._scrollRef.value);
+  }
+
+  shadowToggle(target) {
+    this._shadowLeft = target.scrollLeftMax > 0 && target.scrollLeft > 0;
+    this._shadowRight =
+      target.scrollLeftMax > 0 && target.scrollLeft < target.scrollLeftMax;
+  }
+
+  scrollEvent(event) {
+    this.shadowToggle(event.target);
+  }
+
+  isOnePropNotValid() {
+    if (!this._columns) {
+      return "Der Parameter 'columns' ist erforderlich !"
+    }
+    if (!this._sortedData) {
+      return "Der Parameter 'data' ist erforderlich !"
+    }
+    return null
+  }
+
+  isSorted(col) {
+    return this.sortIndex === this._columns.indexOf(col)
+  }
+
+  sortClick(col) {
+    const index = this._columns.indexOf(col);
+    if (this.sortIndex === index) {
+      this.sortOrderAsc = !this.sortOrderAsc;
+    } else {
+      this.sortIndex = index;
+      this.sortOrder = "asc";
+    }
+  }
+
+  sortArrowIcon() {
+    return html`${this.sortOrderAsc ? this._sortArrowDown : this._sortArrowUp}`
+  }
+
+  sortArrow(col) {
+    return html` ${this.isSorted(col) ? this.sortArrowIcon() : nothing} `
+  }
+
+  get _columns() {
+    return this.columns
+  }
+
+  get _sortedData() {
+    if (this.sortIndex === null || this.sortIndex === undefined) {
+      return this.data
+    }
+    const col = this._columns[this.sortIndex];
+    return this.data.sort(this.sortOrderAsc ? col.sort.asc : col.sort.desc)
+  }
+
+  get _data() {
+    return this.itemsOnAPage && this.itemsOnAPage > 0
+      ? this._sortedData.slice(this._min, this._max)
+      : this._sortedData
+  }
+
+  render() {
+    const scrollClasses = {
+      scroll: true,
+      "shadow-left": this.firstColumnSticky && this._shadowLeft,
+    };
+
+    const shadowClassesLeft = {
+      shadow: true,
+      "shadow-left": !this.firstColumnSticky && this._shadowLeft,
+      pagination: this.itemsOnAPage > 0,
+    };
+
+    const shadowClassesRight = {
+      shadow: true,
+      "shadow-right": this._shadowRight,
+      pagination: this.itemsOnAPage > 0,
+    };
+
+    const stickyClass = {
+      sticky: this.firstColumnSticky,
+    };
+
+    return html`
+      <div
+        class=${classMap(scrollClasses)}
+        @scroll="${this.scrollEvent}"
+        ref=${ref(this._scrollRef)}
+      >
+        <table class=${classMap(stickyClass)}>
+          <thead>
+            <tr>
+              ${this._columns.map(
+                (col) =>
+                  html`<th>
+                    ${col.sort
+                      ? html`<button @click=${(_) => this.sortClick(col)}>
+                          <span>${col.name}</span>
+                          ${this.sortArrow(col)}
+                        </button>`
+                      : col.name}
+                  </th>`
+              )}
+            </tr>
+          </thead>
+          <tbody>
+            ${this._data.map(
+              (row) =>
+                html`<tr>
+                  ${this._columns.map(
+                    (col) =>
+                      html`<td
+                        style=${col.style ? styleMap(col.style(row)) : nothing}
+                      >
+                        ${col.value(row)}
+                      </td>`
+                  )}
+                </tr>`
+            )}
+          </tbody>
+        </table>
+        <div class=${classMap(shadowClassesLeft)}></div>
+        <div class=${classMap(shadowClassesRight)}></div>
+      </div>
+
+      ${this.itemsOnAPage > 0
+        ? html`
+            <leu-pagination
+              .dataLength=${this._sortedData.length}
+              .itemsOnAPage=${this.itemsOnAPage}
+              @range-updated=${(e) => {
+                this._min = e.detail.min;
+                this._max = e.detail.max;
+                // after render
+                setTimeout(() => {
+                  this.shadowToggle(this._scrollRef.value);
+                }, 0);
+              }}
+            >
+            </leu-pagination>
+          `
+        : nothing}
+    `
+  }
+}
+
+function defineTableElements() {
+  definePaginationElements();
+  defineElement("table", LeuTable);
+}
+
+export { LeuPagination as L, LeuTable as a, defineTableElements as b, definePaginationElements as d };

package/dist/Table.js

@@ -0,0 +1,8 @@
+import 'lit';
+import 'lit/directives/class-map.js';
+import 'lit/directives/style-map.js';
+import 'lit/directives/ref.js';
+import './icon-b68c7e1e.js';
+import './defineElement-47d4f665.js';
+export { a as LeuTable, b as defineTableElements } from './Table-72d305d7.js';
+import './Button-83c6df93.js';

package/dist/defineElement-47d4f665.js

@@ -0,0 +1,15 @@
+/**
+ * Adds a definition for a custom element to the custom element
+ * registry if it isn't defined before. Prefixes the name with `leu-`.
+ * @param {string} name
+ * @param {HTMLElement} constructor
+ */
+function defineElement(name, constructor) {
+  if (!customElements.get(`leu-${name}`)) {
+    customElements.define(`leu-${name}`, constructor);
+  } else {
+    console.info(`leu-${name} is already defined`);
+  }
+}
+
+export { defineElement as d };