@statistikzh/leu 0.19.1 → 0.20.0

package/dist/vue/index.d.ts

@@ -1,8 +1,8 @@
 import type { DefineComponent } from "vue";
 
 import type { LeuAccordion } from "../Accordion.js";
-import type { LeuButton } from "../Button.js";
 import type { LeuButtonGroup } from "../ButtonGroup.js";
+import type { LeuButton } from "../Button.js";
 import type { LeuChartWrapper } from "../ChartWrapper.js";
 import type { LeuCheckbox } from "../Checkbox.js";
 import type { LeuCheckboxGroup } from "../CheckboxGroup.js";
@@ -12,7 +12,7 @@ import type { LeuChipRemovable } from "../ChipRemovable.js";
 import type { LeuChipSelectable, CustomEvent } from "../ChipSelectable.js";
 import type { LeuDialog } from "../Dialog.js";
 import type { LeuDropdown } from "../Dropdown.js";
-import type { LeuFileInput } from "../FileInput.js";
+import type { LeuFileInput, CustomEvent } from "../FileInput.js";
 import type { LeuIcon } from "../Icon.js";
 import type { LeuInput, CustomEvent } from "../Input.js";
 import type { LeuMenu } from "../Menu.js";
@@ -43,6 +43,13 @@ type LeuAccordionProps = {
   label?: LeuAccordion["label"];
 };
 
+type LeuButtonGroupProps = {
+  /** The value of the currently selected (active) button */
+  value?: LeuButtonGroup["value"];
+  /** When the value of the group changes by clicking a button */
+  oninput?: (e: CustomEvent<never>) => void;
+};
+
 type LeuButtonProps = {
   /** `aria-label` of the underlying button elements.
 Use it to provide a label when only an icon is visible. */
@@ -74,13 +81,6 @@ If it is set, the icon will either show an expanded or collapsed state. */
   fluid?: LeuButton["fluid"];
 };
 
