@statistikzh/leu 0.2.0 → 0.4.0

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,50 +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
+    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,
@@ -325,7 +334,8 @@ class LeuSelect extends LitElement {
         attribute: "open"
       },
       label: {
-        type: String
+        type: String,
+        reflect: true
       },
       options: {
         type: Array
@@ -350,7 +360,6 @@ class LeuSelect extends LitElement {
         reflect: true
       },
       optionFilter: {
-        type: String,
         state: true
       }
     };
@@ -533,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>
     `;
   }
@@ -552,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;
   }
@@ -587,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>
@@ -615,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 };

package/dist/Table.js

@@ -1,12 +1,118 @@
-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 { styleMap } from 'lit/directives/style-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { I as Icon } from './icon-03e86700.js';
-import { definePaginationElements } from './Pagination.js';
+import './leu-pagination.js';
+import './defineElement-47d4f665.js';
+import './Pagination.js';
+import 'lit/directives/live.js';
+import './leu-button.js';
 import './Button.js';
 
+var css_248z = 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: rgba(0, 0, 0, 0.6);
+  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 rgba(0, 0, 0, 0.5);
+  -webkit-clip-path: inset(0 -15px 0 0);
+          clip-path: inset(0 -15px 0 0);
+}
+
+div.shadow-left {
+  box-shadow: inset 5px 0 5px -5px rgba(0, 0, 0, 0.5);
+}
+
+div.shadow-right {
+  box-shadow: inset -5px 0 5px -5px rgba(0, 0, 0, 0.5);
+}
+`;
+
 /**
  * @tagname leu-table
  */
@@ -20,7 +126,7 @@ class LeuTable extends LitElement {
     /** @type {boolean} */
     this.firstColumnSticky = false;
     /** @type {number} */
-    this.itemsOnAPage = null;
+    this.itemsPerPage = null;
     /** @type {number} */
     this.sortIndex = null;
     /** @type {boolean} */
@@ -38,13 +144,25 @@ class LeuTable extends LitElement {
     this._shadowRight = false;
     /** @internal */
     this._scrollRef = createRef();
+
     /** @internal */
-    this._min = 0;
-    /** @internal */
-    this._max = null;
+    this._page = 1;
+    this._resizeObserver = new ResizeObserver(() => {
+      this.shadowToggle(this._scrollRef.value);
+    });
+  }
+  disconnectedCallback() {
+    this._resizeObserver.disconnect();
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal);
+    if (name === "itemsperpage" || name === "data") {
+      this._page = 1;
+    }
   }
   firstUpdated() {
     this.shadowToggle(this._scrollRef.value);
+    this._resizeObserver.observe(this._scrollRef.value);
   }
   shadowToggle(target) {
     this._shadowLeft = target.scrollLeftMax > 0 && target.scrollLeft > 0;
@@ -91,7 +209,7 @@ class LeuTable extends LitElement {
     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;
+    return this.itemsPerPage && this.itemsPerPage > 0 ? this._sortedData.slice((this._page - 1) * this.itemsPerPage, this._page * this.itemsPerPage) : this._sortedData;
   }
   render() {
     const scrollClasses = {
@@ -101,12 +219,12 @@ class LeuTable extends LitElement {
     const shadowClassesLeft = {
       shadow: true,
       "shadow-left": !this.firstColumnSticky && this._shadowLeft,
-      pagination: this.itemsOnAPage > 0
+      pagination: this.itemsPerPage > 0
     };
     const shadowClassesRight = {
       shadow: true,
       "shadow-right": this._shadowRight,
-      pagination: this.itemsOnAPage > 0
+      pagination: this.itemsPerPage > 0
     };
     const stickyClass = {
       sticky: this.firstColumnSticky
@@ -142,17 +260,13 @@ class LeuTable extends LitElement {
         <div class=${classMap(shadowClassesRight)}></div>
       </div>
 
-      ${this.itemsOnAPage > 0 ? html`
+      ${this.itemsPerPage > 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);
+              .numOfItems=${this._sortedData.length}
+              .itemsPerPage=${this.itemsPerPage}
+              page=${this._page}
+              @leu:pagechange=${e => {
+      this._page = e.detail.page;
     }}
             >
             </leu-pagination>
@@ -160,93 +274,7 @@ class LeuTable extends LitElement {
     `;
   }
 }
-_defineProperty(LeuTable, "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%);
-    }
-  `);
+_defineProperty(LeuTable, "styles", css_248z);
 _defineProperty(LeuTable, "properties", {
   columns: {
     type: Array
@@ -255,40 +283,34 @@ _defineProperty(LeuTable, "properties", {
     type: Array
   },
   firstColumnSticky: {
-    type: Boolean
+    type: Boolean,
+    reflect: true
   },
-  itemsOnAPage: {
-    type: Number
+  itemsPerPage: {
+    type: Number,
+    reflect: true
   },
   sortIndex: {
-    type: Number
+    type: Number,
+    reflect: true
   },
   sortOrderAsc: {
-    type: Boolean
+    type: Boolean,
+    reflect: true
   },
   width: {
-    type: Number
+    type: Number,
+    reflect: true
   },
   _shadowLeft: {
-    type: Boolean,
     state: true
   },
   _shadowRight: {
-    type: Boolean,
-    state: true
-  },
-  _min: {
-    type: Number,
     state: true
   },
-  _max: {
-    type: Number,
+  _page: {
     state: true
   }
 });
-function defineTableElements() {
-  definePaginationElements();
-  defineElement("table", LeuTable);
-}
 
-export { LeuTable, defineTableElements };
+export { LeuTable };

package/dist/{defineElement-ba770aed.js → _rollupPluginBabelHelpers-20f659f4.js}

@@ -27,18 +27,4 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 
-/**
- * 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 { _defineProperty as _, defineElement as d };
+export { _defineProperty as _ };

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