@statistikzh/leu 0.19.2 → 0.21.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.21.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -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.21.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/icon/paths.ts

@@ -143,6 +143,8 @@ export const paths = {
     "M12.375 8.2485V3.75L22.875 11.25L12.375 18.75V14.25C8.20012 14.2515 4.39838 14.4128 1.125 20.25C1.125 16.5424 1.66875 8.35162 12.375 8.2485Z",
   resizeText:
     "M17 8V5H20V8H17ZM11 14H14V11H11V14ZM8 20H5V17H8V20ZM14 20H11V17H14V20ZM17 14H20V11H17V14ZM20 20H17V17H20V20Z",
+  ruler:
+    "M1.5 9C1.5 8.72386 1.72386 8.5 2 8.5H22C22.2761 8.5 22.5 8.72386 22.5 9V15C22.5 15.2761 22.2761 15.5 22 15.5H2C1.72386 15.5 1.5 15.2761 1.5 15V9ZM2.5 9.5V14.5H21.5V9.5H2.5Z M4.5 11V9H5.5V11H4.5Z M8 11V9H9V11H8Z M11.5 11V9H12.5V11H11.5Z M15 11V9H16V11H15Z M18.5 11V9H19.5V11H18.5Z",
   search:
     "M0.75 9C0.75 4.4445 4.4445 0.75 9 0.75C13.5555 0.75 17.25 4.4445 17.25 9C17.25 13.5555 13.5555 17.25 9 17.25C4.4445 17.25 0.75 13.5555 0.75 9ZM17.25 15.25L15 17.5L21 23.2493L23.25 20.9993L17.25 15.25ZM9 15C5.692 15 3 12.308 3 9C3 5.692 5.692 3 9 3C12.308 3 15 5.692 15 9C15 12.308 12.308 15 9 15Z",
   securities:

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,13 +142,17 @@ export class LeuMenu extends LeuElement {
     this.setCurrentItem(0)
   }
 
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     if (changedProperties.has("selects")) {
       this._setMenuItemRoles()
     }
   }
 
   render() {
-    return html`<slot></slot>`
+    return html`
+      <div class="container">
+        <slot></slot>
+      </div>
+    `
   }
 }

package/src/components/menu/menu.css

@@ -13,3 +13,7 @@
   padding: 0 !important;
   background: none !important;
 }
+
+.container {
+  background-color: var(--leu-color-black-0);
+}

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