-type LeuButtonGroupProps = {
-  /** The value of the currently selected (active) button */
-  value?: LeuButtonGroup["value"];
-  /** When the value of the group changes by clicking a button */
-  oninput?: (e: CustomEvent<never>) => void;
-};
-
 type LeuChartWrapperProps = {
   /** Whether the chart is currently loading or not.
 When set to `true`, a spinner will be shown in the chart container. */
@@ -208,6 +208,10 @@ type LeuFileInputProps = {
   form?: LeuFileInput["form"];
   /**  */
   name?: LeuFileInput["name"];
+  /**  */
+  oninput?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type LeuIconProps = {
@@ -347,12 +351,6 @@ type LeuPopupProps = {
   autoSize?: LeuPopup["autoSize"];
   /**  */
   autoSizePadding?: LeuPopup["autoSizePadding"];
-  /**  */
-  popupEl?: LeuPopup["popupEl"];
-  /**  */
-  anchorEl?: LeuPopup["anchorEl"];
-  /**  */
-  cleanup?: LeuPopup["cleanup"];
 };
 
 type LeuProgressBarProps = {
@@ -502,18 +500,6 @@ export type CustomElements = {
    */
   "leu-accordion": DefineComponent<LeuAccordionProps>;
 
-  /**
-   *
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - **before** - The icon to display before the label
-   * - **after** - The icon to display after the label
-   * - _default_ - The label of the button or the icon if no label is set
-   */
-  "leu-button": DefineComponent<LeuButtonProps>;
-
   /**
    * A radio input-like button group component.
    * It allows only one button to be active at a time.
@@ -528,6 +514,18 @@ export type CustomElements = {
    */
   "leu-button-group": DefineComponent<LeuButtonGroupProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **before** - The icon to display before the label
+   * - **after** - The icon to display after the label
+   * - _default_ - The label of the button or the icon if no label is set
+   */
+  "leu-button": DefineComponent<LeuButtonProps>;
+
   /**
    * A wrapper element for charts.
    * ---
@@ -632,6 +630,10 @@ export type CustomElements = {
    *
    * ---
    *
+   *
+   * ### **Events:**
+   *  - **input**
+   * - **change**
    */
   "leu-file-input": DefineComponent<LeuFileInputProps>;
 

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@statistikzh/leu",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -65,6 +65,33 @@
             "events": []
           }
         },
+        {
+          "name": "leu-button-group",
+          "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [{ "name": "", "description": "Slot for the buttons" }],
+          "events": [
+            {
+              "name": "input",
+              "description": "When the value of the group changes by clicking a button"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The value of the currently selected (active) button"
+              }
+            ],
+            "events": [
+              {
+                "name": "input",
+                "description": "When the value of the group changes by clicking a button"
+              }
+            ]
+          }
+        },
         {
           "name": "leu-button",
           "description": "\n---\n\n\n### **Slots:**\n - **before** - The icon to display before the label\n- **after** - The icon to display after the label\n- _default_ - The label of the button or the icon if no label is set",
@@ -211,33 +238,6 @@
             "events": []
           }
         },
-        {
-          "name": "leu-button-group",
-          "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "Slot for the buttons" }],
-          "events": [
-            {
-              "name": "input",
-              "description": "When the value of the group changes by clicking a button"
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "The value of the currently selected (active) button"
-              }
-            ],
-            "events": [
-              {
-                "name": "input",
-                "description": "When the value of the group changes by clicking a button"
-              }
-            ]
-          }
-        },
         {
           "name": "leu-chart-wrapper",
           "description": "A wrapper element for charts.\n---\n\n\n### **Slots:**\n - **title** - The title of the chart. Use a heading tag (h2-4) depending on your context.\n- **description** - A description of the chart. Content is wrapped in a `<p>` tag by the component.\n- **chart** - The actual chart\n- **caption** - A caption for the chart, e.g. a source or explanation of the data.\n- **download** - A download button or dropdown to export the chart in different formats.",
@@ -597,7 +597,7 @@
         },
         {
           "name": "leu-file-input",
-          "description": "\n---\n",
+          "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
           "doc-url": "",
           "attributes": [
             {
@@ -633,7 +633,10 @@
               }
             }
           ],
