@statistikzh/leu 0.3.0 → 0.4.0

package/dist/Pagination.js

@@ -1,6 +1,9 @@
-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 './defineElement-47d4f665.js';
+import './Button.js';
 import 'lit/directives/class-map.js';
 import './icon-03e86700.js';
 
@@ -71,36 +74,47 @@ class LeuPagination extends LitElement {
     /** @type {number} */
     this.page = 1;
     /** @type {number} */
-    this.dataLength = 0;
+    this.numOfItems = 1;
     /** @type {number} */
-    this.itemsOnAPage = 30;
+    this.itemsPerPage = 1;
   }
   get maxPage() {
-    return Math.ceil(this.dataLength / this.itemsOnAPage);
+    return Math.ceil(this.numOfItems / this.itemsPerPage);
   }
   get firstPage() {
-    return this.page === MIN_PAGE;
+    return this.boundPage === MIN_PAGE;
   }
   get lastPage() {
-    return this.page === this.maxPage;
+    return this.boundPage === this.maxPage;
   }
-  holdInRange(value) {
-    return Math.min(Math.max(value, MIN_PAGE), this.maxPage);
+
+  /**
+   * The boundPage getter is necessary to ensure that the current page (this.page) is always within the valid range of pages.
+   * It prevents the page number from going below the minimum page limit (MIN_PAGE) or above the maximum page limit (this.maxPage).
+   * This is important for the correct functioning of the pagination system, as it prevents users from navigating to non-existent pages.
+   *
+   * @returns {number}
+   */
+  get boundPage() {
+    return Math.min(Math.max(this.page, 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
-    }));
+    const prevPage = this.page;
+    this.page = number;
+    if (this.page !== prevPage) {
+      const startIndex = (this.boundPage - 1) * this.itemsPerPage;
+      const endIndex = Math.min(startIndex + this.itemsPerPage, this.numOfItems);
+      this.dispatchEvent(new CustomEvent("leu:pagechange", {
+        detail: {
+          startIndex,
+          endIndex,
+          page: this.boundPage
+        },
+        bubbles: false
+      }));
+    }
   }
   change(event) {
-    // target.value = this.page // eslint-disable-line
     this.numberUpdate(parseInt(event.target.value, 10) || 0);
   }
   input(event) {
@@ -110,35 +124,22 @@ class LeuPagination extends LitElement {
     }
   }
   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)) {
+    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.numberUpdate(this.boundPage + 1);
     }
