@statistikzh/leu 0.0.2 → 0.2.0

package/src/components/select/Select.js

@@ -74,9 +74,19 @@ export class LeuSelect extends LitElement {
     this.toggleButtonRef = createRef()
   }
 
+  connectedCallback() {
+    super.connectedCallback()
+    document.addEventListener("click", this.handleDocumentClick)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    document.removeEventListener("click", this.handleDocumentClick)
+  }
+
   updated(changedProperties) {
     if (changedProperties.has("open") && this.open) {
-      if (this.multiple) {
+      if (this.filterable) {
         this.optionFilterRef.value.focus()
       } else {
         this.menuRef.value.focus()
@@ -86,6 +96,17 @@ export class LeuSelect extends LitElement {
     }
   }
 
+  /**
+   * Handles clicks outside of the component to close the dropdown.
+   * @internal
+   * @param {MouseEvent} event
+   */
+  handleDocumentClick = (event) => {
+    if (!this.contains(event.target) && this.open) {
+      this.closeDropdown()
+    }
+  }
+
   /**
    * @internal
    * @param {KeyboardEvent} e
@@ -143,12 +164,6 @@ export class LeuSelect extends LitElement {
     this.emitUpdateEvents()
   }
 
-  clearOptionFilter() {
-    // refocus before removing the button, otherwise closeDropdown is triggered
-    this.optionFilterRef.value.focus()
-    this.optionFilter = ""
-  }
-
   toggleDropdown() {
     if (!this.disabled) {
       this.open = !this.open
@@ -242,7 +257,11 @@ export class LeuSelect extends LitElement {
                 ${LeuSelect.getOptionLabel(option)}
               </leu-menu-item>`
             })
-          : html`<leu-menu-item disabled>Keine Resultate</leu-menu-item>`}
+          : html`<leu-menu-item disabled
+              >${this.optionFilter === ""
+                ? "Keine Optionen"
+                : "Keine Resultate"}</leu-menu-item
+            >`}
       </leu-menu>
     `
   }
@@ -254,6 +273,7 @@ export class LeuSelect extends LitElement {
         size="small"
         @input=${this.handleFilterInput}
         clearable
+        ref=${ref(this.optionFilterRef)}
         >Nach Stichwort filtern</leu-input
       >`
     }

package/src/styles/custom-properties.css

@@ -29,13 +29,13 @@
   --leu-color-accent-violet: #7f3da7;
   --leu-color-accent-gray: var(--leu-color-black-60);
 
-  --leu-color-accent-blue-soft: ##edf5fa;
-  --leu-color-accent-darkblue-soft: ##e0e8ee;
-  --leu-color-accent-turquoise-soft: ##e8f3f2;
-  --leu-color-accent-green-soft: ##ebf6eb;
-  --leu-color-accent-bordeaux-soft: ##f6e3ea;
-  --leu-color-accent-magenta-soft: ##fcedf3;
-  --leu-color-accent-violet-soft: ##ece2f1;
+  --leu-color-accent-blue-soft: #edf5fa;
+  --leu-color-accent-darkblue-soft: #e0e8ee;
+  --leu-color-accent-turquoise-soft: #e8f3f2;
+  --leu-color-accent-green-soft: #ebf6eb;
+  --leu-color-accent-bordeaux-soft: #f6e3ea;
+  --leu-color-accent-magenta-soft: #fcedf3;
+  --leu-color-accent-violet-soft: #ece2f1;
   --leu-color-accent-gray-soft: var(--leu-color-black-10);
 
   --leu-color-func-cyan: #009ee0;

package/.github/workflows/publish.yml

@@ -1,19 +0,0 @@
-name: Publish Package to npmjs
-on:
-  release:
-    types: [published]
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      # Setup .npmrc file to publish to npm
-      - uses: actions/setup-node@v3
-        with:
-          node-version: "20.x"
-          registry-url: "https://registry.npmjs.org"
-      - run: npm ci
-      - run: npm run build
-      - run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/dist/Table-72d305d7.js

@@ -1,506 +0,0 @@
-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/defineElement-47d4f665.js

@@ -1,15 +0,0 @@
-/**
- * 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 };