@statistikzh/leu 0.19.2 → 0.20.0

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.2",
+  "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.",
@@ -1211,10 +1211,7 @@
           "attributes": [
             {
               "name": "anchor",
-              "value": {
-                "type": "string | HTMLElement",
-                "default": "undefined"
-              }
+              "value": { "type": "Element | string | VirtualElement" }
             },
             {
               "name": "active",
@@ -1222,7 +1219,7 @@
             },
             {
               "name": "placement",
-              "value": { "type": "Placement", "default": "undefined" }
+              "value": { "type": "Placement | undefined" }
             },
             {
               "name": "flip",
@@ -1239,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"
               }
             },
             {
@@ -1258,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.2",
+  "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"
@@ -82,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") ||

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()