@statistikzh/leu 0.0.2 → 0.1.0

package/dist/Menu.js

@@ -0,0 +1,33 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { css, LitElement, html } from 'lit';
+
+var css_248z = css`:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --menu-divider-color: var(--leu-color-black-transp-20);
+}
+
+:host ::slotted(hr) {
+  border: 0;
+  border-top: 1px solid var(--menu-divider-color);
+  margin: 0.5rem 0;
+}
+`;
+
+/**
+ * @tagname leu-menu
+ */
+class LeuMenu extends LitElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+_defineProperty(LeuMenu, "styles", css_248z);
+function defineMenuElements() {
+  defineElement("menu", LeuMenu);
+}
+
+export { LeuMenu, defineMenuElements };

package/dist/MenuItem.js

@@ -0,0 +1,171 @@
+import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { css, LitElement, html, nothing } from 'lit';
+import { a as ICON_NAMES, I as Icon } from './icon-03e86700.js';
+
+var css_248z = css`:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --background: var(--leu-color-black-0);
+  --background-hover: var(--leu-color-black-10);
+  --background-active: var(--leu-color-func-cyan);
+  --background-disabled: var(--leu-color-black-0);
+  --color: var(--leu-color-black-transp-60);
+  --font-regular: var(--leu-font-regular);
+  --font-black: var(--leu-font-black);
+
+  font-family: var(--chip-font-regular);
+}
+
+.button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+
+  padding: 0.75rem;
+
+  font-size: 1rem;
+  line-height: 1.5;
+  text-align: left;
+
+  background: var(--background);
+  color: var(--color);
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 2px;
+}
+
+.button:hover,
+:host([highlighted]) .button {
+  --background: var(--background-hover);
+}
+
+:host([active]) .button {
+  --background: var(--background-active);
+}
+
+:host([disabled]) .button {
+  --background: var(--background-disabled);
+  cursor: default;
+}
+
+.before svg, .after svg {
+  display: block;
+}
+
+.label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icon-placeholder {
+  display: block;
+  width: 1.5rem;
+  aspect-ratio: 1;
+}
+`;
+
+/**
+ * @tagname leu-menu-item
+ * @slot - The label of the menu item
+ */
+class LeuMenuItem extends LitElement {
+  constructor() {
+    super();
+    this.active = false;
+    this.disabled = false;
+    this.before = "";
+    this.after = "";
+
+    /**
+     * A programmatic way to highlight the menu item like it is hovered.
+     * This is just a visual effect and does not change the active state.
+     */
+    this.highlighted = false;
+  }
+  static getIconOrText(name) {
+    if (ICON_NAMES.includes(name)) {
+      return Icon(name);
+    }
+    if (name === "EMPTY") {
+      return html`<div class="icon-placeholder"></div>`;
+    }
+    return name;
+  }
+  renderBefore() {
+    if (this.before !== "") {
+      const content = LeuMenuItem.getIconOrText(this.before);
+      return html`<span class="before">${content}</span>`;
+    }
+    return nothing;
+  }
+  renderAfter() {
+    if (this.after !== "") {
+      const content = LeuMenuItem.getIconOrText(this.after);
+      return html`<span class="after">${content}</span>`;
+    }
+    return nothing;
+  }
+  render() {
+    return html`<button class="button" ?disabled=${this.disabled}>
+      ${this.renderBefore()}<span class="label"><slot></slot></span
+      >${this.renderAfter()}
+    </button>`;
+  }
+}
+_defineProperty(LeuMenuItem, "styles", css_248z);
+/**
+ * @internal
+ */
+_defineProperty(LeuMenuItem, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_defineProperty(LeuMenuItem, "properties", {
+  /**
+   * Can be either an icon name or a text
+   * If no icon with this value is found, it will be displayed as text.
+   * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
+   */
+  before: {
+    type: String
+  },
+  /**
+   * Can be either an icon name or a text
+   * If no icon with this value is found, it will be displayed as text
+   * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
+   */
+  after: {
+    type: String
+  },
+  active: {
+    type: Boolean,
+    reflect: true
+  },
+  highlighted: {
+    type: Boolean,
+    reflect: true
+  },
+  disabled: {
+    type: Boolean,
+    reflect: true
+  }
+});
+function defineMenuItemElements() {
+  defineElement("menu-item", LeuMenuItem);
+}
+
+export { LeuMenuItem, defineMenuItemElements };

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