@statistikzh/leu 0.24.2 → 0.26.0

package/dist/Message.js

@@ -1,268 +1,4 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { css, html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
-import { LeuIcon } from './Icon.js';
-import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
-
-var css_248z = css`:host {
-  font-family: var(--leu-font-family-regular);
-}
-.message {
-  position: relative;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-
-  padding: var(--_padding);
-  border-radius: 0.25rem;
-  overflow: hidden;
-
-  background-color: var(--leu-color-black-0);
-  color: var(--_accent-color);
-}
-.message::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0.25rem;
-  height: 100%;
-  background-color: var(--_accent-color);
-}
-.message--error {
-  --_accent-color: var(--leu-message-accent-color, var(--leu-color-func-red));
-}
-.message--warning {
-  --_accent-color: var(--leu-message-accent-color, var(--leu-color-func-red));
-}
-.message--success {
-  --_accent-color: var(--leu-message-accent-color, var(--leu-color-func-green));
-}
-.message--info {
-  --_accent-color: var(
-    --leu-message-accent-color,
-    var(--leu-color-accent-violet)
-  );
-}
-.message--filled {
-  background-color: var(--_accent-color);
-  color: var(--leu-color-black-0);
-}
-.message--filled::before {
-  content: none;
-}
-.message--regular {
-  --_padding: 0.75rem;
-  --_icon-size: 24px;
-}
-@media (min-width: 1024px) {
-.message--regular {
-    --_padding: 1rem;
-}
-  }
-.message--large {
-  --_padding: 1rem;
-  --_icon-size: 32px;
-}
-@media (max-width: 599px) {
-.message--large {
-    flex-flow: column;
-    align-items: start;
-    gap: 0.75rem;
-}
-  }
-@media (min-width: 600px) {
-.message--large {
-    --_padding: 1.25rem;
-}
-  }
-@media (min-width: 1024px) {
-.message--large {
-    --_padding: 1.5rem;
-}
-  }
-.message--popup {
-  box-shadow: var(--leu-box-shadow-regular);
-}
-.message__icon {
-  --leu-icon-size: var(--_icon-size);
-
-  display: block;
-  flex: 0 0 min-content;
-}
-.message__content {
-  flex: 1 1 auto;
-  font: var(--leu-t-curve-small-regular-font);
-  margin: 0 0.5rem;
-}
-@media (min-width: 600px) {
-.message__content {
-    margin-left: 0.75rem;
-    margin-right: 0.75rem;
-}
-  }
-@media (min-width: 1024px) {
-.message__content {
-    margin-left: 1rem;
-    margin-right: 1rem;
-}
-  }
-@media (max-width: 599px) {
-.message--large .message__content {
-    margin-left: 0;
-    margin-right: 0;
-}
-  }
-.message__content ::slotted(strong) {
-  font-family: var(--leu-font-family-black);
-  font-weight: normal;
-}
-.message__cta {
-  display: block;
-  flex: 0 0 min-content;
-  margin-right: 0.5rem;
-}
-.message__remove {
-  flex: 0 0 min-content;
-  border: none;
-  background: none;
-  padding: 0;
-  color: var(--leu-color-black-60);
-  cursor: pointer;
-}
-.message__remove:where(:hover, :focus-visible) {
-  color: var(--leu-color-black-40);
-}
-.message--filled .message__remove {
-  color: var(--leu-color-black-0);
-}
-.message--filled .message__remove:where(:hover, :focus-visible) {
-  color: var(--leu-color-white-transp-70);
-}
-.message--large .message__remove {
-  position: absolute;
-  top: var(--_padding);
-  right: var(--_padding);
-}
-@media (min-width: 600px) {
-.message--large .message__remove {
-    position: static;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
-}
-  }
-.message__remove-icon {
-  --leu-icon-size: 1.5rem;
-}
-`;
-
-/**
- * @tagname leu-message
- * @cssprop --leu-message-accent-color - Sets the color of the message. According to the design system, it is only allowd for `info`
- * @slot [default] - The content of the message. The title of the message should marked up with a `<strong>` tag.
- * @slot cta - A call to action button that is only allowed for `size=large`
- * @fires leu:remove - Fired when the close button is clicked.
- */
-class LeuMessage extends LeuElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The type of the message. `error` and `success` will be displayed as filled boxes.
-         */
-        this.type = "success";
-        /**
-         * The size of the message. A call to action button is only allowed for `large` messages.
-         */
-        this.size = "regular";
-        /**
-         * Wheter the message is removable or not. The component will not remove itself when the close button is clicked.
-         */
-        this.removable = false;
-        /**
-         * Wheter the message is used as a popup or not. This will add a drop shadow but will not position the message absolutely.
-         */
-        this.popup = false;
-        this.hasSlotController = new HasSlotController(this, ["cta"]);
-    }
-    renderIcon() {
-        const name = LeuMessage.iconToTypeMap[this.type];
-        return html `<leu-icon class="message__icon" name=${name}></leu-icon>`;
-    }
-    handleRemove() {
-        this.dispatchEvent(new CustomEvent("leu:remove", {
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    render() {
-        const hasCta = this.hasSlotController.test("cta");
-        const classes = classMap({
-            message: true,
-            "message--filled": this.type === "error" || this.type === "success",
-            "message--popup": this.popup,
-            [`message--${this.size}`]: true,
-            [`message--${this.type}`]: true,
-        });
-        return html `
-      <div class="${classes}">
-        ${this.renderIcon()}
-        <p class="message__content">
-          <slot></slot>
-        </p>
-        ${hasCta
-            ? html `<slot class="message__cta" name="cta"></slot>`
-            : nothing}
-        ${this.removable
-            ? html `<button
-              class="message__remove"
-              aria-label="Meldung schliessen"
-              @click=${this.handleRemove}
-            >
-              <leu-icon class="message__remove-icon" name="close"></leu-icon>
-            </button>`
-            : nothing}
-      </div>
-    `;
-    }
-}
-LeuMessage.styles = [LeuElement.styles, css_248z];
-/**
- * @internal
- */
-LeuMessage.shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-/**
- * @internal
- */
-LeuMessage.dependencies = {
-    "leu-icon": LeuIcon,
-};
-/**
- * @internal
- */
-LeuMessage.iconToTypeMap = {
-    info: "getInformation",
-    error: "caution",
-    success: "confirm",
-    warning: "caution",
-};
-__decorate([
-    property({ type: String, reflect: true })
-], LeuMessage.prototype, "type", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuMessage.prototype, "size", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuMessage.prototype, "removable", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuMessage.prototype, "popup", void 0);
-
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import { t as LeuMessage } from "./Message-BhknWvAF.js";
 export { LeuMessage };

package/dist/Pagination-CqkHh-Vd.d.ts

@@ -0,0 +1,76 @@
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as LeuIcon } from "./Icon-Op80LrrO.js";
+import { t as LeuButton } from "./Button-BgNUxmo_.js";
+import { t as LeuVisuallyHidden } from "./VisuallyHidden-OeQvhxYn.js";
+import * as lit_html0 from "lit-html";
+
+//#region src/components/pagination/Pagination.d.ts
+/**
+ * @tagname leu-pagination
+ */
+declare class LeuPagination extends LeuElement {
+  static dependencies: {
+    "leu-button": typeof LeuButton;
+    "leu-icon": typeof LeuIcon;
+    "leu-visually-hidden": typeof LeuVisuallyHidden;
+  };
+  static styles: any[];
+  /**
+   * @internal
+   */
+  static shadowRootOptions: {
+    delegatesFocus: boolean;
+    clonable?: boolean;
+    customElementRegistry?: CustomElementRegistry;
+    mode: ShadowRootMode;
+    serializable?: boolean;
+    slotAssignment?: SlotAssignmentMode;
+  };
+  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.
+   * @internal
+   */
+  private _page;
+  attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
+  /**
+   * 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;
+  private _isFirstPage;
+  private _isLastPage;
+  private _clampPage;
+  private _updatePage;
+  private _handleChange;
+  private _handleInput;
+  private _handleKeyDown;
+  render(): lit_html0.TemplateResult<1>;
+}
+//#endregion
+export { LeuPagination as t };

package/dist/Pagination-DJI5MIi_.js

@@ -0,0 +1,226 @@
+import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { t as LeuIcon } from "./Icon-C_yYuynf.js";
+import { t as LeuButton } from "./Button-BkhqVjug.js";
+import { t as LeuVisuallyHidden } from "./VisuallyHidden-pll3amXE.js";
+import { css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { live } from "lit/directives/live.js";
+//#region src/components/pagination/pagination.css?inline
+var pagination_default = 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;
+}
+`;
+//#endregion
+//#region src/components/pagination/Pagination.ts
+const MIN_PAGE = 1;
+/**
+* @tagname leu-pagination
+*/
+var LeuPagination = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.itemsPerPage = 1;
+		this.numOfItems = 1;
+		this._page = 1;
+	}
+	static {
+		this.dependencies = {
+			"leu-button": LeuButton,
+			"leu-icon": LeuIcon,
+			"leu-visually-hidden": LeuVisuallyHidden
+		};
+	}
+	static {
+		this.styles = [LeuElement.styles, pagination_default];
+	}
+	static {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	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>
+    `;
+	}
+};
+__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);
+//#endregion
+export { LeuPagination as t };

package/dist/Pagination.d.ts

@@ -1,76 +1,2 @@
-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 { L as LeuIcon } from './Icon.d-itcQ94ym.js';
-
-/**
- * @tagname leu-pagination
- */
-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.
-     * @internal
-     */
-    private _page;
-    attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
-    /**
-     * 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;
-    private _isFirstPage;
-    private _isLastPage;
-    private _clampPage;
-    private _updatePage;
-    private _handleChange;
-    private _handleInput;
-    private _handleKeyDown;
-    render(): lit_html.TemplateResult<1>;
-}
-
-export { LeuPagination };
+import { t as LeuPagination } from "./Pagination-CqkHh-Vd.js";
+export { LeuPagination };