@statistikzh/leu 0.24.1 → 0.25.0

package/dist/Table.js

@@ -1,428 +1,8 @@
-import { nothing, noChange, css, html } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { createRef, ref } from 'lit/directives/ref.js';
-import { L as LeuElement } from './LeuElement-jrR2M5pZ.js';
-import { directive, Directive, PartType } from 'lit/directive.js';
-import { LeuIcon } from './Icon.js';
-import { LeuPagination } from './Pagination.js';
-import './_tslib-CNEFicEt.js';
-import 'lit/decorators.js';
-import 'lit/directives/live.js';
-import './Button.js';
-import 'lit/directives/if-defined.js';
-import './hasSlotController-Bm2tipvG.js';
-import './VisuallyHidden.js';
-
-/* eslint-disable prefer-template,no-param-reassign,no-restricted-syntax,guard-for-in */
-/**
- * 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";
-// The leading space is important
-const importantFlag = " !" + important;
-// How many characters to remove from a value, as a negative number
-const flagTrim = 0 - importantFlag.length;
-class StyleMapDirective 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 === undefined) {
-            this._previousStyleProperties = new Set(Object.keys(styleInfo));
-        }
-        // Remove old properties that no longer exist in styleInfo
-        for (const name of this._previousStyleProperties) {
-            // If the name isn't in styleInfo or it's null/undefined
-            if (styleInfo[name] == null) {
-                this._previousStyleProperties.delete(name);
-                if (name.includes("-")) {
-                    style.removeProperty(name);
-                }
-                else {
-                    style[name] = null;
-                }
-            }
-        }
-        // Add or update properties
-        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);
-
-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-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);
-}
-`;
-
-/**
- * @tagname leu-table
- */
-class LeuTable extends LeuElement {
-    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 === undefined) {
-            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" : undefined,
-                });
-            }
-            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" : undefined,
-                });
-            }
-            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}
-    `;
-    }
-}
-LeuTable.dependencies = {
-    "leu-icon": LeuIcon,
-    "leu-pagination": LeuPagination,
-};
-LeuTable.styles = [LeuElement.styles, css_248z];
-LeuTable.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 },
-};
-
+import "./LeuElement-B7NJzWwP.js";
+import "./Icon-DhAvH0XM.js";
+import "./Button-EdS9xr2J.js";
+import "./FormAssociatedMixin-BbFlza53.js";
+import "./VisuallyHidden-BkllVjlz.js";
+import "./Pagination-CWqgusWZ.js";
+import { t as LeuTable } from "./Table-DZz1ic3j.js";
 export { LeuTable };

package/dist/Tag-DsZS_8pl.js

@@ -0,0 +1,76 @@
+import { t as LeuElement } from "./LeuElement-B7NJzWwP.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/components/tag/tag.css?inline
+var tag_default = css`:host {
+  /* --tag-font-regular: var(--leu-font-family-regular);
+  --tag-font-black: var(--leu-font-family-black);
+
+  font-family: var(--tag-font-regular); */
+}
+
+.tag {
+  --_accent-color: var(--leu-tag-accent-color, var(--leu-color-black-60));
+
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+
+  background-color: var(--_accent-color);
+  border: 2px solid var(--_accent-color);
+  color: var(--leu-color-black-0);
+}
+
+.tag--outline {
+  background-color: transparent;
+  border-color: var(--_accent-color);
+  color: var(--_accent-color);
+}
+
+.tag--ghost {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--_accent-color);
+}
+
+.tag__icon {
+  --leu-icon-size: 1rem;
+}
+
+.tag__label {
+  display: block;
+  font: var(--leu-t-tiny-regular-font);
+  line-height: 1rem;
+}
+`;
+//#endregion
+//#region src/components/tag/Tag.ts
+/**
+* @tagname leu-tag
+* @cssprop --leu-tag-accent-color - The color of the tag
+* @slot default - The label of the tag
+* @slot icon - An icon to display in the tag
+*/
+var LeuTag = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "solid";
+	}
+	static {
+		this.styles = [LeuElement.styles, tag_default];
+	}
+	render() {
+		return html`
+      <div class="tag tag--${this.variant}">
+        <slot class="tag__icon" name="icon"></slot>
+        <slot class="tag__label"></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: String })], LeuTag.prototype, "variant", void 0);
+//#endregion
+export { LeuTag as t };

package/dist/Tag.d.ts

@@ -1,7 +1,7 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import * as lit_html0 from "lit-html";
 
+//#region src/components/tag/Tag.d.ts
 /**
  * @tagname leu-tag
  * @cssprop --leu-tag-accent-color - The color of the tag
@@ -9,9 +9,9 @@ import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
  * @slot icon - An icon to display in the tag
  */
 declare class LeuTag extends LeuElement {
-    static styles: lit.CSSResultGroup[];
-    variant: "solid" | "outline" | "ghost";
-    render(): lit_html.TemplateResult<1>;
+  static styles: any[];
+  variant: "solid" | "outline" | "ghost";
+  render(): lit_html0.TemplateResult<1>;
 }
