@statistikzh/leu 0.14.2 → 0.14.4

package/dist/Popup.js

@@ -1,6 +1,6 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-BI1CxItv.js';
 import { css, html } from 'lit';
 import { autoUpdate, size, flip, shift, computePosition } from '@floating-ui/dom';
+import { L as LeuElement } from './LeuElement-x8UlIDDl.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,43 @@
+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 {
-    checked: boolean;
-    disabled: boolean;
-    name: string;
-    value: string;
+declare class LeuRadio extends LeuElement {
+    static styles: lit.CSSResultGroup[];
+    /** @internal */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    static properties: {
+        checked: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    constructor();
     handleChange(event: any): void;
     handleInput(event: any): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): lit_html.TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-BI1CxItv.js';
-//# sourceMappingURL=Radio.d.ts.map
+
+export { LeuRadio };

package/dist/Radio.js

@@ -1,5 +1,5 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-BI1CxItv.js';
 import { css, html } from 'lit';
+import { L as LeuElement } from './LeuElement-x8UlIDDl.js';
 
 var css_248z = css`:host {
   --radio-color: var(--leu-color-black-40);
@@ -96,23 +96,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();
+        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 `
       <input
         id=${`radio-${this.name}`}
         class="radio"
@@ -126,31 +126,19 @@ 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,
+};
+LeuRadio.properties = {
+    checked: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    value: { type: String, reflect: true },
+    name: { type: String, reflect: true },
+};
 
 export { LeuRadio };

package/dist/RadioGroup.d.ts

@@ -1,20 +1,38 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+
 /**
  * @tagname leu-radio-group
  */
-export class LeuRadioGroup extends LeuElement {
-    _currentIndex: number;
-    orientation: string;
-    items: any[];
+declare class LeuRadioGroup extends LeuElement {
+    static styles: lit.CSSResultGroup[];
+    static properties: {
+        orientation: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    constructor();
     get value(): any;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     addEventListeners(): void;
     removeEventListeners(): void;
     handleSlotChange(): void;
+    handleFocusIn: (e: any) => void;
+    handleKeyDown: (e: any) => void;
+    handleInput: (e: any) => void;
     selectItem(selectingItem: any): void;
     selectNextItem(startingIndex: any, direction: any): void;
     setTabIndex(): void;
     handleItems(): void;
     initializeIndex(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): lit_html.TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-BI1CxItv.js';
-//# sourceMappingURL=RadioGroup.d.ts.map
+
+export { LeuRadioGroup };