@statistikzh/leu 0.14.3 → 0.15.0

package/dist/Placeholder.js

@@ -0,0 +1,90 @@
+import { css, html } from 'lit';
+import { L as LeuElement } from './LeuElement-BhAmogDy.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,
+};
+
+export { LeuPlaceholder };

package/dist/Popup.d.ts

@@ -1,36 +1,70 @@
-export type Placement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+
 /**
  * @typedef {"top"|"top-start"|"top-end"|"bottom"|"bottom-start"|"bottom-end"|"left"|"left-start"|"left-end"|"right"|"right-start"|"right-end"} Placement
  */
 /**
  * @tagname leu-popup
  */
-export class LeuPopup extends LeuElement {
-    anchorEl: any;
-    cleanup: () => void;
-    flip: boolean;
-    shift: boolean;
-    active: boolean;
-    /** @type {Placement} */
-    placement: Placement;
-    /** @type {"width" | "height" | "both"} */
-    matchSize: "width" | "height" | "both";
-    /** @type {"width" | "height" | "both"} */
-    autoSize: "width" | "height" | "both";
-    shiftPadding: number;
-    autoSizePadding: number;
-    /** @type {string | HTMLElement} */
-    anchor: string | HTMLElement;
+declare class LeuPopup extends LeuElement {
+    static styles: lit.CSSResultGroup[];
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    static properties: {
+        anchor: {};
+        active: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        placement: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        flip: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        shift: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        shiftPadding: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        matchSize: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        autoSize: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        autoSizePadding: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+    };
+    constructor();
+    disconnectedCallback(): void;
     updated(changedProperties: any): void;
     /**
      * @returns {HTMLElement | null}
      */
-    get popupEl(): HTMLElement | null;
+    get popupEl(): Element;
     start(): void;
     stop(): void;
     reposition(): void;
     handleAnchorChange(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): lit_html.TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-Dd6zm9XF.js';
-//# sourceMappingURL=Popup.d.ts.map
+
+export { LeuPopup };

package/dist/Popup.js

@@ -1,6 +1,6 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
 import { css, html } from 'lit';
 import { autoUpdate, size, flip, shift, computePosition } from '@floating-ui/dom';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 
 var css_248z = css`:host {
   --popup-font-regular: var(--leu-font-family-regular);
@@ -35,202 +35,173 @@ var css_248z = css`:host {
 /**
  * @typedef {"top"|"top-start"|"top-end"|"bottom"|"bottom-start"|"bottom-end"|"left"|"left-start"|"left-end"|"right"|"right-start"|"right-end"} Placement
  */
-
 /**
  * @tagname leu-popup
  */
 class LeuPopup extends LeuElement {
-  constructor() {
-    super();
-    this.anchorEl = null;
-    this.cleanup = undefined;
-    this.flip = false;
-    this.shift = false;
-    this.active = false;
-
-    /** @type {Placement} */
-    this.placement = undefined;
-
-    /** @type {"width" | "height" | "both"} */
-    this.matchSize = undefined;
-
-    /** @type {"width" | "height" | "both"} */
-    this.autoSize = undefined;
-    this.shiftPadding = 0;
-    this.autoSizePadding = 0;
-
-    /** @type {string | HTMLElement} */
-    this.anchor = undefined;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.stop();
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("active")) {
-      if (this.active) {
-        this.start();
-      } else {
-        this.stop();
-      }
-    }
-    if (changedProperties.has("anchor")) {
-      this.handleAnchorChange();
+    constructor() {
+        super();
+        this.anchorEl = null;
+        this.cleanup = undefined;
+        this.flip = false;
+        this.shift = false;
+        this.active = false;
+        /** @type {Placement} */
+        this.placement = undefined;
+        /** @type {"width" | "height" | "both"} */
+        this.matchSize = undefined;
+        /** @type {"width" | "height" | "both"} */
+        this.autoSize = undefined;
+        this.shiftPadding = 0;
+        this.autoSizePadding = 0;
+        /** @type {string | HTMLElement} */
+        this.anchor = undefined;
     }
-    if (this.active) {
-      this.reposition();
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.stop();
     }
-  }
-
-  /**
-   * @returns {HTMLElement | null}
-   */
-  get popupEl() {
-    return this.renderRoot?.querySelector(".popup") ?? null;
-  }
-  start() {
-    if (!this.anchorEl || !this.active) return;
-    this.cleanup = autoUpdate(this.anchorEl, this.popupEl, () => {
-      this.reposition();
-    });
-  }
-  stop() {
-    this.cleanup?.();
-    this.style.removeProperty("--auto-size-available-width");
-    this.style.removeProperty("--auto-size-available-height");
-  }
-  reposition() {
-    if (!this.anchorEl || !this.popupEl || !this.active) return;
-    const middleware = [];
-    if (this.matchSize) {
-      middleware.push(size({
-        apply: ({
-          rects
-        }) => {
-          const matchWidth = this.matchSize === "width" || this.matchSize === "both";
-          const matchHeight = this.matchSize === "height" || this.matchSize === "both";
-          this.popupEl.style.width = matchWidth ? `${rects.reference.width}px` : "";
-          this.popupEl.style.height = matchHeight ? `${rects.reference.height}px` : "";
+    updated(changedProperties) {
+        if (changedProperties.has("active")) {
+            if (this.active) {
+                this.start();
+            }
+            else {
+                this.stop();
+            }
+        }
+        if (changedProperties.has("anchor")) {
+            this.handleAnchorChange();
+        }
+        if (this.active) {
+            this.reposition();
         }
-      }));
-    } else {
-      // Cleanup styles if we're not matching width/height
-      this.popupEl.style.width = "";
-      this.popupEl.style.height = "";
     }
-    if (this.flip) {
-      middleware.push(flip());
+    /**
+     * @returns {HTMLElement | null}
+     */
+    get popupEl() {
+        return this.renderRoot?.querySelector(".popup") ?? null;
     }
-    if (this.shift) {
-      middleware.push(shift({
-        padding: this.shiftPadding
-      }));
+    start() {
+        if (!this.anchorEl || !this.active)
+            return;
+        this.cleanup = autoUpdate(this.anchorEl, this.popupEl, () => {
+            this.reposition();
+        });
     }
-    if (this.autoSize) {
-      middleware.push(size({
-        padding: this.autoSizePadding,
-        apply: ({
-          availableWidth,
-          availableHeight
-        }) => {
-          const setMaxWidth = this.autoSize === "width" || this.autoSize === "both";
-          const setMaxHeight = this.autoSize === "height" || this.autoSize === "both";
-          if (setMaxHeight) {
-            this.style.setProperty("--auto-size-available-height", `${availableHeight}px`);
-          } else {
-            this.style.removeProperty("--auto-size-available-height");
-          }
-          if (setMaxWidth) {
-            this.style.setProperty("--auto-size-available-width", `${availableWidth}px`);
-          } else {
+    stop() {
+        this.cleanup?.();
+        this.style.removeProperty("--auto-size-available-width");
+        this.style.removeProperty("--auto-size-available-height");
+    }
+    reposition() {
+        if (!this.anchorEl || !this.popupEl || !this.active)
+            return;
+        const middleware = [];
+        if (this.matchSize) {
+            middleware.push(size({
+                apply: ({ rects }) => {
+                    const matchWidth = this.matchSize === "width" || this.matchSize === "both";
+                    const matchHeight = this.matchSize === "height" || this.matchSize === "both";
+                    this.popupEl.style.width = matchWidth
+                        ? `${rects.reference.width}px`
+                        : "";
+                    this.popupEl.style.height = matchHeight
+                        ? `${rects.reference.height}px`
+                        : "";
+                },
+            }));
+        }
+        else {
+            // Cleanup styles if we're not matching width/height
+            this.popupEl.style.width = "";
+            this.popupEl.style.height = "";
+        }
+        if (this.flip) {
+            middleware.push(flip());
+        }
+        if (this.shift) {
+            middleware.push(shift({ padding: this.shiftPadding }));
+        }
+        if (this.autoSize) {
+            middleware.push(size({
+                padding: this.autoSizePadding,
+                apply: ({ availableWidth, availableHeight }) => {
+                    const setMaxWidth = this.autoSize === "width" || this.autoSize === "both";
+                    const setMaxHeight = this.autoSize === "height" || this.autoSize === "both";
+                    if (setMaxHeight) {
+                        this.style.setProperty("--auto-size-available-height", `${availableHeight}px`);
+                    }
+                    else {
+                        this.style.removeProperty("--auto-size-available-height");
+                    }
+                    if (setMaxWidth) {
+                        this.style.setProperty("--auto-size-available-width", `${availableWidth}px`);
+                    }
+                    else {
+                        this.style.removeProperty("--auto-size-available-width");
+                    }
+                },
+            }));
+        }
+        else {
+            // Cleanup styles if we're not auto-sizing
             this.style.removeProperty("--auto-size-available-width");
-          }
+            this.style.removeProperty("--auto-size-available-height");
         }
-      }));
-    } else {
-      // Cleanup styles if we're not auto-sizing
-      this.style.removeProperty("--auto-size-available-width");
-      this.style.removeProperty("--auto-size-available-height");
-    }
-    computePosition(this.anchorEl, this.popupEl, {
-      placement: this.placement,
-      middleware
-    }).then(({
-      x,
-      y
-    }) => {
-      Object.assign(this.popupEl.style, {
-        left: `${x}px`,
-        top: `${y}px`
-      });
-    });
-  }
-  handleAnchorChange() {
-    if (this.anchor && typeof this.anchor === "string") {
-      const root = this.getRootNode();
-      this.anchorEl = root.getElementById(this.anchor);
-    } else if (this.anchor instanceof HTMLElement) {
-      this.anchorEl = this.anchor;
-    } else {
-      this.anchorEl = this.querySelector("[slot=anchor]");
-    }
-    if (this.anchorEl instanceof HTMLSlotElement) {
-      [this.anchorEl] = this.anchorEl.assignedElements({
-        flatten: true
-      });
+        computePosition(this.anchorEl, this.popupEl, {
+            placement: this.placement,
+            middleware,
+        }).then(({ x, y }) => {
+            Object.assign(this.popupEl.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+        });
     }
-    if (this.anchorEl) {
-      this.start();
+    handleAnchorChange() {
+        if (this.anchor && typeof this.anchor === "string") {
+            const root = this.getRootNode();
+            this.anchorEl = root.getElementById(this.anchor);
+        }
+        else if (this.anchor instanceof HTMLElement) {
+            this.anchorEl = this.anchor;
+        }
+        else {
+            this.anchorEl = this.querySelector("[slot=anchor]");
+        }
+        if (this.anchorEl instanceof HTMLSlotElement) {
+            [this.anchorEl] = this.anchorEl.assignedElements({ flatten: true });
+        }
+        if (this.anchorEl) {
+            this.start();
+        }
     }
-  }
-  render() {
-    return html`
+    render() {
+        return html `
       <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
       <div class="popup">
         <slot> </slot>
       </div>
     `;
-  }
+    }
 }
-_defineProperty(LeuPopup, "styles", [LeuElement.styles, css_248z]);
-_defineProperty(LeuPopup, "shadowRootOptions", {
-  ...LeuElement.shadowRootOptions,
-  delegatesFocus: true
-});
-_defineProperty(LeuPopup, "properties", {
-  anchor: {},
-  active: {
-    type: Boolean,
-    reflect: true
-  },
-  placement: {
-    type: String,
-    reflect: true
-  },
-  flip: {
-    type: Boolean,
-    reflect: true
-  },
-  shift: {
-    type: Boolean,
-    reflect: true
-  },
-  shiftPadding: {
-    type: Number,
-    reflect: true
-  },
-  matchSize: {
-    type: String,
-    reflect: true
-  },
-  autoSize: {
-    type: String,
-    reflect: true
-  },
-  autoSizePadding: {
-    type: Number,
-    reflect: true
-  }
-});
+LeuPopup.styles = [LeuElement.styles, css_248z];
+LeuPopup.shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+LeuPopup.properties = {
+    anchor: {},
+    active: { type: Boolean, reflect: true },
+    placement: { type: String, reflect: true },
+    flip: { type: Boolean, reflect: true },
+    shift: { type: Boolean, reflect: true },
+    shiftPadding: { type: Number, reflect: true },
+    matchSize: { type: String, reflect: true },
+    autoSize: { type: String, reflect: true },
+    autoSizePadding: { type: Number, reflect: true },
+};
 
 export { LeuPopup };

package/dist/Radio.d.ts

@@ -1,14 +1,28 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+
 /**
  * @tagname leu-radio
  */
-export class LeuRadio extends LeuElement {
+declare class LeuRadio extends LeuElement {
+    static styles: lit.CSSResultGroup[];
+    /** @internal */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
     checked: boolean;
     disabled: boolean;
-    name: string;
     value: string;
-    handleChange(event: any): void;
-    handleInput(event: any): void;
-    render(): import("lit-html").TemplateResult<1>;
+    name: string;
+    private handleChange;
+    private handleInput;
+    render(): lit_html.TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-Dd6zm9XF.js';
-//# sourceMappingURL=Radio.d.ts.map
+
+export { LeuRadio };

package/dist/Radio.js

@@ -1,5 +1,7 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 
 var css_248z = css`:host {
   --radio-color: var(--leu-color-black-40);
@@ -96,23 +98,23 @@ var css_248z = css`:host {
  * @tagname leu-radio
  */
 class LeuRadio extends LeuElement {
-  constructor() {
-    super();
-    this.checked = false;
-    this.disabled = false;
-    this.name = "";
-    this.value = "";
-  }
-  handleChange(event) {
-    this.checked = event.target.checked;
-    const customEvent = new CustomEvent(event.type, event);
-    this.dispatchEvent(customEvent);
-  }
-  handleInput(event) {
-    this.checked = event.target.checked;
-  }
-  render() {
-    return html`
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+        this.disabled = false;
+        this.value = "";
+        this.name = "";
+    }
+    handleChange(event) {
+        this.checked = event.target.checked;
+        const customEvent = new CustomEvent(event.type, event);
+        this.dispatchEvent(customEvent);
+    }
+    handleInput(event) {
+        this.checked = event.target.checked;
+    }
+    render() {
+        return html `
       <input
         id=${`radio-${this.name}`}
         class="radio"
@@ -126,31 +128,25 @@ class LeuRadio extends LeuElement {
       />
       <label for=${`radio-${this.name}`} class="label"><slot></slot></label>
     `;
-  }
+    }
 }
-_defineProperty(LeuRadio, "styles", [LeuElement.styles, css_248z]);
+LeuRadio.styles = [LeuElement.styles, css_248z];
 /** @internal */
-_defineProperty(LeuRadio, "shadowRootOptions", {
-  ...LeuElement.shadowRootOptions,
-  delegatesFocus: true
-});
-_defineProperty(LeuRadio, "properties", {
-  checked: {
-    type: Boolean,
-    reflect: true
-  },
-  disabled: {
-    type: Boolean,
-    reflect: true
-  },
-  value: {
-    type: String,
-    reflect: true
-  },
-  name: {
-    type: String,
-    reflect: true
-  }
-});
+LeuRadio.shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuRadio.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuRadio.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuRadio.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuRadio.prototype, "name", void 0);
 
 export { LeuRadio };