@statistikzh/leu 0.24.2 → 0.26.0

package/dist/Spinner-DDTqijTO.js

@@ -0,0 +1,56 @@
+import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { css, html } from "lit";
+//#region src/components/spinner/spinner.css?inline
+var spinner_default = css`@keyframes leu-spinner-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+:host {
+  color: var(--leu-color-func-cyan);
+}
+
+.spinner {
+  display: block;
+  width: 3.5rem;
+  width: var(--leu-spinner-size, 3.5rem);
+  height: 3.5rem;
+  height: var(--leu-spinner-size, 3.5rem);
+  animation: leu-spinner-rotate 1s cubic-bezier(0.49, 0.12, 0.56, 0.91) infinite;
+}
+`;
+//#endregion
+//#region src/components/spinner/Spinner.ts
+/**
+* @tagname leu-spinner
+* @cssprop --leu-spinner-size - The size of the spinner.
+*/
+var LeuSpinner = class extends LeuElement {
+	static {
+		this.styles = [LeuElement.styles, spinner_default];
+	}
+	render() {
+		return html`
+      <svg
+        class="spinner"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 56 56"
+        role="presentation"
+      >
+        <path
+          d="M13.8579 13.858c7.8105-7.8105 20.4737-7.8105 28.2842 0 7.8105 7.8104 7.8105 20.4737 0 28.2842-7.8105 7.8105-20.4737 7.8105-28.2842 0-4.3487-4.3486-6.2761-10.2016-5.7824-15.8838"
+          stroke="currentColor"
+          stroke-width="3"
+        />
+      </svg>
+    `;
+	}
+};
+//#endregion
+export { LeuSpinner as t };

package/dist/Spinner.d.ts

@@ -1,14 +1,2 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
-
-/**
- * @tagname leu-spinner
- * @cssprop --leu-spinner-size - The size of the spinner.
- */
-declare class LeuSpinner extends LeuElement {
-    static styles: lit.CSSResultGroup[];
-    render(): lit_html.TemplateResult<1>;
-}
-
-export { LeuSpinner };
+import { t as LeuSpinner } from "./Spinner-CrM1enM0.js";
+export { LeuSpinner };

package/dist/Spinner.js

@@ -1,53 +1,3 @@
-import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
-
-var css_248z = css`@keyframes leu-spinner-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-:host {
-  color: var(--leu-color-func-cyan);
-}
-
-.spinner {
-  display: block;
-  width: 3.5rem;
-  width: var(--leu-spinner-size, 3.5rem);
-  height: 3.5rem;
-  height: var(--leu-spinner-size, 3.5rem);
-  animation: leu-spinner-rotate 1s cubic-bezier(0.49, 0.12, 0.56, 0.91) infinite;
-}
-`;
-
-/**
- * @tagname leu-spinner
- * @cssprop --leu-spinner-size - The size of the spinner.
- */
-class LeuSpinner extends LeuElement {
-    render() {
-        return html `
-      <svg
-        class="spinner"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 56 56"
-        role="presentation"
-      >
-        <path
-          d="M13.8579 13.858c7.8105-7.8105 20.4737-7.8105 28.2842 0 7.8105 7.8104 7.8105 20.4737 0 28.2842-7.8105 7.8105-20.4737 7.8105-28.2842 0-4.3487-4.3486-6.2761-10.2016-5.7824-15.8838"
-          stroke="currentColor"
-          stroke-width="3"
-        />
-      </svg>
-    `;
-    }
-}
-LeuSpinner.styles = [LeuElement.styles, css_248z];
-
+import "./LeuElement-BeFrgKes.js";
+import { t as LeuSpinner } from "./Spinner-DDTqijTO.js";
 export { LeuSpinner };

package/dist/Table-BgCxfBcm.js

