@statistikzh/leu 0.3.0 → 0.4.0

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
@@ -258,7 +286,7 @@ _defineProperty(LeuTable, "properties", {
     type: Boolean,
     reflect: true
   },
-  itemsOnAPage: {
+  itemsPerPage: {
     type: Number,
     reflect: true
   },
@@ -275,25 +303,14 @@ _defineProperty(LeuTable, "properties", {
     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 };

package/dist/index.js

@@ -1,26 +1,36 @@
-export { BUTTON_EXPANDED_OPTIONS, BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS, LeuButton, defineButtonElements } from './Button.js';
-export { LeuButtonGroup, defineButtonGroupElements } from './ButtonGroup.js';
-export { LeuCheckbox, defineCheckboxElements } from './Checkbox.js';
-export { LeuCheckboxGroup, defineCheckboxGroupElements } from './CheckboxGroup.js';
-export { LeuChipGroup, defineChipGroupElements } from './ChipGroup.js';
-export { LeuChipLink, defineChipLinkElements } from './ChipLink.js';
-export { LeuChipRemovable, defineChipRemovableElements } from './ChipRemovable.js';
-export { LeuChipSelectable, defineChipSelectableElements } from './ChipSelectable.js';
-export { LeuDropdown, defineDropdownElements } from './Dropdown.js';
-export { LeuInput, SIZE_TYPES, defineInputElements } from './Input.js';
-export { LeuMenu, defineMenuElements } from './Menu.js';
-export { LeuMenuItem, defineMenuItemElements } from './MenuItem.js';
-export { LeuPagination, definePaginationElements } from './Pagination.js';
-export { LeuRadio, defineRadioElements } from './Radio.js';
-export { LeuRadioGroup, defineRadioGroupElements } from './RadioGroup.js';
-export { LeuSelect, defineSelectElements } from './Select.js';
-export { LeuTable, defineTableElements } from './Table.js';
-import './defineElement-ba770aed.js';
+export { BUTTON_EXPANDED_OPTIONS, BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS, LeuButton } from './Button.js';
+export { LeuButtonGroup } from './ButtonGroup.js';
+export { LeuCheckbox } from './Checkbox.js';
+export { LeuCheckboxGroup } from './CheckboxGroup.js';
+export { LeuChipGroup } from './ChipGroup.js';
+export { LeuChipLink } from './ChipLink.js';
+export { LeuChipRemovable } from './ChipRemovable.js';
+export { LeuChipSelectable } from './ChipSelectable.js';
+export { LeuDropdown } from './Dropdown.js';
+export { LeuInput, SIZE_TYPES } from './Input.js';
+export { LeuMenu } from './Menu.js';
+export { LeuMenuItem } from './MenuItem.js';
+export { LeuPagination } from './Pagination.js';
+export { LeuRadio } from './Radio.js';
+export { LeuRadioGroup } from './RadioGroup.js';
+export { LeuSelect } from './Select.js';
+export { LeuTable } from './Table.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import './icon-03e86700.js';
-import './Chip-5f70d04f.js';
+import './leu-button.js';
+import './defineElement-47d4f665.js';
+import './Chip-dac7337d.js';
+import './leu-menu.js';
+import './leu-menu-item.js';
+import './leu-popup-4bf6f1f4.js';
+import '@floating-ui/dom';
 import 'lit/directives/if-defined.js';
+import 'lit/directives/live.js';
 import 'lit/directives/ref.js';
+import 'lit/static-html.js';
 import 'lit/directives/map.js';
+import './leu-input.js';
 import 'lit/directives/style-map.js';
+import './leu-pagination.js';

package/dist/leu-button-group.js

@@ -1,8 +1,12 @@
-import { defineButtonGroupElements } from './ButtonGroup.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuButtonGroup } from './ButtonGroup.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
+import './leu-button.js';
 import './Button.js';
 import 'lit/directives/class-map.js';
 import './icon-03e86700.js';
 
-defineButtonGroupElements();
+defineElement("button-group", LeuButtonGroup);
+
+export { LeuButtonGroup };

package/dist/leu-button.js

@@ -1,7 +1,10 @@
-import { defineButtonElements } from './Button.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuButton } from './Button.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import './icon-03e86700.js';
 
-defineButtonElements();
+defineElement("button", LeuButton);
+
+export { LeuButton };

package/dist/leu-checkbox-group.js

@@ -1,6 +1,9 @@
-import { defineCheckboxGroupElements } from './CheckboxGroup.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuCheckboxGroup } from './CheckboxGroup.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 
-defineCheckboxGroupElements();
+defineElement("checkbox-group", LeuCheckboxGroup);
+
+export { LeuCheckboxGroup };

package/dist/leu-checkbox.js

@@ -1,6 +1,9 @@
-import { defineCheckboxElements } from './Checkbox.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuCheckbox } from './Checkbox.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 import './icon-03e86700.js';
 
-defineCheckboxElements();
+defineElement("checkbox", LeuCheckbox);
+
+export { LeuCheckbox };

package/dist/leu-chip-group.js

@@ -1,5 +1,8 @@
-import { defineChipGroupElements } from './ChipGroup.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuChipGroup } from './ChipGroup.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 
-defineChipGroupElements();
+defineElement("chip-group", LeuChipGroup);
+
+export { LeuChipGroup };

package/dist/leu-chip-link.js

@@ -1,6 +1,9 @@
-import { defineChipLinkElements } from './ChipLink.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuChipLink } from './ChipLink.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
-import './Chip-5f70d04f.js';
+import './Chip-dac7337d.js';
 
-defineChipLinkElements();
+defineElement("chip-link", LeuChipLink);
+
+export { LeuChipLink };

package/dist/leu-chip-removable.js

@@ -1,7 +1,10 @@
-import { defineChipRemovableElements } from './ChipRemovable.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuChipRemovable } from './ChipRemovable.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
-import './Chip-5f70d04f.js';
+import './Chip-dac7337d.js';
 import './icon-03e86700.js';
 
-defineChipRemovableElements();
+defineElement("chip-removable", LeuChipRemovable);
+
+export { LeuChipRemovable };

package/dist/leu-chip-selectable.js

@@ -1,6 +1,9 @@
-import { defineChipSelectableElements } from './ChipSelectable.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuChipSelectable } from './ChipSelectable.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
-import './Chip-5f70d04f.js';
+import './Chip-dac7337d.js';
 
-defineChipSelectableElements();
+defineElement("chip-selectable", LeuChipSelectable);
+
+export { LeuChipSelectable };

package/dist/leu-dropdown.js

@@ -1,10 +1,20 @@
-import { defineDropdownElements } from './Dropdown.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuDropdown } from './Dropdown.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
+import './leu-button.js';
 import './Button.js';
 import 'lit/directives/class-map.js';
 import './icon-03e86700.js';
+import './leu-menu.js';
 import './Menu.js';
+import './leu-menu-item.js';
 import './MenuItem.js';
+import 'lit/static-html.js';
+import 'lit/directives/if-defined.js';
+import './leu-popup-4bf6f1f4.js';
+import '@floating-ui/dom';
 
-defineDropdownElements();
+defineElement("dropdown", LeuDropdown);
+
+export { LeuDropdown };

package/dist/leu-input.js

@@ -1,9 +1,13 @@
-import { defineInputElements } from './Input.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuInput } from './Input.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
+import 'lit/directives/live.js';
 import 'lit/directives/ref.js';
 import './icon-03e86700.js';
 
-defineInputElements();
+defineElement("input", LeuInput);
+
+export { LeuInput };

package/dist/leu-menu-item.js

@@ -1,6 +1,11 @@
-import { defineMenuItemElements } from './MenuItem.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuMenuItem } from './MenuItem.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
+import 'lit/static-html.js';
+import 'lit/directives/if-defined.js';
 import './icon-03e86700.js';
 
-defineMenuItemElements();
+defineElement("menu-item", LeuMenuItem);
+
+export { LeuMenuItem };

package/dist/leu-menu.js

@@ -1,5 +1,8 @@
-import { defineMenuElements } from './Menu.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuMenu } from './Menu.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 
-defineMenuElements();
+defineElement("menu", LeuMenu);
+
+export { LeuMenu };

package/dist/leu-pagination.js

@@ -1,8 +1,13 @@
-import { definePaginationElements } from './Pagination.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuPagination } from './Pagination.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
+import 'lit/directives/live.js';
+import './leu-button.js';
 import './Button.js';
 import 'lit/directives/class-map.js';
 import './icon-03e86700.js';
 
-definePaginationElements();
+defineElement("pagination", LeuPagination);
+
+export { LeuPagination };