@statistikzh/leu 0.24.2 → 0.26.0

package/dist/Pagination.js

@@ -1,241 +1,8 @@
-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-BfXSO7MN.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-Bm2tipvG.js';
-
-var css_248z = css`:host {
-  margin-top: 16px;
-  display: flex;
-  justify-content: flex-end;
-  font-family: var(--leu-font-family-regular);
-}
-
-.input {
-  width: 50px;
-  padding: 0;
-  border: 2px solid var(--leu-color-black-40);
-  border-radius: 2px;
-  color: var(--leu-color-black-transp-60);
-  text-align: center;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 24px;
-  outline-offset: 2px;
-}
-
-/* no arrows: Chrome, Safari, Edge, Opera */
-
-.input::-webkit-outer-spin-button,
-.input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-          appearance: none;
-  margin: 0;
-}
-
-/* no arrows: Firefox */
-
-.input[type="number"] {
-  -webkit-appearance: textfield;
-     -moz-appearance: textfield;
-          appearance: textfield;
-}
-
-.input:focus,
-.input:hover {
-  border-color: var(--leu-color-func-cyan);
-  outline: none;
-}
-
-.input:focus-visible {
-  outline: 2px solid var(--leu-color-func-cyan);
-}
-
-.label {
-  margin: 0 16px;
-  line-height: 50px;
-  color: var(--leu-color-black-transp-60);
-  white-space: nowrap;
-}
-
-.button-group {
-  display: flex;
-  gap: 0.25rem;
-}
-`;
-
-const MIN_PAGE = 1;
-/**
- * @tagname leu-pagination
- */
-class LeuPagination extends LeuElement {
-    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);
-    }
-    /**
-     * The index of the first item on the current page.
-     */
-    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);
-    }
-    _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,
-            }));
-        }
-    }
-    _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>
-      <input
-        id="page-input"
-        class="input"
-        min=${MIN_PAGE}
-        max=${this._maxPage}
-        .value=${live(this.page.toString())}
-        @input=${this._handleInput}
-        @change=${this._handleChange}
-        @keydown=${this._handleKeyDown}
-        type="number"
-      />
-      <div class="label">von ${this._maxPage}</div>
-      <div class="button-group">
-        <leu-button
-          variant="secondary"
-          label="Vorherige Seite"
-          @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);
-        }}
-          ?disabled=${this._isLastPage()}
-          ><leu-icon name="angleRight"></leu-icon
-        ></leu-button>
-      </div>
-    `;
-    }
-}
-LeuPagination.dependencies = {
-    "leu-button": LeuButton,
-    "leu-icon": LeuIcon,
-    "leu-visually-hidden": LeuVisuallyHidden,
-};
-LeuPagination.styles = [LeuElement.styles, css_248z];
-/**
- * @internal
- */
-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);
-
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import "./Spinner-DDTqijTO.js";
+import "./Button-BkhqVjug.js";
+import "./FormAssociatedMixin-DLPvFtbT.js";
+import "./VisuallyHidden-pll3amXE.js";
+import { t as LeuPagination } from "./Pagination-DJI5MIi_.js";
 export { LeuPagination };

package/dist/Placeholder-BJybFwSg.js

@@ -0,0 +1,95 @@
+import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { css, html } from "lit";
+//#region src/components/placeholder/placeholder.css?inline
+var placeholder_default = css`:host {
+  --placeholder-font-regular: var(--leu-font-family-regular);
+  --placeholder-font-black: var(--leu-font-family-black);
+
+  --placeholder-border-color: var(--leu-color-black-20);
+
+  font-family: var(--placeholder-font-regular);
+}
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  border: 2px dashed var(--placeholder-border-color);
+  border-radius: 0.25rem;
+
+  padding: 2rem 1.5rem;
+}
+@media (min-width: 600px) {
+.placeholder {
+    padding: 2.5rem 2rem;
+}
+  }
+@media (min-width: 1280px) {
+.placeholder {
+    padding: 3.5rem 2.5rem;
+}
+  }
+.placeholder__title {
+  display: block;
+}
+.placeholder__title::slotted(:where(h1, h2, h3, h4, h5, h6)) {
+  font: var(--leu-t-curve-regular-black-font);
+  color: var(--leu-color-black-100);
+  margin: 0 0 0.5rem;
+}
+.placeholder__description {
+  font: var(--leu-t-curve-small-regular-font);
+  color: var(--leu-color-black-60);
+
+  margin-bottom: 0.75rem;
+}
+@media (min-width: 400px) {
+.placeholder__description {
+    margin-bottom: 2rem;
+}
+  }
+@media (min-width: 600px) {
+.placeholder__description {
+    margin-bottom: 1.25rem;
+}
+  }
+@media (min-width: 1280px) {
+.placeholder__description {
+    margin-bottom: 1.5rem;
+}
+  }
+`;
+//#endregion
+//#region src/components/placeholder/Placeholder.ts
+/**
+* @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.
+*/
+var LeuPlaceholder = class extends LeuElement {
+	static {
+		this.styles = [LeuElement.styles, placeholder_default];
+	}
+	static {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	render() {
+		return html`
+      <div class="placeholder">
+        <slot class="placeholder__title" name="title"></slot>
+        <p><slot class="placeholder__description" name="description"></slot></p>
+        <slot name="cta"></slot>
+      </div>
+    `;
+	}
+};
+//#endregion
+export { LeuPlaceholder as t };

package/dist/Placeholder.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/placeholder/Placeholder.d.ts
 /**
  * @summary * A placeholder to display when no content is available.
  * @tagname leu-placeholder
@@ -12,16 +12,16 @@ import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
  * @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>;
+  static styles: any[];
+  static shadowRootOptions: {
+    delegatesFocus: boolean;
+    clonable?: boolean;
+    customElementRegistry?: CustomElementRegistry;
+    mode: ShadowRootMode;
+    serializable?: boolean;
+    slotAssignment?: SlotAssignmentMode;
+  };
+  render(): lit_html0.TemplateResult<1>;
 }
-
-export { LeuPlaceholder };
+//#endregion
+export { LeuPlaceholder };

package/dist/Placeholder.js

@@ -1,90 +1,3 @@
-import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
-
-var css_248z = css`:host {
-  --placeholder-font-regular: var(--leu-font-family-regular);
-  --placeholder-font-black: var(--leu-font-family-black);
-
-  --placeholder-border-color: var(--leu-color-black-20);
-
-  font-family: var(--placeholder-font-regular);
-}
-.placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-
-  border: 2px dashed var(--placeholder-border-color);
-  border-radius: 0.25rem;
-
-  padding: 2rem 1.5rem;
-}
-@media (min-width: 600px) {
-.placeholder {
-    padding: 2.5rem 2rem;
-}
-  }
-@media (min-width: 1280px) {
-.placeholder {
-    padding: 3.5rem 2.5rem;
-}
-  }
-.placeholder__title {
-  display: block;
-}
-.placeholder__title::slotted(:where(h1, h2, h3, h4, h5, h6)) {
-  font: var(--leu-t-curve-regular-black-font);
-  color: var(--leu-color-black-100);
-  margin: 0 0 0.5rem;
-}
-.placeholder__description {
-  font: var(--leu-t-curve-small-regular-font);
-  color: var(--leu-color-black-60);
-
-  margin-bottom: 0.75rem;
-}
-@media (min-width: 400px) {
-.placeholder__description {
-    margin-bottom: 2rem;
-}
-  }
-@media (min-width: 600px) {
-.placeholder__description {
-    margin-bottom: 1.25rem;
-}
-  }
-@media (min-width: 1280px) {
-.placeholder__description {
-    margin-bottom: 1.5rem;
-}
-  }
-`;
-
-/**
- * @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.
- */
-class LeuPlaceholder extends LeuElement {
-    render() {
-        return html `
-      <div class="placeholder">
-        <slot class="placeholder__title" name="title"></slot>
-        <p><slot class="placeholder__description" name="description"></slot></p>
-        <slot name="cta"></slot>
-      </div>
-    `;
-    }
-}
-LeuPlaceholder.styles = [LeuElement.styles, css_248z];
-LeuPlaceholder.shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-
+import "./LeuElement-BeFrgKes.js";
+import { t as LeuPlaceholder } from "./Placeholder-BJybFwSg.js";
 export { LeuPlaceholder };

package/dist/Popup-Btgm2a3D.d.ts

@@ -0,0 +1,61 @@
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { PropertyValues } from "lit";
+import { Placement } from "@floating-ui/dom";
+import * as lit_html0 from "lit-html";
+
+//#region src/components/popup/Popup.d.ts
+interface VirtualElement {
+  getBoundingClientRect: () => DOMRect;
+  contextElement?: Element;
+}
+/**
+ * @tagname leu-popup
+ */
+declare class LeuPopup extends LeuElement {
+  static styles: any[];
+  static shadowRootOptions: {
+    delegatesFocus: boolean;
+    clonable?: boolean;
+    customElementRegistry?: CustomElementRegistry;
+    mode: ShadowRootMode;
+    serializable?: boolean;
+    slotAssignment?: SlotAssignmentMode;
+  };
+  anchor: Element | string | VirtualElement;
+  active: boolean;
+  placement?: Placement;
+  flip: boolean;
+  shift: boolean;
+  shiftPadding: number;
+  matchSize?: "width" | "height" | "both";
+  /**
+   * Offsets the popup along the main axis.
+   * @link https://floating-ui.com/docs/offset#mainaxis
+   */
+  offsetMainAxis?: number;
+  /**
+   * Offsets the popup along the cross axis.
+   * @link https://floating-ui.com/docs/offset#crossaxis
+   */
+  offsetCrossAxis?: number;
+  /**
+   * Offsets the popup along the alignment axis.
+   * Overrides the `offsetCrossAxis` value.
+   * @link https://floating-ui.com/docs/offset#alignmentaxis
+   */
+  offsetAlignmentAxis?: number;
+  autoSize?: "width" | "height" | "both";
+  autoSizePadding: number;
+  private anchorEl;
+  private cleanup;
+  disconnectedCallback(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  protected get popupEl(): HTMLDivElement;
+  protected start(): void;
+  protected stop(): void;
+  reposition(): void;
+  handleAnchorChange(): void;
+  render(): lit_html0.TemplateResult<1>;
+}
+//#endregion
+export { VirtualElement as n, LeuPopup as t };