-  }
-  firstUpdated() {
-    this.numberUpdate(this.page);
-  }
-  requestUpdate(name, oldValue, newValue) {
-    if (name === "itemsOnAPage") {
-      this.numberUpdate(this.page);
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      this.numberUpdate(this.boundPage - 1);
     }
-    return super.requestUpdate(name, oldValue, newValue);
   }
   render() {
     return html`
       <input
         class="input"
-        .value=${this.page}
+        min=${MIN_PAGE}
+        max=${this.maxPage}
+        .value=${live(this.boundPage.toString())}
         @input=${this.input}
         @change=${this.change}
         @keydown=${this.keydown}
@@ -149,7 +150,7 @@ class LeuPagination extends LitElement {
         icon="angleLeft"
         variant="secondary"
         @click=${_ => {
-      this.numberUpdate(this.page - 1);
+      this.numberUpdate(this.boundPage - 1);
     }}
         ?disabled=${this.firstPage}
       ></leu-button>
@@ -157,7 +158,7 @@ class LeuPagination extends LitElement {
         icon="angleRight"
         variant="secondary"
         @click=${_ => {
-      this.numberUpdate(this.page + 1);
+      this.numberUpdate(this.boundPage + 1);
     }}
         ?disabled=${this.lastPage}
         style="margin-left:4px;"
@@ -166,6 +167,13 @@ class LeuPagination extends LitElement {
   }
 }
 _defineProperty(LeuPagination, "styles", css_248z);
+/**
+ * @internal
+ */
+_defineProperty(LeuPagination, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+});
 _defineProperty(LeuPagination, "events", {
   range: {}
 });
@@ -174,22 +182,14 @@ _defineProperty(LeuPagination, "properties", {
     type: Number,
     reflect: true
   },
-  itemsOnAPage: {
+  itemsPerPage: {
     type: Number,
     reflect: true
   },
-  dataLength: {
+  numOfItems: {
     type: Number,
     reflect: true
-  },
-  _minPage: {
-    type: Number,
-    state: true
   }
 });
-function definePaginationElements() {
-  defineButtonElements();
-  defineElement("pagination", LeuPagination);
-}
 
-export { LeuPagination, definePaginationElements };
+export { LeuPagination };

package/dist/Radio.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { css, LitElement, html } from 'lit';
 
 var css_248z = css`:host {
@@ -124,7 +124,7 @@ class LeuRadio extends LitElement {
         ?disabled=${this.disabled}
         .value=${this.value}
       />
-      <label for=${this.identifier} class="label"><slot></slot></label>
+      <label for=${this.identifier} class="label">${this.label}</label>
     `;
   }
 }
@@ -153,10 +153,11 @@ _defineProperty(LeuRadio, "properties", {
   name: {
     type: String,
     reflect: true
+  },
+  label: {
+    type: String,
+    reflect: true
   }
 });
-function defineRadioElements() {
-  defineElement("radio", LeuRadio);
-}
 
-export { LeuRadio, defineRadioElements };
+export { LeuRadio };

package/dist/RadioGroup.js

@@ -1,7 +1,40 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { css, LitElement, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 
+var css_248z = css`:host {
+  --group-font-regular: var(--leu-font-regular);
+  --group-font-black: var(--leu-font-black);
+
+  font-family: var(--leu-font-regular);
+
+  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;
+}
+`;
+
 /**
  * @tagname leu-radio-group
  */
@@ -73,7 +106,6 @@ class LeuRadioGroup extends LitElement {
       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) {
@@ -97,7 +129,6 @@ class LeuRadioGroup extends LitElement {
       }
     });
   }
-
   handleItems() {
     this.items = [...this.querySelectorAll(":scope > *:not([slot])")];
     this.initializeIndex();
@@ -115,51 +146,22 @@ class LeuRadioGroup extends LitElement {
     };
     return html`
       <fieldset class=${classMap(fieldsetClasses)}>
-        <legend class="legend"><slot name="legend"></slot></legend>
+        <legend class="legend">${this.label}</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, "styles", css_248z);
 _defineProperty(LeuRadioGroup, "properties", {
   orientation: {
     type: String,
     reflect: true
+  },
+  label: {
+    type: String,
+    reflect: true
   }
 });
-function defineRadioGroupElements() {
-  defineElement("radio-group", LeuRadioGroup);
-}
 
-export { LeuRadioGroup, defineRadioGroupElements };
+export { LeuRadioGroup };

package/dist/Select.js

@@ -1,14 +1,23 @@
-import { _ as _defineProperty, d as defineElement } from './defineElement-ba770aed.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
 import { css, LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { map } from 'lit/directives/map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { I as Icon } from './icon-03e86700.js';
-import { defineButtonElements } from './Button.js';
-import { defineMenuElements } from './Menu.js';
-import { defineMenuItemElements } from './MenuItem.js';
-import { defineInputElements } from './Input.js';
+import './leu-button.js';
+import './leu-menu.js';
+import './leu-menu-item.js';
+import './leu-input.js';
+import './leu-popup-4bf6f1f4.js';
+import './defineElement-47d4f665.js';
+import './Button.js';
+import './Menu.js';
+import './MenuItem.js';
+import 'lit/static-html.js';
+import './Input.js';
+import 'lit/directives/live.js';
+import '@floating-ui/dom';
 
 /**
  * Thanks Shoelace!
@@ -262,18 +271,22 @@ var css_248z = css`:host,
 }
 
 .select-menu-container {
-  border-radius: 1px;
-  position: absolute;
-  left: 0;
+  position: static;
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+
   width: 100%;
-  background-color: white;
-  border: 0 solid black;
+  max-height: var(--auto-size-available-height);
+
   padding: 0;
   margin: 0;
-  top: calc(100% + 2px);
-  z-index: 10;
+
+  border: none;
+  border-radius: 1px;
+  background-color: white;
   box-shadow: var(--select-box-shadow-regular), var(--select-box-shadow-short);
-  overflow: auto;
 }
 
 .select-menu {
@@ -281,11 +294,7 @@ var css_248z = css`:host,
   padding: 0;
   margin: 0;
   overflow: auto;
-  max-height: 24rem;
-}
-
-.select-menu.multiple {
-  max-height: 21rem;
+  max-height: 100%;
 }
 
 .before,
@@ -351,7 +360,6 @@ class LeuSelect extends LitElement {
         reflect: true
       },
       optionFilter: {
-        type: String,
         state: true
       }
     };
@@ -534,14 +542,15 @@ class LeuSelect extends LitElement {
                 before=${ifDefined(beforeIcon)}
                 @click=${() => this.selectOption(option)}
                 role="option"
+                label=${LeuSelect.getOptionLabel(option)}
                 ?active=${isSelected}
                 aria-selected=${isSelected}
               >
-                ${LeuSelect.getOptionLabel(option)}
               </leu-menu-item>`;
-    }) : html`<leu-menu-item disabled
-              >${this.optionFilter === "" ? "Keine Optionen" : "Keine Resultate"}</leu-menu-item
-            >`}
+    }) : html`<leu-menu-item
+              label=${this.optionFilter === "" ? "Keine Optionen" : "Keine Resultate"}
+              disabled
+            ></leu-menu-item>`}
       </leu-menu>
     `;
   }
@@ -553,8 +562,8 @@ class LeuSelect extends LitElement {
         @input=${this.handleFilterInput}
         clearable
         ref=${ref(this.optionFilterRef)}
-        >Nach Stichwort filtern</leu-input
-      >`;
+        label="Nach Stichwort filtern"
+      ></leu-input>`;
     }
     return nothing;
   }
@@ -588,6 +597,7 @@ class LeuSelect extends LitElement {
       aria-expanded="${this.open}"
       role="combobox"
       ref=${ref(this.toggleButtonRef)}
+      slot="anchor"
     >
       <span class="label" id="select-label">${this.label}</span>
       <span class="value"> ${this.getDisplayValue(this.value)} </span>
@@ -616,27 +626,29 @@ class LeuSelect extends LitElement {
       aria-labelledby="select-label"
       @keydown=${this.handleKeyDown}
     >
-      ${this.renderToggleButton()}
-      <dialog
-        id="select-dialog"
-        class="select-menu-container"
-        ?open=${this.open}
+      <leu-popup
+        ?active=${this.open}
+        placement="bottom-start"
+        flip
+        matchSize="width"
+        autoSize="height"
+        autoSizePadding="8"
       >
-        <slot name="before" class="before"></slot>
-        ${this.renderFilterInput()} ${this.renderMenu()}
-        ${this.renderApplyButton()}
-        <slot name="after" class="after"></slot>
-      </dialog>
+        ${this.renderToggleButton()}
+        <dialog
+          id="select-dialog"
+          class="select-menu-container"
+          ?open=${this.open}
+        >
+          <slot name="before" class="before"></slot>
+          ${this.renderFilterInput()} ${this.renderMenu()}
+          ${this.renderApplyButton()}
+          <slot name="after" class="after"></slot>
+        </dialog>
+      </leu-popup>
     </div> `;
   }
 }
 _defineProperty(LeuSelect, "styles", css_248z);
-function defineSelectElements() {
-  defineButtonElements();
-  defineMenuElements();
-  defineMenuItemElements();
-  defineInputElements();
-  defineElement("select", LeuSelect);
-}
 
-export { LeuSelect, defineSelectElements };
+export { LeuSelect };