@statistikzh/leu 0.14.3 → 0.15.0

package/dist/MenuItem.js

@@ -1,6 +1,6 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
 import { css, html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host {
@@ -89,7 +89,6 @@ var css_248z = css`:host {
 /**
  * @typedef {'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'none'} MenuItemRole
  */
-
 /**
  * @tagname leu-menu-item
  * @slot - The label of the menu item
@@ -102,63 +101,64 @@ var css_248z = css`:host {
  * @property {MenuItemRole} componentRole - The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.`
  */
 class LeuMenuItem extends LeuElement {
-  constructor() {
-    super();
-    this.active = false;
-    this.disabled = false;
-    this.multipleSelection = false;
-    this.value = undefined;
-    this.href = undefined;
-    this.tabbable = undefined;
-
-    /** @type {MenuItemRole} */
-    this.componentRole = "menuitem";
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("click", this._handleClick, true);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("click", this._handleClick, true);
-  }
-  _handleClick(event) {
-    if (this.disabled) {
-      event.stopPropagation();
-      event.preventDefault();
+    constructor() {
+        super();
+        this.active = false;
+        this.disabled = false;
+        this.multipleSelection = false;
+        this.value = undefined;
+        this.href = undefined;
+        this.tabbable = undefined;
+        /** @type {MenuItemRole} */
+        this.componentRole = "menuitem";
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("click", this._handleClick, true);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("click", this._handleClick, true);
+    }
+    _handleClick(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
     }
-  }
-
-  /**
-   * Returns the value of the item. If `value` is not set, it will return the inner text
-   * @returns {string}
-   */
-  getValue() {
-    return this.value || this.textContent.trim();
-  }
-  _getAria() {
-    const commonAttributes = {
-      disabled: this.disabled
-    };
-    if (this.href) {
-      return commonAttributes;
+    /**
+     * Returns the value of the item. If `value` is not set, it will return the inner text
+     * @returns {string}
+     */
+    getValue() {
+        return this.value || this.textContent.trim();
     }
-    return {
-      ...commonAttributes,
-      checked: this.componentRole === "menuitemcheckbox" || this.componentRole === "menuitemradio" ? this.active : undefined,
-      selected: this.componentRole === "option" ? this.active : undefined,
-      role: this.componentRole === "none" ? undefined : this.componentRole
-    };
-  }
-  _getTabIndex() {
-    if (typeof this.tabbable === "boolean") {
-      return this.tabbable ? 0 : -1;
+    _getAria() {
+        const commonAttributes = {
+            disabled: this.disabled,
+        };
+        if (this.href) {
+            return commonAttributes;
+        }
+        return {
+            ...commonAttributes,
+            checked: this.componentRole === "menuitemcheckbox" ||
+                this.componentRole === "menuitemradio"
+                ? this.active
+                : undefined,
+            selected: this.componentRole === "option" ? this.active : undefined,
+            role: this.componentRole === "none" ? undefined : this.componentRole,
+        };
     }
-    return undefined;
-  }
-  _renderLink(content) {
-    const aria = this._getAria();
-    return html`<a
+    _getTabIndex() {
+        if (typeof this.tabbable === "boolean") {
+            return this.tabbable ? 0 : -1;
+        }
+        return undefined;
+    }
+    _renderLink(content) {
+        const aria = this._getAria();
+        return html `<a
       class="button"
       href=${this.href}
       aria-disabled=${ifDefined(aria.disabled)}
@@ -168,10 +168,10 @@ class LeuMenuItem extends LeuElement {
       tabindex=${ifDefined(this._getTabIndex())}
       >${content}</a
     >`;
-  }
-  _renderButton(content) {
-    const aria = this._getAria();
-    return html`<button
+    }
+    _renderButton(content) {
+        const aria = this._getAria();
+        return html `<button
       class="button"
       aria-disabled=${ifDefined(aria.disabled)}
       aria-checked=${ifDefined(aria.checked)}
@@ -181,65 +181,49 @@ class LeuMenuItem extends LeuElement {
     >
       ${content}
     </button>`;
-  }
-  _renderBeforeSlotDefault() {
-    if (!this.multipleSelection) {
-      return nothing;
     }
-    return this.active ? html`<leu-icon name="check"></leu-icon>` : html`<leu-icon></leu-icon>`;
-  }
-  render() {
-    const content = html`
+    _renderBeforeSlotDefault() {
+        if (!this.multipleSelection) {
+            return nothing;
+        }
+        return this.active
+            ? html `<leu-icon name="check"></leu-icon>`
+            : html `<leu-icon></leu-icon>`;
+    }
+    render() {
+        const content = html `
       <slot class="before" name="before"
         >${this._renderBeforeSlotDefault()}</slot
       >
       <span class="label"><slot></slot></span>
       <slot class="after" name="after"></slot>
     `;
-    return this.href ? this._renderLink(content) : this._renderButton(content);
-  }
+        return this.href ? this._renderLink(content) : this._renderButton(content);
+    }
 }
-_defineProperty(LeuMenuItem, "dependencies", {
-  "leu-icon": LeuIcon
-});
-_defineProperty(LeuMenuItem, "styles", [LeuElement.styles, css_248z]);
+LeuMenuItem.dependencies = {
+    "leu-icon": LeuIcon,
+};
+LeuMenuItem.styles = [LeuElement.styles, css_248z];
 /**
  * @internal
  */
-_defineProperty(LeuMenuItem, "shadowRootOptions", {
-  ...LeuElement.shadowRootOptions,
-  delegatesFocus: true
-});
-_defineProperty(LeuMenuItem, "properties", {
-  active: {
-    type: Boolean,
-    reflect: true
-  },
-  multipleSelection: {
-    type: Boolean,
-    reflect: true,
-    attr: "multiple-selection"
-  },
-  disabled: {
-    type: Boolean,
-    reflect: true
-  },
-  tabbable: {
-    type: Boolean,
-    reflect: true
-  },
-  href: {
-    type: String,
-    reflect: true
-  },
-  value: {
-    type: String,
-    reflect: true
-  },
-  componentRole: {
-    type: String,
-    reflect: true
-  }
-});
+LeuMenuItem.shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+LeuMenuItem.properties = {
+    active: { type: Boolean, reflect: true },
+    multipleSelection: {
+        type: Boolean,
+        reflect: true,
+        attr: "multiple-selection",
+    },
+    disabled: { type: Boolean, reflect: true },
+    tabbable: { type: Boolean, reflect: true },
+    href: { type: String, reflect: true },
+    value: { type: String, reflect: true },
+    componentRole: { type: String, reflect: true },
+};
 
 export { LeuMenuItem };

package/dist/Pagination.d.ts

@@ -1,34 +1,76 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+import { LeuButton } from './Button.js';
+import { LeuVisuallyHidden } from './VisuallyHidden.js';
+import { LeuIcon } from './Icon.js';
+
 /**
  * @tagname leu-pagination
  */
-export class LeuPagination extends LeuElement {
-    /** @type {Number} */
-    numOfItems: number;
-    /** @type {Number} */
+declare class LeuPagination extends LeuElement {
+    static dependencies: {
+        "leu-button": typeof LeuButton;
+        "leu-icon": typeof LeuIcon;
+        "leu-visually-hidden": typeof LeuVisuallyHidden;
+    };
+    static styles: lit.CSSResultGroup[];
+    /**
+     * @internal
+     */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    defaultPage?: number;
+    /**
+     * Number of items per page.
+     */
     itemsPerPage: number;
+    /**
+     * Total number of items to paginate.
+     */
+    numOfItems: number;
     /**
      * Internal page state that contains an
      * already clamped page number. Should only
      * be accessed through the `page` getter and
      * setter.
-     * @type {Number}
      * @internal
      */
-    _page: number;
+    private _page;
     attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
-    set page(page: number);
+    /**
+     * The current page number. This is a 1-based index.
+     * When setting this value, it will be clamped
+     * to the range of valid pages.
+     */
     get page(): number;
+    set page(page: number);
+    /**
+     * The index of the first item on the current page.
+     */
     get startIndex(): number;
+    /**
+     * The index of the last item on the current page.
+     * This is exclusive, meaning it is one past the last item.
+     *
+     * @todo This value should be inclusive, meaning it should be the index of the last item on the page.
+     */
     get endIndex(): number;
     get _maxPage(): number;
-    _isFirstPage(): boolean;
-    _isLastPage(): boolean;
-    _clampPage(page: any): number;
-    _updatePage(page: any): void;
-    _handleChange(event: any): void;
-    _handleInput(event: any): void;
-    _handleKeyDown(event: any): void;
-    render(): import("lit-html").TemplateResult<1>;
+    private _isFirstPage;
+    private _isLastPage;
+    private _clampPage;
+    private _updatePage;
+    private _handleChange;
+    private _handleInput;
+    private _handleKeyDown;
+    render(): lit_html.TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-Dd6zm9XF.js';
-//# sourceMappingURL=Pagination.d.ts.map
+
+export { LeuPagination };

package/dist/Pagination.js

@@ -1,12 +1,14 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { live } from 'lit/directives/live.js';
+import { property, state } from 'lit/decorators.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 import { LeuButton } from './Button.js';
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
 import { LeuIcon } from './Icon.js';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
-import './hasSlotController-dQsSUUpb.js';
+import './hasSlotController-Bm2tipvG.js';
 
 var css_248z = css`:host {
   margin-top: 16px;
@@ -70,95 +72,108 @@ var css_248z = css`:host {
 `;
 
 const MIN_PAGE = 1;
-
 /**
  * @tagname leu-pagination
  */
 class LeuPagination extends LeuElement {
-  constructor() {
-    super();
-
-    /** @type {Number} */
-    this.numOfItems = 1;
-
-    /** @type {Number} */
-    this.itemsPerPage = 1;
-
+    constructor() {
+        super(...arguments);
+        /**
+         * Number of items per page.
+         */
+        this.itemsPerPage = 1;
+        /**
+         * Total number of items to paginate.
+         */
+        this.numOfItems = 1;
+        /**
+         * Internal page state that contains an
+         * already clamped page number. Should only
+         * be accessed through the `page` getter and
+         * setter.
+         * @internal
+         */
+        this._page = 1;
+    }
+    attributeChangedCallback(name, oldVal, newVal) {
+        super.attributeChangedCallback(name, oldVal, newVal);
+        if (name === "defaultpage" && newVal !== oldVal) {
+            this.page = parseInt(newVal, 10);
+        }
+    }
+    /**
+     * The current page number. This is a 1-based index.
+     * When setting this value, it will be clamped
+     * to the range of valid pages.
+     */
+    get page() {
+        return this._page;
+    }
+    set page(page) {
+        this._page = this._clampPage(page);
+    }
     /**
-     * Internal page state that contains an
-     * already clamped page number. Should only
-     * be accessed through the `page` getter and
-     * setter.
-     * @type {Number}
-     * @internal
+     * The index of the first item on the current page.
      */
-    this._page = 1;
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    super.attributeChangedCallback(name, oldVal, newVal);
-    if (name === "defaultpage" && newVal !== oldVal) {
-      this.page = parseInt(newVal, 10);
+    get startIndex() {
+        return (this.page - 1) * this.itemsPerPage;
+    }
+    /**
+     * The index of the last item on the current page.
+     * This is exclusive, meaning it is one past the last item.
+     *
+     * @todo This value should be inclusive, meaning it should be the index of the last item on the page.
+     */
+    get endIndex() {
+        return Math.min(this.startIndex + this.itemsPerPage, this.numOfItems);
+    }
+    get _maxPage() {
+        return Math.ceil(this.numOfItems / this.itemsPerPage);
     }
-  }
-  get page() {
-    return this._page;
-  }
-  set page(page) {
-    this._page = this._clampPage(page);
-  }
-  get startIndex() {
-    return (this.page - 1) * this.itemsPerPage;
-  }
-  get endIndex() {
-    return Math.min(this.startIndex + this.itemsPerPage, this.numOfItems);
-  }
-  get _maxPage() {
-    return Math.ceil(this.numOfItems / this.itemsPerPage);
-  }
-  _isFirstPage() {
-    return this.page === MIN_PAGE;
-  }
-  _isLastPage() {
-    return this.page === this._maxPage;
-  }
-  _clampPage(page) {
-    return Math.min(Math.max(page, MIN_PAGE), this._maxPage);
-  }
-  _updatePage(page) {
-    const prevPage = this.page;
-    this.page = this._clampPage(page);
-    if (this.page !== prevPage) {
-      this.dispatchEvent(new CustomEvent("leu:pagechange", {
-        detail: {
-          startIndex: this.startIndex,
-          endIndex: this.endIndex,
-          page: this.page
-        },
-        bubbles: false
-      }));
+    _isFirstPage() {
+        return this.page === MIN_PAGE;
     }
-  }
-  _handleChange(event) {
-    this._updatePage(parseInt(event.target.value, 10) || 0);
-  }
-  _handleInput(event) {
-    if (event.target.value !== "") {
-      event.preventDefault();
-      this._handleChange(event);
+    _isLastPage() {
+        return this.page === this._maxPage;
     }
-  }
-  _handleKeyDown(event) {
-    if (event.key === "ArrowUp") {
-      event.preventDefault();
-      this._updatePage(this.page + 1);
+    _clampPage(page) {
+        return Math.min(Math.max(page, MIN_PAGE), this._maxPage);
     }
-    if (event.key === "ArrowDown") {
-      event.preventDefault();
-      this._updatePage(this.page - 1);
+    _updatePage(page) {
+        const prevPage = this.page;
+        this.page = this._clampPage(page);
+        if (this.page !== prevPage) {
+            this.dispatchEvent(new CustomEvent("leu:pagechange", {
+                detail: {
+                    startIndex: this.startIndex,
+                    endIndex: this.endIndex,
+                    page: this.page,
+                },
+                bubbles: false,
+            }));
+        }
     }
-  }
-  render() {
-    return html`
+    _handleChange(event) {
+        this._updatePage(parseInt(event.target.value, 10) || 0);
+    }
+    _handleInput(event) {
+        if (event.target.value !== "") {
+            event.preventDefault();
+            this._handleChange(event);
+        }
+    }
+    _handleKeyDown(event) {
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            this._updatePage(this.page + 1);
+        }
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            this._updatePage(this.page - 1);
+        }
+    }
+    render() {
+        return html `
       <leu-visually-hidden>
         <label for="page-input">Aktuelle Seite</label>
       </leu-visually-hidden>
@@ -178,54 +193,49 @@ class LeuPagination extends LeuElement {
         <leu-button
           variant="secondary"
           label="Vorherige Seite"
-          @click=${_ => {
-      this._updatePage(this.page - 1);
-    }}
+          @click=${() => {
+            this._updatePage(this.page - 1);
+        }}
           ?disabled=${this._isFirstPage()}
           ><leu-icon name="angleLeft"></leu-icon
         ></leu-button>
         <leu-button
           variant="secondary"
           label="Nächste Seite"
-          @click=${_ => {
-      this._updatePage(this.page + 1);
-    }}
+          @click=${() => {
+            this._updatePage(this.page + 1);
+        }}
           ?disabled=${this._isLastPage()}
           ><leu-icon name="angleRight"></leu-icon
         ></leu-button>
       </div>
     `;
-  }
+    }
 }
-_defineProperty(LeuPagination, "dependencies", {
-  "leu-button": LeuButton,
-  "leu-icon": LeuIcon,
-  "leu-visually-hidden": LeuVisuallyHidden
-});
-_defineProperty(LeuPagination, "styles", [LeuElement.styles, css_248z]);
+LeuPagination.dependencies = {
+    "leu-button": LeuButton,
+    "leu-icon": LeuIcon,
+    "leu-visually-hidden": LeuVisuallyHidden,
+};
+LeuPagination.styles = [LeuElement.styles, css_248z];
 /**
  * @internal
  */
-_defineProperty(LeuPagination, "shadowRootOptions", {
-  ...LeuElement.shadowRootOptions,
-  delegatesFocus: true
-});
-_defineProperty(LeuPagination, "properties", {
-  defaultPage: {
-    type: Number,
-    reflect: true
-  },
-  itemsPerPage: {
-    type: Number,
-    reflect: true
-  },
-  numOfItems: {
-    type: Number,
-    reflect: true
-  },
-  _page: {
-    state: true
-  }
-});
+LeuPagination.shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    property({ type: Number, reflect: true })
+], LeuPagination.prototype, "defaultPage", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], LeuPagination.prototype, "itemsPerPage", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], LeuPagination.prototype, "numOfItems", void 0);
+__decorate([
+    state()
+], LeuPagination.prototype, "_page", void 0);
 
 export { LeuPagination };

package/dist/Placeholder.d.ts

@@ -0,0 +1,27 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+
+/**
+ * @summary * A placeholder to display when no content is available.
+ * @tagname leu-placeholder
+ * @slot title - The placeholders title. Use a heading tag (h1-6) depeneding on your context.
+ * @slot description - A description of the placeholder. Content is wrapped in a `<p>` tag by the component.
+ * @slot cta - A call to action button like "Reload" or "Create". Add a single `<leu-button>`.
+ *
+ * @todo Add pending state with a skeleton.
+ */
+declare class LeuPlaceholder extends LeuElement {
+    static styles: lit.CSSResultGroup[];
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    render(): lit_html.TemplateResult<1>;
+}
+
+export { LeuPlaceholder };