@statistikzh/leu 0.3.0 → 0.5.0

package/dist/MenuItem.js

@@ -1,5 +1,7 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
-import { css, LitElement, html, nothing } from 'lit';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
+import { css, LitElement, nothing } from 'lit';
+import { html, unsafeStatic } from 'lit/static-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { a as ICON_NAMES, I as Icon } from './icon-03e86700.js';
 
 var css_248z = css`:host,
@@ -11,15 +13,18 @@ var css_248z = css`: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);
+  --background-disabled: var(--leu-color-black-black-0);
   --color: var(--leu-color-black-transp-60);
-  --font-regular: var(--leu-font-regular);
-  --font-black: var(--leu-font-black);
+  --color-disabled: var(--leu-color-black-transp-20);
+  --font-regular: var(--leu-font-family-regular);
+  --font-black: var(--leu-font-family-black);
 
-  font-family: var(--chip-font-regular);
+  font-family: var(--leu-font-family-regular);
 }
 
 .button {
+  -webkit-text-decoration: none;
+  text-decoration: none;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -57,6 +62,7 @@ var css_248z = css`:host,
 
 :host([disabled]) .button {
   --background: var(--background-disabled);
+  --color: var(--color-disabled);
   cursor: default;
 }
 
@@ -87,8 +93,6 @@ class LeuMenuItem extends LitElement {
     super();
     this.active = false;
     this.disabled = false;
-    this.before = "";
-    this.after = "";
 
     /**
      * A programmatic way to highlight the menu item like it is hovered.
@@ -106,24 +110,30 @@ class LeuMenuItem extends LitElement {
     return name;
   }
   renderBefore() {
-    if (this.before !== "") {
+    if (this.before) {
       const content = LeuMenuItem.getIconOrText(this.before);
       return html`<span class="before">${content}</span>`;
     }
     return nothing;
   }
   renderAfter() {
-    if (this.after !== "") {
+    if (this.after) {
       const content = LeuMenuItem.getIconOrText(this.after);
       return html`<span class="after">${content}</span>`;
     }
     return nothing;
   }
+  getTagName() {
+    return this.href ? "a" : "button";
+  }
   render() {
-    return html`<button class="button" ?disabled=${this.disabled}>
-      ${this.renderBefore()}<span class="label"><slot></slot></span
+    /* The eslint rules don't recognize html import from lit/static-html.js */
+    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+    return html`<${unsafeStatic(this.getTagName())} class="button" href=${ifDefined(this.href)} ?disabled=${this.disabled}>
+      ${this.renderBefore()}<span class="label">${this.label}</span
       >${this.renderAfter()}
-    </button>`;
+    </${unsafeStatic(this.getTagName())}>`;
+    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
   }
 }
 _defineProperty(LeuMenuItem, "styles", css_248z);
@@ -164,10 +174,15 @@ _defineProperty(LeuMenuItem, "properties", {
   disabled: {
     type: Boolean,
     reflect: true
+  },
+  label: {
+    type: String,
+    reflect: true
+  },
+  href: {
+    type: String,
+    reflect: true
   }
 });
-function defineMenuItemElements() {
-  defineElement("menu-item", LeuMenuItem);
-}
 
-export { LeuMenuItem, defineMenuItemElements };
+export { LeuMenuItem };

package/dist/Pagination.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @tagname leu-pagination
+ */
+export class LeuPagination extends LitElement {
+    /** @type {Number} */
+    numOfItems: number;
+    /** @type {Number} */
+    itemsPerPage: number;
+    /** @type {Number} */
+    _page: number;
+    attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
+    set page(page: number);
+    get page(): number;
+    get startIndex(): number;
+    get endIndex(): number;
+    get _maxPage(): number;
+    _isFirstPage(): boolean;
+    _isLastPage(): boolean;
+    _clampPage(page: any): number;
+    _updatePage(page: any): void;
+    _handleChange(event: any): void;
+    _handleInput(event: any): void;
+    _handleKeyDown(event: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+import { LitElement } from 'lit';
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["Pagination.js"],"names":[],"mappings":"AA2EA;;GAEG;AACH;IAII,qBAAqB;IACrB,mBAAmB;IACnB,qBAAqB;IACrB,qBAAqB;IACrB,qBAAqB;IACrB,cAAc;IAEhB,oEAKC;IAID,uBAEC;IALD,mBAEC;IAID,yBAEC;IACD,uBAEC;IACD,uBAEC;IACD,wBAEC;IACD,uBAEC;IACD,8BAEC;IACD,6BAaC;IACD,gCAEC;IACD,+BAKC;IACD,iCASC;IACD,+CAsCC;CACF;2BA9LqC,KAAK"}

package/dist/Pagination.js

@@ -1,14 +1,20 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { css, LitElement, html } from 'lit';
-import { defineButtonElements } from './Button.js';
+import { live } from 'lit/directives/live.js';
+import './leu-button.js';
+import './leu-visually-hidden.js';
+import './defineElement-40372b4b.js';
+import './Button-da11d064.js';
 import 'lit/directives/class-map.js';
+import 'lit/directives/if-defined.js';
 import './icon-03e86700.js';
+import './VisuallyHidden.js';
 
 var css_248z = css`:host {
   margin-top: 16px;
   display: flex;
   justify-content: end;
-  font-family: var(--leu-font-regular);
+  font-family: var(--leu-font-family-regular);
 }
 
 .input {
@@ -58,6 +64,11 @@ var css_248z = css`:host {
   color: var(--leu-color-black-transp-60);
   white-space: nowrap;
 }
+
+.button-group {
+  display: flex;
+  gap: 0.25rem;
+}
 `;
 
 const MIN_PAGE = 1;
@@ -68,128 +79,149 @@ const MIN_PAGE = 1;
 class LeuPagination extends LitElement {
   constructor() {
     super();
-    /** @type {number} */
-    this.page = 1;
-    /** @type {number} */
-    this.dataLength = 0;
-    /** @type {number} */
-    this.itemsOnAPage = 30;
+
+    /** @type {Number} */
+    this.numOfItems = 1;
+    /** @type {Number} */
+    this.itemsPerPage = 1;
+    /** @type {Number} */
+    this._page = 1;
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal);
+    if (name === "defaultpage" && newVal !== oldVal) {
+      this.page = parseInt(newVal, 10);
+    }
   }
-  get maxPage() {
-    return Math.ceil(this.dataLength / this.itemsOnAPage);
+  get page() {
+    return this._page;
   }
-  get firstPage() {
+  set page(page) {
+    this._page = this._clampPage(page);
+  }
+  get startIndex() {
+    return (this.page - 1) * this.itemsPerPage;
+  }
+  get endIndex() {
+    return Math.min(this.startIndex + this.itemsPerPage, this.numOfItems);
+  }
+  get _maxPage() {
+    return Math.ceil(this.numOfItems / this.itemsPerPage);
+  }
+  _isFirstPage() {
     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) {
+  _isLastPage() {
+    return this.page === this._maxPage;
+  }
+  _clampPage(page) {
+    return Math.min(Math.max(page, MIN_PAGE), this._maxPage);
+  }
+  _updatePage(page) {
+    const prevPage = this.page;
+    this.page = this._clampPage(page);
+    if (this.page !== prevPage) {
+      this.dispatchEvent(new CustomEvent("leu:pagechange", {
+        detail: {
+          startIndex: this.startIndex,
+          endIndex: this.endIndex,
+          page: this.page
+        },
+        bubbles: false
+      }));
+    }
+  }
+  _handleChange(event) {
+    this._updatePage(parseInt(event.target.value, 10) || 0);
+  }
+  _handleInput(event) {
     if (event.target.value !== "") {
       event.preventDefault();
-      this.change(event);
+      this._handleChange(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)) {
+  _handleKeyDown(event) {
+    if (event.key === "ArrowUp") {
       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);
-      }
+      this._updatePage(this.page + 1);
     }
-  }
-  firstUpdated() {
-    this.numberUpdate(this.page);
-  }
-  requestUpdate(name, oldValue, newValue) {
-    if (name === "itemsOnAPage") {
-      this.numberUpdate(this.page);
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      this._updatePage(this.page - 1);
     }
-    return super.requestUpdate(name, oldValue, newValue);
   }
   render() {
     return html`
+      <leu-visually-hidden>
+        <label for="page-input">Aktuelle Seite</label>
+      </leu-visually-hidden>
       <input
+        id="page-input"
         class="input"
-        .value=${this.page}
-        @input=${this.input}
-        @change=${this.change}
-        @keydown=${this.keydown}
+        min=${MIN_PAGE}
+        max=${this._maxPage}
+        .value=${live(this.page.toString())}
+        @input=${this._handleInput}
+        @change=${this._handleChange}
+        @keydown=${this._handleKeyDown}
         type="number"
       />
-      <div class="label">von ${this.maxPage}</div>
-      <leu-button
-        icon="angleLeft"
-        variant="secondary"
-        @click=${_ => {
-      this.numberUpdate(this.page - 1);
+      <div class="label">von ${this._maxPage}</div>
+      <div class="button-group">
+        <leu-button
+          icon="angleLeft"
+          variant="secondary"
+          label="Vorherige Seite"
+          @click=${_ => {
+      this._updatePage(this.page - 1);
     }}
-        ?disabled=${this.firstPage}
-      ></leu-button>
-      <leu-button
-        icon="angleRight"
-        variant="secondary"
-        @click=${_ => {
-      this.numberUpdate(this.page + 1);
+          ?disabled=${this._isFirstPage()}
+        ></leu-button>
+        <leu-button
+          icon="angleRight"
+          variant="secondary"
+          label="Nächste Seite"
+          @click=${_ => {
+      this._updatePage(this.page + 1);
     }}
-        ?disabled=${this.lastPage}
-        style="margin-left:4px;"
-      ></leu-button>
+          ?disabled=${this._isLastPage()}
+        ></leu-button>
+      </div>
     `;
   }
 }
 _defineProperty(LeuPagination, "styles", css_248z);
-_defineProperty(LeuPagination, "events", {
-  range: {}
+/**
+ * @internal
+ */
+_defineProperty(LeuPagination, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
 });
 _defineProperty(LeuPagination, "properties", {
-  page: {
+  defaultPage: {
     type: Number,
     reflect: true
   },
-  itemsOnAPage: {
+  itemsPerPage: {
     type: Number,
     reflect: true
   },
-  dataLength: {
+  numOfItems: {
     type: Number,
     reflect: true
   },
-  _minPage: {
-    type: Number,
+  /**
+   * Internal page state that contains an
+   * already clamped page number. Should only
+   * be accessed through the `page` getter and
+   * setter.
+   * @type {Number}
+   * @internal
+   */
+  _page: {
     state: true
   }
 });
-function definePaginationElements() {
-  defineButtonElements();
-  defineElement("pagination", LeuPagination);
-}
 
-export { LeuPagination, definePaginationElements };
+export { LeuPagination };

package/dist/Popup.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @tagname leu-popup
+ */
+export class LeuPopup extends LitElement {
+    anchorEl: any;
+    cleanup: () => void;
+    flip: boolean;
+    shift: boolean;
+    updated(changedProperties: any): void;
+    get popupEl(): Element;
+    start(): void;
+    stop(): void;
+    reposition(): void;
+    handleAnchorChange(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+import { LitElement } from 'lit';
+//# sourceMappingURL=Popup.d.ts.map

package/dist/Popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["Popup.js"],"names":[],"mappings":"AAuCA;;GAEG;AACH;IAGI,cAAoB;IACpB,oBAAwB;IACxB,cAAiB;IACjB,eAAkB;IAMpB,sCAcC;IACD,uBAEC;IACD,cAKC;IACD,aAIC;IACD,mBAiEC;IACD,2BAiBC;IACD,+CAOC;CACF;2BA9KqC,KAAK"}

package/dist/Popup.js

@@ -0,0 +1,215 @@
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
+import { css, LitElement, html } from 'lit';
+import { autoUpdate, size, flip, shift, computePosition } from '@floating-ui/dom';
+
+var css_248z = css`:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --popup-font-regular: var(--leu-font-family-regular);
+  --popup-font-black: var(--leu-font-family-black);
+
+  font-family: var(--leu-font-family-regular);
+
+  font-family: var(--popup-font-regular);
+}
+
+.popup {
+  display: none;
+
+  max-width: none;
+
+  max-width: var(--auto-size-available-width, none);
+  max-height: none;
+  max-height: var(--auto-size-available-height, none);
+
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/* TODO: Should visibility be a matter of the popup component? */
+
+:host([active]) .popup {
+  display: block;
+}
+`;
+
+/**
+ * @tagname leu-popup
+ */
+class LeuPopup extends LitElement {
+  constructor() {
+    super();
+    this.anchorEl = null;
+    this.cleanup = undefined;
+    this.flip = false;
+    this.shift = false;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stop();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("active")) {
+      if (this.active) {
+        this.start();
+      } else {
+        this.stop();
+      }
+    }
+    if (changedProperties.has("anchor")) {
+      this.handleAnchorChange();
+    }
+    if (this.active) {
+      this.reposition();
+    }
+  }
+  get popupEl() {
+    return this.renderRoot?.querySelector(".popup") ?? null;
+  }
+  start() {
+    if (!this.anchorEl || !this.active) return;
+    this.cleanup = autoUpdate(this.anchorEl, this.popupEl, () => {
+      this.reposition();
+    });
+  }
+  stop() {
+    this.cleanup?.();
+    this.style.removeProperty("--auto-size-available-width");
+    this.style.removeProperty("--auto-size-available-height");
+  }
+  reposition() {
+    if (!this.anchorEl || !this.popupEl || !this.active) return;
+    const middleware = [];
+    if (this.matchSize) {
+      middleware.push(size({
+        apply: ({
+          rects
+        }) => {
+          const matchWidth = this.matchSize === "width" || this.matchSize === "both";
+          const matchHeight = this.matchSize === "height" || this.matchSize === "both";
+          this.popupEl.style.width = matchWidth ? `${rects.reference.width}px` : "";
+          this.popupEl.style.height = matchHeight ? `${rects.reference.height}px` : "";
+        }
+      }));
+    } else {
+      // Cleanup styles if we're not matching width/height
+      this.popupEl.style.width = "";
+      this.popupEl.style.height = "";
+    }
+    if (this.flip) {
+      middleware.push(flip());
+    }
+    if (this.shift) {
+      middleware.push(shift({
+        padding: this.shiftPadding
+      }));
+    }
+    if (this.autoSize) {
+      middleware.push(size({
+        padding: this.autoSizePadding,
+        apply: ({
+          availableWidth,
+          availableHeight
+        }) => {
+          const setMaxWidth = this.autoSize === "width" || this.autoSize === "both";
+          const setMaxHeight = this.autoSize === "height" || this.autoSize === "both";
+          if (setMaxHeight) {
+            this.style.setProperty("--auto-size-available-height", `${availableHeight}px`);
+          } else {
+            this.style.removeProperty("--auto-size-available-height");
+          }
+          if (setMaxWidth) {
+            this.style.setProperty("--auto-size-available-width", `${availableWidth}px`);
+          } else {
+            this.style.removeProperty("--auto-size-available-width");
+          }
+        }
+      }));
+    } else {
+      // Cleanup styles if we're not auto-sizing
+      this.style.removeProperty("--auto-size-available-width");
+      this.style.removeProperty("--auto-size-available-height");
+    }
+    computePosition(this.anchorEl, this.popupEl, {
+      placement: this.placement,
+      middleware
+    }).then(({
+      x,
+      y
+    }) => {
+      Object.assign(this.popupEl.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+    });
+  }
+  handleAnchorChange() {
+    if (this.anchor && typeof this.anchor === "string") {
+      const root = this.getRootNode();
+      this.anchorEl = root.getElementById(this.anchor);
+    } else if (this.anchor instanceof HTMLElement) {
+      this.anchorEl = this.anchor;
+    } else {
+      this.anchorEl = this.querySelector("[slot=anchor]");
+    }
+    if (this.anchorEl instanceof HTMLSlotElement) {
+      [this.anchorEl] = this.anchorEl.assignedElements({
+        flatten: true
+      });
+    }
+    if (this.anchorEl) {
+      this.start();
+    }
+  }
+  render() {
+    return html`
+      <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
+      <div class="popup">
+        <slot> </slot>
+      </div>
+    `;
+  }
+}
+_defineProperty(LeuPopup, "styles", css_248z);
+_defineProperty(LeuPopup, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_defineProperty(LeuPopup, "properties", {
+  anchor: {},
+  active: {
+    type: Boolean
+  },
+  /**
+   * @type {"top"|"top-start"|"top-end"|"bottom"|"bottom-start"|"bottom-end"|"left"|"left-start"|"left-end"|"right"|"right-start"|"right-end"}
+   */
+  placement: {
+    type: String
+  },
+  flip: {
+    type: Boolean
+  },
+  shift: {
+    type: Boolean
+  },
+  shiftPadding: {
+    type: Number
+  },
+  /** @type {"width" | "height" | "both"} */
+  matchSize: {
+    type: String
+  },
+  /** @type {"width" | "height" | "both"} */
+  autoSize: {
+    type: String
+  },
+  autoSizePadding: {
+    type: Number
+  }
+});
+
+export { LeuPopup };

package/dist/Radio.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @tagname leu-radio
+ */
+export class LeuRadio extends LitElement {
+    checked: boolean;
+    disabled: boolean;
+    handleChange(event: any): void;
+    handleInput(event: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+import { LitElement } from 'lit';
+//# sourceMappingURL=Radio.d.ts.map

package/dist/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["Radio.js"],"names":[],"mappings":"AAgGA;;GAEG;AACH;IAGI,iBAAoB;IACpB,kBAAqB;IAEvB,+BAIC;IACD,8BAEC;IACD,+CAeC;CACF;2BAhIqC,KAAK"}