-
-export { LeuTag };
+//#endregion
+export { LeuTag };

package/dist/Tag.js

@@ -1,75 +1,3 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { css, html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-jrR2M5pZ.js';
-
-var css_248z = css`:host {
-  /* --tag-font-regular: var(--leu-font-family-regular);
-  --tag-font-black: var(--leu-font-family-black);
-
-  font-family: var(--tag-font-regular); */
-}
-
-.tag {
-  --_accent-color: var(--leu-tag-accent-color, var(--leu-color-black-60));
-
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem 0.5rem;
-  gap: 0.25rem;
-  border-radius: 0.25rem;
-
-  background-color: var(--_accent-color);
-  border: 2px solid var(--_accent-color);
-  color: var(--leu-color-black-0);
-}
-
-.tag--outline {
-  background-color: transparent;
-  border-color: var(--_accent-color);
-  color: var(--_accent-color);
-}
-
-.tag--ghost {
-  background-color: transparent;
-  border-color: transparent;
-  color: var(--_accent-color);
-}
-
-.tag__icon {
-  --leu-icon-size: 1rem;
-}
-
-.tag__label {
-  display: block;
-  font: var(--leu-t-tiny-regular-font);
-  line-height: 1rem;
-}
-`;
-
-/**
- * @tagname leu-tag
- * @cssprop --leu-tag-accent-color - The color of the tag
- * @slot default - The label of the tag
- * @slot icon - An icon to display in the tag
- */
-class LeuTag extends LeuElement {
-    constructor() {
-        super(...arguments);
-        this.variant = "solid";
-    }
-    render() {
-        return html `
-      <div class="tag tag--${this.variant}">
-        <slot class="tag__icon" name="icon"></slot>
-        <slot class="tag__label"></slot>
-      </div>
-    `;
-    }
-}
-LeuTag.styles = [LeuElement.styles, css_248z];
-__decorate([
-    property({ type: String })
-], LeuTag.prototype, "variant", void 0);
-
+import "./LeuElement-B7NJzWwP.js";
+import { t as LeuTag } from "./Tag-DsZS_8pl.js";
 export { LeuTag };

package/dist/VisuallyHidden-BkllVjlz.js

@@ -0,0 +1,29 @@
+import { t as LeuElement } from "./LeuElement-B7NJzWwP.js";
+import { css, html } from "lit";
+//#region src/components/visually-hidden/visually-hidden.css?inline
+var visually_hidden_default = css`:host {
+  clip: rect(0 0 0 0);
+  border: 0;
+  height: 1px;
+  margin: -1px !important;
+  overflow: hidden;
+  padding: 0 !important;
+  position: absolute;
+  width: 1px;
+}
+`;
+//#endregion
+//#region src/components/visually-hidden/VisuallyHidden.ts
+/**
+* @tagname leu-visually-hidden
+*/
+var LeuVisuallyHidden = class extends LeuElement {
+	static {
+		this.styles = [LeuElement.styles, visually_hidden_default];
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+};
+//#endregion
+export { LeuVisuallyHidden as t };

package/dist/VisuallyHidden-OeQvhxYn.d.ts

@@ -0,0 +1,13 @@
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import * as lit_html0 from "lit-html";
+
+//#region src/components/visually-hidden/VisuallyHidden.d.ts
+/**
+ * @tagname leu-visually-hidden
+ */
+declare class LeuVisuallyHidden extends LeuElement {
+  static styles: any[];
+  render(): lit_html0.TemplateResult<1>;
+}
+//#endregion
+export { LeuVisuallyHidden as t };

package/dist/VisuallyHidden.d.ts

@@ -1,13 +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-visually-hidden
- */
-declare class LeuVisuallyHidden extends LeuElement {
-    static styles: lit.CSSResultGroup[];
-    render(): lit_html.TemplateResult<1>;
-}
-
-export { LeuVisuallyHidden };
+import { t as LeuVisuallyHidden } from "./VisuallyHidden-OeQvhxYn.js";
+export { LeuVisuallyHidden };

package/dist/VisuallyHidden.js

@@ -1,26 +1,3 @@
-import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-jrR2M5pZ.js';
-
-var css_248z = css`:host {
-  clip: rect(0 0 0 0);
-  border: 0;
-  height: 1px;
-  margin: -1px !important;
-  overflow: hidden;
-  padding: 0 !important;
-  position: absolute;
-  width: 1px;
-}
-`;
-
-/**
- * @tagname leu-visually-hidden
- */
-class LeuVisuallyHidden extends LeuElement {
-    render() {
-        return html `<slot></slot>`;
-    }
-}
-LeuVisuallyHidden.styles = [LeuElement.styles, css_248z];
-
+import "./LeuElement-B7NJzWwP.js";
+import { t as LeuVisuallyHidden } from "./VisuallyHidden-BkllVjlz.js";
 export { LeuVisuallyHidden };