-          "events": [],
+          "events": [
+            { "name": "input", "type": "CustomEvent" },
+            { "name": "change", "type": "CustomEvent" }
+          ],
           "js": {
             "properties": [
               { "name": "label", "type": "string" },
@@ -667,7 +670,10 @@
               { "name": "form" },
               { "name": "name" }
             ],
-            "events": []
+            "events": [
+              { "name": "input", "type": "CustomEvent" },
+              { "name": "change", "type": "CustomEvent" }
+            ]
           }
         },
         {
@@ -1205,10 +1211,7 @@
           "attributes": [
             {
               "name": "anchor",
-              "value": {
-                "type": "string | HTMLElement",
-                "default": "undefined"
-              }
+              "value": { "type": "Element | string | VirtualElement" }
             },
             {
               "name": "active",
@@ -1216,7 +1219,7 @@
             },
             {
               "name": "placement",
-              "value": { "type": "Placement", "default": "undefined" }
+              "value": { "type": "Placement | undefined" }
             },
             {
               "name": "flip",
@@ -1233,15 +1236,13 @@
             {
               "name": "matchSize",
               "value": {
-                "type": "\"width\" | \"height\" | \"both\"",
-                "default": "undefined"
+                "type": "\"width\" | \"height\" | \"both\" | undefined"
               }
             },
             {
               "name": "autoSize",
               "value": {
-                "type": "\"width\" | \"height\" | \"both\"",
-                "default": "undefined"
+                "type": "| \"width\"\n    | \"height\"\n    | \"both\" | undefined"
               }
             },
             {
@@ -1252,24 +1253,21 @@
           "events": [],
           "js": {
             "properties": [
-              { "name": "popupEl" },
-              { "name": "anchorEl", "type": "null" },
-              { "name": "cleanup" },
+              { "name": "anchor", "type": "Element | string | VirtualElement" },
+              { "name": "active", "type": "boolean" },
+              { "name": "placement", "type": "Placement | undefined" },
               { "name": "flip", "type": "boolean" },
               { "name": "shift", "type": "boolean" },
-              { "name": "active", "type": "boolean" },
-              { "name": "placement", "type": "Placement" },
+              { "name": "shiftPadding", "type": "number" },
               {
                 "name": "matchSize",
-                "type": "\"width\" | \"height\" | \"both\""
+                "type": "\"width\" | \"height\" | \"both\" | undefined"
               },
               {
                 "name": "autoSize",
-                "type": "\"width\" | \"height\" | \"both\""
+                "type": "| \"width\"\n    | \"height\"\n    | \"both\" | undefined"
               },
-              { "name": "shiftPadding", "type": "number" },
-              { "name": "autoSizePadding", "type": "number" },
-              { "name": "anchor", "type": "string | HTMLElement" }
+              { "name": "autoSizePadding", "type": "number" }
             ],
             "events": []
           }

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/file-input/FileInput.ts

@@ -1,4 +1,4 @@
-import { html, nothing } from "lit"
+import { html, nothing, PropertyValues } from "lit"
 import { property, query, state } from "lit/decorators.js"
 import { ifDefined } from "lit/directives/if-defined.js"
 import { classMap } from "lit/directives/class-map.js"
@@ -10,6 +10,11 @@ import { LeuButton } from "../../index.js"
 import { LeuIcon } from "../icon/leu-icon.js"
 import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
 
+/**
+ * @todo Pluralize text when multiple files are allowed
+ * @todo Hide dropzone when not multiple and already filled
+ */
+
 /**
  * @tagname leu-file-input
  */
@@ -77,7 +82,7 @@ export class LeuFileInput extends LeuElement {
     return this.getAttribute("name")
   }
 
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     if (
       changedProperties.has("files") ||
       changedProperties.has("disabled") ||
@@ -100,6 +105,11 @@ export class LeuFileInput extends LeuElement {
     }
   }
 
+  private handleChange(event: Event & { target: HTMLInputElement }) {
+    const customEvent = new CustomEvent(event.type, event)
+    this.dispatchEvent(customEvent)
+  }
+
   public formResetCallback() {
     this.files = []
     this.input.value = ""
@@ -119,6 +129,18 @@ export class LeuFileInput extends LeuElement {
 
   protected removeFile(fileToRemove: File) {
     this.files = this.files.filter((file) => file !== fileToRemove)
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        composed: true,
+        bubbles: true,
+      }),
+    )
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        composed: true,
+        bubbles: true,
+      }),
+    )
   }
 
   protected static formatFileSize(size: number) {
@@ -220,6 +242,7 @@ export class LeuFileInput extends LeuElement {
             accept=${ifDefined(this.accept)}
             ?disabled=${this.disabled}
             @input=${this.handleInput}
+            @change=${this.handleChange}
           />
         </leu-visually-hidden>
         <div

package/src/components/menu/Menu.ts

@@ -1,4 +1,4 @@
-import { html } from "lit"
+import { html, PropertyValues } from "lit"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
@@ -142,7 +142,7 @@ export class LeuMenu extends LeuElement {
     this.setCurrentItem(0)
   }
 
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     if (changedProperties.has("selects")) {
       this._setMenuItemRoles()
     }

package/src/components/popup/Popup.ts

@@ -1,8 +1,10 @@
-import { html } from "lit"
+import { html, PropertyValues } from "lit"
+import { property } from "lit/decorators.js"
 import {
   autoUpdate,
   computePosition,
   flip,
+  Placement,
   shift,
   size,
 } from "@floating-ui/dom"
@@ -11,9 +13,19 @@ import { LeuElement } from "../../lib/LeuElement.js"
 
 import styles from "./popup.css"
 
-/**
- * @typedef {"top"|"top-start"|"top-end"|"bottom"|"bottom-start"|"bottom-end"|"left"|"left-start"|"left-end"|"right"|"right-start"|"right-end"} Placement
- */
+export interface VirtualElement {
+  getBoundingClientRect: () => DOMRect
+  contextElement?: Element
+}
+
+function isVirtualElement(el: unknown): el is VirtualElement {
+  return (
+    el !== null &&
+    typeof el === "object" &&
+    "getBoundingClientRect" in el &&
+    ("contextElement" in el ? el instanceof Element : true)
+  )
+}
 
 /**
  * @tagname leu-popup
@@ -26,50 +38,43 @@ export class LeuPopup extends LeuElement {
     delegatesFocus: true,
   }
 
-  static 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 },
-  }
+  @property() anchor: Element | string | VirtualElement
 
-  constructor() {
-    super()
+  @property({ type: Boolean, reflect: true })
+  active: boolean = false
 
-    this.anchorEl = null
-    this.cleanup = undefined
-    this.flip = false
-    this.shift = false
+  @property({ type: String, reflect: true })
+  placement?: Placement
 
-    this.active = false
+  @property({ type: Boolean, reflect: true })
+  flip: boolean = false
 
-    /** @type {Placement} */
-    this.placement = undefined
+  @property({ type: Boolean, reflect: true })
+  shift: boolean = false
 
-    /** @type {"width" | "height" | "both"} */
-    this.matchSize = undefined
+  @property({ type: Number, reflect: true })
+  shiftPadding: number = 0
 
-    /** @type {"width" | "height" | "both"} */
-    this.autoSize = undefined
+  @property({ type: String, reflect: true })
+  matchSize?: "width" | "height" | "both"
 
-    this.shiftPadding = 0
-    this.autoSizePadding = 0
+  @property({ type: String, reflect: true }) autoSize?:
+    | "width"
+    | "height"
+    | "both"
 
-    /** @type {string | HTMLElement} */
-    this.anchor = undefined
-  }
+  @property({ type: Number, reflect: true }) autoSizePadding: number = 0
+
+  private anchorEl: Element | null
+
+  private cleanup: ReturnType<typeof autoUpdate> | undefined
 
   disconnectedCallback() {
     super.disconnectedCallback()
     this.stop()
   }
 
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     if (changedProperties.has("active")) {
       if (this.active) {
         this.start()
@@ -87,14 +92,11 @@ export class LeuPopup extends LeuElement {
     }
   }
 
-  /**
-   * @returns {HTMLElement | null}
-   */
-  get popupEl() {
-    return this.renderRoot?.querySelector(".popup") ?? null
+  protected get popupEl() {
+    return this.renderRoot?.querySelector<HTMLDivElement>(".popup") ?? null
   }
 
-  start() {
+  protected start() {
     if (!this.anchorEl || !this.active) return
 
     this.cleanup = autoUpdate(this.anchorEl, this.popupEl, () => {
@@ -102,14 +104,14 @@ export class LeuPopup extends LeuElement {
     })
   }
 
-  stop() {
+  protected stop() {
     this.cleanup?.()
 
     this.style.removeProperty("--auto-size-available-width")
     this.style.removeProperty("--auto-size-available-height")
   }
 
-  reposition() {
+  public reposition() {
     if (!this.anchorEl || !this.popupEl || !this.active) return
 
     const middleware = []
@@ -194,9 +196,12 @@ export class LeuPopup extends LeuElement {
 
   handleAnchorChange() {
     if (this.anchor && typeof this.anchor === "string") {
-      const root = this.getRootNode()
+      const root = this.getRootNode() as Document | ShadowRoot
       this.anchorEl = root.getElementById(this.anchor)
-    } else if (this.anchor instanceof HTMLElement) {
+    } else if (
+      this.anchor instanceof HTMLElement ||
+      isVirtualElement(this.anchor)
+    ) {
       this.anchorEl = this.anchor
     } else {
       this.anchorEl = this.querySelector("[slot=anchor]")

package/src/components/popup/stories/popup.stories.ts

@@ -56,3 +56,52 @@ Regular.args = {
   flip: true,
   shift: true,
 }
+
+export const VirtualElement = {
+  render: (args = {}) => html`
+    <leu-popup
+      ?active=${args.active}
+      ?flip=${args.flip}
+      ?shift=${args.shift}
+      placement=${ifDefined(args.placement)}
+    >
+      <div style=${styleMap(popupStyles)}>Popup content</div>
+    </leu-popup>
+    <script>
+      const body = document.body
+      const popup = document.querySelector("leu-popup")
+      let clientX = 0
+      let clientY = 0
+
+      body.style.height = "100vh"
+
+      popup.anchor = {
+        getBoundingClientRect() {
+          return {
+            width: 0,
+            height: 0,
+            x: clientX,
+            y: clientY,
+            top: clientY,
+            left: clientX,
+            right: clientX,
+            bottom: clientY,
+          }
+        },
+      }
+
+      body.addEventListener("mousemove", (event) => {
+        clientX = event.clientX
+        clientY = event.clientY
+
+        popup.reposition()
+      })
+    </script>
+  `,
+  args: {
+    active: true,
+    placement: "bottom-start",
+    flip: true,
+    shift: true,
+  },
+}

package/src/components/popup/test/popup.test.ts

@@ -2,9 +2,10 @@ import { html } from "lit"
 import { fixture, expect } from "@open-wc/testing"
 
 import "../leu-popup.js"
+import { LeuPopup } from "../Popup.js"
 
 async function defaultFixture() {
-  return fixture(html`
+  return fixture<LeuPopup>(html`
     <leu-popup
       ><div slot="anchor"></div>
       <p>Popup content</p></leu-popup
@@ -14,9 +15,9 @@ async function defaultFixture() {
 
 describe("LeuPopup", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-popup")
+    const el = customElements.get("leu-popup")
 
-    await expect(el).not.to.be.undefined
+    expect(el).not.to.be.undefined
   })
 
   it("passes the a11y audit", async () => {
@@ -24,4 +25,39 @@ describe("LeuPopup", () => {
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("moves content to the position of a virtual element", async () => {
+    const popup = await fixture<LeuPopup>(
+      html`<leu-popup ?active=${true} placement="bottom-start"
+          ><div slot="anchor"></div>
+          <div
+            style="background: white; border: 1px solid black; padding: 0.5rem"
+          >
+            Popup content
+          </div></leu-popup
+        >
+        <style>
+          * {
+            margin: 0;
+            padding: 0;
+          }
+        </style> `,
+    )
+
+    popup.anchor = {
+      getBoundingClientRect: () => new DOMRect(32, 125, 0, 0),
+    }
+
+    popup.reposition()
+
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => resolve())
+    })
+
+    const popupContent =
+      popup.shadowRoot!.querySelector<HTMLDivElement>(".popup")
+
+    expect(popupContent.style.left).to.equal("32px")
+    expect(popupContent.style.top).to.equal("125px")
+  })
 })

package/src/components/select/Select.ts

@@ -1,4 +1,4 @@
-import { html, nothing } from "lit"
+import { html, nothing, PropertyValues } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { createRef, ref } from "lit/directives/ref.js"
 
@@ -128,7 +128,7 @@ export class LeuSelect extends LeuElement {
     document.removeEventListener("click", this._handleDocumentClick)
   }
 
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     if (changedProperties.has("open") && this.open) {
       if (this.filterable) {
         this._optionFilterRef.value.focus()