@@ -0,0 +1,392 @@
+import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as LeuIcon } from "./Icon-C_yYuynf.js";
+import { t as LeuPagination } from "./Pagination-DJI5MIi_.js";
+import { css, html, noChange, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { Directive, PartType, directive } from "lit/directive.js";
+//#region src/lib/styleMap.ts
+/**
+* The original lit styleMap directive is not compatible with a strict style-src content security policy.
+* There is an an open issue about this in the lit repository:
+* https://github.com/lit/lit/issues/4719
+*
+* This file contains a custom implementation of the styleMap directive that bypasses
+* the render method and directly updates the styles using the .style.setProperty and
+* .style.removeProperty methods.
+*
+* In the original implementation, the render method returns a string that is set as the
+* value of the style attribute. This approach is blocked by strict CSPs that disallow
+* inline styles.
+*
+* As we don't support SSR in this library, we can safely skip the render method.
+*/
+const important = "important";
+const importantFlag = " !" + important;
+const flagTrim = -11;
+var StyleMapDirective = class extends Directive {
+	constructor(partInfo) {
+		super(partInfo);
+		if (partInfo.type !== PartType.ATTRIBUTE || partInfo.name !== "style" || partInfo.strings?.length > 2) throw new Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
+	}
+	render(_styleInfo) {
+		return nothing;
+	}
+	update(part, [styleInfo]) {
+		const { style } = part.element;
+		if (this._previousStyleProperties === void 0) this._previousStyleProperties = new Set(Object.keys(styleInfo));
+		for (const name of this._previousStyleProperties) if (styleInfo[name] == null) {
+			this._previousStyleProperties.delete(name);
+			if (name.includes("-")) style.removeProperty(name);
+			else style[name] = null;
+		}
+		for (const name in styleInfo) {
+			const value = styleInfo[name];
+			if (value != null) {
+				this._previousStyleProperties.add(name);
+				const isImportant = typeof value === "string" && value.endsWith(importantFlag);
+				if (name.includes("-") || isImportant) style.setProperty(name, isImportant ? value.slice(0, flagTrim) : value, isImportant ? important : "");
+				else style[name] = value;
+			}
+		}
+		return noChange;
+	}
+};
+/**
+* !A custom implementation of lit's `styleMap` directive!
+* A directive that applies CSS properties to an element.
+*
+* `styleMap` can only be used in the `style` attribute and must be the only
+* expression in the attribute. It takes the property names in the
+* {@link StyleInfo styleInfo} object and adds the properties to the inline
+* style of the element.
+*
+* Property names with dashes (`-`) are assumed to be valid CSS
+* property names and set on the element's style object using `setProperty()`.
+* Names without dashes are assumed to be camelCased JavaScript property names
+* and set on the element's style object using property assignment, allowing the
+* style object to translate JavaScript-style names to CSS property names.
+*
+* For example `styleMap({backgroundColor: 'red', 'border-top': '5px', '--size':
+* '0'})` sets the `background-color`, `border-top` and `--size` properties.
+*
+* @param styleInfo
+* @see {@link https://lit.dev/docs/templates/directives/#stylemap styleMap code samples on Lit.dev}
+*/
+const styleMap = directive(StyleMapDirective);
+//#endregion
+//#region src/components/table/table.css?inline
+var table_default = 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-family-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-family-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;
+  font-size: inherit;
+  font-family: inherit;
+  color: inherit;
+}
+
+button span {
+  vertical-align: bottom;
+}
+
+button leu-icon {
+  --leu-icon-size: 1.25rem;
+  display: inline-block;
+  padding: 0;
+  opacity: 0;
+  vertical-align: bottom;
+}
+
+button:hover leu-icon {
+  opacity: 1;
+}
+
+button.active leu-icon {
+  color: var(--leu-color-accent-blue);
+  opacity: 1;
+}
+
+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);
+  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);
+}
+`;
+//#endregion
+//#region src/components/table/Table.ts
+/**
+* @tagname leu-table
+*/
+var LeuTable = class extends LeuElement {
+	static {
+		this.dependencies = {
+			"leu-icon": LeuIcon,
+			"leu-pagination": LeuPagination
+		};
+	}
+	static {
+		this.styles = [LeuElement.styles, table_default];
+	}
+	static {
+		this.properties = {
+			columns: { type: Array },
+			data: { type: Array },
+			firstColumnSticky: {
+				type: Boolean,
+				reflect: true
+			},
+			itemsPerPage: {
+				type: Number,
+				reflect: true
+			},
+			sortIndex: {
+				type: Number,
+				reflect: true
+			},
+			sortOrderAsc: {
+				type: Boolean,
+				reflect: true
+			},
+			width: {
+				type: Number,
+				reflect: true
+			},
+			_shadowLeft: { state: true },
+			_shadowRight: { state: true },
+			_page: { state: true }
+		};
+	}
+	constructor() {
+		super();
+		/** @type {array} */
+		this.columns = [];
+		/** @type {array} */
+		this.data = [];
+		/** @type {boolean} */
+		this.firstColumnSticky = false;
+		/** @type {number} */
+		this.itemsPerPage = null;
+		/** @type {number} */
+		this.sortIndex = null;
+		/** @type {boolean} */
+		this.sortOrderAsc = false;
+		/** @type {number} */
+		this.width = null;
+		/** @internal */
+		this._shadowLeft = false;
+		/** @internal */
+		this._shadowRight = false;
+		/** @internal */
+		this._scrollRef = createRef();
+		/** @internal */
+		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;
+		this._shadowRight = target.scrollLeftMax > 0 && target.scrollLeft < target.scrollLeftMax;
+	}
+	scrollEvent(event) {
+		this.shadowToggle(event.target);
+	}
+	isOnePropNotValid() {
+		if (!this._columns) return "Der Parameter 'columns' ist erforderlich !";
+		if (!this._sortedData) return "Der Parameter 'data' ist erforderlich !";
+		return null;
+	}
+	isSorted(col) {
+		return this.sortIndex === this._columns.indexOf(col);
+	}
+	sortClick(col) {
+		const index = this._columns.indexOf(col);
+		if (this.sortIndex === index) this.sortOrderAsc = !this.sortOrderAsc;
+		else {
+			this.sortIndex = index;
+			this.sortOrderAsc = false;
+		}
+	}
+	sortArrowIcon() {
+		return html`<leu-icon
+      name=${this.sortOrderAsc ? "arrowDown" : "arrowUp"}
+    ></leu-icon>`;
+	}
+	get _columns() {
+		return this.columns;
+	}
+	get _sortedData() {
+		if (this.sortIndex === null || this.sortIndex === void 0) return this.data;
+		const col = this._columns[this.sortIndex];
+		return this.data.sort(this.sortOrderAsc ? col.sort.asc : col.sort.desc);
+	}
+	get _data() {
+		return this.itemsPerPage && this.itemsPerPage > 0 ? this._sortedData.slice((this._page - 1) * this.itemsPerPage, this._page * this.itemsPerPage) : this._sortedData;
+	}
+	render() {
+		const scrollClasses = {
+			scroll: true,
+			"shadow-left": this.firstColumnSticky && this._shadowLeft
+		};
+		const shadowClassesLeft = {
+			shadow: true,
+			"shadow-left": !this.firstColumnSticky && this._shadowLeft,
+			pagination: this.itemsPerPage > 0
+		};
+		const shadowClassesRight = {
+			shadow: true,
+			"shadow-right": this._shadowRight,
+			pagination: this.itemsPerPage > 0
+		};
+		const stickyClass = { sticky: this.firstColumnSticky };
+		function headerStyle(col) {
+			if (col.headerStyle) return styleMap({
+				...col.headerStyle(),
+				textAlign: col.align === "right" ? "right" : void 0
+			});
+			return col.align === "right" ? styleMap({ textAlign: "right" }) : nothing;
+		}
+		function bodyStyle(col, row) {
+			if (col.style) return styleMap({
+				...col.style(row),
+				textAlign: col.align === "right" ? "right" : void 0
+			});
+			return col.align === "right" ? styleMap({ textAlign: "right" }) : nothing;
+		}
+		return html`
+      <div
+        class=${classMap(scrollClasses)}
+        @scroll="${this.scrollEvent}"
+        ref=${ref(this._scrollRef)}
+      >
+        <table class=${classMap(stickyClass)}>
+          <thead>
+            <tr>
+              ${this._columns.map((col) => html`<th style=${headerStyle(col)}>
+                    ${col.sort ? html`<button
+                          @click=${(_) => this.sortClick(col)}
+                          class=${this.isSorted(col) ? "active" : nothing}
+                        >
+                          ${col.align === "right" ? this.sortArrowIcon() : nothing}
+                          <span>${col.name}</span>
+                          ${col.align !== "right" ? this.sortArrowIcon() : nothing}
+                        </button>` : col.name}
+                  </th>`)}
+            </tr>
+          </thead>
+          <tbody>
+            ${this._data.map((row) => html`<tr>
+                  ${this._columns.map((col) => html`<td style=${bodyStyle(col, row)}>
+                        ${col.value(row)}
+                      </td>`)}
+                </tr>`)}
+          </tbody>
+        </table>
+        <div class=${classMap(shadowClassesLeft)}></div>
+        <div class=${classMap(shadowClassesRight)}></div>
+      </div>
+
+      ${this.itemsPerPage > 0 ? html`
+            <leu-pagination
+              .numOfItems=${this._sortedData.length}
+              .itemsPerPage=${this.itemsPerPage}
+              page=${this._page}
+              @leu:pagechange=${(e) => {
+			this._page = e.detail.page;
+		}}
+            >
+            </leu-pagination>
+          ` : nothing}
+    `;
+	}
+};
+//#endregion
+export { LeuTable as t };

package/dist/Table.d.ts

@@ -1,71 +1,69 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
-import { L as LeuIcon } from './Icon.d-itcQ94ym.js';
-import { LeuPagination } from './Pagination.js';
-import './Button.js';
-import './VisuallyHidden.js';
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as LeuIcon } from "./Icon-Op80LrrO.js";
+import { t as LeuPagination } from "./Pagination-CqkHh-Vd.js";
+import * as lit_html0 from "lit-html";
 
+//#region src/components/table/Table.d.ts
 /**
  * @tagname leu-table
  */
 declare class LeuTable extends LeuElement {
-    static dependencies: {
-        "leu-icon": typeof LeuIcon;
-        "leu-pagination": typeof LeuPagination;
+  static dependencies: {
+    "leu-icon": typeof LeuIcon;
+    "leu-pagination": typeof LeuPagination;
+  };
+  static styles: any[];
+  static properties: {
+    columns: {
+      type: ArrayConstructor;
     };
-    static styles: lit.CSSResultGroup[];
-    static properties: {
-        columns: {
-            type: ArrayConstructor;
-        };
-        data: {
-            type: ArrayConstructor;
-        };
-        firstColumnSticky: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        itemsPerPage: {
-            type: NumberConstructor;
-            reflect: boolean;
-        };
-        sortIndex: {
-            type: NumberConstructor;
-            reflect: boolean;
-        };
-        sortOrderAsc: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        width: {
-            type: NumberConstructor;
-            reflect: boolean;
-        };
-        _shadowLeft: {
-            state: boolean;
-        };
-        _shadowRight: {
-            state: boolean;
-        };
-        _page: {
-            state: boolean;
-        };
+    data: {
+      type: ArrayConstructor;
     };
-    constructor();
-    disconnectedCallback(): void;
-    attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
-    firstUpdated(): void;
-    shadowToggle(target: any): void;
-    scrollEvent(event: any): void;
-    isOnePropNotValid(): "Der Parameter 'columns' ist erforderlich !" | "Der Parameter 'data' ist erforderlich !";
-    isSorted(col: any): boolean;
-    sortClick(col: any): void;
-    sortArrowIcon(): lit_html.TemplateResult<1>;
-    get _columns(): any;
-    get _sortedData(): any;
-    get _data(): any;
-    render(): lit_html.TemplateResult<1>;
+    firstColumnSticky: {
+      type: BooleanConstructor;
+      reflect: boolean;
+    };
+    itemsPerPage: {
+      type: NumberConstructor;
+      reflect: boolean;
+    };
+    sortIndex: {
+      type: NumberConstructor;
+      reflect: boolean;
+    };
+    sortOrderAsc: {
+      type: BooleanConstructor;
+      reflect: boolean;
+    };
+    width: {
+      type: NumberConstructor;
+      reflect: boolean;
+    };
+    _shadowLeft: {
+      state: boolean;
+    };
+    _shadowRight: {
+      state: boolean;
+    };
+    _page: {
+      state: boolean;
+    };
+  };
+  constructor();
+  disconnectedCallback(): void;
+  attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
+  firstUpdated(): void;
+  shadowToggle(target: any): void;
+  scrollEvent(event: any): void;
+  isOnePropNotValid(): "Der Parameter 'columns' ist erforderlich !" | "Der Parameter 'data' ist erforderlich !";
+  isSorted(col: any): boolean;
+  sortClick(col: any): void;
+  sortArrowIcon(): lit_html0.TemplateResult<1>;
+  get _columns(): any;
+  get _sortedData(): any;
+  get _data(): any;
+  render(): lit_html0.TemplateResult<1>;
 }
-
-export { LeuTable };
+//#endregion
+export { LeuTable };